OmniAICreator/Qiita-1.07M huggingface dataset:
DartでListをソートする方法

FlutterというかDartで配列の要素のプロパティでListをソートする方法を紹介します。

以下のようなEmployeeクラスがあり、このidでソートする例をとって説明します。

```dart
class Employee {
  int id;
  String name;
  Employee(this.id,this.name);
}
```

Listクラスはsort関数を持ちます。次のように`sort`関数に比較関数を渡せば簡単に要素のプロパティでソートすることができます。

```dart
    final employees = [
      Employee(3,"Bob"),
      Employee(1,"Alice"),
      Employee(2,"John"),
    ];
    print("before sort");
    employees.forEach((employee){
      print("${employee.id}:${employee.name}");
    });
    employees.sort((a,b) => a.id.compareTo(b.id));
    print("after sort");
    employees.forEach((employee){
      print("${employee.id}:${employee.name}");
    });
    print("$employees");
```

結果出力はこのようになります。

```
I/flutter ( 3321): before sort
I/flutter ( 3321): 3:Bob
I/flutter ( 3321): 1:Alice
I/flutter ( 3321): 2:John
I/flutter ( 3321): after sort
I/flutter ( 3321): 1:Alice
I/flutter ( 3321): 2:John
I/flutter ( 3321): 3:Bob
```
PHPでAWS Rekognitionを試す

この記事で作った設定をそのまま使う
https://qiita.com/kei4eva4/items/e3b4061bc6a85456c07f

```php
<?php
require './vendor/autoload.php';

$region = 'ap-northeast-1';
$credentials = new Aws\Credentials\Credentials(
    'key', 
    'secret'
);

// Rekognitionのクライアントを作成
$rekognition = new \Aws\Rekognition\RekognitionClient([
    'version' => 'latest',
    'region' => $region,
    'credentials' => $credentials,
]);

// 画像がPOSTされていたときのみ処理をする
if (isset($_FILES["image"])) {

    // ストリームに変換
    ob_start();
    readfile($_FILES["image"]["tmp_name"]);
    $contents = ob_get_contents();
    ob_end_clean();

    // 画像のラベル付
    // モデレーションのラベルを検出する場合はdetectModerationLabelsを使う
    $labels = $rekognition->detectLabels([ 
		'Image'		=> [
            'Bytes'	=> $contents,
        ],
	]);
    
    // 結果の表示
    echo '<p><table border="1"><tr><th>Label</th><th>Confidence</th></tr>';	
    $i = 0;
    $confidentLabels = [];
    // モデレーションの場合は$labels['ModerationLabels']
	foreach($labels['Labels'] as $row) {
		echo '<tr>';
		echo '<td>' . $row['Name'] . '</td>';
		echo '<td>' . $row['Confidence'] . '%</td>';
		echo '</tr>';
        $i++;
	}
	echo '</table></p>';
}

?>
<html>
<body>
<form method="POST" enctype="multipart/form-data">
    <p><input type="file" name="image" name="image"></p>
    <input 
    <input type="submit" name="submit">
</form>
</body>
</html>
```
LINE CLOVA で簡単な辞書を作成する（仮）

