OmniAICreator/Qiita-1.07M huggingface dataset:
SSR フレームワーク Next.js を使って React を快適ルーティング part2


# SSR フレームワーク `Next.js` を使って `React` を快適ルーティング part2

[前回](https://qiita.com/takiguchi-yu/items/f1423be3daa9343cc9be)の続きです。
まだ、ページをちょこっと編集しただけなので、今回はアプリケーションにページを追加してみます。

## ページ間を移動する

### 新しいページを作成する

- 必要なファイルを作成する

```bash
mkdir pages/posts/
touch pages/posts/first-post.js
```

- `pages/posts/first-post.js` を編集する

```js:pages/posts/first-post.js
export default function FirstPost() {
  return <h1>First Post</h1>
}
```

- ブラウザで http://localhost:3000/posts/first-post にアクセスする
  ![first-post.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/e6288e15-685a-6895-e183-014b4c628771.png)

### リンクコンポーネントを使う

- `pages/index.js` を開く
- 以下を先頭行に追記する

```js:pages/index.js
import Link from 'next/link'
```

- 次に h1 タグの内容を変更する

```html:pages/index.js
Learn <a href="https://nextjs.org">Next.js!</a>
↓
Read <Link href="/posts/first-post"><a>this page!</a></Link>
```

- 次に `pages/posts/first-post.js` を以下の通り書き換える

```js:pages/posts/first-post.js
import Link from 'next/link'

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}
```

- 動作確認しよう
  ![links.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/dfb008bb-d5e7-7516-4bd7-e462d0fa61d8.gif)

### クライアント側のナビゲーション

クライアント側のナビゲーションとは、ページ遷移がJavaScriptを使用して行われることを意味します。これは、ブラウザが行うデフォルトのナビゲーションよりも高速です。

開発者ツールを使って html 全体の背景を設定してみましょう。
黄色の背景がページ遷移しても持続していることが分かります。

これは、**ブラウザがページ全体を読み込まず**、クライアント側のナビゲーションが機能していることを示しています。
![client-side.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/3ca2a6fd-d9f7-ff5c-5316-84c2be880dd7.gif)

## コード分割とプリフェッチの話

Next.js は自動的にコード分割するため、各ページはそのページに必要なものだけをロードします。
つまり、ホームページがレンダリングされるとき、**他のページのコードは読み込まれない**ことを意味します。
これは大変素晴らしいですね！
これにより、数百ページを追加した場合でも、ホームページがすばやく読み込まれます。

リクエストしたページのコードをロードするだけでも、ページが分離されます。
特定のページがエラーをスローしても、アプリケーションの残りの部分は引き続き機能します。

さらに、Next.jsのプロダクションビルドでは、Linkコンポーネントがブラウザのビューポートに表示されるたび、Next.js がバックグラウンドでリンクされたページのコードを自動的にプリフェッチします。リンクをクリックするまでに、**リンク先ページのコードはすでにバックグラウンドで読み込まれており、ページ遷移はほぼ瞬時に行われます！**

今回使った `Link` コンポーネントの詳細はこちらを参照ください。

https://nextjs.org/docs/api-reference/next/link

## 続く...
Android StudioのTool BarにGit Pushボタンを追加

Android Studio(4.0.1)のToolBarで、
Gitボタン欄にPushボタンが表示されていなかったので追加した方法をメモ。
![スクリーンショット 2020-08-09 20.50.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647230/18429218-4f83-c4ca-a0d5-8bef51ddc378.png)

### Preferencesを開く
`Android Studio`>`Preferences`
![スクリーンショット 2020-08-09 21.02.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647230/3b77d909-9504-94a2-a239-9f5be59a7d5a.png)

### VcsNavBarToolbarActionsで、Pushボタンを追加したい箇所を選択する
`Appearance & Behavior`>`Menus and Toolbars`>
`Navigation Bar Toolbar`>`NavBarVcsGroup`>
`VcsNavBarToolbarActions`
![スクリーンショット 2020-08-09 20.49.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647230/09cb2973-721a-4b9b-4240-7ba67dbfce3f.png)

### Add ActionでPushを追加
`Main menu`>`VCS`>`Git`
![スクリーンショット 2020-08-09 20.50.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647230/c47443bb-8991-0d35-133d-e89af86e0741.png)

### VcsNavBarToolbarActionsに、Pushが追加されました
![スクリーンショット 2020-08-09 20.50.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647230/ef5ea22e-ccda-4f4d-e9ef-060ddeec57d6.png)

### 無事、Pushボタンが追加されました。
![スクリーンショット 2020-08-09 20.51.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647230/ced3550a-6239-9cdb-3199-e528765a18a4.png)
正規表現入門 第三回 数量詞を用いた検索

# 数量詞とは
- 「数量を示す単語または句」のことを言う。
- メタ文字と同様、数量詞もそのものを検索する場合はエスケープが必要です。

## 先頭の文字を検索 "^"
- 文字列の「先頭」を検索するには「^」を使います。
- mオプションを加えると、改行直後の値も対象になります。

``` 3-1(先頭の文字を検索).js
console.log("This is a pen!".match(/^This/));
console.log("This is a pen!".match(/^is/));

console.log("This is a pen!\nThis is a ball!".match(/^This/g));
console.log("This is a pen!\nThis is a ball!".match(/^This/gm));

console.log("This is a pen!".match(/^This\s../));
console.log("This is a pen.This is a ball.".replace(/^This/, "That"));
```
> 実行結果
[ 'This', index: 0, input: 'This is a pen!', groups: undefined ]
null
[ 'This' ]
[ 'This', 'This' ]
[ 'This is', index: 0, input: 'This is a pen!', groups: undefined ]
That is a pen.This is a ball.

## 末尾を検索 "$"
- 文字列の「末尾」を検索するには「$」を使います。

``` 3-2(末尾を検索).js
console.log("This is a pen!".match(/pen!$/));
console.log("This is a pen!".match(/is$/));

console.log("This is a pen!\nThis is a ball!".match(/!$/g));
console.log("This is a pen!\nThis is a ball!".match(/!$/gm));

console.log("This is a pen!".match(/\spen!$/));

console.log("This is a pen.This is a pen.".replace(/pen.$/, "ball."));
```
> 実行結果
[ 'pen!', index: 10, input: 'This is a pen!', groups: undefined ]
null
[ '!' ]
[ '!', '!' ]
[ ' pen!', index: 9, input: 'This is a pen!', groups: undefined ]
This is a pen.This is a ball.
SSR フレームワーク Next.js を使って React を快適ルーティング part1


# SSR フレームワーク `Next.js` を使って `React` を快適ルーティング part1

## はじめに

- Next.js のチュートリアルをただ翻訳しながら紹介するだけです  
  https://nextjs.org/learn/basics/create-nextjs-app
- MacOS 前提
- `Node.js` と `npm` を事前にインストールしてください

## Next.js とは

`Next.js` は `React` を使って SSR (サーバサイドレンダリング)アプリケーションを構築できる軽量フレームワークになります。
すぐに使えるスタイルやルーティングのソリューションを含んでいるため、手軽にスタイルを適用したり、ページ遷移を実装できます。
サーバ環境としては、 `Node.js` を利用することが想定されています。

## SPA と SSR と React

通常 `React` 単体では すべての JS や CSS 、 HTML を一気に読み込むいわゆる `SPA` なので、初回アクセスが遅いといった問題があります。
これを解決するために誕生したのが `SSR` であり、パフォーマンス改善の他、SEO に強くなるといった特徴があります。
また、 `React` 単体でルーティングを実現しようとすると React Router が有名ですが、これはページ遷移のたびにブラウザリロードが走ってしまうため、パフォーマンスがよくありませんでした。`Next.js` ではそういった部分も改善されているため、ぜひ触ってみながら体験してみましょう。

## Next.js と Gatsby

Next.js は Gatsby と比較されることがよくあります。 Gatsby はランディングページなどの静的Webサイトを構築するにはとても快適なのですが、ページが複数あるようなWebアプリケーションを構築すると Next.js の方に軍配が上がります。

## Next.js アプリを作成する

### Next.js アプリを作成する

```bash
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
```

### 開発サーバーを実行する

```bash
cd nextjs-blog
npm run dev
```

### Next.js へようこそ

ブラウザで http://localhost:3000/ にアクセスする
![welcome-to-nextjs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/dbde7990-0d15-3214-0425-a7f01e8692aa.png)

### ページの編集

`pages/index.js` を以下のように変更する
ホットリロードが効いているので、ブラウザに即時反映されます。

```text:pages/index.js
“Welcome to”
↓
“Learn”
```

![learn-nextjs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/22bc2a55-837f-9d53-a2a9-b74fb69857f1.png)

## [続く...](https://qiita.com/takiguchi-yu/items/ece05578da15780cd291)
Rails reference型　作成　追加


#はじめに
今回はrailsでのマイグレーション時にreference型を扱うことがことがあったのでまとめる。

#外部キーとは
reference型を扱うにあたって外部キーについて知っておかなくてはならない。

>外部キーとは、リレーショナルデータベース（RDB）で、テーブルのある列に、別のテーブルの特定の列に含まれる項目しか入力できないようにする制約。また、その際に指定する列
http://e-words.jp/w/%E5%A4%96%E9%83%A8%E3%82%AD%E3%83%BC.html#:~:text=%E5%A4%96%E9%83%A8%E3%82%AD%E3%83%BC%E3%81%A8%E3%81%AF%E3%80%81%E3%83%AA%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB,%E3%82%92%E7%94%A8%E3%81%84%E3%81%A6%E8%A8%AD%E5%AE%9A%E3%81%A7%E3%81%8D%E3%82%8B%E3%80%82

今回はarticlesテーブルにreference型のuser_idという外部キーを設定する。

#前提
sampleとしてuserテーブルとariticleテーブルを準備する。

```ruby

class CreateUsers < ActiveRecord::Migration[6.0]
  def change
    create_table :users do |t|
      t.string   :name
      t.string   :email
    end
  end
end
```

```ruby

class CreateArticles < ActiveRecord::Migration[6.0]
  def change
    create_table :articles do |t|
      t.string   :title
      t.string   :content
    end
  end
end
```

```
$ rake db:migrate
```

#reference型のカラムの作成
reference型で作成すると`user`そのまま追加されるわけではなく`user_id`というカラム名で追加される。また、`index:true`を追記することなく自動でインデックスをはってくれるというメリットもある。

```ruby

class CreateArticles < ActiveRecord::Migration[6.0]
  def change
    create_table :articles do |t|
      t.string   :title
      t.string   :content
      t.references :user, foreign_key: true
    end
  end
end
```
*`foreign_key: true`をつけないと外部キー制約はつけることができない。
`foreign_key: true`を書き忘れたことで設定できないこtがあった。

`add_foreign_key`を使っての追加も可能。

```ruby

class CreateArticles < ActiveRecord::Migration[6.0]
  def change
    create_table :articles do |t|
      t.string   :title
      t.string   :content
    end
      add_foreign_key :articles, :users
  end
end
```

#reference型のカラムの追加
```ruby

class AddReferenceColumn < ActiveRecord::Migration[6.0]
  def change
    add_reference :articles, :user, foreign_key: true
  end
end
```
この際にも`foreign_key: true`を忘れずに。
attribute-filter.xml では属性値を変更できない

# 概要
Shibboleth IdPで特定のSPに対してだけ、送出する属性値に細工をしようとしたら出来なかった。attribute-filter.xml では属性値の送出をフィルタするだけで、追加や変更はできない。
https://wiki.shibboleth.net/confluence/display/IDP30/AttributeFilterConfiguration にその旨が記載されている。

# 解説
Shibboleth SPの中には、特定の属性値を送出してきたユーザに対し、IdPの管理者として扱う様なサービスがある。この方法を取ると、SPでサービスを提供する側は、IdPの管理者に誰が管理者であるかを個別に確認する必要が無い。
例えば、[倫倫姫](https://repository.kulib.kyoto-u.ac.jp/dspace/bitstream/2433/167205/1/121116.pdf
)では、**eduPersonEntitlement=urn:mace:nii.ac.jp:moodle:course-admin** のユーザをコース管理者権限として扱うようになっていた。

解説では attribute-resolver.xml で条件式を書き、特定のuidを持つユーザに対して属性値を変更する様に記載があるが、その方法だとどのSPに対しても同じ属性値を送出してしまうため、attribute-filter.xml で処理したらSP毎に設定することが可能になると考えた（が、ダメだった）。

# attribute-filter.xml の設定 (Shibboleth IdP 3.6)
今後役に立つかも知れないので、メモとして attirbiute-filter.xml の設定を残す。
Shibbboleth IdPのバージョンにより、XMLの書式が変わることに注意。また、Javascriptの扱いが利用しているJREにより変わることにも注意。今回はJava 8で記述。

attribute-resolver.xml において、**eduPersonEntitlement=urn:mace:dir:entitlement:common-lib-terms;mace:nii.ac.jp:moodle:course-admin** となっていない場合には、期待した様な動作は得られない。
この場合は、**eduPersonEntitlement** は **urn:mace:dir:entitlement:common-lib-terms** のみ返ってくる。

```xml:conf/attribute-filter.xml
<AttributeFilterPolicy id="PolicyforYourSP">
    <PolicyRequirementRule xsi:type="Requester" value="https://sp-host.domain/shibboleth-sp" />
    <AttributeRule attributeID="eduPersonPrincipalName" permitAny="true" />
    <AttributeRule attributeID="eduPersonTargetedID" permitAny="true" />

    <!-- 全てのユーザで eduPersonEntitlement を送出する場合
    <AttributeRule attributeID="eduPersonEntitlement" permitAny="true" />
    -->
    
    <!-- 条件に合致する場合のみ eduPersonEntitlement を送出 -->
    <AttributeRule attributeID="eduPersonEntitlement">
        <!-- 全てのユーザで送出
        <PermitValueRule xsi:type="ANY" />
        -->

        <!-- 特定のuidの場合にのみ送出
        <PermitValueRule xsi:type="Value" attributeID="uid" value="test001" />
        -->

        <!-- 特定の複数のuidの場合にのみ送出
        <PermitValueRule xsi:type="OR">
            <Rule xsi:type="Value" attributeID="uid" value="test001" />
            <Rule xsi:type="ValueRegex" attributeID="uid" regex="^.*001$" />
        </PermitValueRule>
        -->

        <!-- Javascriptで条件を定義 -->
        <PermitValueRule xsi:type="Script">
            <Script>
                <![CDATA[
                    hashSetType = Java.type("java.util.LinkedHashSet");
                    StringAttributeValue = Java.type("net.shibboleth.idp.attribute.StringAttributeValue");

                    result = new hashSetType();
                    result.add(new StringAttributeValue("urn:mace:dir:entitlement:common-lib-terms"));

                    if (uid == 'test001') {
                        result.add(new StringAttributeValue("urn:mace:nii.ac.jp:moodle:course-admin"));
                    }
                    result;
                ]]>
            </Script>
        </PermitValueRule>
    </AttributeRule>
</AttributeFilterPolicy>
```
ChromeでYouTubeやTwitterへのアクセスを禁止して作業を捗らせよう！

## はじめに

みなさん、作業の合間についついYouTubeやTwitterを見てしまいませんか？:eyes:
私はいつも見てしまうので、ChromeでYouTubeやTwitterにアクセスできないようにする方法をまとめました！
なお、ChromeにはURLのブラックリストを追加する拡張が複数ありますが、なんとなく気持ち悪いのでChrome拡張は使わない方法を使用します。


## 手順

### 1. Google管理コンソールのアカウントを作成する

以下のURLより、Google管理コンソールのアカウントを作成してください。
https://devicemanagement.google.com/signup/form?product=Chrome-Management

> すでに
> [ユーザー名]@[ビジネス名].deviceadmin.goog
> の形式の管理アドレスを持っている場合は、新しく作成する必要はありません。

### 2. ブラックリストを設定する

[Google管理コンソールのChrome設定ページ](https://admin.google.com/ac/chrome/settings/user)にアクセスします。

下の方にスクロールしていくと、ブラックリストの設定があるので、作業の邪魔になるサイトのドメインを記述します。

<img width="1032" alt="スクリーンショット 2020-08-09 20.45.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/586481f4-ffbe-0e08-ef68-f23e87126300.png">

設定が完了したら、必ず右上の「SAVE」で保存しておきましょう。

### 3. Chromeに作成したアカウントでログインする。

Chromeブラウザに先ほど作成した管理者アカウントでログインすれば、ブラックリストに設定したサイトにアクセスできなくなります。

<img width="1401" alt="スクリーンショット 2020-08-09 20.24.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/4f848298-14bc-7777-d11d-40a6c33cbef7.png">

なお、設定が有効になっているかどうかは、[chrome://policy/](chrome://policy/) にアクセスして、「ポリシーを再読み込み」ボタンをクリックすると確認できます。

<img width="1440" alt="スクリーンショット 2020-08-09 20.49.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/a9f0040b-449e-9ec4-f5fa-993c738d13ac.png">

## Blacklistの表記が見当たらないとき

この記事を執筆時はBlacklistと表記されていますが、近い未来では変更になっているかもしれません。

* denylist
* allowlist

等の表記を探してみてください。

## 追記

やはり、Blacklistの表記は変更になりました。`URL blocking`をページ内検索してください。
ABC 088 C – Takahashi’s Information

#問題概要
https://atcoder.jp/contests/abc088/tasks/abc088_c

#考えたこと
c11, c12, c13 = a1+b1, a1+b2, a1+b3
c21, c22, c23 = a2+b1, a2+b2, a2+b3
c31, c32, c33 = a3+b1, a3+b2, a3+b3

よって

c11 + c22 + c33 
= c12 + c23 + c31
= c13 + c32 + c21
= a1 + a2 + a3 + b1 + b2 + b3

#提出コード
https://atcoder.jp/contests/abc088/submissions/15778910

```python:test.py
def solve():
    import sys
    s = list(map(int, sys.stdin.read().split()))
    x, y, z = s[0] + s[4] + s[8], s[1] + s[5] + s[6], s[2] + s[3] + s[7]
    if x == y == z:
        print("Yes")
    else:
        print("No")

    return
solve()
```

#編集中
動画ファイルのシーン画像抽出

# 概要

動画ファイル中の画像で、イメージハッシュが大きく異なる画像を抽出する処理を作成した。

# 処理手順

1. 動画ファイルをOpenCVを使ってフレーム単位で読み込み
2. OpenCV形式をPIL形式に変換
3. 変換したファイルのImageHash（アルゴリズム dhash）を取得
4. 直前のフレームのイメージハッシュと比較し、閾値以上の場合、画像ファイルを作成
5. 2～4を繰り返す

# 結果
閾値を30にしたところ差分の大きい画像のみ抽出できたが、1場面で複数の画像が抽出される。
画像数を減らしたいのであれば、閾値を上げる必要がある。

# 感想
閾値30では同一場面で複数枚の画像が出てきてしまうため、1場面1画像とするのであれば閾値を大きくしたほうがよさそう。
動画ファイルからの画像の抽出、OpenCV形式→PIL形式変換を理解できた。

# ソースコード
https://github.com/kd-ny/AnimeSceneExtractor/blob/master/main.py
<f:ajax> Unable to attach <f:ajax> to non-ClientBehaviorHolder parentとなった時の対応方法


- 環境
    - CentOS Linux release 7.8.2003 (Core)
    - Eclipse IDE for Enterprise Java Developers.Version: 2020-03 (4.15.0)
    - openjdk version "11.0.7" 2020-04-14 LTS
    - JSF 2.3.9

# 事象 : ajaxの処理を追加してページを表示しようとしたらHTTPSステータス500になった
```bash:EclipseのConsoleのエラー
javax.faces.view.facelets.TagException: /base.xhtml @18,103 <f:ajax> Unable to attach <f:ajax> to non-ClientBehaviorHolder parent
    at com.sun.faces.facelets.tag.jsf.core.AjaxHandler.applyNested(AjaxHandler.java:276)
    at com.sun.faces.facelets.tag.jsf.core.AjaxHandler.apply(AjaxHandler.java:148)
    at javax.faces.view.facelets.DelegatingMetaTagHandler.applyNextHandler(DelegatingMetaTagHandler.java:137)
    at com.sun.faces.facelets.tag.jsf.ComponentTagHandlerDelegateImpl.apply(ComponentTagHandlerDelegateImpl.java:179)
...省略...
```

```xml:base.xhtml
...省略...
<h:inputHidden id="file">
  <f:ajax event="change" execute="@form" render="@form" listener="#{uploadBean.uploadFile}" />
</h:inputHidden>
...省略...
```

# 原因 : f:ajaxはClientBehaviorHolderインタフェースを実装したタグ内でないと使えないから

> Register an AjaxBehavior instance on one or more UIComponents implementing the ClientBehaviorHolder interface.
> [ajax(JSF 2.2 View Declaration Language: Facelets Variant)](https://docs.oracle.com/javaee/7/javaserver-faces-2-2/vdldocs-facelets/f/ajax.html)

(ざっくり訳)ClientBehaviorHolderインタフェースを実装する1つまたは複数のUIComponentsにAjaxBehaviorインスタンスを登録します。
今回の場合は、`h:inputHidden`がClientBehaviorHolderインタフェースを実装しているかが問題だが、`ClientBehaviorHolder`のJavaDocを見たら対象外だった・・・

> All Known Implementing Classes:
> HtmlBody, HtmlCommandButton, HtmlCommandLink, HtmlDataTable, HtmlForm, HtmlGraphicImage, HtmlInputFile, HtmlInputSecret, HtmlInputText, HtmlInputTextarea, HtmlOutcomeTargetButton, HtmlOutcomeTargetLink, HtmlOutputLabel, HtmlOutputLink, HtmlPanelGrid, HtmlPanelGroup, HtmlSelectBooleanCheckbox, HtmlSelectManyCheckbox, HtmlSelectManyListbox, HtmlSelectManyMenu, HtmlSelectOneListbox, HtmlSelectOneMenu, HtmlSelectOneRadio
> [ClientBehaviorHolder (JavaServer Faces API (2.2))](https://javaserverfaces.github.io/docs/2.2/javadocs/javax/faces/component/behavior/ClientBehaviorHolder.html)

## 対応 : タグをh:inputTextに変更する

```xml
...省略...
<h:inputText id="file" style="display:none;">
  <f:ajax event="change" execute="@form" render="@form" listener="#{uploadBean.uploadFile}" />
</h:inputText>
...省略...
```
[AtCoder]ABC165C個人的メモ[Python]

# [ABC165 C - Many Requirements](https://atcoder.jp/contests/abc165/tasks/abc165_c)
  
考えられる数列Aをdfsによって全探索し，得点の最大値を求める．  
解答例を2つ示す
  
- 解答例1-dfsを再帰関数で実装
  - calc関数  
    数列Aから得点の計算をする関数  

  - dfs関数  
    考えられる数列Aをdfsによって全探索しつつ，得点の最大値を求める関数  
    数列Aの長さがNなら得点を計算した後，今までの最高得点と比較，最高得点を記録  
    それ以下の長さなら，数列Aの制約を満たす様に要素を1つ追加して再帰  
    Aが空リストなら$x=1$を，それ以外なら$A[-1]\leqq x\leqq M$の$x$をAに追加して再帰

  ```py:main.py
    #!/usr/bin/env python3
    def main():
        import sys

        def calc(A: list):
            score = 0
            for a, b, c, d in lst:
                if A[b - 1] - A[a - 1] == c:
                    score += d
            return score

        def dfs(A: list):
            nonlocal ans
            if len(A) == N:
                ans = max(ans, calc(A))
                return
            for v in range(A[-1] if A else 1, M + 1):
                A.append(v)
                dfs(A)
                A.pop()

        input = sys.stdin.readline

        N, M, Q = map(int, input().split())
        lst = [list(map(int, input().split())) for _ in range(Q)]

        ans = 0
        dfs([])
        print(ans)


    main()

  ```

- 解答例2-[itertools.combinations_with_replacement(iterable, r)](https://docs.python.org/ja/3/library/itertools.html#itertools.combinations_with_replacement)  
  itertools.combinations_with_replacementをつかって，数列Aを全探索する  
  公式ドキュメントによると，itertools.combinations_with_replacement(iterable, r)は，入力iterableから，それぞれの要素が複数回現れることを許して長さrの要素の部分列をタプルで返す  

  ```py:test.py
  # itertools.combinations_with_replacement(iterable, r)の使用例
  from itertools import combinations_with_replacement

  for pattern in combinations_with_replacement('ABCD', 2):
      print(pattern, end='')
  
  # AA AB AC AD BB BC BD CC CD DD

  ```

  上記の関数を用いると，解答は以下の様に書ける

  ```py:main.py
    #!/usr/bin/env python3
    def main():
        import sys
        from itertools import combinations_with_replacement

        input = sys.stdin.readline

        N, M, Q = map(int, input().split())
        lst = [list(map(int, input().split())) for _ in range(Q)]

        ans = 0
        for pattern in combinations_with_replacement(range(1, M + 1), N):
            res = 0
            pattern = list(pattern)
            for a, b, c, d in lst:
                if pattern[b - 1] - pattern[a - 1] == c:
                    res += d
            ans = max(ans, res)

        print(ans)


    main()

   ```

## 参考URL

- あっとのTECH LOG  
  ABC165 C - Many Requirements  
 <https://at274.hatenablog.com/entry/2020/05/20/213705>
- けんちょんの競プロ精進記録  
  よくやる再帰関数の書き方 〜 n 重 for 文を機械的に 〜  
  <https://drken1215.hatenablog.com/entry/2020/05/04/190252>
- Python 3.8.5 ドキュメント  
  効率的なループ実行のためのイテレータ生成関数  
<https://docs.python.org/ja/3/library/itertools.html#itertools.combinations_with_replacement>
ポアソン尤度最大化法と最小二乗法による直線の傾き推定

# 背景
データがポアソン分布に従っている場合、最小二乗法よりもポアソン尤度最大化法を採用する方がよさそうですが、あまり比較というものをしたことがなかったので、簡単な例で比較してみることにしました。

# 問題設定
$x$における真の$y$は$y=ax$で与えられるものとします。$y$はポアソン分布に従うものとし、$x$の誤差は考えません。

# 推定法
まず、最小二乗法を用いてみます。結果だけ示すと、

```math
a = \frac{\sum_ix_iy_i}{\sum_ix_i^2}
```

となります。
ポアソン尤度最大化法の場合は

```math
a = \frac{\sum_iy_i}{\sum_ix_i}
```

となります。
素朴に、各点毎に傾きを算出して平均する方法とも比較してみましょう。

```math
a = \sum_i\frac{y_i}{x_i}
```

# コード
```c++
#include <random>
#include <iostream>
#include <vector>

double var(const std::vector<double>& a)
{
	int Size = a.size();
	double sum_a = 0;
	double sum_aa = 0;
	for (int i = 0; i < Size; i++)
	{
		sum_a += a[i];
		sum_aa += a[i]*a[i];
	}
	double ret = sum_aa / (double)Size - sum_a * sum_a / (double)Size / (double)Size;
	return ret;
}

int main()
{
	std::mt19937_64 mt(0);
	std::uniform_real_distribution<> u0(1, 5);
	std::uniform_real_distribution<> u1(10, 15);

	int N = 50;//num of data
	double a = 1;

	int Iter = 10000;//試行回数
	std::vector<double> A_LS;
	std::vector<double> A_ML;
	std::vector<double> A_AV;
	for (int iter = 0; iter < Iter; iter++)
	{
		double sum_xy = 0;
		double sum_xx = 0;
		double sum_y = 0;
		double sum_x = 0;
		double av_a = 0;
		for (int n = 0; n < N; n++)
		{
			double x = (n < N / 2 ? u0(mt) : u1(mt));
			std::poisson_distribution<> poi(a * x);
			double y = poi(mt);
			sum_x += x;
			sum_y += y;
			sum_xx += x * x;
			sum_xy += x * y;
			av_a += y / x;
		}
		double a_ls = sum_xy / sum_xx;
		double a_ml = sum_y / sum_x;
		av_a /= (double)N;
		A_LS.push_back(a_ls);
		A_ML.push_back(a_ml);
		A_AV.push_back(av_a);
	//	std::cout << av_a << " " << a_ls << " " << a_ml << std::endl;
	}
	std::cout << sqrt(var(A_AV)) << " " << sqrt(var(A_LS)) << " " << sqrt(var(A_ML)) << std::endl;

	return 0;
}
```

# 結果
真値は$a=1$です。データ数は$N=50$としました。
標準偏差は、最も素朴な方法で$0.069$、最小二乗法で$0.054$、ポアソン尤度最大化法で$0.051$となりました。
ちなみに、データが標準偏差$5$の正規分布に従うとしてみると、それぞれ$0.226$、$0.0768$、$0.0911$となりました。

# まとめ
傾き推定のような単純な問題でも多少の差は出るようです。より複雑な問題ではもっと違いが出る場合もあるでしょう。
ただし、違いが出ないケースというのもありうるので、その場合はわざわざ面倒なポアソン尤度最大化法を採用する必要はありません。
実際には勾配法等を用いて尤度方程式を解くケースが多く、より単純な最小二乗法の方が安定に解が求まるというケースも考えられます。
自然言語処理入門の本を読んでみた

#初めに
機会学習・深層学習による自然言語処理入門 著 中山光樹
を読んだ感想を書いてみる
pythonになれるためサンプルコードは自前でカスタマイズしてみた

#第一章、第二章
機械学習とは何かという話と、pythonの実行環境についての話
本著ではpythonの実行環境をMinicondaを使って作っているみたいだが、conda系の開発環境はトラウマしかないため、dockerでpython開発環境用のcontainerを作ったよ
次いでにviでpythonのコードが補完されるモジュールも導入したよ
viのコピペ、pythonでのマルチバイト文字列を扱えるようにするために苦労したことは秘密だ

#第三章
コーパスとは何ぞやを説明している
ぐるなびAPIから機械学習用のデータを取得するコードがあったので、自分なりにカスタマイズした。というか、カスタマイズしないと動かない
もともとのコードは検索キーにジャンルを指定していたけど、サンプルコードの通りに実行するとAPIの仕様が中間一致から完全一致に変わったのか、「検索結果が見つからない」という結果が返ってくる
（ぐるなびAPIいけてなさすぎる）
仕方がないので、経度をしていて検索結果を取得してみた

```sample.py
import requests
url ='https://api.gnavi.co.jp/PhotoSearchAPI/v3/'
params = {'keyid': 'YourAPI','latitude': 35.5367971,'longitude':139.634745}
response = requests.get(url,params=params).json()
lists = list( 
          map(
              lambda x:{'comment':response['response'][x]['``photo']['comment'],'socre':response['response'][x]['photo']['total_score']} ,
              list(
                  filter(lambda x1:response['response'][x1]['photo']['comment'] and response['response'][x1]['photo']['total_score']
                  ,list( filter(lambda x2:x2.isdigit(),response['response'].keys()) )  ) 
               ) )
)
print(lists)
```

## コーディングをした雑感
箇条書きに書いてみる

ぐるなびAPIの戻り値のデータ構造が嫌がらせに近いくらい終わっている。なんで制御コード的な情報と個々の検索結果が同じ第二階層にあるんだよ？おかげでインデックスが数字かどうか判定する、無駄なロジックが入ってしまうではないか

関数型言語的な処理はJavaの

```
   list.stream()   
   .filter()    
   .filter()    
   .map()    
   .collect()   
```
みたいにかけないのかのぉ
mapとかfilterを使うたびにlist()関数を使うのは冗長なんですが
たかだか、これだけのプログラムのために別関数にfor-yieldを使うのも面倒くさいし
これは私がpythonに慣れてないだけで別のpython的なやり方があるんだろうなと思いますが
roslaunch時にエラー（No handlers could be found for logger "roslaunch"）

roslaunch時にエラー

```
$ roslaunch racecar_gazebo racecar_tunnel.launch
WARNING: Could not change permissions for folder [/home/ubuntu/.ros/log/c5d0bbf4-da33-11ea-8017-d0374510daed], make sure that the parent folder has correct permissions.
Checking log directory for disk usage. This may take a while.
Press Ctrl-C to interrupt
Done checking log file disk usage. Usage is <1GB.

No handlers could be found for logger "roslaunch"
```

設定ファイルを読み込んで解決

```
$ echo $ROS_DISTRO
melodic
$ source /opt/ros/melodic/setup.bash
```

~/.bashrcに記載しておくとbash起動ごとに読み込んでくれるので便利

```
echo "source /opt/ros/melodic/setup.bash" >> ~/.bashrc
```

# 参考
[RoS and OSX issues: No handlers could be found for logger "roslaunch"](https://answers.ros.org/question/210247/ros-and-osx-issues-no-handlers-could-be-found-for-logger-roslaunch/)
Rust開発環境のためにUbuntuにVSCodeをセットアップする

#Rust開発環境のためにUbuntu20.04 LST にVisual Studio Codeをセットアップする

VSCodeを新規でセットアップしてRust開発環境を作る。
必要に応じて追記していく予定。
おオススメの拡張機能を提案してくれると喜びます。

Rustは一年ほど前に勉強しかけていたけど、Python3と同時に始めたので一旦保留にしてました。
クリーンインストールしたUbuntu20.04にVSCodeも入れ直し。と、いうか、VSCodeも一年ぐらい触ってなかったので色々進化しているっぽい？

![Screenshot from 2020-08-09 20-17-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356086/7274c19b-6852-1f66-c8da-62269f094c77.png)

とりあえず、こんな感じ。
日本語化パックとRustのコード補完やらフォーマットやらしてくれるやつ。

ターミナルは・・・と、思ったケド、今のは標準機能でターミナルあるのね。あれ？前からあったっけ？拡張機能でターミナル入れてたのATOMだけだったか。

![Screenshot from 2020-08-09 20-18-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356086/372ed3ef-9608-4f74-81c1-ac7ba08992be.png)

---
以降、追記スペース
初歩中の初歩！railsでのモデル・コントローラー作成方法

#モデル作成方法

```
rails g モデル名（単数）
```


マイグレーション型一覧
・string : 文字列
・text : 長い文字列
・integer : 整数
・float : 浮動小数
・decimal : 精度の高い小数
・datetime : 日時
・timestamp : タイムスタンプ
・time : 時間
・date : 日付
・binary : バイナリデータ
・boolean : Boolean


```db/migrate
class CreateExercises < ActiveRecord::Migration[6.0]
  def change
    create_table :テーブル名（複数形） do |t|
　　　 t.migrate型 :カラム名（単数）
      t.string :part
      t.text :url
      t.integer :level
      t.timestamps
    end
  end
end
```

ここまで設定できたらお決まりの

```
rails db:migrate

== 20200809105002 CreateExercises: migrating ==================================
-- create_table(:exercises)
   -> 0.0244s
== 20200809105002 CreateExercises: migrated (0.0245s) =========================
```

こんな感じの表示がでれば成功


#コントローラー作成

```
rails g controller コントローラー名 アクション名
```
※コントローラー名は大文字始まりの複数形
下記のような表示がでれば成功

```
Running via Spring preloader in process 65910
      create  app/controllers/exercises_controller.rb
       route  get 'exercises/index'
      invoke  erb
      create    app/views/exercises
      create    app/views/exercises/index.html.erb
      invoke  test_unit
      create    test/controllers/exercises_controller_test.rb
      invoke  helper
      create    app/helpers/exercises_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/exercises.scss
```
竸プロ素人の最小全域木分かりやすかった記事まとめ

こんにちは。

Atcoderを初めて1.5ヶ月緑コーダーのうなぎです。
ここでは自分が勉強して分かり易かった記事などをまとめていこうと思います。世の中には竸プロ強者によるわかりやすい記事がありふれているので、わかりやすさや説得性を求めている人はそちらをご覧になることをおすすめします。

あくまで、初心者が初心者の時に感じたことを書いている記事となっています。

#分かりやすかった記事
[最適化基礎第八回最小全域木問題](http://www.me.titech.ac.jp/~shioura/teaching/opt15/optim15-08.pdf)
東工大の講義資料。講義資料だけあって証明がしっかり書いてある。細かいことを気にしない人でも軽く目を通すといい気がする。

[最小全域木と最大流問題](https://www.hongo.wide.ad.jp/~jo2lxq/dm/lecture/09.pdf)
落合秀也さんのスライド。プリム法が図で示されているので、直感的に理解しやすい。おすすめ。

[最小全域木問題](https://hazm.at/mox/math/graph/minimum-spanning-tree.html)
プリム法がどのように実装されるかについてのアニメーションがある（すごい！！）。

#解いた問題
@e869120 さんの作成された[レッドコーダーが教える、競プロ・AtCoder上達のガイドライン【中級編：目指せ水色コーダー！】](https://qiita.com/e869120/items/eb50fdaece12be418faa#2-3-%E5%88%86%E9%87%8E%E5%88%A5%E5%88%9D%E4%B8%AD%E7%B4%9A%E8%80%85%E3%81%8C%E8%A7%A3%E3%81%8F%E3%81%B9%E3%81%8D%E9%81%8E%E5%8E%BB%E5%95%8F%E7%B2%BE%E9%81%B8-100-%E5%95%8F)の該当問題(64-67)を2020年8月時点でレート900の私が解いた感想です（あくまで感想です、いかに述べる解き方などが最適解とは限りません）。
一緒に精進する人にとってのモチベーションになれば幸いです。
以下該当問題を解いた感想（**ネタバレ注意**）

[GRL_2_A - 最小全域木](http://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=GRL_2_A&lang=ja)
heapq使って解いてみた。最小全域木がいかなるものか分かっていれば解ける。
[JOI 2010 春合宿 - Finals](https://atcoder.jp/contests/joisc2010/tasks/joisc2010_finals)
prim heapを使用することで解ける。題意をprim heapで解けることと結び付けられるか。
[AOJ 1127 - Building a Space Station](http://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=1127)
それぞれの宇宙ステーションの半径と距離の比較にやや工夫がいるだけで、あとはprim heap。([解法のメモ](https://qiita.com/ryuryu52868475/items/9cd22aec6e8c0c6f73a3))
[AtCoder Beginner Contest 065 D - Built?](https://atcoder.jp/contests/abc065/tasks/arc076_b)
x,yを独立に考えることに気付けるかどうか。

#感想
$O(V^2)$と$O(|E|\log|V|)$の計算量の違いには気をつけた方がいいのかな。どちらかしか知らないと間に合わないことがありそうでいつかそういった問題に当たりそう。
【rails】DEPRECATION WARNING: Leaving `ActiveRecord::ConnectionAdapters::SQLite3Adapter.represent_boolean_as_integer` ... を直す方法

以下のエラーが出た場合

```error
DEPRECATION WARNING: Leaving `ActiveRecord::ConnectionAdapters::SQLite3Adapter.represent_boolean_as_integer`
set to false is deprecated. SQLite databases have used 't' and 'f' to serialize
boolean values and must have old data converted to 1 and 0 (its native boolean
serialization) before setting this flag to true. Conversion can be accomplished
by setting up a rake task which runs

  ExampleModel.where("boolean_column = 't'").update_all(boolean_column: 1)
  ExampleModel.where("boolean_column = 'f'").update_all(boolean_column: 0)

for all models and all boolean columns, after which the flag must be set to
true by adding the following to your application.rb file:

  Rails.application.config.active_record.sqlite3.represent_boolean_as_integer = true
 (called from instance_eval at /home/ec2-user/.rvm/gems/ruby-2.6.3/gems/activesupport-5.2.4.3/lib/active_support/lazy_load_hooks.rb:71)
Started GET "/" for 122.26.15.2 at 2020-08-09 10:47:48 +0000
Cannot render console from 122.26.15.2! Allowed networks: 127.0.0.1,
```

以下を追加

```ruby:application.rb
(省略)

Rails.application.config.active_record.sqlite3.represent_boolean_as_integer = true

```


以上。
Unityでベクターファイル（SVG）を扱う３（マスク＆uGUI編）

# はじめに
[前回](https://qiita.com/inpax23/items/764e0578045e9f0aa187)svgファイルを表示するところまでやりましたが、ほかにもできることをいくつか紹介します。
# SpriteMask
通常のSpriteのように、SpriteMaskにインポートしたSVGテクスチャを指定すれば、通常通り使用できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321577/029a5be2-523d-5879-efca-bc1f9ba0e7bc.png)
# SVG Image
uGUIのCanvas内で使用したい場合は、こちらを使用します
例ではRecttramsformのWidthとHeight(250x250)に合わせていますが、Preserve Aspectにチェックすれば、縦横比を維持したまま表示することもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321577/0b99baa4-3bc2-b309-0ba8-138038ea6a67.png)

# 次回
RawImageはMaskコンポーネントでマスクとして使用できるようなので、これを使用して簡単な画面遷移を作ってみます

[Unityでベクターファイル（SVG）を扱う４（画面遷移を作ってみる）](https://qiita.com/inpax23/items/4136c52a2b4f761079b2)
# 参考
VectorGrapics
https://github.com/Unity-Technologies/vector-graphics-samples/blob/master/Documentation/vectorgraphics.md
PRML　演習問題 1.35（基礎）　解答 

## 問題
> (1.106)と(1.107)を使って、1変数ガウス分布(1.109)のエントロピーが(1.110)で与えられることを示せ。

## 解答
(演習1.34)では連続変数の場合において微分エントロピーを最大にする分布はガウス分布であることを示した。(演習1.35)では実際にガウス分布において微分エントロピーはいくつになるのかを求めている。
連続変数における微分エントロピーは、

```math
\begin {align*}
\mathrm{H}[\mathbf{x}]=-\int p(\mathbf{x}) \ln p(\mathbf{x}) \mathrm{d} \mathbf{x}
\tag{1.104}
\end {align*}
``` 
上記の式(1.104)によって求めることができる。そのため1次元のガウス分布

```math
\begin {align*}
p(x)=\frac{1}{\left(2 \pi \sigma^{2}\right)^{1 / 2}} \exp \left\{-\frac{(x-\mu)^{2}}{2 \sigma^{2}}\right\}
\tag{1.109}
\end {align*}
``` 
(1.109)を(1.104)の$p(\mathbf{x})$に代入することで微分エントロピーを求めることができる。実際に(1.104)の$\ln p(x)$に代入してみると、

```math
\begin {align*}
\mathrm{H}[x]=-\int p(x)\left\{\frac{(x-\mu)^{2}}{2 \sigma^{2}} + \ln \frac{1}{\left(2 \pi \sigma^{2}\right)^{1 / 2}} \right\}
\tag{ex1.35.1}
\end {align*}
``` 
この時

> 
```math
\begin {align*}
\int_{-\infty}^{\infty} p(x) \mathrm{d} x=1
\tag{1.105}
\end {align*}
``` 
> 
```math
\begin {align*}
\int_{-\infty}^{\infty}(x-\mu)^{2} p(x) \mathrm{d} x=\sigma^{2}
\tag{1.107}
\end {align*}
``` 

上記の(1.105)、(1.107)を用いて(ex1.35.1)を変形してやると、

```math
\begin {align*}
\mathrm{H}[x] =& -\left\{-\frac{1}{2} - \frac{1}{2} \ln\left(2 \pi \sigma^{2}\right) \right\} \\
=& \frac{1}{2}\left\{1+\ln \left(2 \pi \sigma^{2}\right)\right\}
\end {align*}
``` 

となる。
IBM Cloud , Cloud Foundryのorg(組織)とspace(スペース)

前回書いたCloud Foundryの続きを少し。
IBM Cloud , Cloud Foundry でエラーが出たのですが
https://qiita.com/osonoi/items/05d3613e881c17cc2ea7

まずorg(組織)と(スペース)の関係ですが
こんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/ae70a057-cb49-dc73-dc7a-e55bd365890c.png)

組織の中に複数をスペースを持つことができます。それぞれのスペースは米国南部、ドイツ、英国、シドニー、米国東部のリージョンに作られます。Cloud Foundryでアプリを作る場合はこれらのCloud Foundryを利用できるリージョンのスペースを使うことになるわ毛ですね。
どの様な組織があってスペースがあるかはポータルサイトの　(右上)の管理-> アカウント -> (左のメニュー）Cloud Faoundryの組織　から見ることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/9d804642-d975-607f-2d09-ba71e78ca5b2.png)
org(組織)がリストされているのでそれをクリックするとそのorg(組織)のSpace(スペース）が出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/1f76964f-e9a4-39cb-668a-56368f19c939.png)
コマンドラインで見るには最初にターゲットをcloud foundryにするために下のコマンドをn湯力します。

```
$ ibmcloud target --cf
```
するとどの組織か？と聞かれます。

```
Select an organization (or press enter to skip):
1. osonoi@js2.so-net.ne.jp
2. dev2019
3. dev2020
```
数字で選択出来ます。org(組織)を作りたい場合は

```
$ ibmcloud cf create-org org名
```
になります。あとはSpace(スペース)を作るのですが特定のリージョンに作りたい場合はどうすればいいでしょう？

```
$ ibmcloud -r リージョン名
```
でリージョンを変更して作成してください。
Visual Studio CodeでUnityの自動補完を設置する(MacOS)

最近はMacBookでUnityの使用が始まり、VSCodeの自動補完はなかなか出ないので、いろいろ調べてから解決した。解決策を整理しておいた。
ちなみに、解決法はほとんどこのビデオから見つけたので、参考で見てください: https://www.youtube.com/watch?v=btga03_gGfw

手順はこんな感じになっている：
1. Unityのプロジェクトを開けて、[Unity] - [Preference] - [External tools] - [External Script Editor]から、**Visual Studio Code**を選択して、[Editor Attaching]がチェックしていることを確認する。
2. [Mono](https://www.mono-project.com/download/stable/)をダウンロードする。その後ターミナルを開けて、```mono```を入力して、ちゃんと出力が出ると問題なし。
3. VSCodeの機能拡張で**C#**をダウンロードする。
4. Unityで[Window] - [Package Manager]で*Visual Studio Code Editor*のバージョンを**1.1.3**に変更する。
5. UnityとVSCodeを閉めて、もう一度開けたら、自動補完機能が正常に動くようにできた！
【Emacs】Pythonの自動補完パッケージjediのインストールで困った話（mac）

# はじめに

・環境
macOS Mojave 10.14.6
GNU Emacs 26.3

macでemacs-jediを導入しようとしたところ、ハマりました。
もともとjediを使用していたのですが、python自体の環境が変わったのに伴い再インストールを試みました。
そういえば最初にインストールした時も、大変だった記憶があります。

ちなみに、もともとの設定はこちら。

```emacs-lisp

(add-hook 'python-mode-hook 'jedi:setup)
(setq jedi:complete-on-dot t)
```

macとjediは相性が悪いのか、例えばこんな情報もあります。
https://github.com/tkf/emacs-jedi/issues/346

また、デフォルトではvirtualenvのpythonを見に行くというのもややこしい...。

# その時の状況

jedi自体のインストールは`M-x package-list-package`から問題なくできたのですが、`M-x jedi:install-server`でエラーが発生しました。

```
 deferred error : (error "Deferred process exited abnormally:
  command: virtualenv
  exit status: exit 1
  event: exited abnormally with code 1
  buffer contents: \"FileExistsError: [Errno 17] File exists: '/usr/local/opt/python@3.8/bin/pytho\
n3.8' -> '/Users/username/.emacs.d/.python-environments/default/bin/python'
\"")
```

ドキュメントhttp://tkf.github.io/emacs-jedi/latest/#jedi:install-server に
> 環境は〜/ .emacs.d / .python-environments / default /にあります

とあるので、ここに古いpython環境が残っているのが原因かと思い、これを削除

```bash

rm -r .emacs.d/.python-environments/default
```

して再び`M-x jedi:install-server`を実行しましたが、以下のエラーが出て残念。

```
Traceback (most recent call last):
  File "/Users/username/.emacs.d/.python-environments/default/bin/jediepcserver", line 5, in <module\
>
    from jediepcserver import main
ModuleNotFoundError: No module named 'jediepcserver'

Process epc:server:3 exited abnormally with code 1
```


# 解決編

こちらの記事に救われました...！
http://proglab.blog.fc2.com/blog-entry-46.html

この記事を要約すると

> 結局、jedi, epc, jediepcserver がインストールされていれば virtualenv で仮想環境を構築してやらなくても良いのでは…、ということに気がつきました。

```bash

 pip install --upgrade ~/.emacs.d/elpa/jedi-core-なんちゃら
```

を実行して設定ファイル（ex. ~/.emacs）に

```emacs-lisp

(setq jedi:server-command (list (executable-find "jediepcserver")))
```

を追記すれば良い。


とのことで、実際に自分の手元でもこれで解決しました！

# 最後に

jediは便利なので、これが再び使えるようになったのは本当にありがたいです。
以上のエラーに対する有効な対策をご存知の方がいたら、教えていただきたいです。
Flutter の iOS 向けビルドでハマったメモ

# Flutter の iOS 向けビルド備忘録

とりあえず解決したことを列挙するだけの備忘録

## Undefined symbols for architecture arm64

`Create Bridging Header` で解決した

* [Why linker link static libraries with errors? iOS](https://stackoverflow.com/questions/52536380/why-linker-link-static-libraries-with-errors-ios)
* [Error when 'flutter run': Undefined symbols for architecture arm64: #41900](https://github.com/flutter/flutter/issues/41900)
* [Flutter Pluginの利用でSwiftエラーが出る場合の対処方法](https://qiita.com/ko2ic/items/f082f07df8a2aca6beed)

## domain/default pair of ... does not exist 

プロジェクトのルートにアセットを置いているとビルドできない模様。

hoge を assets/hoge に移動して。pubspec.yaml の該当箇所も直せばOK。

* [iOS build error: The domain/default pair of (/Runner.app/Frameworks/App.framework/flutter_assets/ios/Flutter/App.framework/Info.plist, CFBundleExecutable) does not exist #57210](https://github.com/flutter/flutter/issues/57210)
初めてWebサービスを作った感想と失敗

#はじめに
Vue.jsとFirebase.jsの勉強がてらWebサービスを作ってみました。
もう作ってから3ヵ月経ちますが記事にするのをさぼっていたので記事にします。

#作ったWebサービス

**[ガチャつく](https://gachatuku.com)**
内容は、好きな画像を用いたソシャゲのガチャのような見た目であって、画面設計や排出確率、出たカードに対する結果文章を自由度が高く設定できるコンテンツを作成・プレイできるサービス。

ツイートするとこんな感じにOGPが表示されます。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">出たカードはスライム ドラゴン スライム！<br>残念<a href="https://twitter.com/hashtag/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%A0%E3%83%AB%E3%83%BC%E3%83%AC%E3%83%83%E3%83%88%E3%82%AC%E3%83%81%E3%83%A3?src=hash&amp;ref_src=twsrc%5Etfw">#スライムルーレットガチャ</a> <a href="https://twitter.com/hashtag/gachatuku?src=hash&amp;ref_src=twsrc%5Etfw">#gachatuku</a> <a href="https://t.co/EpZPYiS0vW">https://t.co/EpZPYiS0vW</a></p>&mdash; ろろろぬ (@Yeq6X) <a href="https://twitter.com/Yeq6X/status/1292408963120521217?ref_src=twsrc%5Etfw">August 9, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

変数、関数はめちゃくちゃ無駄に高機能です。
作らなくてもいいからガチャを作成する画面を見て欲しさ(泣)(要ログイン)(これが問題)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ガチャつく<br>作成画面 <a href="https://t.co/KR2lIzlT2H">pic.twitter.com/KR2lIzlT2H</a></p>&mdash; ろろろぬ (@Yeq6X) <a href="https://twitter.com/Yeq6X/status/1292407888195985409?ref_src=twsrc%5Etfw">August 9, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 


#使った技術
・Vue.js
・Firebase
・[Konva.js](https://konvajs.org/docs/sandbox/index.html)
　めちゃくちゃ自由度高く画面設計をするために使いました。文字、画像のサイズ変更のUIを簡単に
・[Cropper.js](https://fengyuanchen.github.io/cropperjs/)
　画像のトリミングに使いました。画面にフィットするようにトリミングをする仕様にするのに
　結構工夫したので記事にしたいと思います。

#初期の軽い気持ち
・診断メーカーみたいなものの画像版をつくったら楽しいんじゃないか。
・画面設計を実装するのたのしそう(これが元凶)
・凝ったものを作りたい人が来てほしい。
・すぐに遊べたら楽しいのでは。
・簡単にシェア出来てOGP画像で結果が見れたら興味が沸くのではないか。
・~~民度が低くなって欲しい~~

#まあもちろん誰もやらなかった
・ログインがハードルが高い。
・作りたいと思わない。
・作りたいものが思いつかない。
・宣伝をサボった、そういうのをやりたいターゲット層に届けられなかった。
・技術的な観点から作りたいものを決めて全く需要の無いサービスを作ってしまった。


#感想
"完全に"プロダクトアウトな発想でものを作ると、予算をかけて爆死したスマホゲームみたいな状況になるという教訓を得られました笑。そしてやはりログインのハードルは高い。
また、初めてWebサービスを作ってみてあまりまとめられていないような体系的な知識が学べたので勉強になりました。
Webサービス作成をめげずに続けていけたらと思います。


#####最後まで目を通していただきありがとうございました。
Windows コマンドプロンプトの文字コード確認


Windows で Curl を使って REST API から json を取得した時に日本語が文字化けしたので、
コマンドプロンプトの文字コードを変更することで解決したメモ。

### コマンドプロンプトの文字コードを確認する

文字コードを表示
(コマンドプロンプトのシンタックスハイライト分からない問題…🙃)

``` PowerShell
C:\Users\name>chcp
``` 
表示される文字コードはおそらく 932 だと思われる。

### コマンドプロンプトの文字コードを変更する

932は Shift-JIS なので、これを UTF-8 に変更する

``` PowerShell
C:\Users\name>chcp 65001
```

これでOK (コマンドプロンプトが再度開かれるので注意)

|ページ番号| 対応する文字コード |
|:------------|:---------------|
| 932         | Shift-JIS      |
| 65001       | UTF-8          |
| 1200        | UTF-16         |

残りは[ここ](http://www.k-tanaka.net/cmd/chcp.php) 参照
Laravelのpluck()でunicodeが表示される。

## 問題
formに初期値を入れたくて、LaravelのEloquentで取得した行から
該当するカラムを取得する際に、unicodeでエンコードされた文字列が出力される。

```PHP:controller.php
$content  = Model::where('id', $id)->first()->pluck('content');

return view('admin.event_chat')
       ->with('content',   $content)
```

```blade:view.blade.php
<form action="/Admin/eventChatSend" method="POST">
      @csrf
      @if (isset($content))
          <input type="text" name="content" value="{{ $content }}">
      @else
          <input type="text" name="content" placeholder="定型文はありません">
      @endif
      <input type="submit" value="送信">
</form>
```
このように実装した場合、unicodeでエンコードされた文字列`content`が挿入されます。


## 解決案
まぁ、pluck()を通すとunicodeでエンコードされるということは
当たり前のようにpluck()を使わなければいいのでView側で取ってくるか`$content = $row->content`で取得すればいいです。前者で実装してみました。

```PHP:controller.php
$row  = Model::where('id', $id)->first();

return view('admin.event_chat')
       ->with('row',   $row)
```

```blade:view.blade.php
<form action="/Admin/eventChatSend" method="POST">
      @csrf
      @if (isset($row))
          <input type="text" name="content" value="{{ $row->content }}">
      @else
          <input type="text" name="content" placeholder="定型文はありません">
      @endif
      <input type="submit" value="送信">
</form>
```
`$row`がある時は必ず、`content`がある程での実装となっています。


## まとめ
Laravelでカラムを取得するpluck()を通すとunicodeでエンコードされてしまうので
`$row->content`で回避するか、View川で取得すると
utf8でエンコードされた文字列が返ってきます。
どなたか`pluck()`で文字列をutf8でエンコードする方法をご存知の方はコメントお願いします!!
sshfs + osxfuse で Mac にサーバ上のディレクトリをマウント


# `sshfs` + `osxfuse` で Mac にサーバ上のディレクトリをマウント

## はじめに

仕事をしていると往々にしてサーバ上のファイルを直接いじりたい場面がある。
そんなときに便利なのが、 `sshfs` です。
サーバのディレクトリをローカルにマウントできるので、自分の好きなエディタでいじることができます。
ちなみに osxfuse は Mac のファイルシステムを操作するためのライブラリです。

## 環境

- Mac(Mojave)
- [Homebrew](https://brew.sh/index_ja)

<img width="535" alt="sshfs+osxfuse.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/30aaf052-efc6-a69a-ce28-487660a7d5bd.png">

## インストール

```bash
brew cask install osxfuse
brew install sshfs
```

## マウント

```bash
# sshfs [ユーザー名]@[ホスト名]:[ディレクトリ] [ローカルのマウントしたい場所]
sshfs takiguchi-yu@test-server001:/home/takiguchi-yu/app/src/ ~/Desktop/hogehoge/
```

## アンマウント

```bash
diskutil unmount force ~/Desktop/hogehoge/
```

## 最後に

パソコンを閉じるとマウントが切れてしまうため、自動化したい。
マウントが切れたときは、アンマウント→マウントし直すと直ります。
[SwiftUI]EnvironmentObjectの罠

`EnvironmentObject`を使っていたところ、以下のようなエラーに遭遇しました。

```
Fatal error: No ObservableObject of type **** found.
A View.environmentObject(_:) for * may be missing as an ancestor of this view.
```

これは、直前に

```swift

}
.sheet(isPresented: $isPresented) {
     ModalView(showingModal: self.$isPresented)
}

```

という操作を行っていました。ModalViewの中では呼び出し元と同じ`EnvironmentObject`を宣言していました。

## 原因

こちらを参考にしました。

https://stackoverflow.com/questions/58743004/swiftui-environmentobject-error-may-be-missing-as-an-ancestor-of-this-view
https://github.com/peterfriese/Swift-EnvironmentObject-Demo

この記事によると、`sheet`によるモーダル表示は、rootとなる`ContentView`とは全く別のツリー構造となっているようでした。

- ContentView
    - SubView
    - SubView
        - ChildView
- ModalView

というような感じです。

## 解決策

ここの`ModalView`でも同じEnvironmentObjectを使うためには、以下のようにして渡します。


```swift

}
.sheet(isPresented: $isPresented) {
     ModalView(showingModal: self.$isPresented)
        .environmentObject(someObject)
}
```
Ruby テキスト変換

Ruby を使って PHP のプログラムを変換します。
PHPの文字コードは、EUC_JP と CP51932 が混在しています。
Python は、CP51932 を取り扱えないので、Ruby で記述しました。

str_src を str_target に置き換えます。
str_src がない時は、何もしません。

```rb:file_filter.rb
#! /usr/bin/ruby
# -*- coding: utf-8 -*-
#
#	file_filter.rb 
#
#						Aug/09/2020
#
#
# --------------------------------------------------------------------
# [2]:
def read_proc(file_in)
	lines = []
	File.open(file_in) do |io|
		lines = io.readlines()
	end
#
	return lines
end
#
# --------------------------------------------------------------------
# [4]:
def convert_proc(lines)
	flag_convert = false
	str_src = '$var = $dict["aa"];'
	str_target = 'if(array_key_exists("aa",$dict)){$var = $dict["aa"];}'
	llx = str_src.size

	lines_new = []
	for line in lines do
		if line.slice(0,llx) == str_src then
			puts line
			lines_new.push(str_target)
			flag_convert = true
		else
			lines_new.push(line)
		end
#
end
#
	return flag_convert,lines_new

end
# --------------------------------------------------------------------
# [6]:
def out_proc(file_out,lines_new)
	File.open(file_out, mode = "w") do |f|
		lines_new.each{ |line| f.puts(line)}
	end
	STDERR.puts	file_out + " written ***"
end
# --------------------------------------------------------------------
STDERR.puts	"*** start ***"
file_in = ARGV[0]
#
lines = read_proc(file_in)
#
flag_convert,lines_new = convert_proc(lines)
#
if flag_convert then
	out_proc(file_in,lines_new)
end
#
STDERR.puts	"*** end ***"
# --------------------------------------------------------------------
```

実行

```bash
./file_filter.rb in01.txt
```
AzureやGoの情報を絡めた私なりのde:code 2020のセッション紹介

2020年8月8日(土)にオンラインで開催されたMicrosoft Open Tech Night主催の

- [de:code夏まつり ～よりコミュニティを楽しくするためのコミュニティのすすめ the FINAL
](https://msdevjp.connpass.com/event/183747/)

にて「[I am gaining the skills I want! 〜What inspired me to take one step for being a "Go MVP" through de:code and summer festival〜](https://www.slideshare.net/qt-luigi/i-am-gaining-the-skills-i-want-what-inspired-me-to-take-one-step-for-being-a-go-mvp-through-decode-and-summer-festival)」というタイトルで発表をさせて頂きました。

[![thumbnail](https://image.slidesharecdn.com/decode-summer-festival-final-200808075521/95/slide-1-638.jpg)](https://www.slideshare.net/qt-luigi/i-am-gaining-the-skills-i-want-what-inspired-me-to-take-one-step-for-being-a-go-mvp-through-decode-and-summer-festival)

現在GoでMVP アワードを受賞できるのは「Microsoft Azure」カテゴリーであり、de:code 2020のセッションについての発表ということで、

- Azureを知れるセッション
- 存じている方のセッション
- 知り合いの方のセッション

をピックアップして、内容紹介、私の感想、関連するGo情報などを交えて紹介しています。

興味のある方は一読して頂けると、私ながらのde:code 2020のセッションリストをAzureやGoの情報と共にお届けできると思います。

P.S. 今回のthe FINALではYAEGASHI Takeshi([@hogegashi](https://twitter.com/hogegashi))さんも登壇してくださり、Go製自作ツール「azbill」について発表して頂けました！

- [azbill: Azure 利用明細・課金情報出力 CLI の紹介 - Qiita](https://qiita.com/yaegashi/items/dfde7206f7eaf009c345)
StripeのBillingPortalを使ってみる(Rails5.2)

[StripeのBillingPortal](https://stripe.com/docs/billing/subscriptions/integrating-customer-portal)へのリンクを取得する方法です。前準備として、1.DashboardでBillingPortalの設定を済ませておくこと、2.Customer(顧客)のID(cus_xxxの部分)を予め取得しておくことが必要です。

```ruby:app/controllers/pages_controller.rb
def foo
  @ps = Stripe::BillingPortal::Session.create(
    customer: "cus_xxxxxxxx",
    return_url: request.base_url
  )
end
```

```erb:app/views/pages/foo.html.erb
<%= link_to 'Portal', @ps.url, target: "_blank" %>
```

ユーザがリンクをクリックすると以下のようなページが表示されます。デフォルトの設定では支払い履歴が見えるのみですが、設定次第でサブスクリプションの解除や支払い方法の変更などもユーザの権限で実施することが可能になります（下記画像は「サブスクリプションの解除(Cancel Plan)」を許可した状態です）。

![Screen Shot 2020-08-09 at 18.42.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50780/47fa01e9-e6ac-fefa-9349-729f584235ee.png)
Bashのターミナルで、 Reactのインストールを試みました。

#Reactを旧Macbook Airで、インストールしてみました。
<p>まず、Nodo.jsをbashで、ダウンロードして、以下のコマンドを打ちました。<br></p>
'''sudo npm install-g typescript
   /Macbookで、typescriptをinstallするには、sudをつける /
   tsc -v /typescriptのバージョンを確認/
  npm -v
  node -v
'''
<p>コマンドの過程は、後ほど追記します。
<br>コードの意味を理解して、CDNの記述にも調べてみます。</p>
Kindleから半角スペースなしでコピーする

#要約：Kindleから半角スペースなしでコピーする

1. Kindleのコピーしたい箇所をハイライト
2. 同期ボタン（ぐるぐるアイコン）を押す
3. [Kindle: メモとハイライト](https://read.amazon.co.jp/kp/notebook)からコピー
4. 行コメントが存在する行を正規表現で改行

#背景：Kindleからコピーした際に半角スペースが入る
Kindle本文中以外にソースコードが存在しないKindle本（[Spring Boot 2 入門: 基礎から実演まで](https://www.amazon.co.jp/dp/B0893LQ5KY/)）を学習している際に問題が発生した。
ソースコードをコピーすると、以下のように不要な空白スペース及び引用箇所の記述が入ってしまう。
引用で触れている環境にあたるWindows用のKindleソフト「Kindle for PC (Windows)」 よりコピーを行っている。

```text:KindleforPC(Windows)よりコピー
コード の 閲覧 は、 PC や タブレット などの 画面 が 大きい 端末 で、 ご覧 ください。（ 画面 が 小さい と、 不要 な 空白 スペース が 入っ て しまう こと が あり ます）

原田 けいと; 竹田 甘地; Robert Segawa. Spring Boot 2 入門: 基礎から実演まで (Kindle の位置No.10-11). Kindle 版. 
```
ただし、コピーで問題が発生する旨のAmazonレビューが見当たらないので、当方の環境依存で発生する問題の可能性が高い。
使用している4Kモニターが一番怪しいが、1920x1080表示にするも解決せず。


#メモとハイライトを使用しコピーする
解決しないものは仕方がないので、写経以外で解決する方法を探す。
以下の方法でコピーを行えば、不要な空白スペース及び引用箇所の記述が入らずにコピーできる。
<img width="231" alt="ハイライトして同期する.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538096/3ad3f2db-3bd9-379a-4e32-cb4c863414cf.jpeg">


1. Kindleのコピーしたい箇所をハイライト
2. 同期ボタン（ぐるぐるアイコン）を押す
3. [Kindle: メモとハイライト](https://read.amazon.co.jp/kp/notebook)からコピー

注意点として、ハイライトした箇所の最後が「Kindle: メモとハイライト」に反映されないことがある。
必要な箇所よりも先までハイライトするか、手作業で欠けた文字を追加する必要がある。

#行コメントが存在する行を正規表現で改行
コピーした文字の改行は半角スペースに変換されているため、コピーした箇所は一行になってクリップボードに保存されている。
元に戻すにはエディタの自動整形機能を用いれば良いのだが、そのままでは行コメント（// 等）が存在する行以降が全てコメントになってしまう。
「[Spring Boot 2 入門: 基礎から実演まで](https://www.amazon.co.jp/dp/B0893LQ5KY/)」のコメントはおおむね「//」の後に半角スペース1つとコメント中に半角スペースを含まないというフォーマットであったので、簡単な正規表現で改行できた。

置換対象のパラメータ：`(//[ ].+?)[ ]`
↓
置換後のパラメータ：`\n$1\n`

上記のパラメータは書籍のコメントフォーマットによって変更が必要である。
また、コピーのしやすさを考慮して半角スペースに[]を付けているが、本来は不要である。

#まとめ
1. Kindleのコピーしたい箇所をハイライト
2. 同期ボタン（ぐるぐるのアイコン）を押す
3. [Kindle: メモとハイライト](https://read.amazon.co.jp/kp/notebook)からコピー
4. 行コメントが存在する行を正規表現で改行

上述の方法でも結構面倒なので、全技術書でソースコードファイルを提供して欲しいところ。
CSSの基礎知識

#CSS基礎知識について
CSSとは Cascading Style Sheet の略である。
主にWebページをデザインするための言語で、文字の大きしゃ行間、色配置などHTMLのレイアウトに対してデザインの命令をする言語である。
##CSSの基本文法
CSSは、セレクタ{プロパティ：値；}といった記述をする。

##CSSの読み込み
CSSをhtmlに読み込むためには、htmlのheadタグないでlinkタグを用いて読み込むことができる。

###CSSのセレクタの種類は数が多すぎるので今回は割愛する
便利だと思ったものは学習次第記述していく。
ソフトウェアの分析・設計技法　データ中心分析・設計技法の特徴

平成31年春期 午前問題46

ソフトウェアの分析・設計技法の特徴のうち，データ中心分析・設計技法の特徴として，最も適切なものはどれか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/d622dd93-4c50-7619-2eb0-f3c4e9a6da15.png)

１、データ中心アプローチ(DOA:Data Oriented Approach)は、
様々な要因により変更される可能性のある業務プロセスと比較して、データが安定した資源である事に注目して、データやデータ構造を中心に据えてシステム及びソフトウェアの設計を行う手法です。

・データを中心に設計するため、データ構造の変更を伴う仕様変更は難しくなります


２、オブジェクト指向アプローチの特徴
機能を詳細化する過程で，モジュールの独立性が高くなるようにプログラムを分割していく。


３、情報の局所参照性を考えた設計手法
プログラムが最も効率よくアクセスできるようにデータ構造を設計する。


参照：
https://www.ap-siken.com/kakomon/31_haru/q46.html