OmniAICreator/Qiita-1.07M huggingface dataset:
jQuery DataTablesでタグ検索っぽいことをする

#やりたいこと

[好きなYoutubeチャンネルの動画リストを取得していたら](https://qiita.com/yuji_saito/items/8f472dcd785c1fadf666) だいぶ動画が多くなってきたので、その一覧を[DataTables](https://qiita.com/nissuk/items/7ac59af5de427c0585c5)を使ってサクサク検索できるようにしました。

やってみると検索が思いのほか便利です。

そして、動画ごとに誰が出演しているかなどのタグ付けのようなことをしたくなってきました。

#前提条件
- DataTablesを使い続けたい（DBなどを使ったシステムにしない）
- タグをクリックすると検索され一覧が絞られて欲しい
- 検索用の列とかを見せたくない


#解決方法
## タグ用データの列を用意し、消す
オプションで visible: falseを指定すると、その列は「見えなくなるが検索対象にはなる」ようので、これを利用しました。DataTablesのホスピタリティに感動しますね...。


```
jQuery(function($){
  dtable = $("#d-table").DataTable({
      order: [ [ 0, "desc" ] ],
      lengthChange: false,
      info: true,
      paging: false,
      columnDefs: [
          { targets: 2, visible: false },
          { targets: 0, width: 300 }
      ]
  });
});

```
後述のsearchを使うために、変数に入れておく必要があります。


## タグ検索っぽいことをする
タグ検索っぽい動きとしては、タグをクリックすることでその内容がSearchフォームに入って検索される、みたいなことがしたいです。
これはDataTablesでは .search("文字").draw(); という書き方で実現できます。

```
// 特定の文字列を検索フォームに渡す
clickSearch = function(kwd){
  dtable.search(kwd).draw();
}
```


あとはテーブルの上あたりに

```
<a href="#" onclick="clickSearch ('[AAA]')">AAAさん</a>&nbsp;
<a href="#" onclick="clickSearch ('[BBB]')">BBBさん</a>&nbsp;
<a href="#" onclick="clickSearch ('[A]')">Aさん</a>&nbsp;
```

という感じでタグを書いておけば完成です。

テーブルのHTMLは以下の感じとなります。非表示にするタグのヘッダも、theadには適当に記載します。

```
<table id="d-table" class="table table-bordered">
  <thead><tr><th>更新</th><th>タイトル</th><th>tag</th></tr></thead>
  <tbody>
    <tr><td>2018-08-06 20:58:51</td> <td><a href='https://www.youtube.com/watch?v=XXXXXXXX485' target='_blank'>動画485</a></td><td> [AAA]</td></tr>
    <tr><td>2018-08-05 22:39:46</td> <td><a href='https://www.youtube.com/watch?v=XXXXXXXX484' target='_blank'>動画484</a></td><td> [BBB]</td></tr>
    <tr><td>2018-08-05 20:23:31</td> <td><a href='https://www.youtube.com/watch?v=XXXXXXXX483' target='_blank'>動画483</a></td><td> [A]</td></tr>
    <tr><td>2018-08-03 18:00:03</td> <td><a href='https://www.youtube.com/watch?v=XXXXXXXX482' target='_blank'>動画482</a></td><td> [AAA],[A]</td></tr>
    <tr><td>2018-07-31 18:00:04</td> <td><a href='https://www.youtube.com/watch?v=XXXXXXXX481' target='_blank'>動画481</a></td><td> [AAA],[BBB]</td></tr>
  </tbody>
</table>
```

# できた
以上で、タグ検索っぽいことが実現できました。

![datatable.png](https://qiita-image-store.s3.amazonaws.com/0/68734/358d7244-c664-715f-0349-6c545d140474.png)


# 「っぽい」部分
タグおよびデータを、今回の場合 [] のような動画タイトルで使われていないような記号で囲むことで動画タイトルに対しては事実上検索に引っかからないようにしています。また、タグ同士で部分一致も起きないようになっています。

この辺の泥臭さが「っぽい」部分となります。

ゆえに正式にサービスとして提供するには気乗りしなさがありますが、社内システムや社内ツールなどで開発速度と利便性を重視する場合は良いかもしれません。

サーバーサイドプログラミングやRDB等が不要でこうしたことが出来るのは一定のメリットがあるかもしれません。


# 余談
HTML上どうしても列を増やしたくない場合、、、どんな場合かは知りませんが、、、は今回のテーブルの「タイトル」のデータの後ろあたりにタグ用データをdisplay:noneでねじ込むことで同様のことができます。

```
<td><a href='https://www.youtube.com/watch?v=XXXXXXXX481' target='_blank'>動画481</a><span style='display:none'>[AAA],[BBB]</span></td>
```
AWS IAM でユーザー作成してページ遷移したらセッション追い出されてログインできなくなって終わった

# 過程
AWS Cloud9でGitHubのSSH接続するためにIAMに公開鍵を登録する新規ユーザーを作成したらページ遷移の際にセッションを追い出され、生成したパスワードを拾えていなかったのでそのままAWS一切のサービスにログインできなくなった。
ちなみに参考にしていたページはこちら。
https://qiita.com/acecrc/items/8e17b08c4fb0b4d9c9f9

# 回避
よく見るとログイン欄の下に "Login using AWS root user account" みたいなリンクがあって、そこから元のようにログインすることができた。しかしそこからユーザーのパスワードを変更しようにも、 current password がわからないので変更できない。

# 解決
root user accoutでログインした状態で、「ユーザー」から自身のユーザーアカウントを選択し、コンソール用のパスワードを変更したらできた。

# 解消
ひょっとしたら普通にGitHubに公開鍵登録したらいけるんじゃ、と思ってやってみたら　git pushするときに暗号の形式が違うけど大丈夫ですかって聞かれただけで普通にpushできた。本当に非クラウド上でやるのと同じやり方でできたらしい。どうりでググっても解説が見つからないわけだ…。
WatchKitを試してみる１　iPhoneとApple Watchで通信しあってみる

ようやくAppleWatchを手に入れたので色々試してみるシリーズ（にしたい）

最初によくあるサンプルとしてiPhoneとAppleWatchでお互いの持つ数字をカウントアップしていくやつをbackground状態の時には通知するようにしてみる。

で作ったものが[こちら](https://github.com/rnsm504/WatchKitSample)(githubへのリンク）

1. ボタンを押して３から４にカウントすると、ロック画面のAppleWatchで

<img width="386" alt="スクリーンショット 2018-08-09 01.01.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/40693/0ce5b12f-5903-6f08-fbed-3d9caa886c10.png">

2.カウントの変数を表示する通知がくる

<img width="215" alt="スクリーンショット 2018-08-09 01.02.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/40693/fa96c75f-20b7-daed-346a-7564d92bcac3.png">

<img width="223" alt="スクリーンショット 2018-08-09 01.01.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/40693/4b7d25bb-3513-eab6-33de-1d1e6f968137.png">

3. 逆にAppleWatchでカウントをあげると（８から９）

<img width="203" alt="スクリーンショット 2018-08-09 01.08.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/40693/cae1ca60-d236-5e7a-7519-965d1ee91a02.png">

4.iOS側のアプリがアクティブ出ない場合は通知がくる（なぜか9ではなく８だが・・・）

<img width="348" alt="スクリーンショット 2018-08-09 01.08.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/40693/ffaa7df0-3957-35c5-0ade-76f578fb6dd5.png">


ここまでやっての課題としては

1. iOS側のアプリが完全に落ちている場合は通知が来ない。wcsessionでそこは解決できる？

2.通知でios側のカウントが更新される前のカウントの値が出るのはなんなのだか・・・

上記の問題は（特に１は）解決しておきたいけど、一旦おいて次はGPS周りをいじってみたい

#### 参考
[Apple WatchアプリをSwiftで開発](http://ascii.jp/elem/000/001/028/1028217/)
cats.data.Reader使い方メモ

走り書き

```scala
trait Repository {
  type ResultMonad[_]
  def fetch(): ResultMonad[Int]
}
```

```scala
class OnMemoryRepository extends Repository {
  override type ResultMonad[A] = cats.Id[A]
  override def fetch(): ResultMonad[Int] = 3 // 戻り値は適当
}
```

```scala
class RDBRepository extends Repository {
  type Connection = String // Stringをコネクションだと思ってください…
  override type ResultMonad[A] = Reader[Connection, A]
  override def fetch(): ResultMonad[Int] = Reader { _.toInt }
}
```

```scala
import cats.implicits._

class Service[Repo <: Repository](val repo: Repo) { // 型パラメタをなくすとrepositoryの戻り値型が曖昧になってしまう…なぜ…
  import repo._
  def use()(implicit F: cats.Monad[repo.ResultMonad]): repo.ResultMonad[Int] = for {
    a <- repo.fetch()
    b <- repo.fetch()
  } yield { a + b }
}
```

```scala
val r: Int = new Service(new OnMemoryRepository()).use // => 6 
val h: Int = new Service(new RDBRepository()).use.run("3") // => 6
```

ResultMonadがMonadである保証をしたい、、、
背景が透過しているDialogをつくる

この前書いた記事
[爆速でfloat menuを作ってみた](https://qiita.com/ikarosu_chihaya/items/ed6487440e9187555cdf)
今回、float menuをタップしたらDialogを出したい。

## ServiceからDialogを出す
ServiceからDialogを出すにはDialog用のActivityを作る必要がある。

```kotlin:FloatMenuService.kt
//「爆速でfloat menuを作ってみた」で書いたFloatMenuService.ktの最後
        floatMenuView.setOnClickListener {
            //タップした時の処理
            //Intentを作ってActivityを立ち上がる
                val intent = Intent(this, DialogActivity::class.java)
                intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK
                application.startActivity(intent)
        }
```

Dialog用のActivityを作る

```kotlin:DialogActivity.kt
class DialogActivity : FragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val fragment = DialogFragment()
        fragment.show(fragmentManager , "alert_dialog")
    }
}
```

作ったActivityをAndroidManifestに追加する

```xml:AndroidManifest.xml
        <activity
            android:name=".DialogActivity"
            android:screenOrientation="portrait"
            android:theme="@android:style/Theme.Translucent.NoTitleBar"
            />
```

Dialogを表示するFragmentを作る

```kotlin:DialogFragment.kt
class DialogFragment : DialogFragment() {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val builder = AlertDialog.Builder(activity)
        val dialog = builder.setTitle("Dialog").setMessage("うんうん、それもまたアイカツだね！").create()
        dialog.setCanceledOnTouchOutside(true)

        return dialog
    }

    override fun onStop() {
        super.onStop()
        activity.finish()
    }
}
```
### こんな感じになった
![Untitled.gif](https://qiita-image-store.s3.amazonaws.com/0/165424/0a0c2bad-06fd-c64b-ba53-ff6b2c9b7bf0.gif)

あれ、背景が透過しているけど...何故かMainActivityがバックグラウンドから立ち上がったのか...イメージしたものと若干違うね

### MainActivityを立ち上がらないようにする
どうやらこれはActivityの起動方法`android:launchMode`に関係があるらしい
https://developer.android.com/guide/topics/manifest/activity-element?hl=ja#lmode
今回の条件を満たすためには`android:launchMode`を`singleInstance`に設定する必要らしい
公式の説明
> singleInstance:システムが、インスタンスを保持しているタスクで他のアクティビティを起動しないことを除いて、"singleTask" と同じです。 アクティビティは常に、そのタスクの唯一のメンバーです。

singleInstanceの設定によってDialogActivityとMainActivityが同じタスクではなくなって、別々のタスクとして動いてるので、DialogActivityを呼び出されたときMainActivityはまだバックグラウンドにいることになった。
一行を足してこんな感じになった

```xml:AndroidManifest.xml
        <activity
            android:name=".DialogActivity"
            android:screenOrientation="portrait"
            android:theme="@android:style/Theme.Translucent.NoTitleBar"
            android:launchMode="singleInstance"             
        />
```

![Untitled.gif](https://qiita-image-store.s3.amazonaws.com/0/165424/d9d667b0-4f00-d079-d268-709b93511010.gif)

### 今回のまとめ
1. ServiceからDialogを出したい時はActivityから出す必要がある
2. LaunchModeをやりたいことによってちゃんと設定しましょう〜
VSCodeで改行をCtrl+mに割りあてる

# 2025年5月追記：そもそも

VSCodeでC-mをEnterにしたい人は、どんな環境でも使いたいと思うから、AutoHotKeyを使った方がいいと思います。

```
^h::Send,{Backspace}
^m::Send,{Enter}
```

こんな感じのスクリプトでいいでしょう…っていうか^hの説明は不要だよね？

# 結論

改行コードをVSCodeに送ればいいだけだった！

## 経緯

VSCodeで、C-hにBSとC-mに改行を割りあてたかった。
C-hは素直にできたものの、C-mに相当するものがなく、検索しても結論は見つからなかった。
`editor.action.insertLineAfter`で妥協している方もいらっしゃるかと。

しかしVSCode日本語公式の[キーバインディングにあるコマンドの引数](https://vscode-doc-jp.github.io/docs/getstarted/keybindings.html#%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%AE%E5%BC%95%E6%95%B0)を読んでみると、文字列をエディタに出力する具体例が載っているではないか！

そこで実際に試してみた。

```json:keybinding.json
[
    {
        "key": "ctrl+m",
        "command": "-editor.action.toggleTabFocusMode"
    },
    {
        "key": "ctrl+m",
        "command": "type",
        "args": { "text": "\n" },
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+h",
        "command": "-editor.action.startFindReplaceAction"
    },
    {
        "key": "ctrl+h",
        "command": "deleteLeft",
        "when": "editorTextFocus && !editorReadonly"
    },
]
```

これで、C-mに改行の動きを割りあてられます。

## 捕捉：改行コード

VSCodeのユーザー設定 `files.eol` で設定している形で改行コードは保存されるので問題ないようです。
できた喜びのテンションで書いているので、何らか不足している部分がありましたらご指摘ご教示をお願いします。
smartyの使い方（自分用メモ）

職場で使うのでちょっと事前に動作を確認

#smartyをcomposerでrequireする

```
composer require smarty/smarty
```

#templateの作成

```test.tpl
{* コメント *}

{* 変数 *}
{ var }

{*連想配列 *}
{marray.hoge}
{marray.huga}
```

#php側による実装

```run.php
require_once 'vendor/autoload.php';

$smarty = new Smarty();
$smarty->setTemplateDir('./templates/');

$marray = array(
  'hoge' => 'hogeです',
  'huga' => 'hugaです'
);

$smarty->assign('var', 'スマーティてす');
$smarty->assign('marray', $marray);

$smarty->display('test.tpl');
```

#templateの結合

```header.tpl
<title>hogehoge</title>
```

```test2.tpl
{include file = 'header.tpl'}
{var}
{marray.hoge}
{marray.huga}
```
まあ、`{include file = 'path'}`を使えばおｋ
<header>と<body>を分割して使いまわす際とかに使いましょう
node.jsのシリアル通信で制御文字(STX,ETX)を送信する

#概要
node.jsである機材にシリアル通信を送る。
ただし、制御文字を使用して一定の信号位置を開始位置として送り、一定の信号位置を終了位置としてバイトデータを機材に送る。
制御文字はディスプレイには表示されない。

#用語の意味
**STX**
start text

**ETX**
end text

**RS-232C**
シリアル通信の規格
他の規格としてRS-422A・RS-485がある。
RS-232Cは一般に普及した規格でパソコンに標準に搭載されているとのこと。
[RS-232Cとは？ | 福福電子工房Webサイト](https://www.fukufukudenshi.jp/v2/RS-232C/)

**シリアル通信**
データを1ビットずつ連続的に送受信する通信方式

#全コード
下記に意味を記載

```send-serialport.js
const SerialPort = require('serialport');

const port = new SerialPort('/dev/tty.usbmodem14621', {
  baudRate: 9600,
  dataBits: 8,
  parity: 'none',
  stopBits: 1
});

// 2バイト(0と1を送る)
let inByte = [0x30, 0x31];

// 4バイト(合計,STXとETXを追加して送る)
let bufferArray = [0x02, ...inByte, 0x03];
let sendBuff = Buffer.from(bufferArray, 'ascii');
// console.log(Buffer.from(bufferArray, 'ascii').toString());
// 01
// console.log(Buffer.from(bufferArray, 'ascii').length);
// 4

// シリアル送信
port.write(sendBuff);
```

#node.jsでシリアル通信を使用
まずはnpmから必要なパッケージをインストールする。
今回は[serialport](https://www.npmjs.com/package/serialport)を使用する。

パッケージの読み込みとインスタンス化

```send-serialport.js
const SerialPort = require('serialport');

const port = new SerialPort('/dev/tty.usbmodem14621', {
  baudRate: 9600,
  dataBits: 8,
  parity: 'none',
  stopBits: 1
});
```
**各オプション**
・**baudRate(バーレート)** -> 1秒に送るbps(bit Per Second)、bps/s
・**dataBits** -> データの長さ(今回は8ビット)
・**parity** -> データの誤りの検出に使用、EVEN(偶数)、ODD(奇数)、NONE(無し)
バイト中（ビット）の1の数を偶数または奇数に揃えてデータの誤りを判別する（通常のビットにパリティビットが追加される）
・**stopBits** -> ストップビットに何ビット使用するか(1, 1.5, 2の設定がある)
ビットを送る前と送り終わった後にビットを送っている。ただしスタートビットは1で固定であるため、オプションに設定項目はない。

以下、参考記事
[シリアル通信の基礎知識 | コンテック - Contec](https://www.contec.com/jp/support/basic-knowledge/daq-control/serial-communicatin/)
[技術レポート「シリアル通信とは？」](http://www.softech.co.jp/mm_050907_firm.htm)

#データを送信する
```send-serial.js
// 2バイト(0と1を送る)
let inByte = [0x30, 0x31];

// 4バイト(合計,STXとETXを追加して送る)
let bufferArray = [0x02, ...inByte, 0x03];
let sendBuff = Buffer.from(bufferArray, 'ascii');
// console.log(Buffer.from(bufferArray, 'ascii').toString());
// 01
// console.log(Buffer.from(bufferArray, 'ascii').length);
// 4

// シリアル送信
port.write(sendBuff);
```

今回はASCIIコードでSTX + 01 + ETXを4バイトで送信。
node.jsのBuffer.fromはデフォルトでutf8なのでasciiの引数を設定。
0と1だけを送るのでasciiに指定しました。文字を送る時はutf8ではないと文字がない。

以下、コード表
[ASCIIコード表](https://seiai.ed.jp/sys/text/cs/chp02/c02a010.html)
[UTF8コード表](https://seiai.ed.jp/sys/text/java/utf8table.html)

#まとめ
数字だけ送るなら上記で大丈夫だと思います。
文字を送るなら文字列をバイトに変換して送った方がいい。
(UTF8で色々やろうと思うと大変そうな気がする)

node.jsでSTXとETXを送る記事がなかったと思うので、誰かの参考になれば幸いです。
また、間違えてる箇所がありましたらコメントください。
Goで文字列を逆順にする方法とイミュータブルについて


## サンプルコード
この記事を参考にしました

* [Go言語で文字列を逆順に並び替える - Misc Notes](http://y0m0r.hateblo.jp/entry/20131008/1381244919)

```go
func reverse(s string) string {
	rs := []rune(s)
	for i, j := 0, len(s)-1; i < j; i, j = i+1, j-1 {
		rs[i], rs[j] = rs[j], rs[i]
	}
	return string(rs)
}
```

GoってRubyみたいに`"hoge".reverse`で簡単に文字列を逆順にできないみたい。自前で関数実装するのはやや大変ですね。

## 以下余談
上記で出てくる runeについては以下が参考になります。

* [はじめての Go 言語 (on Windows) その4 - Qiita](https://qiita.com/spiegel-im-spiegel/items/556166b6631c0369754f)

Go言語のstring型は**イミュータブル**なので**ミュータブル**なrune型にしないといけないです。そのため、上記の`func reverse`では引数のstringをいったんrune型にしてるんですね

### ミュータブル/イミュータブル？
ミュータブル(mutable）は英語で「可変」という意味です。mutableに否定を表す接頭語imをつけることでイミュータブル(immutable)つまり「不変」という意味になります。(例：possible/impossible)

じゃあプログラミング言語的にはどういう意味かというと・・・？

* [イミュータブル - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%9F%E3%83%A5%E3%83%BC%E3%82%BF%E3%83%96%E3%83%AB)

>イミュータブル (英: immutable) なオブジェクトとは、作成後にその状態を変えることのできないオブジェクトのことである。対義語はミュータブル (英: mutable) なオブジェクトで、作成後も状態を変えることができる。

まぁザックリいうとイミュータブルなオブジェクトだと定数的な扱いになって、再代入とかできないんですね。

### え？なんでそんなメンドクサイの使うの？
って思ったのでまたまた調べてみると以下のエントリにアンサーが。

* [「オブジェクトをイミュータブルにしろ」って言うけど、それってたとえば状態が変わったらオブジェクト作り直すってことでしょ、ちょう非効率じゃん。って思ってたんだけど、 - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く](https://nekogata.hatenablog.com/entry/2013/06/15/013752)

なるほど**コピーの際に参照をそのまま使えるのは実行速度に大きく影響しそう**ですね・・・！

先ほどの[Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%9F%E3%83%A5%E3%83%BC%E3%82%BF%E3%83%96%E3%83%AB)にも以下の記述が

> イミュータブルなオブジェクトは**マルチスレッドプログラミングにおいても有用**となる。データがイミュータブルなオブジェクトで表現されていると、複数のスレッドが他のスレッドにデータを変更される心配なくデータにアクセスできる。つまり排他制御の必要がない。よってイミュータブルなオブジェクトのほうがミュータブルなものよりスレッドセーフであると考えられる。

**マルチスレッドを使用する場合に排他制御などのオーバヘッドを削減する効果**があるようです。

Goは実行速度が速く、ゴルーチンのように並列処理を容易に記述できる利点がありますが、その背景にはイミュータブルという概念が活用されているんですね！

## イミュータブルまとめ

Rubyのように「文字列をはじめとするオブジェクトがミュータブルな言語」に慣れていると、Goの文字列処理はとっつきにくいですね。しかし、意味や利点まで理解していると、すんなり受け入れられそうです。

ミュータブルだと**記述が少なく**なりますが、**大規模開発だと気づきにくいバグを生み出したり実行速度が遅くなる**可能性があります。一方でイミュータブルだと**記述が多く**なってしまいますが、**大規模になってもバグが生まれづらくマルチスレッドの活用やメモリ効率**の面で利点があるようです。

趣味で気ままに一人で書くにはRubyが向いていて、複数人でお仕事するにはGoが向いてるのかな？

あまり詳しくないので、もし補足などあればコメントいただけると幸いです！
Dell G3にUbuntu18.04を入れてみる

~~先に結論書いておきます。
nVidiaドライバ入れるところで苦戦中です。~~

解決しました。

#Dell G3にUbuntu18.04を入れてみる
せっかくGPU入りのノートを買ったからubuntuを入れてAIやってみようと思った。

##DELL公式で調べる
https://www.dell.com/support/article/jp/ja/jpdhs1/sln151664/%E3%83%87%E3%83%ABpc%E3%81%ABubuntu-linux%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95?lang=ja
に乗ってるとおりに

https://certification.ubuntu.com/certification/desktop/
を確認してみるとDell G3は見当たらず

G5は行けると書いてあるからまあいいかと思って進める。

##インストール
とりあえずUbuntu18.04LTSのisoをCDに焼いてUEFIでセキュリティーブートをOFFにして、Live起動・・・・せず。
ロゴの下の点の点滅のまま途中で止まった。

ググってみるとnVidiaのGPUだと起動しないことがあるらしいので、GRUBの選択でeでオプション指定
nomodesetを追加してもう一度、今度は起動した。

その状態で適当にHDD側にパーテーション切って最小インストール
で、CD抜いて再起動。

また起動オプションでnomodeset追記してしないと起動しなかったのでやっとく。

##カーネルアップデート
確認してみるとBTは生きているのにWLANが認識してない。
WLANの型番でググるとLinuxのファームウェアで認識しないバグがあるとかでてくる。

とりあえず、有線つないで```sudo apt-get update``` ```sudo apt-get dist-upgrade```でカーネルを最新にしてみる。
おー、WLAN認識した。

##nVidiaドライバインストール
```sudo add-apt-repository ppa:graphics-drivers/ppa
sudo apt-get update
```
で見つかるバージョンは2つ。だがどちらも有効にすると起動しない。

##他の方法を探す
https://linuxconfig.org/how-to-install-the-nvidia-drivers-on-ubuntu-18-04-bionic-beaver-linux
こっちに書いてある方法を試してみる
```sudo apt update
sudo ubuntu-drivers autoinstall
```
であっさりうまくいきました。

```
$ nvidia-smi
Sat Aug 11 11:23:07 2018       
+-----------------------------------------------------------------------------+
| NVIDIA-SMI 390.48                 Driver Version: 390.48                    |
|-------------------------------+----------------------+----------------------+
| GPU  Name        Persistence-M| Bus-Id        Disp.A | Volatile Uncorr. ECC |
| Fan  Temp  Perf  Pwr:Usage/Cap|         Memory-Usage | GPU-Util  Compute M. |
|===============================+======================+======================|
|   0  GeForce GTX 105...  Off  | 00000000:01:00.0 Off |                  N/A |
| N/A   42C    P5    N/A /  N/A |    377MiB /  4040MiB |      3%      Default |
+-------------------------------+----------------------+----------------------+
                                                                               
+-----------------------------------------------------------------------------+
| Processes:                                                       GPU Memory |
|  GPU       PID   Type   Process name                             Usage      |
|=============================================================================|
|    0      1485      G   /usr/lib/xorg/Xorg                           157MiB |
|    0      1748      G   /usr/bin/gnome-shell                          81MiB |
|    0      2605      G   ...-token=CD43042BB502086F760346BCA870A055   136MiB |
+-----------------------------------------------------------------------------+
```
入ったバージョンは390.48。

多分、必要なパッケージが入ってくれたものと思われる。自動バンザイ。
##まとめ
- 起動画面でブラックアウトしたらgrub選択画面でe押して、nomodeset追記
- ```apt dist-upgrade```でLinuxKernelを最新にする
- ```ubuntu-drivers autoinstall```で自動インストール

でうまく行くこともあるよ。
Genetic Algorithm チュートリアル

本稿では、遺伝的アルゴリズムの基本的な考え方とそのフローチャートについて述べる。 簡単な数学的平等問題を解決するための遺伝的アルゴリズムの段階的数値計算を簡単に説明する

フルペーパーはここからダウンロードできます：
https://arxiv.org/abs/1308.4675
WebサイトにSSLを導入する(CentOS7+nginx1.15+Let's Encrypt)

# 概要
CentOS7+nginx1.15+Let's Encryptを利用し、WebサイトにSSLを導入する。

※Let's Encryptとは
SSLサーバー証明書(以下、証明書と記載)を無償で取得・更新できるサービス。

# 対象環境
OS：CentOS7.5
Web：nginx1.15

# 前提
* SSL化したいドメインの名前解決ができること。
* SSL化したいドメインでWeｂサーバにアクセスできること。
* ８０番&443番ポートが開放されており、外部からアクセスできること。

```terminal
ポート開放
# firewall-cmd --zone=public --add-service=http --permanent
# firewall-cmd --zone=public --add-service=https --permanent
# firewall-cmd --reload

ポート開放確認
# firewall-cmd --list-all

リストの中に「http」「https」があれば、ポート開放されている。
services: ssh http https
```

# 手順
## Let's Encryptをインストールする。

```terminal
任意のディレクトリに移動。
# cd /usr/local

Let's Encryptをcloneする。
# git clone https://github.com/certbot/certbot

cloneしたディレクトリに移動する。
# cd letsencrypt

インストール
# ./letsencrypt --help
```

## 証明書を発行する。
```terminal
nginxを停止する。
# systemctl stop nginx

証明書を発行する。
ドメイン名やメールアドレスの入力、規約の同意を求められるので入力する。
※スタンドアローンモードで証明証を発行する。
# ./certbot-auto certonly --standalone -t

Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator standalone, Installer None
Please enter in your domain name(s) (comma and/or space separated)  (Enter 'c'
to cancel): xxxxxxxxxxxxxxxx.com

~~

Obtaining a new certificate
Performing the following challenges:
http-01 challenge for xxxxxxxxxxxxxxxx.com
Waiting for verification...
Cleaning up challenges

以下のように「Congratulations!」と表示されれば証明書の発行は完了。
IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:

~~
```

## nginxを設定する。
### confファイルに設定を追加する。


```terminal:/etc/nginx/conf.d/default.conf
server {
  ~~
  listen 443 ssl;
  ssl_certificate     /etc/letsencrypt/live/xxxxxxxxxxxxxxxx.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/xxxxxxxxxxxxxxxx.com/privkey.pem;
  ~~
}
```

## 動作確認
### nginxを起動する。

```terminal
# systemctl start nginx
```

### ブラウザで表示を確認する。

SSL導入前
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269537/aa81947e-ffef-a2a1-063c-60cee2eaf50b.png)

SSL導入後
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269537/31162aa9-7c26-5646-8b41-37bba4b48cef.png)

## 証明書の自動更新
### cronで自動更新の設定
Let's Encryptで取得した証明書は有効期限が90日のため、定期的に更新処理を実行する必要があります。
※cron設定の手順は割愛します。

```terminal
# 毎月1日の1時に更新処理を実行する。
0 1 1 * * root systemctl stop nginx && cd /usr/local/certbot/ && ./certbot-auto renew && systemctl start nginx
```


# まとめ
検索エンジンやら外部API連携やらでSSL(HTTPS)が必須になってきているので、このあたりの操作には慣れておきたいですね。

# 参考
[Let's Encrypt 総合ポータル](https://letsencrypt.jp/usage/)
php-master-changes 2018-08-08

今日はもっと少ない……！

# 2018-08-08
## carusogabriel: Remove invalid SKIPIF sections and make more tests run
- https://github.com/php/php-src/commit/f47cdd1ee0246b1d594de9ec29ce12c5279bc421
- ext/intl のテストスキップにスキップ理由を添えた
- ext/phar の無効な SKIPIF （スキップしてもしなくても死ぬ）を修正
    - このテスト元の意図がよく分からないけど考えても分からなさそう感

## carusogabriel: Remove more unecessaries percent signs
- https://github.com/php/php-src/commit/953e28a92c35b81f768ae08451f6e9da6b168e51
- %s の出力フォーマット指定子に対応して文字列リテラルを与えているイミフな箇所を修正
仮想環境上のLaravelサイトがChromeでプライバシーエラーになる

## 現象
Homesteadで仮想環境を構築し、GoogleChromeでHome画面を確認しようたところ、「この接続ではプライバシーが保護されません」というエラーが発生してしまいました。
Safariでは閲覧できるのですが、メインブラウザがChromeであることもあり、なるべくならChromeで見られるようになりたい……
![01.png](https://qiita-image-store.s3.amazonaws.com/0/257037/98ed5f41-13f7-5a37-c312-e8c8ea3c719e.png)

##### ★開発環境
- Laravel 5.6
- Ubuntu18.04.1(Homestead7.14)
- MacOS High Sierra 10.13.6

## 解決策
Developer ToolsのSecurityタブを開き、「View Certificate」を押下します。
![02.png](https://qiita-image-store.s3.amazonaws.com/0/257037/871fb1c2-5b2d-1a54-9f82-515d37cfc9b4.png)

すると、エラーが発生しているページの証明書が出てくるので、ドラッグ＆ドラップでローカルに保存します。
(今回はデスクトップに保存しました)
![03.png](https://qiita-image-store.s3.amazonaws.com/0/257037/da0bef06-8792-e033-761d-4b0eb5625fa4.png)

保存したページ証明書をさらにキーチェーンアクセス(アプリケーション＞ユーティリティ内にあります)の「システム」配下にドラッグ＆ドロップ。
![04.png](https://qiita-image-store.s3.amazonaws.com/0/257037/1af74378-ed1e-bcf1-0da2-69dc82610b84.png)

キーチェーンアクセスに追加した証明書をクリックし、「▼信頼」の中にある「この証明書を信頼するとき」を「常に信頼」に変更します。
(ここを変更したときに「SSL」以下の項目も自動で「常に信頼」に変更されると思います。必要に応じ変更してください)
![05.png](https://qiita-image-store.s3.amazonaws.com/0/257037/42a15fa0-d1cf-1df5-20ec-3180fa1063bb.png)

証明書の設定ウィンドウを閉じ、Chromeを再起動します。
もう一度開いてみると、アクセスできるようになりました！
![06.png](https://qiita-image-store.s3.amazonaws.com/0/257037/843e8761-c612-d8d5-234d-b075e833b0f7.png)


##### ※参考リンク
[Using self-signed SSL certificates with Postman](http://blog.getpostman.com/2014/01/28/using-self-signed-certificates-with-postman/)(英文サイト)
Windows・Linuxの場合の解決策も記載されています。
エラー "Email translation missing: ja.activerecord.errors.models.XXX.YYY.ZZZ"の対応


個人備忘録。

例えば、
email has already taken みたいな文言(ここではエラーメッセージ)を日本語に変換するために、
翻訳ファイル(yml)を参照しようとしてる。

※翻訳ファイルのパスは大体こんなん

rails-root/config/locales/ja.yml

でもそのymlの中に
email has already takenが定義されていないから
翻訳できなかったよ。
というメッセージ。

エラーメッセージのとおり、
翻訳ファイルに該当のキーを定義すれば解決する。

何かあればコメントください。
続編２：Google Homeからも水やりできるように機能追加（前編：夏休みの工作におススメ！自動水やり機（Obniz＋電動灯油ポンプ）の製作）

#概要
前回の
[夏休みの工作におススメ！自動水やり機（Obniz＋電動灯油ポンプ）の製作](https://qiita.com/keicafeblack/items/7c667d5a9dcab9f56dd3)
をパワーアップさせて、Google Homeからも自動水やり機を操作できるようにしました。

#システム構成
Google Home　→　IFTTT →Obnizサーバー→Obniz→電動石油ポンプ
![GoogleHome.JPG](https://qiita-image-store.s3.amazonaws.com/0/181708/7fe46fbd-8342-f414-5095-18992d59206d.jpeg)

#構築手順
###①Obnizeでイベントを作成
「きっかけ：WebHook」にして、URLをコピーしておく
![GoogleHomeEvent.JPG](https://qiita-image-store.s3.amazonaws.com/0/181708/1b9d4201-22ae-908a-d82a-8bee8f98d52e.jpeg)

###②IFTTTに先ほどのURLをセットする
![GoogleHomeIFTTTT.JPG](https://qiita-image-store.s3.amazonaws.com/0/181708/4818353e-7cb6-3bb3-7361-d99b0fd3da47.jpeg)

詳細説明は下記Obniz公式ページをご参照ください。
>[WebhookでIFTTTとつなぐ](https://obniz.io/doc/lessons_ifttt)

#感想
自動水やりのプログラムは前編で作っていたため、上記の設定は10分程で完成しました。
「音声で操作して、植木の水やりをする」
ということが手軽にできて楽しかったです！
多態性

すっきりわかるJava入門のp491からp592を読んで特に納得できた多態性について書きます。

#多態性(ポリモーフィズム)とは
多態性とはざっくり言うと、厳密には違う複数の似たようなものを同じものとして扱うことができる概念です。参考書にはお札(紙幣)で例えてありました。
原始人に1万円札を渡すと、絵の描いてある紙だと捉える。これを見て楽しむことはあってもなにかに使えるとは思わない。
人間に1万円札を渡すと喜ぶ。なぜならその紙が紙幣であり、ものと交換できるのを知っているから。
こんな感じです。
要するに「同じものでも違う捉え方ができる」、「それを何と捉えるかによって利用方法が変わる」ということです。
継承関係で表すと、紙←絵の描いてある紙←紙幣という感じでしょうか。
紙は水をふき取るというメソッドを持ってます。絵の描いてある紙は加えて見て楽しむというメソッドを持ちます（絵を見ても楽しめないという人は今回考慮しません。人は皆絵を見て楽しみます。）。そして紙幣は前者2つのメソッド＋物と交換できるというメソッドが加わります。重要なのは紙幣にも「水を拭く」「見て楽しむ」メソッドがあるということです。紙幣を何と捉えるかによって使用用途が増えるのです。
コンピュータには紙を何と捉えさせるかこちらが指定する必要があるみたいです。

#多態性のメリット
具体的にどういった場面で多態性の概念が役に立つのか、参考書のコードを使って説明します。

```
public class Main { 
  public static void main(String[] args){
	Character[] c = new Character[5];

	c[0] = new Hero();
	c[1] = new Hero();
	c[2] = new Thief();
	c[3] = new Wizard();
	c[4] = new Wizard();

	//宿屋に泊まる
	for (Character ch :c ) {
		//HPを50回復
		ch.addHp(50);	
	}
  }
}
```
この参考書はRPGを作っているという設定のコードが書いてあります。
職業がバラバラの5人のパーティが宿屋に泊まり、全員のHPを50回復するという処理を行っています。
職業のクラス(Hero、Thief、Wizard)は全てCharacter型を継承しているものとします。
ここでは、それぞれの職業のクラスのインスタンスを全てスーパークラスのCharacter型のcという配列に格納しています。そしてこのcの要素のをfor文で回し、職業クラスが持っているaddHpというメソッドでHPに50を足しています。
この、スーパークラス型の変数にサブクラス型のインスタンスを格納できるということが、多態性の特徴であり、メリットです。厳密には違うクラスですが、代入ができます。
もしこれができない仕様だった場合、それぞれの職業クラスのそれぞれのインスタンスのHPを50回復するという処理を1行ずつ書かなくてはなりません。インスタンスが1000個とかになると大変です。
このように、似たようなものをざっくりと同じものとして捉えることで、プログラマーが楽をできるというのが多態性です。

#まとめ
多態性とは違うものをざっくりと同じものとして捉えられる性質。
逆に言えば、同じものを少し差異をつけて、違うものとして扱うこともできる。
この性質により、プログラマーはさまざまなメリットを享受できる。
OculusGoでZipを解凍する方法

OculusGoはAndroidなので、Windowsとは違ったZIP解凍の手法が要求される。
ここでは方法を2つ紹介する。

環境: Unity 2018.1.5f1 (64-bit) Personal / OculusUtilities(1.26.0 2018/06/20)

# 事前設定

以下設定を行う。
この設定によって「端末内の写真やファイルへのアクセス許可」を得ることができる。

	Edit>Project setting>PlayerSetting
		OtherSetting
			Configration
				Write Permission: External(SD Card)

# 方法1. UnityZipを使う

https://github.com/tsubaki/UnityZip
へアクセスし、Clone or DownloadからDonloadZIPを選択してダウンロード。

解凍して\Assets\Pluginsを使いたいプロジェクトへコピー
unityを起動して、エクスプローラーからAssetsペインにドラッグ＆ドロップ

以下コードでwindowsでもiOSでもandroid(OculusGo)でも圧縮解凍できる。
とても簡単だが、大きいファイルを解凍すると終わるまで反応が帰ってこない。

```c#
string zipPath = Application.temporaryCachePath + "/dir/sample.zip";
string[] files = new string[]{ Application.temporaryCachePath + "/dir/target.txt" };
ZipUtil.Zip (zipPath, files);

string exportLocation = Application.temporaryCachePath + "/export";
ZipUtil.Unzip ( zipPath, exportLocation);
```

# 方法2. DotNetZip(Ionic.Zip.dll)を使う方法

## 概要

参考URL: https://qiita.com/satotin/items/39af44667c86db1e4069

方法1のUnityZipがWindows環境で解凍をするときに使っているDotNetZip(Ionic.Zip.dll)は、実はunityプロジェクトだとAndroid(OculusGo)上でも動く。
おそらく.netの世界で解凍処理を全部やっているためだと思われる。

DotNetZip は多くの機能を持っており、解凍せずにファイル一覧を得たり、解凍の進捗を表示したりすることができるが詳しい使い方はここでは説明しない。(DotNetZipの使い方自体はググれば出てくる)

## 利用方法

Ionic.Zip.dllは上のUnityZipに含まれているので、それを/pluginsに入れておく。

それだけだと利用するときに「Encoding name 'IBM437' not supported. Parameter name:name」というシステムエラーが出て落ちてしまう。
(unityインストールフォルダ)\Editor\Data\Mono\lib\mono\2.0\I18N.West.dll
……をコピーして、それも/pluginsに入れておくことで解決する。

### ファイル名一覧を取得し、解凍する

```C#
using(Ionic.Zip.ZipFile zip = Ionic.Zip.ZipFile.Read(file)) {
	foreach (Ionic.Zip.ZipEntry entry in zip) {
		Debug.Log(entry.FileName);
		entry.Extract(exportPath);
	}
}
```

### 解凍せずに中身を読む

```C#
using(Ionic.Zip.ZipFile zip = Ionic.Zip.ZipFile.Read(file)) {
    Ionic.Zip.ZipEntry entry = zip[0];
	using (var st = entry.OpenReader()) {
		var reader = new System.IO.StreamReader(st);
		// ...
	}
}
```

### zip書庫内ファイル名に日本語があっても文字化けしないようにする

参考URL: https://qiita.com/koukiwf/items/538aa8240187a249e316

上記コードでは省略していたが、windowsで圧縮したzipはShift_JISでエンコーディングされているため、エンコーディングを指定しないと日本語が化ける。

(unityインストールフォルダ)\Editor\Data\Mono\lib\mono\2.0\I18N.dll
(unityインストールフォルダ)\Editor\Data\Mono\lib\mono\2.0\I18N.CJK.dll
……をコピーして、/pluginsに入れた上で以下のように書くことで、zip書庫内の日本語ファイルを正常に読める。

```C#
var opt = new Ionic.Zip.ReadOptions();
opt.Encoding = System.Text.Encoding.GetEncoding("shift_jis");
using(Ionic.Zip.ZipFile zip = Ionic.Zip.ZipFile.Read(file, opt)) {
	// ...
}
```
【illustrator】グラフィックスタイルをコピペ

「グラフィックスタイル」パネルを経由せず、ショートカットのみで特定のグラフィックスタイルのコピペを行う。

#グラフィックスタイルをコピー

```
var s = "TEMPORARY"; // グラフィックスタイル名

var doc = app.activeDocument;
var styles = doc.graphicStyles;

// 既に"TEMPORARY"という名のグラフィックスタイルがあれば、削除する
try{doc.graphicStyles.getByName(s).remove();}
catch (error){}

app.doScript("新規グラフィックスタイル強制","parts"); // parts.aia

// 新規に追加したグラフィックスタイルの名を"TEMPORARY"に変更する
styles[styles.length-1].name = s;

```

#グラフィックスタイルをペースト

```
var s = "TEMPORARY"; // グラフィック名

var doc = app.activeDocument;
var selects = doc.selection;
var style = doc.graphicStyles.getByName(s);

// "TEMPORARY"という名のグラフィックスタイルを適用する
for (i=0; i<selects.length; i+=1){
	style.applyTo(selects[i]);
}

```

#アクション parts.aia
```
/version 3
/name [ 5
	7061727473
]
/isOpen 1
/actionCount 1
/action-1 {
	/name [ 42
		e696b0e8a68fe382b0e383a9e38395e382a3e38383e382afe382b9e382bfe382
		a4e383abe5bcb7e588b6
	]
	/keyIndex 0
	/colorIndex 0
	/isOpen 0
	/eventCount 1
	/event-1 {
		/useRulersIn1stQuadrant 0
		/internalName (ai_plugin_styles)
		/localizedName [ 30
			e382b0e383a9e38395e382a3e38383e382afe382b9e382bfe382a4e383ab
		]
		/isOpen 1
		/isOn 1
		/hasDialog 1
		/showDialog 0
		/parameterCount 1
		/parameter-1 {
			/key 1835363957
			/showInPalette 4294967295
			/type (enumerated)
			/name [ 36
				e696b0e8a68fe382b0e383a9e38395e382a3e38383e382afe382b9e382bfe382
				a4e383ab
			]
			/value 1
		}
	}
}
```
関数は引数の個数に応じて「unary」「binary」「ternary」などと呼ばれるらしい

関数の引数の個数に応じて呼び名があるらしいのでまとめる。

## nullary function

* 引数の数: 0個
* 零項関数の中には、副作用があるため出力が一定でない性質がある。
    * グローバル変数によって変わる。
    * 時刻によって変わる。`time()`
    * 環境によって変わる。`getcwd()`
* 和訳: 0変数関数
* カタカナ発音: ナラリー・ファンクション
* 語源: ラテン語 _nullus_ (「無」) + 形容詞語尾 _-ary_(「…に関する」)
* 別の表現
    * 0-ary function
    * niladic function (ニラディック・ファンクション)

## unary function

* 引数の数: 1個
* 和訳: 1変数関数
* カタカナ発音: アーナリー・ファンクション
* 語源: ラテン語 _ūnus_ (「ひとつ」) + _-ary_
* 1つの項をとる演算子はunary operator(単項演算子)という。
    * 加算子: `$x++`
    * 論理演算子の否定 `！$x`
    * [単項演算 - Wikipedia](https://ja.wikipedia.org/wiki/%E5%8D%98%E9%A0%85%E6%BC%94%E7%AE%97)
* 別の表現
    * monadic function (モナディック・ファンクション)

## binary function

* 引数の数: 2個
* 和訳: 2変数関数
* カタカナ発音: バイナリー・ファンクション
* 語源: ラテン語 _bīnārius_ (「二個からなる」) + _-ary_
* 2つの項をとる演算子はbinary operator(二項演算子)という。
    * 代数演算子の加算: `$x + $y`
    * ビット演算子のビット積: `$x & $y`
    * 論理演算子の論理積: `$x && $y`
    * 型演算子: `$x instanceof Class`
    * Null合体演算子: `$x ?? $y`
    * エルビス演算子: `$x ?: $y`
* 別の表現
    * dyadic function (ダイアディック・ファンクション)

## ternary function

* 引数の数: 3個
* 和訳: 3変数関数
* カタカナ発音: ターナリー・ファンクション
* 語源: ラテン語 _ternarius_ (「三個からなる」) + _-ary_
* 2つの項をとる演算子はternary operator(三項演算子)という。
    * 条件演算子: `$x ? $y : $z`
* 別の表現
    * triadic function (トライアディック・ファンクション)

## 2つ以上、可変長など

* 2つ以上を総じて: n-ary, multiary, polyadic
* 可変長引数: variable arity, variadic

## 所感

<blockquote class="twitter-tweet" data-cards="hidden" data-lang="ja"><p lang="ja" dir="ltr">関数は引数の個数に応じて「unary」「binary」「ternary」などと呼ばれるらしい。Clean Codeによると、オブジェクト指向のメソッドとしては、0項が最も理想的で、4つ以上はよほどの理由がない限り避けるべきらしい。確かに、引数が少ないほうが理解しやすいしテストも容易だ <a href="https://t.co/9cnI7re4LA">https://t.co/9cnI7re4LA</a></p>&mdash; ❄️suin (@suin) <a href="https://twitter.com/suin/status/1027210360057745408?ref_src=twsrc%5Etfw">2018年8月8日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
カプセル化と継承について

オブジェクト指向の3大機能のカプセル化と継承についてまとめる。


##カプセル化の目的

カプセル化とはフィールドへの読み書きやメソッドの呼び出しを制限するための機能で、
カプセル化を行うことで例えば呼び出し元を制限することができたり、フィールドの内容は読み込むことができるが、書き込むことはさせないといったことが可能になる。

##カプセル化の実装
アクセス制御を設定することでカプセル化を行う
アクセス制御を設定するにはアクセス修飾子を利用する
アクセス修飾子は以下のものがある

<table>
<tr>
<th>名前</th>
<th>アクセス許可の範囲</th>
</tr>
<tr>
<td>private</td>
<td>自分自身のクラスのみ</td>
</tr>
<tr>
<td>protected</td>
<td>自分と同じパッケージか、自分を継承したクラス</td>
</tr>
<tr>
<td>public</td>
<td>すべてのクラス</td>
</tr>
</table>

##カプセル化の定石

フィールドにはprivate
メソッドにはpublic

フィールドにアクセスするためにgetterやsetterを用意する

setter内で引数の妥当性検査も行う

##継承の目的

似たクラスを再利用するために使用

##継承のメリット

親要素にメソッドやフィールドを追加することで子要素に個別で設定しなくてすむ
オーバーライドを実施することで動作を個別に変更する事も出来る

##継承の実装例

例

```java
class Car {
  private double gas;
}

class superCar extends Car {
  private int speed;
}
```

こうするとスーパーカーはCarのgasのフィールドに加えスピードのフィールドも所持できる

##インターフェイス

メソッドを定義しインターフェイスを実装したクラスには定義したメソッドの定義を強制させる
多重継承が許可されている

##実装例

```java
interface Human {
  public void run();
}
class taro implements Human { 
  //runメソッドを定義してないためtaroはエラーを起こす
}
```
position : fixed で指定したナビボタンを任意の位置に配置する

ハンバーガーボタンをスクロールに追随するように配置するために `position:fixed` を指定しました。

`position:fixed` を指定すると、配置する位置は `top` や `left` 、 `right` などで表示領域全体に対しての位置指定しかできません。

デザインの関係で、`1920px` で以上で表示したときは、`1920px` の右上にハンバーガーボタンを設置したかったのですが、単純に `px` だけでは指定ができませんでした。

![css.jpg](https://qiita-image-store.s3.amazonaws.com/0/42231/d49fa228-f2e2-8450-2af7-d5e0076f67ff.jpeg)


単純に `px` 指定だけでは任意の位置に指定することはできませんが、`calc` を使えば、任意の位置（`1920px` の右上）に配置することができます。

```
.btn {
  right: calc((100% - 1920px) / 2);
}
```

`100%` は表示領域の最大サイズです。そこから `1920px` を減算することで、`1920px` 以上の余白を計算できます。

最初は、`right: calc((100vw - 1920px) / 2);` として `100%` ではなく、 `100vw` と指定していました。
この指定だとブラウザのズーム機能で縮小すると左側に少しズレが生じました。
`vw` はスクロールバーを含まないサイズです。スクロールバーがあると、その分ズレが生じたのかと思います。
`100%`だと問題なく表示されます。

求められる値は、左右をあわせた余白のサイズなので、`2` で除算すると片方の余白を計算できます。

`1921px` 以上で表示したときだけにスタイルを適用したいときは、メディアクエリで `@media screen and (min-width: 1921px)` 内で指定すれば `1921px` 以上で表示したときだけにスタイルを適用できます。

```
.btn {
	right: 0;
}

@media screen and (min-width: 1921px) {
	.btn {
  		right: calc((100% - 1920px) / 2);
	}
}
```

必要最低限の記述しかしていませんが、 `1920px` までは `right:0` で、 `1921px` 以上になったら `right: calc((100% - 1920px) / 2);` を適用するのがいいです。

`calc` を使うことで、`fixed` で指定しても任意の位置にナビボタンを配置することができます。

※そもそも、ハンバーガーメニューのUIに賛否あると思いますが、是非は問いません。
AWS CodeStarでASP .NET CoreウェブアプリケーションのCI/CD環境を構築する（序章）

# CodeStarってなに？

プロジェクトの開発環境を爆速で構築してくれるサービスです。
具体的には、

- ソース管理のリポジトリを用意してくれる（AWS CodeCommitかGitHubで）
- CI/CD環境を構築してくれます。（実態はCloudFormationやCodeDeployなど既存サービスの組み合わせ）

東京リージョンでも使えます！[aws製品およびサービス一覧（リージョン別）](https://aws.amazon.com/jp/about-aws/global-infrastructure/regional-product-services/)

# 試してみる

- 今回はアプリをデプロイするところまでやってみます。
- CodeStartで検索するとでてきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/d957c640-525b-b968-cad2-b0b8ffc73119.png)

- 「はい、ロールを作成します」を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/04ffc7a7-3686-d29d-09ab-e158bb44f5a6.png)

- C#で絞り、ASP.NET Coreウェブアプリケーションを選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/b18433ef-4c72-dfdb-df30-99d4902039d3.png)

- プロジェクト名を入力して、GitHubを選択して「GitHubに接続」をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/12cd59e8-f851-3675-dd24-5695b92e56df.png)

- リポジトリに対する認証を求められるので認証して、、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/38cc6986-5e32-df45-34a2-ac5f7b32c465.png)

- リポジトリ名を入力して進みます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/46a3e066-846c-831f-4851-c06c65b121f3.png)

- 流れに沿って、、、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/f62c1158-6c29-7c60-a283-35944c288d93.png)

- 「プロジェクトを作成する」をクリックします。
Amazon EC2のキーペアを選択します。（未作成の場合は作成してください。）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/296a5691-414f-5d68-7cc8-cc728e41bb27.png)

- AWS CodeStarユーザーの設定をします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/c9de9b80-58f8-4ecd-a553-597fd0b6cb96.png)

- GitHubのリポジトリを設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/d748aefa-0a0d-8693-2030-55238d9a3489.png)

- 自分のGitHubリポジトリにCodeStarが作成したプロジェクトができましたね！！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/3c9ecd09-0d49-3df3-ebb1-af8b1cc3cc1f.png)

- え！？もしや、これだけ、、、、！？
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/ea16c487-de11-0bfd-c092-b47fc8f85b32.png)

- ダッシュボードの下のほうにスクロールすると、アプリケーションのエンドポイントという項目が見えてくるので、、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/43c56b7b-44bf-4320-2dbc-cb8c0a8d93ef.png)

- エンドポイントのURLに接続すると、、、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/c4a476da-7e3e-2508-196d-a740265f53ca.png)

**デフォルトのウェブアプリケーションに接続できました！**

# 次に試したいこと

次はVisual Studio 2017から接続してみます。
GitHubにはMFA設定してあるのでwincredと呼ばれるクレデンシャル情報をWindowsにビルドインするアプリをインストールしないとならないようです。
別記事に起こします。
初心者がAndroid Studioの設定(API Level)で詰まった話

#はじめに
こんにちは@chan_kakuです！
最近kotlinを勉強しようと、書籍を購入し、Androidアプリを作り始めました！
そこで、書籍には出ていなかったエラーが発生したので共有します！

#詰まったところ
<img width="605" alt="Screen Shot 0030-08-08 at 11.27.00 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/259982/1a7f75d2-1101-1190-f818-b30194725e0e.png">
このようなエラーに見覚えないでしょうか？
これは、お前の最低限のAPIレベルが低すぎるので17まで引き上げてねとのことでした。
どこで設定するんだ。。。。
ここで色々悩みました
#設定のやり方
<img width="268" alt="Screen Shot 0030-08-08 at 11.29.24 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/259982/e2f75b33-53ff-6db3-1f83-d4713dd8749f.png">
###ファイルタブのProject Structureを選んでください！

<img width="819" alt="Screen Shot 0030-08-08 at 11.30.41 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/259982/d685312a-1679-fab4-6a1b-e6c808eaba97.png">
ここまできたら左側のappを選択してください
すると、画像の右側のような画面が出てくるので、Flavorsタブを選択してください
ここでMin Sdk Versionという欄があります！！！

そうです！
ここです！！

ここを指定されたversionにまで引き上げてください

そして、ビルドを待つと。。。。。

成功です！！

#終わりに
迷ったら調べるのが早いかもしれないです！笑

#参考資料
https://qiita.com/AceJoker49/items/6ed8e70778a21d82d9c0
【Rails】リンクを作成する

#HTMLタグを使う
##文字列にリンク付け
```html:
<a href="URL">文字列</a>
```

##画像にリンク付け
画像表示の詳細は<a href="https://qiita.com/Hal_mai/items/e684494d2f50f2d22619#%E7%94%BB%E5%83%8F%E3%81%AE%E8%BF%BD%E5%8A%A0">こちらの記事</a>を参考に。

```html:
<a href="URL"><img src="assets/画像ファイル名"></a>
```

#link_toを使う
##文字列にリンク付け
Rubyのlink_toメソッドを用いてリンクを作成する。

```html:
<%= link_to "表示したい文字列", root_path名 %>
<%= link_to("表示したい文字列", "URL") %>
```
```html:index.html.erb
<h1>Members</h1>
<ul>
	<% @members.each do |member| %>
		<%= link_to member.name, member_path(member.id) %><br>
	<% end %>
    <%= link_to("Home", "/momocloapp") %>
</ul>
```
<br>




##画像にリンク付け
画像をクリックするとリンク先に飛ぶようにする。

```html:
<%= link_to [root_path名] do %> <%= image_tag '画像ファイル名' %> <% end %>
```

```html:index.html.erb
<h1>Members</h1>
<ul>
	<div class="member">
		<%= link_to member_path(1) do %>
	 		<%= image_tag 'kanako.png' %>
		<% end %>
	</div>
</ul>
```

**root_path名の例**

| URL | root_path名 | 
|:-----------------|------------------:|
| / | root_path |
| /members | members_path |
| /member/1 | members_path(1) |


#リンクを押したあとも文字色を変えない
リンク付けした文字列をクリックすると、その文字列の色はクリック済みであることがわかりやすいように変わる。
<img width="507" alt="スクリーンショット 2018-08-08 23.18.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/180127/71d11a1d-8951-bae1-00a3-a40d9eeaa3ed.png">

もしクリックした後も文字列の色を変えたくない場合は、対応するCSSファイルのbody部に以下の1行を追加する。

```css:
a:visited { color:white; text-decoration:none }
```

下の例では、
訪問前のリンク・訪問後のリンク・マウスカーソルを上に乗せたとき・クリックした瞬間
それぞれのリンク部の色を白に指定してある。

```css:members.scss
 body {
     background-color: #FAE5F6;
     a:link {color:white; text-decoration:none }
  	 a:visited { color:white; text-decoration:none }
  	 a:hover { color:white; text-decoration:none }
  	 a:active { color:white; text-decoration:none }
 }
```
java入門編

#はじめに
今回はインプレス社が出版しているスッキリわかるJava入門について必要な部分をかいつまんで説明し、疑問点とそこについての個人的な解釈を記述いたします。今回は1章から5章辺りを説明いたします

##javaについて

まずjava とは、プログラミング言語の中でも比較的オブジェクト指向に近い言語である。オブジェクト指向については後述いたします。
javaのプログラムを実行するには大まかに以下の手順行います。
1.ソースコードの作成
2.コンパイル
3.実行

ここで注目していただきたいのがコンパイルの部分です。コンパイル時にexeファイルが生成されることが多いが、javaではclassファイルと言われるバイトコードが生成されます。このclassファイルは人間が読めないマシン語に変換されたソースコードが記載されています。バイナリコードがあればどの環境でもプログラムが動かせるようになります。そしてそのコードを読み込むためにJVM を使用します。JVMとバイナリコードがあればプログラムが動くわけです。

###大まかなプログラム書き方
```java:Example.java
public class Example｛
    publuc static void main(String args[])｛
      …
　　　　…
        ｝
｝
```
上記のようにまずクラス名の定義、次にメソッドの定義を行う。
メインメソッドが記載されているクラスのクラス名は作成したjavaファイル名と同じ名前にする。そしてクラス名はアルファベット大文字で始めなければならない。


##式・演算子について
変数の値を足す際に、++という表記で値に足し込む事ができます。しかし
○++と++○では計算処理に差異が出てしまうので注意してください。
○++ではある一巡の処理を行ったあとに足し込む処理が行われます。
++○では一巡の処理を行う前に値を足し込んでから処理を行います。
この違いは後述されるfor文などの繰り返し処理で影響が出てきます。

コード書く際、多少のデータ型の違いは内部で変換を行ってくれます。
小さな型から大きな型に変換する場合は内部的に変換をしますが、逆の場合は明示的にキャスト演算子等を使用し型変換、もしくは明示的に型の変換を行う必要があるので注意してください。

##if文とfor文
ここではif文とfor文について説明します。

###if文について
if文で条件を記述し、処理を分岐させる際、関係演算子使用して比較をします。式が等価の場合は==を使用します。ここでもし関係演算子を=１つにした場合、その演算子は代入を意味してしまうので注意する必要があります。
文字列の比較をする場合、文字列==文字列で式を構築すると必ずfalseを返却するので注意してください。文字列格納するのはString 型ですがString型の文字列を2つ作るとそれぞれ別のアドレスが割り当てられてString ○○　==String ○○で表現すると各要素は中の値ではなくアドレスを指します。なのでfalse になります。なので文字列を比較する際は○○.equals()を使用してください。

if文の数が増えれば増えるほどコードがややこしくなりエラー箇所が判別しにくくなることや、想定と違った結果が出てしまう場合があるので分岐が多い場合はswitch case文を用いる。

###for文について
繰り返しの構文にはfor文、while文、 do while文がある。プログラムでどの繰り返し構文を使用するかの判断基準は
-繰り返しの回数が決まっている
-繰り返しの回数が決められていない
の２つである。
基本的に前者の場合はfor文を使用するのが望ましいです。
後者の場合はwhile 文を使用するのが望ましいです。
for文は最初に初期値、for文を抜ける条件(回数)、どのように繰り返すかを記述する。例えば10この要素配列の中で全部の合計を求めるなどの場合は繰り返す数を指定できるが、ある文字列の中から指定文字を探すといった場合繰り返す周期等を最初から決めて行うのは難しいです。while文は終了条件を○回ではなく○○が見つかるまでや、文字列が終端でない限りなどの表現ができます。
この違いを理解してプログラムを作成すると作りやすいと思います。

##配列
配列を作成する際は要素の開始する場所が0から始まることに注意する。


##メソッド
メソッドとは、他の言語で言う関数と同じ意味です。引数と戻り値を指定してその中に該当の処理を記述します。
メインで宣言した変数をメソッドで使用したい場合は引数として渡さないと使用できないので注意する。

複数メソッドで類似した処理を実装する際、オーバーロードを使用するといいです。メソッド定義内の引数の型を変更することで同じメソッド名で宣言することができます。オーバーロードを使用すると他の人が複数のメソッドをいちいち覚える必要がなくなります。

メソッドで配列を引数に渡す際、価渡しと参照渡しで元の値に反映されるものと反映されないものがあるので注意する。

##所感
今回他の言語少し学んだ状態の私が本書を読んだ所、大まかな差は見られなかった。しかし次回以降記載するクラスについてや、String型についてはやはり理解しにくいしこりのようなものが残る。ここを解決するにはオブジェクト指向についての知識と理解度を深める必要がある。

#参考文献
スッキリわかるJava
(インプレス社　中山清喬　国本大悟　著)
Reactからcanvasを使って絵を書く

[canvas](http://www.htmq.com/html5/canvas.shtml)上に絵が書けるcomponentをReactで作ってみました。

### ポイント
- 書いている状態かどうかをstateで管理
- contextの取得 `this.refs.canvas.getContext('2d')`
- `offsetX`,`offsetY`は`nativeEvent`からアクセスする
- canvasのwidth/heightはcssではなくHTMLのプロパティで指定する

### コード

```jsx:Canvas.js
import React, { Component } from 'react';

const style = {
  border: '1px solid gray',
  backgroundColor: 'white',
};

class Canvas extends Component {
  constructor() {
    super();
    this.state = { drawing: false };
  }

  getContext() {
    return this.refs.canvas.getContext('2d');
  }

  startDrawing(x, y) {
    this.setState({ drawing: true });
    const ctx = this.getContext();
    ctx.moveTo(x, y);
  }

  draw(x, y) {
    if (!this.state.drawing) {
      return;
    }
    const ctx = this.getContext();
    ctx.lineTo(x, y);
    ctx.stroke();
  }

  endDrawing() {
    this.setState({ drawing: false });
  }

  render() {
    return (
      <canvas
        ref="canvas"
        width="500px"
        height="500px"
        onMouseDown={e => this.startDrawing(e.nativeEvent.offsetX, e.nativeEvent.offsetY)}
        onMouseUp={() => this.endDrawing()}
        onMouseLeave={() => this.endDrawing()}
        onMouseMove={e => this.draw(e.nativeEvent.offsetX, e.nativeEvent.offsetY)}
        style={style}
      />
    );
  }
}
export default Canvas;
```
AWS Cloud9でbotを走らすための最短の設定

#AWS Cloud9にbotを最短で乗せる方法
　この記事は忘れないようにメモする程度の内容です。
## やること
-　AWSへの登録
-　pip-3.6で必要なものをインストール
-　pythonで試運転

## AWSへの登録
　まずは公式サイトでAWSを使えるようにする。
参考URL：https://note.mu/akagami/n/ncdeb281343f3

## pip-3.6で必要なものをインストール
 普通、pythonと言ったらpipだが、AWS Cloud9にはpython2.7とpython3.6が共存していて、python --versionで実行するとpython2.7が表示される。
※もしpython3.6を実行したいなら、python3 xxxと入力する必要がある。

pipも同様に、pip install xxxであればpython2.7を参照している。
なので、、python3.6を使用する場合のpipはpip-3.6とする必要がある。

※pip install --upgrade pipを要求されるが、実行するとconflictが起こって何もできなくなるので注意

## pythonで試運転
　もし、上記のコマンドによってパッケージのインストールが完了したら、実行したいソースを実行してみる。

以上。
【導入編】nodebrewを使って楽に管理するNode.js for webデザイナー

## はじめに
本投稿は、Node.jsを初めてインストールするよ！という人だけでなく、もう既にNode.jsを入れているけどnodebrewでの管理に切り替えたいよ！という人にも向けた内容になります。
<br>

## Node.jsのインストール方法について
Node.jsのインストール方法は複数ありますが、その代表例は2つあります。

1. 公式HPからパッケージをダウンロードし、インストールする。
2. nodebrewというNode.jsのバージョン管理を行えるツールからインストールする。

タイトル通り、1はおすすめしません。
何故なら、1でインストールした場合、プロジェクト毎にNode.jsのバージョンを変更したい場合（開発現場では良くあります。）にその都度インストールし直さなければならないからです。

対して、2のnodebrewというツールを使ってインストールを行うと、インストール済みのNode.jsのバージョンを簡単に変更することも、案件毎にバージョンを変えて管理するということも出来ます。
<br>

## インストールされているのか？どこにあるのか？を調べる
まず、Node.jsがPCにインストールされているかどうかの確認をする為に、以下のコマンドを実行しましょう。

```shell:Node.jsのバージョン確認
node -v
```

`v10.8.0`みたいにバージョンが表示されたら、Node.jsが何かしらの方法でインストールされていることになります。
また、`-bash: node: command not found`と表示されたら、Node.jsはインストールされていないです。
<br>

バージョンが表示された場合は、どこにインストールされているか調べる為に、以下のコマンドを実行します。

```sh:Node.jsのインストール先を表示
which node
```
<br>


## アンインストール
上記でインストール場所を調べた際に`/usr/local/Cellar/node/`と表示された場合は、homebrewを使ってインストールされているということになります。
homebrewでインストールされたNode.jsをアンインストールするには以下のコマンドを実行します。

```sh:Node.jsのアンインストール
brew uninstall node
```
<br>

公式HPのパッケージからインストールした場合は、以下のコマンドでアンインストールします。

```sh:Node.jsのアンインストール
lsbom -f -l -s -pf /var/db/receipts/org.nodejs.node.pkg.bom \
| while read i; do
sudo rm /usr/local/${i}
done

sudo rm -rf /usr/local/lib/node \
/usr/local/lib/node_modules \
/var/db/receipts/org.nodejs.*
```
<br>

次にnpmをアンインストールします。コマンドは以下になります。

```sh:npmのアンインストール
sudo rm -rf ~/.npm
```
<br>

最後に、以下のコマンドでNode.jsとnpmがアンインストールされているかどうかの確認をしましょう。

```sh:バージョンチェック
node -v
npm -v
```
`-bash: node: command not found`
`-bash: npm: command not found`
と表示されれば、大丈夫です。
<br>

## nodebrewを使って、Node.jsをインストール
まず前提条件として、nodebrewをインストールするには、**Xcode**と**homebrew**の2つが必要になります。

XcodeはAppStoreから最新版をインストールしましょう。

Xcodeをインストールしたら、homebrewをインストールしましょう。
[homebrew公式サイト](https://brew.sh/index_ja.html)
上記、公式サイトにあるスクリプトをターミナルに貼り付けて実行します。

```sh:Homebrewをインストール
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

※上記コマンドは2018/08/08のものです。
<br>

正常にインストール出来たかは以下のコマンドで確認します。

```sh:homebrewのバージョン確認
brew -v
```
`Homebrew 1.7.1`みたいにバージョンが表示されれば大丈夫です。
<br>

nodebrewをインストールしてセットアップする為に、以下のコマンドを実行します。

```sh:nodebrewのインストールとセットアップ
brew install nodebrew
nodebrew setup
```
<br>

nodebrewがインストールされたかどうか確認する為に、以下のコマンドを実行します。

```sh:homebrewでインストールされたものを表示
brew ls
```
表示されたものの中に`nodebrew`があれば大丈夫です。
<br>

次に環境変数を設定します。
.bash_profileに以下を記述します。

```sh:環境変数の設定
export PATH=/usr/local/var/nodebrew/current/bin:$PATH
export PATH=$HOME/.nodebrew/current/bin:$PATH
```
<br>

編集したらsourceコマンドで実行しましょう。

```sh:コマンド
source ~/.bash_profile
```
<br>

やっとNode.jsのインストールまで来ました。
今回はとりあえず安定版のインストールを行います。

```sh:Node.jsのインストール
#安定版のインストール
nodebrew install-binary stable

#インストール後の確認
nodebrew ls
v10.8.0

current: v10.8.0

#使用するための設定
nodebrew use stable

#正しく設定されたか確認
node -v
v10.8.0

npm -v
6.2.0
```
<br>

## 実践編について
以上、導入編でした。
Node.jsについての知識はまだ浅いので、間違いや漏れなどありましたらコメントにてご指摘頂けると今後の励みになります。
実践編については、近々ポストしてリンク貼ります。
Ruby メソッド書き方

#メソッド定義式　例
```rb
def hello(names)
    names.each do |name|
        puts "Hello,#{name.upcase}"
    end
end

colors = ["red","blue","green"]

hello(colors)

#結果
Hello,RED
Hello,BLUE
Hello,GREEN
```

```def メソッド名（仮引数...）...end```
helloメソッドが、hello(colors)によって呼び出されている。
ReactNative-elementsでCardComponentを作成した時のUnrecognized font family 'Material Icons'エラー

# ReactNative-elementsでUnrecognized font family 'Material Icons'エラーが出た時の解決
ReactNativeでReactNative-elementsを導入し、CardComponentを作成したところ、iosシュミレータで「Unrecognized font family 'Material Icons'」エラーが出ました。
もちろん、「react-native-vector-icons」も導入済みで、「react-native link react-native-vector-icons」も実施済みでした。

が、

<img width="414" alt="28258900-3960ab06-6b06-11e7-9949-c2a5b2e120c9.png" src="https://qiita-image-store.s3.amazonaws.com/0/15179/5b4a2f2d-9556-2883-6381-7390523d3875.png">

上記のようなエラーが消えません。

というか、react-native link react-native-vector-iconsを実施した時は、
エラー消えるのですが、再度Viewを描画させるとまたエラーが出ます。

#解決策
フォルダ内部「ios/Build」を一度全部削除して、再度react-native run-iosを実行します。

そうすると、「ios/Build」が再度作られて実行できます。
私はこれでエラーが出なくなりました。

皆様のご参考になれば幸いです。
既存のプロジェクトにFlutterを追加する

# まえがき
　既にJava/Kotlinで制作されている旧来のプロジェクトに後からFlutterを導入する方法を調べました。
詳細はブログにも書いていますので、こちらも参考にしてみてください

- https://5hyn3.github.io/posts/add-flutter-to-existing-apps/

# 注意点
　この方法は __開発中__ の機能を使います。そのデメリットをよく理解した上で参考にしてください。

# 方法

<u>[この記事](https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps)</u>を参考にして行います。試しに行ってみたリポジトリが<u>[こちら](https://github.com/5hyn3/AddFlutterToExistingApps)</u>になります。

1. Flutterのブランチを`master`に切り替える
この機能は`master`ブランチにのみ取り込まれています。`beta`や`alpha`などを使っている場合はこちらに切り替える必要があります。

2. Flutterモジュールを作る
    
    ``` bash
    flutter create -t module {{module_name}}
    ```
    
    参考元では既存プロジェクトの一つ上のパスで作っています。  
    
3. 既存プロジェクトの`settings.gradle`を編集する
    参考元を踏襲して既存プロジェクトの一つ上のパスにFlutterモジュールを作った場合は以下を追記 

    ```gradle
    setBinding(new Binding([gradle: this]))
    evaluate(new File(
        settingsDir.parentFile,
        '{{module_name}}/.android/include_flutter.groovy'
     ))
    ```
    `evaluate()`に使いたいFlutterモジュールの`include_flutter.groovy`を指すFileクラスのインスタンスを渡すようにしてください
    
4. 既存プロジェクトの`app/build.gradle`を編集する  
    `dependencies`に以下を追記
    
    ```gradle
    implementation project(':flutter')
    ```

これで既存プロジェクトでFlutterを扱えるようになりました。`Flutter.createView()`を使うことでFlutterで作られたViewを得ることができます。
# 参考

- <u>[Add Flutter to existing apps](https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps)</u>
- <u>[Reduce friction encountered when adding Flutter to existing apps](https://github.com/flutter/flutter/issues/14821)</u>