[LINE BOOT AWARDS](https://www.line-community.me/awards/)に参加するため、元素番号に対応した元素の情報を教えてくれるスキル「元素チェッカー」を作成しました。

スキルストア（現在申請中）

#前提
今回のスキル作成は、大枠は以下の記事に従って行いました。

https://qiita.com/sumihiro3/items/3ca0a2f849a116b509ff
https://qiita.com/sumihiro3/items/9e24170cad4ad384f453

この記事では、作成の際に個人的につまづいたことを備忘録も兼ねてまとめます。

#AWSの設定
awscliの設定において、以下のアクセス権限の追加を行いました。

- AWSLambdaFullAccess
- IAMFullAccess
- AmazonS3FullAccess
- AmazonDynamoDBFullAccess
- AdministratorAccess
- AmazonAPIGatewayAdministrator
- AmazonAppStreamFullAccess

#DynamoDB
元素番号に対応する情報を格納するデータベースとして、DynamoDBを使いました。

- [create_tables_to_dynamodb.sh](https://github.com/Reiji-Kobayashi/element_checker/blob/master/create_tables.sh)：DynamoDBにデータベースを登録するシェルスクリプト。
- [element_info_importer.py](https://github.com/Reiji-Kobayashi/element_checker/blob/master/element_info_importer.py)：elements_list.csvをDynamoDBに登録する。
- [elements_list.csv](https://github.com/Reiji-Kobayashi/element_checker/blob/master/elements_list.csv)：csv形式のテーブル。ここに情報を記入する。
- [tables/table_Elements.json](https://github.com/Reiji-Kobayashi/element_checker/tree/master/tables/table_Elements.json)：DynamoDBに登録するデータの形式。


データベース登録の手順

1. `elemrnts_list.csv`に登録したい情報を入力する。
2. `create_tables_to_dynamodb.sh`を実行して、DynamoDBに`table_Elements.json`を元にしたデータベースを作成する。
3. `element_info_importer.py`を実行して、`elemrnts_list.csv`の情報をDynamoDBに登録する。

#実行例
[デモ動画](https://youtu.be/N6B5lM2jee8)

#ソースコード
[GitHub](https://github.com/Reiji-Kobayashi/element_checker)
PHPでAWSを試す


## ディレクトリを作成＆移動
```sh
$ mkdir aws-php
$ cd aws-php
```

## AWSのライブラリをインストール
```sh
$ composer require aws/aws-sdk-php
```

## PHPファイルを作成
```sh
$ touch index.php
```
index.phpを修正

```php
<?php
require './vendor/autoload.php';

// リージョンと認証情報の設定
$region = 'ap-northeast-1';
$credentials = new Aws\Credentials\Credentials(
    'key',
    'secret',
);

// S3のバケット一覧を取得（テスト）
$s3 = new Aws\S3\S3Client([
    'version' => 'latest',
    'region'  => $region,
    'credentials' => $credentials,
    'debug'   => true,
]);

$s3->listBuckets();
```

コマンドで実行

```
$ php index.php
```

ブラウザで実行 http://localhost:8000

```
$ php -S localhost:8000
```
capybara-webkitの導入指南書(macOS版)

弊社のプロダクトでcapybara-webkit導入してるのですが、
今導入すると躓いているポイントが深いので、
メモしておこうと思います。

https://qiita.com/labocho/items/e12bafbcf7f31ccfb76c
で書かれていますが、Mojaveでqt@5.5が導入できないことが問題で、
この後homebrewから取り除かれ、すべてのmacOSで導入できなくなりました。

## 何が起きたか
- capybara-webkitにはqt@5.5に依存
- qt@5.5はbrewで入れることが**できた**
 - しかしMojaveでqt@5.5が導入できないのでbrewから取り除かれる
- すべてのmacOSでbrewで導入できずcapybara-webkitがインストールできない

今回はこんな状況でもbrewからqtを入れるようにします
## 事前準備
### Xcodeをインストール

capybara-webkitをインストールする際、アプリのXcodeが必要になります。
Xcode10でもいいのでインストールします。
https://developer.apple.com/jp/xcode/
↑DLはここから
DLしてきたXcodeは`/Applications/`においてください。
### xcodebuildコマンドが通るかチェック
```bash
/usr/bin/xcodebuild
Project ERROR: Xcode not set up properly. You may need to confirm the license agreement by running /usr/bin/xcodebuild.
```
```bash
/usr/bin/xcodebuild
xcode-select: error: tool ‘xcodebuild’ requires Xcode, but active developer directory ‘/Library/Developer/CommandLineTools’ is a command line tools instance
```
↑正常な場合でも**エラーが出ます**。ややこしいですが上と同じエラー文が出ていたら問題があります。
(下のエラーの場合はXcodeが`/Applications/`に配置されているか確認してください)
上のエラーが出ているなら以下のコマンドを実行します。

```
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
```

(参考:https://qiita.com/Pegasus204/items/1ac470114669d3c4471c)
これでcapybara-webkitインストールできる準備が整いました。

## brewからqt@5.5を導入する
https://github.com/thoughtbot/capybara-webkit/wiki/Installing-Qt-and-compiling-capybara-webkit#macos-high-sierra-1013-macos-sierra-1012-el-capitan-1011-and-yosemite-1010
こういうときは公式ドキュメントをまず読みましょう。

公式ドキュメントがbrewの削除に更新されていますが
現時点(2018/10/10)ではこれだけでは動かないので
以下のコマンドを実行してください

```
brew update
cd $( brew --prefix )/Homebrew/Library/Taps/homebrew/homebrew-core
git -C "$(brew --repo homebrew/core)" fetch --unshallow
git checkout 9ba3d6ef8891e5c15dbdc9333f857b13711d4e97 Formula/qt@5.5.rb
```
これで導入できる準備ができました。
> (詳しい理由が知りたい人向け)
> 新規でbrewを入れた場合
> 膨大な過去のコミットをとりいれずに
> 最新の数件のコミットだけをとりこんでいます。
> 現時点でqt削除は380コミット前なので過去のコミットをすべて取得できるように
> コマンドを追加してあります。


#### HighSierra(10.13以下)の方
```
brew install qt@5.5
```
#### Mojaveの方
```
brew install qt@5.5 --force-bottle
```
これでqt@5.5が導入できました。
あとはbundleなりgemなりでcapybara-webkitを導入してください！
Vue CLI 3で設定ファイル（vue.config.js）を切り替えてビルドしたい

## 実施環境

* OS: macOS Mojave (10.14)
* Vue CLI: 3.0.5

## 今回のゴール
npm scriptsで設定ファイルを指定して`vue-cli-service`を実行できるようにする

## 1. 設定ファイルを複数用意する
今回はproject/config/配下に作りました。
※違いが分かれば良いので`HtmlWebpackPlugin`で使用するtemplateを変えています。

```vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].template = 'public/index.html'
        return args
      })
  }
}
```

```vue.config.sp.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].template = 'public/index_sp.html'
        return args
      })
  }
}
```

## 2. npm scriptsを追加、変更する
#### step1. 調査する
`@vue/cli-service/lib/Service.js`を見てみると、L.261あたりに下記の記述があります。

```Service.js
const configPath = (
  process.env.VUE_CLI_SERVICE_CONFIG_PATH ||
  path.resolve(this.context, 'vue.config.js')
)
```

環境変数に`VUE_CLI_SERVICE_CONFIG_PATH`を指定してあげれば良さそうです。

#### step2. npm scriptsを書く

**変更前**

```package.json
"scripts": {
  "serve": "vue-cli-service serve",
},
```

**変更後**

```package.json
"scripts": {
  "serve": "VUE_CLI_SERVICE_CONFIG_PATH=$PWD/config/vue.config.js vue-cli-service serve",
  "serve:sp": "VUE_CLI_SERVICE_CONFIG_PATH=$PWD/config/vue.config.sp.js vue-cli-service serve",
},
```

## 3. 動作確認

`yarn serve`

![yarn serve.png](https://qiita-image-store.s3.amazonaws.com/0/37319/6cbdf8f8-5bf8-77b7-2dbe-608f9b290254.png)

`yarn serve:sp`

![yarn serve sp.png](https://qiita-image-store.s3.amazonaws.com/0/37319/ee334067-41de-139e-52b5-73b9408040ff.png)
ゼロからコンピューター囲碁プログラムを作ろうぜ☆（＾～＾）

去年も記事を書いた。
https://qiita.com/muzudho1/items/ddf9eb068ecfce8c5ec2
https://qiita.com/muzudho1/items/51ae95477b669ba61f29
https://qiita.com/muzudho1/items/f7049ad58a6b19a41761
https://qiita.com/muzudho1/items/b5fbe7f9a6dd9fb1b989
https://qiita.com/muzudho1/items/51537ba182c44c0829ff
https://qiita.com/muzudho1/items/a803ad17b6fae77f153d
https://qiita.com/muzudho1/items/f0d22cb8d12f41172b00

コンピューター囲碁ソフトを作ったら CGOS（シーゴス） とかに放流しろだぜ。
http://www.yss-aya.com/cgos/19x19/standings.html

説明はここにある。
http://www.yss-aya.com/cgos/

いけそうなら　大会に参加しろだぜ。
https://www.igoshogi.net/ai_ryusei/01/

オープンソースの囲碁プログラムもある。他の人が書いた記事を参考にしろだぜ。
https://okao-golab.com/2018/06/12/post-3978/


# 通信プロトコル

去年は NNGSサーバーで、コマンドが５種類だった。
https://www.igoshogi.net/ai_ryusei2017/01/protocols.html

- "ログイン？" サーバー側から何らかのメッセージを受信する。
  - ユーザー名を送信する。
- "パスワード？"
  - パスワードを送信する。
- ログアウトするには。
  - "quit" を送信する。
- 対局の開始
  - "match"コマンド
- 対局の終了 
  - "done"コマンド
- 対局中
  - "A1" 石を打つ位置。大文字英字が列、数字が行。I は飛ばす。
  - "pass" コマンド
- 表示を簡略化
  - "set client FALSE"
  - "set verbose FALSE"
- 残り時間を問い合わせる
  - "time"


以下の Web サイトが参考になるだろう。

https://github.com/msanpopo/mgoban
https://ja.osdn.net/projects/sfnet_nngs/
http://www.computer-go.jp/gifu2004/regulations/files/commsample.txt
http://www.wing.gr.jp/explore_b.html
http://wing.gr.jp/member.html
http://www.gnu.org/software/gnugo/gnugo_19.html


NNGS 1.1.12 サーバーを立ち上げれば良さそうなんだが、
Linuxを持ってないんでパスだぜ。

# 日本ルールか、中国ルールか

囲碁には　ローカルルールがある。大会では　日本ルール　だが、
わたしは　日本ルールは　前に作ったんで　今年は　純碁　のルールで組んでみる。



／／書きかけ
指定ディレクトリ階層内に存在する重複ファイルを検索（ファイル名およびサイズが等しい条件）

こんにちは。
指定ディレクトリ階層内に存在する重複ファイルの存在を検索しました。

#### ファイル名が等しいファイルの存在を検索
ディレクトリ名、ファイル名が出力されます。GNU find, uniq を利用し（macOS では homebrew でインストール可能）、見やすくするために、[fdupes](https://github.com/adrianlopezroche/fdupes) コマンドに似せて、重複グループ間を空行で区切っています[^1]。

```console
$ brew install findutils coreutils
$ gfind . -type f -printf '%h %f\n' | sort -k2 | LC_ALL='C' guniq -f1 --all-repeated=separate 
. memo.txt
./memo memo.txt

. memo2.txt
./memo memo2.txt
```

#### ファイル名およびサイズが等しいファイルの存在を検索
ディレクトリ名、ファイル名、サイズが出力されます。

```console
$ brew install findutils coreutils
$ gfind . -type f -printf '%h %f %s\n' | sort -k2 -k3n | LC_ALL='C' guniq -f1 --all-repeated=separate
. memo.txt 144
./memo memo.txt 144

. memo2.txt 288
./memo memo2.txt 288
```

#### md5 値もしくはsha256 値が等しいファイルの存在を検索
md5 値（もしくは sha256 値）を計算すればより厳密に重複判定できます。ただし計算コストが増え実行時間を要します。（対策案として、ファイルサイズだけで候補を絞り込んだ後に計算するようにすれば無駄を避けることができます。）

- md5 値が等しいファイルの存在を検索

```console
$ brew install md5sha1sum
$ gfind . -type f -printf '%p %s ' -exec md5sum {} \; | awk '{$NF="";print}' | sort -k2n -k3 | LC_ALL='C' guniq -f1 -D
./memo.txt 144 44505edf323152d0e55e52440543bbde
./memo/memo.txt 144 44505edf323152d0e55e52440543bbde
```

- sha256 値が等しいファイルの存在を検索

```console
$ brew install md5sha1sum
$ gfind . -type f -printf '%p %s ' -exec shasum -a 512 {} \; | awk '{$NF="";print}' | sort -k2n -k3 | LC_ALL='C' guniq -f1 -D
./memo.txt 144 311b7835fb22f48b838f324a09d13244ee83a92fffec8d53f9122247f2bcb6a63de8b706d4403871f703280821694065b33469cea512cd55864a3d218751c0af
./memo/memo.txt 144 311b7835fb22f48b838f324a09d13244ee83a92fffec8d53f9122247f2bcb6a63de8b706d4403871f703280821694065b33469cea512cd55864a3d218751c0af
```

[^1]: 「[fdupesを自作してみた](https://qiita.com/fieldville/items/6fd56ddb2a02a374f318)」と言う記事も参考になります。
Rubyの基本記述の仕方〜その10〜 html.erb埋め込み記法の追記

html.erbの埋め込み記法について、本日得た気付きをまとめます。

## ＜％＝　％＞と＜％　％＞の違い

・　＜％＝　％＞　　　→　　　htmlファイルとして描画される
・　＜％　　％＞　　　→　　　htmlファイルとして描画されない

書いた処理や内容がhtmlファイルとして、描画されてほしいときは「」＝を付けます。
処理だけで、文字として出てほしくないときは、「＝」を付けません。

## 検証

<%  %>で記述されているコードを<%= %>に書き換えてブラウザで確認してみました。
＜　「=」あり　＞

```html.erb
〜
<%= users.each do |user| %>
〜
<% end %>
```
![スクリーンショット 2018-10-10 20.22.15.png](https://qiita-image-store.s3.amazonaws.com/0/148137/f1a59e65-0c8e-2192-13e5-d4d28896d7c1.png)



＜　「=」なし　＞

```html.erb
〜
<% users.each do |user| %>
〜
<% end %>
```
正しい記述のコードでは、ブラウザ上では最後の余白に余分な記述が出ていません
![スクリーンショット 2018-10-10 20.23.02.png](https://qiita-image-store.s3.amazonaws.com/0/148137/626d644a-d97c-7bec-5f4e-3ca16e928f7d.png)

厳密な理解/定義の上では、正しくない解釈が含まれているかと存じますが
実務上、押さえておくと役立つポイント程度に受け止めていただけたら幸いです。



## 参考サイト
progate 
https://prog-8.com/

Railsのテンプレート（ERB）での動的処理とコメント
https://qiita.com/chobi9999/items/a48e790952a0f183e91d
Alfredのホットキーを⌘Spaceにする方法

macOSはデフォルトで<kbd>⌘</kbd>+<kbd>Space</kbd>がSpotlight検索にあたっているが、Alfredのランチャーにそのキーを割り当てたい。

そのためにはまず、「環境設定」→「キーボード」→「ショートカット」→「Spotlight」→「Spotlight検索を表示」のチェックを外す。

<img width="668" alt="スクリーンショット 2018-10-10 20.18.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/889/da3a3c79-e748-bce3-8603-9bb3d1a379dd.png">

次にAlfredの環境設定で「Alfred Hotkey」に<kbd>⌘</kbd>+<kbd>Space</kbd>を設定する

<img width="1100" alt="スクリーンショット 2018-10-10 20.19.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/889/a99bab80-54fb-d4b5-9da0-139419dc07ce.png">
macOSでフォントの見易さを向上させる

Retinaのような解像度が高いディスプレイではアンチエイリアス処理がない方がフォントが綺麗に見えることがある。

「環境設定」→「一般」→「使用可能な場合は滑らかな文字を使用」のチェックを付けたり外したりして好みにカスタマイズすると良い。

![test.gif](https://qiita-image-store.s3.amazonaws.com/0/889/67e62cfb-e44b-85e8-7f7e-6bf60a75a3fb.gif)
Elements in iteration expect to have 'v-bind:key' directivesと怒られる時

```
<div v-for='(value, index) in values'>
　　　　何かの記述
</div>
```
のように使う時、注意文が出たため、調べてみると`track-by`に相当するものみたい。

> Vue が各ノードの識別情報を追跡できるヒントを与えるために、また、先ほど説明したような**既存の要素の再利用と並び替えができるように、一意な key 属性を全てのアイテムに与える必要があります。**この特別な属性は 1.x の **`track-by` に相当するもの**ですが、しかしこれは属性のように動作します。従って、これを動的な値に束縛するためには v-bind を使う必要があります
[リストレンダリング - key](https://jp.vuejs.org/v2/guide/list.html#key)

なので、以下のように書くことを推奨する

```
<div v-for='(value, index) in values' :key='index'>
　　　　何かの記述
</div>
```

- 参考したページ
 - [リストレンダリング - key](https://jp.vuejs.org/v2/guide/list.html#key)
 - [【Vue.js】 v-forディレクティブを使っていたらエラーが出た](https://www.tomcky.net/entry/2018/02/27/000853)
[Swift] NavigationController+TableViewControllerにContainerView入りのViewControllerを追加して固定フッター(Toolbar)を追加する

標準で以下のように追加される`NavigationController+TableViewController`の間に`ContainerView`を追加することで固定されたfooter(toolbar)を追加します。

![スクリーンショット 0030-10-10 17.21.11.png](https://qiita-image-store.s3.amazonaws.com/0/13713/df3d4835-796d-17f5-dbf1-c8713109e0a3.png)
↓↓↓
![スクリーンショット 0030-10-10 17.18.04.png](https://qiita-image-store.s3.amazonaws.com/0/13713/2a72ec9b-04d3-2726-4c20-cefa9338d531.png)

## 完成

![画面収録 0030-10-10 18.02.13.gif](https://qiita-image-store.s3.amazonaws.com/0/13713/e7bc6019-85bf-2bb0-bd4b-9b9c282d7828.gif)

固定されたまま、しっかり最下部のLまで表示されています。

## 環境
Mojave
swift4.12
iOS12
Xcode10

## 実装

### 1. NavigationController追加
ストーリーボードに、UIライブラリから`NavigationController`を追加し、初期設定の`tableViwe`を削除します。

![1.gif](https://qiita-image-store.s3.amazonaws.com/0/13713/76532c43-21c9-fb53-b7b2-05b8931c1168.gif)

### 2. ViewControllerとNavigationControllerをセグウェ
削除後、ストーリーボードに、UIライブラリから`ViewController`を追加し、[ctrl]＋ドロップで「`Manuel segue`」で`NavigationController`と繋げます。

![2 (1).gif](https://qiita-image-store.s3.amazonaws.com/0/13713/3c3c9ec7-2db7-7680-47d3-8050a6ab3885.gif)

### 3. Navigetion追加
(不要なら飛ばす) ストーリーボード上の`ViewController`に、UIライブラリから`Navigetion`や`ToolBar`を追加してautolayoutでいい感じの位置に配置します。

![3.gif](https://qiita-image-store.s3.amazonaws.com/0/13713/94c26438-6606-90f0-480c-31f69a701d1f.gif)

### 4. ContainerViewの追加
ストーリーボード上の`ViewController`に、UIライブラリから`ContainerView`を追加してautolayoutで0指定します。
`ContainerView`　は追加すると、表示先のViewControllerが自動で作成されます。

![4.gif](https://qiita-image-store.s3.amazonaws.com/0/13713/273fb18b-d70e-b7eb-80fa-e429add89e64.gif)

### 5. TableViewの追加
自動で新しく追加された`ViewController`の初期設定のView(白い部分)を削除し、UIライブラリから`TableView`と`TableViewCell`を追加します。
![5.gif](https://qiita-image-store.s3.amazonaws.com/0/13713/1a42730a-3f11-52aa-80c5-3a423cdcb71b.gif)

### 6. 完成
中身を追加する Swiftコードを書けば完成です。

![画面収録 0030-10-10 17.28.36.gif](https://qiita-image-store.s3.amazonaws.com/0/13713/2c913a01-877c-db66-36b3-f11a1b9bb431.gif)
Visualforceのページで selectList の変更に応じて rerender したい時

Visualforceのページで、selectListの値の変更に応じて表示させるフォームを変更したい場面があったので
いろいろやってみた話
自分用のメモもかねて記事化

### やりたいこと
- `<apex:selectList>`の値が変更された時に、フォームを対応するフォームに変更したい

### やり方
- `<apex:actionSupport event="onchange" reRender="form"/>` 使うと良さそう
- フォームの項目に必須条件があると `rerender`がうまく行かない
- ので、 `<apex:actionRegion>`で囲うと部分的にサーバ側に値を送ることができるらしい
    - 簡単に言うとselectlistの部分を囲えば、そこだけ値を送ることができて、うまくrerenderが走る

こんな感じ

```xml
<apex:form id="form">
  <apex:pageBlockSection columns="1" title="title">

    <apex:pageBlockSectionItem >
      <apex:outputLabel value="Label 1"/>
      <apex:outputPanel styleClass="requiredInput" layout="block">
        <apex:outputPanel styleClass="requiredBlock" layout="block"/>
        <apex:actionRegion >
          <apex:selectList value="{!hoge}" size="1" multiselect="false">
            <apex:selectOptions value="{!classificationsList}"/>
            <apex:actionSupport event="onchange" reRender="createForm"/>
          </apex:selectList>
        </apex:actionRegion>
      </apex:outputPanel>
    </apex:pageBlockSectionItem>

    <apex:pageBlockSectionItem rendered="{!hoge == 'value1'}">
      <apex:outputLabel value="Label 1" />
      <apex:outputPanel styleClass="requiredInput" layout="block">
        <apex:outputPanel styleClass="requiredBlock" layout="block"/>
        <apex:input value="{!someInput}" type="text" required="true"/> 
      </apex:outputPanel>
    </apex:pageBlockSectionItem>
  <apex:pageBlockSection>
</apex:form>
```

これで選択リストを変更した時に入力フォームの表示も変更される
あとは、項目とかを適宜追加とかする


### 参考サイト
とても勉強になる

- http://tyoshikawa1106.hatenablog.com/entry/2015/01/24/003519
- https://qiita.com/hrk623/items/cb5a7f253dd25887beb4
チカチカ画面【Processing】

はじめまして、ますみです！

[![自己紹介.png](https://www.umi-mori.jp/wp-content/uploads/2023/02/introduction_banner_2-2048x533.png)](https://bit.ly/banner_intro_masumi_creator_qiita)


# はじめに
今回の短めスクリプトでは、「**チカチカ画面**」という画面の色がランダムに変わり、チカチカするプロジェクトを作りたいと思います。
長さ：`4行`（`79文字`）

# 作品サンプル
<img width="300" alt="sample.gif" src="https://qiita-image-store.s3.amazonaws.com/0/240280/af38b7e9-bc54-3874-ba1c-bfb58ca2d83e.gif">

# 最終的なコード
`java:chikachika.pde
void draw() {
  frameRate(3);
  background(random(0,255),random(0,255),random(0,255));
}
`

# コードの解説
## 1. `void draw(){}`
{}の中身を**ずっと実行する**。

## 2. `frameRate(10);`
1秒間に画面を10回更新する。
（`draw(){}`は1回の更新につき、1度実行されるため、結果的に1秒間に10回線を描くかという）。

## 3. `background(255,255,255);`
背景の色をRGB(255, 255, 255)（真っ白）にする。

## 4. `random(0,255);`
0から255までのランダムな値（乱数）。

# アレンジ・コード
#### \>>`size(500,500);`
画面の横と縦の大きさをそれぞれ500pxにする。

### サンプルコード（アレンジ）
`java:chikachika_arrange.pde
void setup() {
  size(500,500);
}

void draw() {
  frameRate(3);
  background(random(0,255),random(0,255),random(0,255));

# 最後に
最後まで読んでくださり、ありがとうございました！
いかがだったでしょうか？

この記事を通して、少しでもあなたの学びに役立てば幸いです！

:::note info
【仕事の相談はこちら】
お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。

[問い合わせフォームはこちら](https://forms.gle/G5g1SJ7BBZw7oXYA7)

もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。

info*galirage.com（*を@に変えてご送付ください）

🎁 「生成AI活用の無料相談券」もしくは「生成AIの社内ガイドライン（無料PDF）」を『公式LINE』で配布中 🎁
『生成AIを業務に活用したいけど、どうしたらいいかわからない』といった声を多くいただきます。

Galirageでは公式LINEにて、チャットやオンライン会議で「完全個別の生成AI活用無料相談会」を実施しております！
（期間限定で実施しているため、ご興味ある方はお早めに以下のLINE公式アカウントをご登録ください^^）
https://lin.ee/rvz6lMN

※ 予告なく、キャンペーンを終了する可能性がございますが、ご了承ください。

【業務内容】
具体的には、以下のお仕事を中心に受け付けております！（[詳しくはこちら](https://galirage.notion.site/Galirage-AI-c2f3945fafb0433d8d2fd03e56927fd8)）
1. 受託開発（例：生成AIを使った社内システムの開発）
2. コンサルティング（例：技術戦略のアドバイス）
3. 講演（例：社内研修、イベント登壇）

※ 特に「生成AIを使ったシステム開発のご依頼」が多く、ご好評いただいております。

【これまでの相談事例】
以下のようなご相談が多くあります。

🔑 機密情報を漏洩させないための、生成AIのシステム構築をお願いしたい。
🤖 自社データを用いたFAQチャットボットの作り方を知りたい。
💡 ChatGPTを、自分たちの事業にどのように活かせるか、アドバイスやアイデアが欲しい。
:::
# おまけ
エンジニアの仲間（データサイエンティストも含む）を増やしたいため、公式LINEを始めました🎉

「**一緒に仕事をしてくれる方**」「**友だちとして仲良くしてくれる方**」は、友だち追加をしていただけますと嬉しいです！（仲良くなった人たちを集めて、「ボードゲーム会」や「ハッカソン」や「もくもく会」もやりたいなと考えています😆）

とはいえ、みなさんにもメリットがないと申し訳ないので、特典を用意しました！

友だち追加後に、アンケートに回答してくれた方へ「**エンジニア図鑑（職種20選）**」のPDFをお送りします◎

https://lin.ee/hFUN4TL

[![](https://www.umi-mori.jp/wp-content/uploads/2023/10/line_banner_v2.png)](https://lin.ee/hFUN4TL)
スマートルームを自分で作る

## 目的
私は今までソフトプロジェクトだけを作りました。ソフトの勉強にはリスクがあまりないと思います。失敗時に時間を失うだけです。ハードウェアプロジェクトはもっと高いリスクがあります。でも、リターンはすごく高いです。それで、ハードウェアプロジェクトを作りたいです。今はIOT技術にすごく興味があります。それで、スマートルームのプロジェクトをつくります。

## 内容
###1. スマートディスプレイ 
そのデバイスは部屋の前で使って、テキストを表示する。そのテキストは私の情報を表示します。そのデバイスのテキストはAmazon Echoから、音声コマンドを使って、テキスト変更ができます。

###2. スマートライト
そのデバイスは部屋の中に備える、Amazon Echoから、音声コマンド使って、色の変更ができます。

## 技術
### RaspberryPi
このデバイスを使って、インターネットからコマンドを受け取ることができます。

### Arduino Kit
このキットを使って、上の二つの電気回路をつくります。

### IFTTT
このサービスを使って、RaspberryPiとAmazon Echoを繋げることができます。

## デバイスの流れ
最初はAmazon Echoに話しかけます。後はAmazon EchoはIFTTTにコマンドを送ります。次はIFTTTがそのコマンドを分析します。そしてRaspberry Piに通知します。Raspberry Piがコマンドを受け取った後はデバイスの設定を自動的に変更します。
![Capture.PNG](https://qiita-image-store.s3.amazonaws.com/0/293452/ec334298-8cb3-6a46-7525-1d2f441d0386.png)

## 成果
9月までは、上の二つデバイスのプロトタイプをつくります。

## フィードバック
1. 上の技術を使って、他にどんなアイデアを思いつきますか？
2. 上の技術を使って、何か問題が起こると思いますか？
windows環境だとRails5.2でCredentialsを編集できないかもしれない。 

## ことの背景
windowsにrails5.2を入れて新規アプリをつくっている知り合いがいて、外部APIのtokenを保存したいけど、できないということで調べてみた。


## Rails5.2で消えたsecrets.yml
Rails5.2から新規アプリを作成した時にconfig/secrets.ymlが生成されず、代わりにconfig/credentials.yml.encが生成されるようになったらしい。問題はこのファイルを編集する時にコマンドを使うんですが、そのコマンドを実行すると`EDITOR`という環境変数に設定されてるエディタが起動して編集する。

詳しくはこちらを
- [Rails5.2から追加された credentials.yml.enc のキホン - Qiita](https://qiita.com/NaokiIshimura/items/2a179f2ab910992c4d39)

## EDITORを設定するも起動せず
windowsの環境変数にEDITORを設定するとエラーは変わるが、編集できない...


## みんな同じ悩みを持っていた
**[Rails 5.2 Credentials : rails](https://www.reddit.com/r/rails/comments/8ex2hd/rails_52_credentials/)
この掲示板にあるように、最終的にRailsの中身をイジるといけるっぽいけど、ここまでやるのもなぁということで今後のためにも仮想環境でLinuxを入れた方が良いという結論になりました。**
Macでのpython環境の構築：pyenv+anaconda

# はじめに
Mac miniを今更ながらに購入したので、python環境の構築を備忘録として残すことにしました。構築環境は以下の通りです。
- Mac mini (Late 2014)
- macOS High Sierra
## pyenvのインストール
python環境を構築するにあたって、バージョン管理用にpyenvを使用しました。後述するanacondaをpyenv経由で導入するためです。anacondaを直接入れることも可能ですが、以前使用していた環境を再現したい可能性があったため、今回はpyenvを使用しています。

Macへhomebrewをすでに導入している前提で進めますが、以下の文をターミナルへ入力します。補足となりますが、homebrewのインストールは[公式サイト](https://brew.sh/index_ja"homebrew公式")を参考にして導入しています。

```
brew install pyenv
```

### pyenvのパスを通す
現在の環境ではログインシェルとしてbashを使用していますので、`.bash_profile`へ以下の記述を追加しました。

```:.bash_profile
PYENV_ROOT=~/.pyenv
export PATH=$PATH:$PYENV_ROOT/bin
eval "$(pyenv init -)"
```

`.bash_profile`の変更を行ったので、下記のコマンドを実行して、`pyenv`のコマンドを使用可能にしました。

```
source .bash_profile
```


## anacondaのインストール
pythonでよく用いられるパッケージがセットになっているため、環境構築にanacondaを利用するのはとても便利だと思います。anacondaのインストールを行いますが、pyenv上で利用できる環境を以下のコマンドで確認しました。

```
pyenv install --list | grep anaconda
```

最新バージョン(今回は5.1.0)の確認が出来たので、以下のコマンドを実行してanacondaのインストールを行いました。

```
pyenv install anaconda3-5.1.0
```

### anacondaをpython環境として使用する
pyenvに導入されている環境は、

```
pyenv versions
```

で確認することが出来ます。現在使用している環境には\*が付いています。先ほど導入したanacondaへ下記のコマンドで切り替えました。

```
pyenv global anaconda3-5.1.0
```

環境の切り替えはシステム全体に影響するglobalとフォルダ内にのみ影響するlocalがあります。利用目的に合わせて選択してください。

### python環境の削除
pyenvで入れたpython環境を消したくなった場合は以下のコマンドを入力します。

```
pyenv uninstall *target*
```

## おわりに
今回は新しく購入したmacにpyenvを使用してpython環境としてanacondaを導入しました。同じようなことをしようとしている方の参考になれば幸いです。

今後の予定としては、virtual boxの導入と設定を行う予定です。その時の備忘録をまた投稿できればと思います。
railsで関連モデルで検索したい、include where joins merge

# 毎回忘れて悩む関連モデル検索を手短にまとめる

`User`の中で`Profile`の`active`が`true`の人だけ探したい。

mergeを使って条件を指定する。

```rb
search_result.joins(:profile).merge(Profile.where(active: true))
```
Gitリポジトリの改行コードを一括置換する

# コマンド

CRLF→LFの場合
LF→CRLFの場合はunix2dosを使えば同様にできそう（試してない）

```shell
$ git --version
git version 2.19.1.windows.1
$ git grep --cached -l -I $'\r$' | xargs dos2unix
```

# git grep のオプション

`--cached`
>Instead of searching tracked files in the working tree, search blobs registered in the index file.

ワーキングツリー内の追跡されたファイルを探さず、インデックスファイルに登録されたブロブを探す。

`-I`
>Don’t match the pattern in binary files.

バイナリファイル内のパターンにはマッチさせない。

`-l
--files-with-matches
--name-only
-L
--files-without-match`
>Instead of showing every matched line, show only the names of files that contain (or do not contain) matches. For better compatibility with git diff, --name-only is a synonym for --files-with-matches.

マッチした行は表示せずファイル名だけを表示する。

オプション解説でどころ
[Git - git-grep Documentation](https://git-scm.com/docs/git-grep)
Rubyで定数が定義される場所はネスティングによって決まる

###結論
定数の定義される場所は、定義された時のネスティングによって決まる。

`class_eval`でクラスを開いてその中に定数を定義した際、意図した場所に定数が定義されていないことから、定数はどこに定義されるのか疑問が湧きました。

```ruby

class MyClass; end

MyClass.class_eval do
  CONST = "Fuga"
end
```

上記のように定数を定義すると、初心者の私は`MyClass::CONST`に定義されていそう！と思いました。
が、実際には、、、

```ruby

pry(main)> MyClass::CONST 
#=> NameError: uninitialized constant MyClass::CONST

pry(main)> CONST
#=> "Fuga"

```

？？？Ruby何一つわからない…となってしまったのですが、定数の定義場所はネスティングによって決まるということを教えてもらい、謎が解けました。
以下、順を追って説明します。

###ネスティングとは

ネスティングとは、すごくざっくり言ってしまうと"構文的な構造上のコードの区分"で（厳密な定義と間違っていたらごめんなさい）、
class識別子を使用したクラスの定義とmodule識別子を使用したモジュール定義によって切り替わり、`Module.nesting`によって確認できます。

```ruby
class MyClass
  p Module.nesting
end

#=> [MyClass]
```

このネスティングに対応する位置に定数は定義されています。

```ruby
CONST_TOP = "Foo"

pry(main)> p Module.nesting
#=> []
# ネスティングがトップレベルだと空

module A
  CONST_A = "Bar"
  p Module.nesting
  #=> [A]　ネスティングが切り替わる

  class B
    CONST_B = "Hoge"
    p Module.nesting
    #=> [A::B, A] ネスティングが切り替わる
  end
end

pry(main)> CONST_TOP
#=> "Foo"

pry(main)> A::CONST_A
#=> "Bar"

pry(main)> A::B::CONST_B
#=> "Hoge"

#ネスティングに対応した位置に定数が定義されている！
```

それでは、先ほどの例に戻り`class_eval`でクラスを開いて定数を定義してみると、その定数はどこに定義されるのでしょうか？

```ruby

class MyClass; end

MyClass.class_eval do
  p Module.nesting
  #=> []　ネスティングは切り替わっておらず、トップレベルのまま！
  CONST = "Fuga"
end

# class_evalのブロックの中に入ってもネスティングは切り替わっておらず、トップレベルのまま。
# ということは、定数CONSTはトップレベルのネスティングの位置に定義されているはず！

pry(main)> CONST
#=> "Fuga"
# なるほど〜
```

`MyClass::CONST`に定数が定義されているのでは？と思ってしまうのは、`class_eval`を使うとコンテキストがMyClassに切り替わっているためなんですね…

```ruby

MyClass.class_eval do
  p self
  #=> MyClass
  # コンテキストがMyClassに切り替わるため（selfがMyClassに切り替わるため）、
  # 見た目的にMyClass::定数名の位置に定数が定義されていると勘違いしてしまった…
end

```

###まとめ
定数の定義場所はネスティングによって決まる（コンテキストは関係無い）ため、定数を定義する際はネスティングに注意しよう！という話でした。




参照
[rubyリファレンスマニュアル](https://docs.ruby-lang.org/ja/latest/doc/spec=2fvariables.html#const)
[メタプログラミングRuby](rubyhttps://www.amazon.co.jp/%E3%83%A1%E3%82%BF%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0Ruby-%E7%AC%AC2%E7%89%88-Paolo-Perrotta/dp/4873117437)
macOSでCaps LockをControlにして捗るキーボードにする方法

プログラミングのツールは<kbd>Control</kbd>をよく使うが、小指でさっと押せたほうが楽だ。Macでは<kbd>A</kbd>キーの左が<kbd>Caps Lock</kbd>だが、あまり利用シーンのないのでそれを<kbd>Control</kbd>キーを割り当てると捗るようになる。

キーの割り当て変更には特別なソフトは要らない。

「環境設定」→「キーボード」→「キーボード」の「修飾キー」を開き

<img width="668" alt="スクリーンショット 2018-10-10 18.56.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/889/e71e1278-f8c9-d035-5f55-4f2a909edb14.png">

Caps Lockキーの割り当てを「Control」にする

<img width="668" alt="スクリーンショット 2018-10-10 18.57.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/889/cac886cf-6731-f7b8-e161-590926b5c123.png">
ホームディレクトリの監視を行ってユーザー毎の使用量を警告する

#ほっとくと好きなように使われるので定期的に警告を行う

今までの経緯から整理整頓が苦手な人たちのために、ユーザー毎にホームディレクトリ(/home/xxxxx)の容量をチェックするshellを作成しました。
定期的にcrontabで実行して、ログファイルをメールで通知する予定です。

業務的な都合上以下の処理を追加しています。
- GROUPIDを100に制限しています。
- 100MB以下は表示しません。
- /usr/local/bin/username.shでpasswdファイルのコメントを付け込んでいます。

```homedir_chk.sh
set -eu
logdir=/logs/
shname=`basename $0 ".sh"`
alert_size=100000       #閾値(KB単位) 10000=100MB
# ユーザーの一覧を取得する(GROUPID=100のみ)
userlst=(`grep :100: /etc/passwd|awk 'BEGIN { FS = ":" } /home/ {print $1}'`)

for userid in ${userlst[@]}; do
        du -sk /home/$userid |\
        awk -v "par=${alert_size}" '/home/ {if ($1 > par) {printf "%10s %9.2f MB\n",$2,$1/1024}}' |\
        /usr/local/bin/username.sh >> ${logdir}${shname}.log
done

exit $?
```


```username.sh
read_line=`cat -`
computer=`hostname`
hiduke=`date +"%Y%m%d_%H%M%S"`

# 入力データ(標準入力)が空のときexitする。
### if test -z ${read_line} ; then
if [[ -z ${read_line} ]] ; then
   exit 0
fi

# ユーザー名を取得する(/etc/passwd)
usernm=`echo ${read_line} |\
    cut -b 7-13 |\
    xargs -I{} grep {} /etc/passwd|awk 'BEGIN{FS=":"}{print $5"("$1")"}'`

echo -e "${computer} : ${hiduke} : 各自 ホームディレクトリを整理してください。 ${read_line} : ${usernm}"

exit $?
```

ログの出方はこんな感じです。
[i999999@HOSTNAME ~]$ cat homedir_chk.log
`HOSTNAME : 20181010_182122 : 各自 ホームディレクトリを整理してください。 /home/i123456    184.02 MB : Yamada Taro/Qiita(i123456)`
【Pull Request】スクショ貼るときにリサイズしたい【markdown】【Screenshot】

## htmlを使ってリサイズできたーー
```html
<img src="<image>" width="300"> 
```

## つまり
githubのプルリクエストにスクショを貼り付けて画像URLをゲット

```md
![image_name](hogehoge.jpg)
```

上記のURLをhtmlにセットすれば

```html
<img src="hogehoge.jpg" width="300"> 
```

OK

## Template

```shell
<img src="" width="300"> 
```
gitとmercurialのコマンド比較

## きっかけ

mercurialを主に仕事使っていたのですが
最近gitを利用することが出てきたので個人的メモφ(..)

## 比較表

| 機能 | git | mercurial | 補足 |
|-----|-----|-----|-----|
|リポジトリをクローン|git clone {path}|hg clone {path}||
|ファイルを登録|git add {file}|hg add {file}|gitはコミットのたびに変更ファイルのaddが必要<br>mercurialは新規登録されるファイル以外はadd不要|
|すべてのファイルを登録|git add .|hg add||
|ファイルを削除|git rm {file}|hg remove {file}||
|すべてのファイルの登録と削除|不明|hg addremove||
|ブランチの作成|git checkout -b {branch_name}|hg branch {branch_name}||
|ブランチの切替|git checkout {branch_name}|hg up {branch_name}||
|ブランチの削除/閉鎖|git branch --delete {branch_name}|hg commit --close-branch|gitはブランチの削除<br>mercurialは閉鎖という概念。<br>違いは次の項目参照|
|削除/閉鎖 されたブランチの復旧|git reflogでログ番号を確認後<br>git branch {branch_name} HEAD@{{番号}}|閉鎖されたブランチにhg upで切り替えるだけ。<br>コミットでアクティブ状態にもどる|gitはブランチをもどすイメージ<br>mercurialは非アクティブのbranchを復活させる|
|ローカルブランチを表示|git branch|hg branches||
|リモートブランチを表示|git branch -a|不明|mercurialは取り込みが必要|
|リモートブランチをローカルへ取り込む|git branch {branch_name} /origin/{branch_name}|hg pull -u|gitは特定のブランチのみをローカルに展開<br>mercurialは全てのブランチをローカルに展開|
|変更差分の取り込み|git pull<br>or<br>git fetch && git merge /origin/{branch_name}|hg pull -u|mercurialはブランチのローカル取り込みも同時にこなう|
|取り込んで衝突した時|git stash save -u<br>git merge origin/{branch_name}<br>git stash pop<br>コンフリクトしたら手動修正|hg merge<br>コンフリクトしたら手動修正|git stash list でstashしたlistの確認|
|ブランチ間のマージ|git merge origin/{branch_name}|hg merge {branch_name}||
|差分確認|git diff (add前)<br>git diff --cached (add後)|hg diff||


内容に誤りなどありましたら
コメントにて教えていただけると助かります m(_ _)m
Chrome拡張機能のchrome.storageに保存したデータの取得、削除方法メモ

chromeの拡張機能では[chrome.storage](https://developer.chrome.com/extensions/storage)というAPIを使ってデータの保存ができる。
テスト中とかにchrome.storageに入れたデータを確認したり削除したくなるかもしれない(というかなった)のでその方法のメモ書き。

`ポップアップを検証`とかで開発者ツールを出してConsoleから下記を打てば今保存されているデータが確認できる。

```js:Console
// storage.syncの場合
chrome.storage.sync.get(null, ((data) => {console.log(data)}));
// storage.localの場合
chrome.storage.local.get(null, ((data) => {console.log(data)}));
```

すべてのデータを削除するには下記のような感じ。

```js:Console
// storage.syncの場合
chrome.storage.sync.clear();
// storage.localの場合
chrome.storage.local.clear();
```
zshからfishに乗り換えた

前から気になっていたので[fish shell](https://github.com/fish-shell/fish-shell)に乗り換えてみました。

以下の記事が参考になったので、読んでみると良いと思います。

* [詳解 fishでモダンなシェル環境の構築\(fish,tmux,powerline,peco,z,ghq,dracula\) \- Qiita](https://qiita.com/susieyy/items/ac2133e249f252dc9a34)
* [fish shell を使いたい人生だった ｜ DevelopersIO](https://dev.classmethod.jp/etc/fish-shell-life/)
* [fish\-shell でシェルの海をスイスイ泳いでみた \| ヌーラボ](https://nulab-inc.com/ja/blog/backlog/fish-shell-tutorial/)

## やったこと

* fishのインストール
* fzfのインストール
* fisherのインストール
  * themeの変更
  * powerline用のfontsをインストール
* pecoの設定

## fishのインストール

まずはfishをインストールします。
Macなのでbrewで。

その他のOSでのインストール方法は以下を参照してください。
https://github.com/fish-shell/fish-shell

```bash
$ brew install fish
$ fish -v
fish, version 2.7.1
```

ログインシェル、デフォルトシェルをfishに変更します。

```bash
$ echo /usr/local/bin/fish | sudo tee -a /etc/shells
$ chsh -s /usr/local/bin/fish
```

## fzfのインストール

続いて[fzf](https://github.com/junegunn/fzf)をインストールします。
fzfは `A command-line fuzzy finder` とのことで、CLIでインクリメンタルに曖昧な検索が可能になるやつです。(書いていて気づいたけど、後述のpecoと被るのでどちらかで済むかも…)

なぜインストールしたかと言うと、fishにはbashやzshにある `Ctrl + R`で動作するreverse incremental searchが無いのがツラかったからです。

無くてもいい感じに補完してくれるのですが、慣れた操作もしたいよねってとこもあり…
fzf自体は`Ctrl + R`などのキーバインドで機能するもの以外にも色々機能があるので、活用したいところです。

```bash
$ brew install fzf
$ /usr/local/opt/fzf/install
```

## fisherのインストール

てっとり早くいい感じにするにはzshでもあるoh-my-zshのfish版である[oh\-my\-fish](https://github.com/oh-my-fish/oh-my-fish)を使うのも良いのですが、fisherの方がシンプルに感じたのと、oh-my-fishのプラグインなども利用可能なためfisherを利用することにしました。

fisherは、fish向けのパッケージマネージャです。

```bash
$ curl https://git.io/fisher --create-dirs -sLo ~/.config/fish/functions/fisher.fish
$ fisher -v
fisher version 3.0.8 ~/.config/fish/functions/fisher.fish
$ fisher -h
usage: fisher add <PACKAGES>    add packages
       fisher rm  <PACKAGES>    remove packages

       fisher ls                list installed packages
       fisher self-update       update fisher
       fisher self-uninstall    uninstall fisher & all packages
       fisher help              show this help
       fisher version           show version

examples:
       fisher add jethrokuan/z rafaelrinaldi/pure
       fisher add gitlab.com/owner/foobar@v2
       fisher add ~/myfish/mypkg
       fisher rm rafaelrinaldi/pure
       fisher ls | fisher rm
```

テーマ、移動を楽にする系、pecoのプラグイン？パッケージを追加。

```bash
$ fisher add oh-my-fish/theme-bobthefish
$ fisher add 0rax/fish-bd
$ fisher add oh-my-fish/plugin-peco
$ fisher ls
0rax/fish-bd
oh-my-fish/plugin-peco
oh-my-fish/theme-bobthefish
```

テーマはpowerlineを利用しているので、絵文字などを表示できるフォントが必要です。
自分は別でインストールしてpecoいたフォントを利用しましたが、入れていない場合は以下のコマンドでpowerline用のフォントをインストールすると良いと思います。

* https://github.com/powerline/fonts

```bash
$ git clone https://github.com/powerline/fonts.git --depth=1
# install
$ cd fonts
$ ./install.sh
$ cd ..
$ rm -rf fonts
```

## pecoの設定

上でpecoのプラグインをインストールしていたので、設定ファイルに以下を追加します。
上でも述べましたが、fzfで良い場合はそのままでも良いかと思います。
(書いてはみたものの、fzf良かったので`Ctrl + R`は fzfのままにしましたｗ)

```bash:~/.config/fish/config.fish
function fish_user_key_bindings
  bind \cr 'peco_select_history (commandline -b)'
end
```

## こんな感じになりました

![fish.gif](https://qiita-image-store.s3.amazonaws.com/0/6092/567cd1bd-0593-f9c1-b91e-553834c47b0c.gif)
目次プラグインである「Table of Contents Plus」を導入した際に勝手に追加されるfront.min.jsを削除

<h2>Table of Contents Plusを導入</h2>
まずは目次のプラグインである「Table of Contents Plus」を導入。
![tcp.png](https://qiita-image-store.s3.amazonaws.com/0/292492/737cf400-71fc-8d72-81f2-5fb868699c25.png)


無事プラグインを導入完了！

<h2>ページのソースに謎のfront.min.jsが、、</h2>

ソースをみてみたら謎のjsが読み込まれていた。
パスに「Table of Contents Plus」と記載されているので、目次プラグインを導入したら現れたので
犯人は「Table of Contents Plus」と確定！


```
<script type='text/javascript' src='/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
```

<br>
どうにかしてjsを消すことが出来ないかといろいろ調べてたら、下記のコードをfunction.phpに記述すればいけるらしいので
コードを記述。

```
function onze_toc() {
	wp_deregister_script('toc-front');
	if (is_single()) {
		if (class_exists('doc')) {
			wp_register_script( 'toc-front', plugins_url( 'front.min.js', __FILE__ ) , array('jquery'), false, true );
		}
	}
}
add_action( 'wp_enqueue_scripts', 'onze_toc');
```
上記は条件分岐で投稿ページにだけfront.min.jsを出力するような記述です。
v-for内の子コンポーネントのメソッドを親から$refsで呼ぶときにエラーが出てしまうときの対処法

###やりたいこと
- v-forの中で子コンポーネントを複数作る
- 親コンポーネントからそれぞれの子コンポーネントのメソッドを呼びたい

###前提
 親コンポーネントから子コンポーネントのメソッドを呼びたい時、$refsを使えば可能です。

```vuejs:App.vue
    //親コンポーネント
    <template>
        <div id="app">
            <button @click="callChildMethod">Change Message</button>
            <!-- 子コンポーネントにref属性を付けて参照出来るようにする -->
            <HelloWorld ref="child"/>
        </div>
    </template>

    <script>
    import HelloWorld from './components/HelloWorld'

    export default {
        name: 'App',
        methods: {
            callChildMethod(){
                //子コンポーネントのメソッドを呼ぶ
                this.$refs.child.changeMsg();
            }
        },
        components: {
            HelloWorld
        }
    }
    </script>
```

```vuejs:HelloWorld.vue

    //子コンポーネント
    <template>
        <div class="hello">
            <p>{{ msg }}</p>
        </div>
    </template>

    <script>
    export default {
        name: 'HelloWorld',
        data () {
            return {
                msg: 'Hello!'
            }
        },
        methods: {
            changeMsg(){
                this.msg = 'Hi!';
            }
        }
    }
    </script>
 ```

###v-for内の場合
 しかし、v-for内でこの手法を使おうとすると`Uncaught TypeError: this.$refs.child.changeMsg is not a function`とエラーが出てしまいます。

```vuejs:App.vue
    <template>
        <div id="app">
            <!-- 子コンポーネントをv-forで複数個作る -->
            <div v-for="n in 3" :key="n">
                <button @click="callChildMethod">Change Message</button>
                <HelloWorld ref="child"/>
            </div>
        </div>
    </template>

    <script>
    import HelloWorld from './components/HelloWorld'

    export default {
        name: 'App',
        methods: {
            callChildMethod(){
                this.$refs.child.changeMsg();
                //→Uncaught TypeError: this.$refs.child.changeMsg is not a function
            }
        },
        components: {
            HelloWorld
        }
    }
    </script>
```

###対処法
 その場合は`v-for`の引数として提供されているindexを渡してあげれば解決します。

```vuejs:App.vue
    <template>
        <div id="app">
            <!-- v-forの引数でindexを指定 -->
            <div v-for="(n, index) in 3" :key="n">
                <!-- メソッドにindexを渡す -->
                <button @click="callChildMethod(index)">Change Message</button>
                <HelloWorld ref="child"/>
            </div>
        </div>
    </template>

    <script>
    import HelloWorld from './components/HelloWorld'

    export default {
        name: 'App',
        methods: {
            callChildMethod(index){
                //this.$refs.参照ID[index].子のメソッド()の形で呼ぶ
                this.$refs.child[index].changeMsg();
            }
        },
        components: {
            HelloWorld
        }
    }
    </script>
```

![vue_component.gif](https://qiita-image-store.s3.amazonaws.com/0/267011/00b3c50f-8de3-56bc-8232-b2185cea69e3.gif)


###注意点
 ただしコンポーネント同士が密結合になってしまい良くないので、あくまで小規模なものの中で使うようにして、大規模なものに関してはvuexを使うようにした方が後々幸せになれるかもしれません。

###参考
https://laracasts.com/discuss/channels/vue/child-and-refs-not-a-function
VSCodeからDocker for Windowsのpythonにリモートデバッグ（ptvsd==4.1.3）

# VSCodeからDocker for Windowsのpythonにリモートデバッグする

- ローカル端末にはPython入れない
    - [特に深い理由という事もないですが、過去記事でまとめてます](/kfjt/items/b087f0e099ef4f69fd6d)

## 要約

- ptvsd==3.0.0という記事は古い　＝＞　最新版でよい
- ポート3000って意味ある？　＝＞　デフォは5678
- 一次情報にも触れましょう　[PyPI](https://pypi.org/project/ptvsd/) / [git](https://github.com/Microsoft/ptvsd)

## VSCode準備

### 確認したバージョン

- VSCode本体 1.28.0
- VSCode拡張
  - Docker（peterjausovec.vscode-docker） 0.3.1
  - Python（ms-python.python） 2018.9.0

### デバッグ実行するコード
- `ptvsd.enable_attach()`にしてます、ほかの設定に合わせてパラメータでポートいじれます
  - 定義は`enable_attach(address=(DEFAULT_HOST, DEFAULT_PORT), redirect_output=True)`
  - および`DEFAULT_HOST = '0.0.0.0'`
  - そして`DEFAULT_PORT = 5678`

```python:sample.py
import ptvsd
ptvsd.enable_attach()
ptvsd.wait_for_attach()
ptvsd.break_into_debugger()

file = open('/etc/os-release')
content = file.read()
print(content)
file.close()
```

### デバッグ実行準備

- VSCodeでsample.pyを開いておいてデバッグ実行する
  - `F5`
- デバッグ環境を選べと警告が出つつ、launch.jsonを開くよう促される
  - `"name": "Python: Attach"`の辺りを編集
  - 気にするのは`port`と`localRoot`と`remoteRoot`
  - [pathMappingsは公式の案内のようにしても良いのかな（やってません）](https://github.com/Microsoft/ptvsd#attach-request-arguments)


```json:launch.json
    {
      "name": "Python: Attach",
      "type": "python",
      "request": "attach",
      "port": 5678,
      "host": "localhost",
      "localRoot":  "${workspaceFolder}",
      "remoteRoot": "/app"
    },
```

## Docker準備

```sh:ファイルツリー
workspace
│  .dockerignore
│  docker-compose.yml
│  Dockerfile
│  requirements.txt
│  sample.py
│
└─.vscode
       launch.json
```

- ポート**5678**開放

```dockerfile:Dockerfile
FROM python:3.6.6-slim-stretch
LABEL Name=pyremotedebug Version=0.0.1
EXPOSE 5678
WORKDIR /app
ADD . /app
RUN python -m pip install -r requirements.txt
```

- ptvsdは**4.1.3**

```text:requirements.txt
ptvsd==4.1.3
```

- よその記事みたいにポート3000でもいいけど、衝突しなければ何でもいいです

```yaml:docker-compose.yml
version: '2.1'

services:
  pyremotedebug:
    image: pyremotedebug
    build: .
    ports:
      - 5678:5678
    volumes: 
      - .:/app
    command: >
      python
      /app/sample.py
```

- （一度だけ）dockerイメージつくる
  - `docker-compose build`

## デバッグ実行

- コンテナ起動しつつ
  - `docker-compose up -d`
      - 二度目以降はVSCode的には、`Dockerのアイコン=>DOCKER EXPLORER=>Containers=>目当てのコンテナを右クリ=>Restart Container`でしょうか
      - 統合ターミナルで`上+Enter`の方が楽か

- 環境`Python: Attach`でデバッグ実行する
  - sample.pyのLine6 `file = open('/etc/os-release')` で止まるはず

以上
列挙型の値を対応する文字列で表示したい！

## 背景

- C# + XAML
- 列挙の値に対応する文字列を表示したい

```c#:「演算子」列挙型
//演算子
public enum Operator
{
  PLUS, MINUS, MULTIPLY, DIVIDE,
}
```

```xml:XAML
<!--演算子-->
<ComboBox ItemsSource="{Binding Path=Operators}" />
```

ここでは、ComboBoxの`ItemsSource`を、`Operator`列挙型のコレクションとバインドしています。

他に何も書かなければ、ComboBoxの選択肢は、列挙の値（`PLUS`など）がそのまま文字列として表示されますね。

でも、`Operator`列挙型は演算子なので、「＋」や「－」を表示したいんです！

## BindingにConverterを付けると…

まず思いつくのが、バインドにコンバーターを指定する方法です。

```xml:XAML
<!--演算子-->
<ComboBox ItemsSource="{Binding Path=Operators,
                                Converter={StaticResource converter}}" />
```

しかしこれは、バインドしている対象、ここでは「`Operator`列挙型のコレクション」をコンバートするコンバーターを指定するものです。

これでもいいのですが、コレクションのコンバーターではなく、やっぱり個々のアイテムのコンバーターにしたいですよねぇ。

## TypeConverter属性！

そこで`TypeConverter`属性の登場です！

```c#:「演算子」列挙型
//演算子
[TypeConverter(typeof(OperatorConverter))] //コンバーターの指定
public enum Operator
{
  PLUS, MINUS, MULTIPLY, DIVIDE,
}
```

上記のように`Operator`列挙型に`TypeConverter`属性を付けると、`Operator`列挙型と他の型とのコンバートが必要になると、指定したクラス（ここでは`OperatorConverter`）がコンバーターとして使われます。

ここで作っている`OperatorConverter`クラスは列挙型に付けるコンバーターなので、`System.ComponentModel.EnumConverter`クラスを継承元にして定義します。

```c#:OperatorConverterクラス
//演算子と文字列のコンバーター
public class OperatorConverter : System.ComponentModel.EnumConverter
{
  //コンストラクター
  public OperatorConverter(Type type) : base(type)
  {
  }

  //演算子から文字列への変換
  public override object ConvertTo(ITypeDescriptorContext context, CultureInfo culture, object value, Type destinationType)
  {
    if (destinationType != typeof(string)) throw new NotSupportedException();

    try
    {
      Operator ope = (Operator)value;
      return ope.GetString();//Operatorをstringに変換する拡張メソッド（詳細は省略）
    }
    catch
    {
      throw new NotSupportedException();
    }
  }

  //文字列から演算子への変換
  public override object ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, object value)
  {
    //（略）
  }
}
```

`ConvertTo`メソッドに他の型へのコンバート、`ConvertFrom`メソッドに他の型からのコンバート処理を記述します。

```xml:XAML
<!--演算子-->
<ComboBox ItemsSource="{Binding Path=Operators}" />
```

これで、XAMLはもとのままですが、ComboBoxの選択肢は`PLUS`など列挙の値そのままではなく、`OperatorConverter.ConvertTo`メソッドで変換した値になりました。

めでたし、めでたし！

## 参考

 - [TypeConverterクラス](https://docs.microsoft.com/ja-jp/dotnet/api/system.componentmodel.typeconverter "microsoft")
 - [EnumConverterクラス](https://docs.microsoft.com/ja-jp/dotnet/api/system.componentmodel.enumconverter "microsoft")
特定のテキストを持つHTML要素までスクロールする

## 概要
特定のテキストを持つDOM要素を取得する場合、`$('セレクタ指定:contains("テキスト")')`が便利です。
contains内にスクロールしたい場所のテキスト要素を指定します。
その後、指定したDOM要素の`offset().top`でスクロール位置を取得し、`animate({scrollTop:指定したDOM要素.offset().top})`で動くかと思います。

## 今日の日付を持つHTML要素までスクロールしたい

```javascript
  // jsの日付は面倒なのでテスト用固定値で定義
  var nowDate = "2018/10/10";
  // class="day"のDOM要素の中で「2018/10/10」をテキストに持つ要素を取得
  var $nowDateSection = $('.day:contains("' + nowDate + '")');
  // 今日の日付が存在しない場合スクロールをしない(lengthが0の場合セレクタ指定で取得できていない = 指定した日付のデータが存在しないので処理する必要がない)
  if($nowDateSection.length === 0) return;
  // 指定したテキストを持つDOM要素までスクロールする
  $("html,body").animate({scrollTop:$nowDateSection.offset().top});
```

## すべてのファイルの読み込みが終わった後にスクロールしたい
読み込むファイルが多い場合、スクロールした後にファイルの読み込みが行われ上に戻ってしまう場合があります。その場合は`window.onload`に関数を指定してあげればOKです。

```javascript
  window.onload = function() {
    var nowDate = "2018/10/10";
    var $nowDateSection = $('.day:contains("' + nowDate + '")');
    if($nowDateSection.length === 0) return;
    $("html,body").animate({scrollTop:$nowDateSection.offset().top});
  }
```

### ブラウザバック時にもスクロールさせたい

[ブラウザで戻ってもonloadイベントを走らせる](http://2g.atsukitaira.com/javascript/915/)
こちらのリンクが参考になりました。ブラウザにもよりますがChromeだとこのコードでちゃんと動くことが確認できました。
このコードを追加すればブラウザバック時にもスクロールされるようになります。
もちろんブラウザバック時にスクロールさせたくない場合はこちらのコードは使わなくて大丈夫です。

```javascript
$(window).unload(function(){});
```
「”リテラシーが低い”は開発者の驕り」（Developers Summit 2018 KANSAIの感想）

# 全体まとめ
「”リテラシーが低い”は開発者の驕り」という言葉が心に刺さり過ぎました。
開発者として、便利なものや新しいものを楽しみながら作ることは大切ですが、利用者の目線になることも大切だと改めて痛感しました。

# 各セッションのメモ
業務の都合があり、途中からの参加になってしまいましたが、聞いたセッションのメモです。

## 農家と流通業者のタッチポイントにLINE Botを導入した話
「”リテラシーが低い”は開発者の驕り」。なんせこれがパワーワード過ぎました。
内容の話をすると、これまで電話やFAXを使って人力でやっていた業務をline bot & APIとslackに置き換えた話でした。
農家の方も、便利だとわかるととても積極的に利用してくれるようになったらしいです。
利用者をうまく導入する方法として、チュートリアル動画を用意するなどわかりやすくなるように工夫したとのことでした。

## 新技術で未来の扉を開け！ - Node-REDの環境構築と社内導入
Node-REDはGUIでnode上で動くシステムを作ることができるそうです。nodeでできることは大体できるとのこと。
この手のツールはさくっとPoCを作るの向いてる印象です。
しかし、細かいことをやろうと思ったらハマる部分や実現ができない部分があり、普通に開発する必要がでてきそうなイメージがあります。
あくまで先入観でしかないので、まずは一度使ってみたいと思います。

## 東京本社よりも地方開発拠点を活性化させるコツ！！！！
sansanの方がチームビルディングやチームマネジメントでやったことを話していました。
タイミング的にもちょうど興味関心がある分野で、1 on 1や各種スクラム手法を用いて自分で成長するチームを目指したチームマネジメントの実例を聞けて面白かったです。
自社にも取り入れられそうな内容もいくつもあったので、聞いた話を自社に当てはめて実践していきたいですね。

## 未来のために技術力を使おう―子ども向けプログラミング道場「CoderDojo」の急成長の理由
coder dojo西宮の方が「coder dojoの成り立ち」、「思想」、「各地のdojoの紹介」をされていました。
「coder dojo」というワードはtwitterなどでたまに見かけるのですが、何しているのかよくわかっていなかったので「なるほどなぁ」という感じでした。
dojoによって思想など違って面白いですね。
ボランティアも募集しているようなので、機会を見つけて門を叩いてみようかなと思います。

# 資料はこちら
[Developers Summit 2018 KANSAI登壇資料まとめ](https://qiita.com/kapiecii/items/720b5e549c2fb964e3be)
Android Studio 3.1 -> 3.2へのマイグレーションメモ

雑ですがなにかの参考にしてください

何かこれもやったほうがいいよみたいなのあれば教えてください :bow: 

このQiitaのコメントにこのQiitaにないやるべき対応があるので、そちらもご覧ください :pray: 

# Android Gradle Pluginのバージョンアップ
`"com.android.tools.build:gradle:3.2.0"`へ変更

# DataBinding + Kotlinを使っていたらkaptでのdatabindingのバージョン指定が要らなくなったので削除する
https://android.googlesource.com/platform/tools/base/+/1e9d5dc30ecc6187c48fd21ba0e533b4f797bd94%5E%21/

以下を消す

```
kapt "com.android.databinding:compiler:..."
```

# shyiko/ktlintを使っているとエラーが起きる
> java.lang.IllegalArgumentException: Cannot change attributes of configuration ':app:kapt' after it has been resolved

というエラーが起きます
https://issuetracker.google.com/u/2/issues/111990719#comment13
詳細はここ
以下のようにすると治ります

```
     commandLine 'java', '-cp', configurations.ktlint.join(System.getProperty('path.separator')), ...
with this line:
    doFirst {
        commandLine 'java', '-cp', configurations.ktlint.join(System.getProperty('path.separator')), ...
    }
```

# 古いCrashlytics Gradle pluginを使っているとエラー
> The Android Gradle plugin supports only Crashlytics Gradle plugin version 1.25.4 and higher. Project 'abema-android' is using version 1.22.1.

というビルドエラーが起きる。
`classpath 'io.fabric.tools:gradle:1.25.4'` などにアップデート

ちなみにチェンジログはここで見られます。
https://docs.fabric.io/android/changelog.html


# gradle/android-cache-fix-gradle-pluginを使っていたら削除する
> Note: With Android 3.2.x the cache-fix plugin is not required.

要らなくなったみたいなので消します
https://github.com/gradle/android-cache-fix-gradle-plugin

# android.enableD8=true、android.databinding.enableV2=true の削除
source: https://developer.android.com/studio/releases/gradle-plugin
> By default, Android Studio now uses a new DEX compiler called D8

source: https://developer.android.com/topic/libraries/data-binding/start#preview-compiler
> The new data binding compiler in version 3.2 is enabled by default

DataBinding V2に対応する方法は以下にあります
https://qiita.com/takahirom/items/4302c65e864a2aee956a#databinding%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88


# Build Toolsのバージョンの警告への対応
> WARNING: The specified Android SDK Build Tools version (27.0.3) is ignored, as it is below the minimum supported version (28.0.2) for Android Gradle Plugin 3.2.0.

が表示されます。
28.0.2に変更してあげました。

# Kotlinのバージョンアップ
1.2.50 -> 1.2.71にアップデート
古いKotlinを使っているとAndroid Studioがハングするらしい
https://developer.android.com/studio/releases/#3-2-0