OmniAICreator/Qiita-1.07M huggingface dataset:
Android 9(Pie)でHTTP通信を有効にする

Android 9(Pie)でデフォルトでHTTPS通信になったので(App Transport Security(以下ATS)みたいな感じ)、HTTP通信を許可する方法を書いておく。
時代の流れ的にはHTTPS対応する方向がベターだと思う。

ATSのような全許可の仕組みは無い（たぶん）。

## エラー
これまで通り通信しようとすると、以下のようなエラーが表示される。

```
java.io.IOException: Cleartext HTTP traffic to example.com not permitted
```

## 対応
`res/xml`ディレクトリを掘って、以下のようなファイルを置く。

```xml:res/xml/network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">example.com</domain>
    </domain-config>
</network-security-config>
```

- `example.com`部分が対象のドメインなので適宜書き換える。
- `cleartextTrafficPermitted="true"`がHTTP平文通信を許可する設定(ATSの`NSTemporaryExceptionAllowsInsecureHTTPLoads`のようなもの)。
- `includeSubdomains="true"`はサブドメインを含む場合に記載(ATSの`NSIncludesSubdomains`のようなもの)。

作った設定をAndroidManifestから参照させる。

```xml:AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
    :
    <uses-permission android:name="android.permission.INTERNET" />
    :
    <application
        :
        android:networkSecurityConfig="@xml/network_security_config">
        :
    </application>
</manifest>
```

これでHTTP通信できるようになる。

## トラブルシュート
設定後に以下のようなメッセージが表示されている場合は、ファイルの場所に問題があるかAndroidManifestファイルの記載内容に問題があって設定ファイルを読み込めていない。

```
D/NetworkSecurityConfig: No Network Security Config specified, using platform default
```

読み込みがうまくいっている場合は以下のような表示になる。

```
D/NetworkSecurityConfig: Using Network Security Config from resource network_security_config
```


## 参考

- [Android Developers Blog: Protecting users with TLS by default in Android P](https://android-developers.googleblog.com/2018/04/protecting-users-with-tls-by-default-in.html)
- [ネットワーク セキュリティ構成 &nbsp;|&nbsp; Android Developers](https://developer.android.com/training/articles/security-config?hl=ja#network-security-config)
サーバーについて

1. サーバーは何かを保管しておいて要求があったときに渡す仕組みやソフト。
2. PCにそれぞれのサーバーソフトを入れることで、webサーバーやメールサーバーなど呼び方が変わっている。
3. サーバーには高速な処理などが必要なので、ソフトを入れるPCはたいがい高性能な大型コンピュータ。
4. もちろん自分のPCもサーバーとして使える。

>[ウェブカツ！！](https://webukatu.com/?afid=p5lxu1kvh03rayd2ctjsw4e9bgzq8nom)
ActiveStorageを使用したモデルに関連するRequest SpecでActiveSupport::MessageVerifier::InvalidSignatureが発生する問題の解決策

# やろうとしたこと

ActiveStorageを使用したモデルで`name`カラムの変更テストをした際、`ActiveSupport::MessageVerifier::InvalidSignature`が原因で失敗することがありました。

```hoge.rb
class Hoge < ApplicationRecord
  .
  .
  .
  has_one_attached :attached
  .
  .
  .
end
```

```hoge_factory.rb
FactoryBot.define do
  factory :hoge do
    name { Faker::Name.name }
    .
    .
    .
    attached { fixture_file_upload(Rails.root.join('spec', 'fixtures', 'files', 'test.jpg'), 'image/jpg') }
    .
    .
    .
    trait :edit do
      name "HOGE"
    end
  end
end
```

```hoges_spec.rb
require 'rails_helper'

RSpec.describe "Hoges", type: :request do
  .
  .
  .
  describe 'PUT #update' do
    let!(:hoge) { create(:hoge) }

    context 'when sign_in admin user' do
      before do
        sign_in @admin_user
      end

      it 'can update name' do
        # テストが失敗したので、例外の内容を出力してみると、「ActiveSupport::MessageVerifier::InvalidSignature」だった
        expect do
          put bad_report_url bad_report, params: { bad_report: attributes_for(:bad_report, :edit) }
        end.to change { BadReport.find(hoge.id).name }.from(hoge.name).to("HOGE")
      end
    end
  end
  .
  .
  .
end
```

# 解決策

`after(:build)`の中でfixture_file_uploadするようにします。

```diff
-    attached { fixture_file_upload Rails.root.join('spec', 'fixtures', 'files', 'test.jpg'), 'image/jpg' }
+    
+    after(:build) do |hoge|
+      hoge.attached = fixture_file_upload(Rails.root.join('spec', 'fixtures', 'files', 'test.jpg'), 'image/jpg')
+    end
```

参考: https://stackoverflow.com/questions/47583883/how-to-properly-do-model-testing-with-activestorage-in-rails
Java for文を使用した画期的なひし形の作り方wwww

```
public class sample {
	public static void main(String args[]){
		int i;


		for(i=0; i<5; i++){
			switch (i) {
			case 0:
				System.out.println("  *  ");
				break;
			case 1:
				System.out.println(" *** ");
				break;
			case 2:
				System.out.println("***** ");
				break;
			case 3:
				System.out.println(" *** ");
				break;
			case 4:
				System.out.println("  *  ");
				break;
			default:
				break;
			}
		}


	}
}
```

変数２つを使用して1,3,5,3,1の計算になるような計算式を募集いたします。
ブヒィ 🐷

🐷

# Ruby

```rb
buhii = Enumerator.new { |y| loop { y << 'ブヒィ'.split('').sample } }
buhii.take(50).join
# "ヒィブブィィヒィブブブィブヒィヒィィヒィヒヒヒヒブブブィブヒヒヒブィィヒブヒィィヒブヒヒヒブヒィブブ"
```

🐷 おまけ: Mac の方は :point_down_tone1: 

```rb
system("say #{buhii.take(50).join}")
```

# Python

```py
import itertools
import random

def buhii():
  while True:
    yield random.choice([chr for chr in 'ブヒィ'])

''.join(itertools.islice(buhii(), 50))
# 'ィブブヒヒヒヒィブブブヒィィィィブブヒヒブブヒヒィィヒィィィブブィィブィィヒヒヒィヒヒブィィヒヒヒィ'
```

# JavaScript

```js
const sample = (array) => array[Math.floor(Math.random() * array.length)];
const times = (n, fn) => (new Array(n)).fill(null).map(fn);

const buhii = function* () { while (true) yield sample('ブヒィ'.split('')) };
times(50, () => buhii().next().value).join('');
// 'ヒブブヒィィィィヒィヒヒブブィィブィィィヒブヒヒブヒヒヒブィブブヒヒヒヒブヒィヒヒヒヒブィヒヒィィィ'
```
Generate selfsigned certificate

openssl genrsa -des3 -passout pass:x -out certificate.pass.key 2048
openssl rsa -passin pass:x -in certificate.pass.key -out certificate.key
openssl req -new -key certificate.key -out certificate.csr
openssl x509 -req -days 365 -in certificate.csr -signkey certificate.key -out certificate.crt
ディレクトリにタグ付けして移動を簡単にするスクリプト

ディレクトリを細かく分けていたりすると、ディレクトリ構造が深くなり`cd`コマンドでのディレクトリ移動が面倒くさくなることが多かったため、簡単に指定したディレクトリに移動できる
コマンドを作成してみた。この記事は、その構成のメモ。

作成したスクリプトは https://github.com/x-color/jump-sh に置いてある。

![demo.gif](https://qiita-image-store.s3.amazonaws.com/0/279498/a0204ade-cadb-08bc-74a4-98c4e68106a5.gif)

# 構成

構成は大きく分けて以下の通り。

1. オプション解析
2. 各オプションの処理
3. ディレクトリ移動処理

## オプション解析

オプション解析には、`getopts`を用いた。`while`を用いることで、複数のオプションを解析している。
今回のスクリプトは関数を用いて作成しているため、環境変数を汚さないために各変数は`local`で宣言する必要がある。これを用いないと、正常に動作しなくなることがあるため注意が必要。

```bash
local OPTIND OPTARG OPT
local _flg_add _flg_del _flg_lst _tag_add _tag_del

# Options parser
while getopts a:d:lh OPT
do
  case $OPT in
    "a" ) _flg_add="TRUE"
          _tag_add="$OPTARG" ;;
    "d" ) _flg_del="TRUE"
          _tag_del="$OPTARG" ;;
    "l" ) _flg_lst="TRUE" ;;
    "h" ) _usage_jump
          return 1 ;;
      * ) _usage_jump
          return 1 ;;
  esac
done
```

## 各オプションの処理


### タグ削除のオプション(-d)が指定

タグ削除のオプションが指定された場合は、`sed`コマンドを用いてタグを保存しているファイルから、指定されたタグから始まる行を検索し削除。

```bash
# Delete bookmark
if [ "$_flg_del" = "TRUE" ]
then
  # Delete
  sed -i -e '/^'$_tag_del',/d' ~/.jump_tags
fi
```

### タグ追加のオプション(-a)が指定

タグ追加のオプションが指定された場合は、カレントディレクトリのパスを取得し、指定されたタグとともにカンマ区切りでファイルに保存。

```bash
# Add tag
if [ "$_flg_add" = "TRUE" ]
then
  local _dic_path=`pwd`
  local _check=`grep -e '^'$_tag_add',' ~/.jump_tags`
  if [ "$_check" != "" ]
  then
    # Error : tag is already resistered in .jump_tags
    echo -e "[$_tag_add] is already registered in tags." 1>&2
    return 1
  else
    # Add
    echo "$_tag_add,$_dic_path" >> ~/.jump_tags
  fi
fi
```

### タグ一覧表示のオプション(-l)が指定

タグ一覧表示のオプションが指定された場合は、タグを保存しているファイルの内容を`column`コマンドで整形して表示。

```bash
# List up tags
if [ "$_flg_lst" = "TRUE" ]
then
  # List up
  cat ~/.jump_tags | sort | column -t -s,
fi
```

以下の順でタグ一覧を表示している。
1. `cat`コマンドでファイルを出力。
2. `sort`コマンドでタグをソート。
3. `column`コマンドでカンマを区切り文字として、表形式で表示。

## ディレクトリ移動処理

### 引数取得の準備

引数取得の前に、以下のスクリプトで指定されたオプションをすべて破棄する。これにより引数の取得が容易になる。

```bash
# Delete options
shift `expr $OPTIND - 1`
```

`$OPTIND`は指定されたオプションの数+1の値なので、そこから1引いた分だけ`shift`コマンドで引数をずらすことで、オプションの破棄を行っている。

### ディレクトリ移動処理

引数を取得し、指定されたタグに対応するパスをファイルから検索し、見つかった場合にディレクトリを移動する。

```bash
# Check arguments
if [ "$#" != "0" ]
then
  # Jump to tag
  local _dir_path=`grep -w "^$1" ~/.jump_tags | cut -d , -f2`
  if [ "$_dir_path" = "" ]
  then
    # Error : cannot find tag in .jump_tags
    echo "[$1] can not find in tags." 1>&2
    return 1
  else
    # Jump
    cd $_dir_path
  fi
elif [ "$OPTIND" = "1" ]
then
  # No option and no argument
  _usage_jump
fi
```

以下の順でタグからパスを取得している。
1. `grep`コマンドで指定されたタグで始まっている行をファイルから取得。この際に`-w`オプションでタグが完全一致するもののみを抽出。
2. `cut`コマンドで、カンマ区切りで2列目以降(パス)を取得。

# あとがき

作成を始めたときは、シェルスクリプトで

```bash
#!/bin/bash

# ここまでで色々な引数処理を行う

_dir_path=指定されたタグに対応するパス

cd $_dir_path
```

このような感じで実装しようとしていたが、このシェルスクリプトを実行した時点でプロセスが違うので、`cd`コマンドを実行したところでカレントディレクトリが移動しないことに気がついた...
Javaを使ってひし形を作る

もっといい方法がある気がしますが...

```java

public class ex3 {
	public static void main(String[] args) {
		int i, j;
		int max = 5;
		int p = max / 2 + 1;
		int left = p;
		int right = p;

		for (i = 1; i <= max; i++) {
			for (j = 1; j <= max; j++) {
				if (j >= left && j <= right) {
					System.out.print("*");
				} else {
					System.out.print(" ");
				}
			}
			System.out.println();
			if (i < p) {
				left--;
				right++;
			} else {
				left++;
				right--;
			}
		}
	}
}
```
##実行結果
![sample.png](https://qiita-image-store.s3.amazonaws.com/0/279354/0af67c58-bda8-2f32-111b-c87133cd8d57.png)
HTML email - Use Anchor as Button for Windows 10 Mail

Set CSS for inline HTML.

```CSS
.btn {
    border-radius: {{ RADIUS }};
    background: {{ COLOR }};
}
.btn a {
    border-radius: {{ RADIUS }};
    border: solid 1px {{ COLOR }};
    padding: 1em 1.5em;
    color: #fff;
}
```

```HTML
<table border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td class="btn">
            <a href="{{ URL }}">
                {{ LABEL }}
            </a>
        </td>
    </tr>
</table>
```

Anchor's `display: block` didn't work.
`padding` didn't work without set `border`.
Angularを、高機能ホスティングサービス「Netlify」でつかって高速化/Lighthouse高得点とるためのビルドファイルを公開しました

[rdlabo/netlify_build_angular](https://github.com/rdlabo/netlify_build_angular)を公開しました。タイトルの通り、AngularをNetlifyという高機能ホスティングサービスで使うためのビルドファイルです。

やることは、次の4つです。

1. `robot.txt`を生成します
2. wwwつきURLに自動的にリダイレクトするための `_redirects` を生成します
3. ServerPushするための `_headers` を生成します
4. CSSをインライン化します

Angularは、ビルド時にビルドファイルを生成するフォルダを再生成します。また、`--prod`がつくと、ファイル名に乱数がつくようになります。（`main.js`が`main.f1ec16ef52a78f4177f7.js`になるなど）
ですので、自動デプロイする場合、Netlify上でこれらのファイルを動的生成する必要があります。

## どう使うか
レポジトリにある[netlify.build.js](https://github.com/rdlabo/netlify_build_angular/blob/master/netlify.build.js)をダウンロードしてプロジェクトフォルダのトップディレクトリに設置してください。`package.json`や`angular.json`とかと同じ階層です。

その後、[L19-L26まで](https://github.com/rdlabo/netlify_build_angular/blob/master/netlify.build.js#L19-L26)をあなたの環境に変更してください。例えば、Ionic v4でしたら`publicDir`は`www/`になりますし、`appDomain`はあなた自身のドメインに変更してください。
`debug = true` は、確認用ファイルを生成します。`_redirects`、`_headers`はNetlify上ではアクセスできないので、同じ内容のファイルをそれぞれ`redirects.txt`、`_headers.txt`で生成します。`false`にすると生成しません。

設定が完了したら、Netlifyのビルド時の設定を行います。

<img width="927" alt="スクリーンショット 2018-08-09 15.41.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/100460/a5e67933-1eba-21c7-3382-26d3e38b2e87.png">

こんな感じで、`node netlify.build.js` を追加してください。この状態で自動ビルドを走らせると、自動的にAngularをビルドしたあと、この設定ファイルに従ってビルドを行ってくれます。

## これらの設定の効果
### 1. `robot.txt`を生成します
Lighthouseの点数が高くなります。Google botに、このサイトはインデックスしていいよーと教えてあげる内容です。

> If your robots.txt file is malformed, crawlers may not be able to understand how you want your website to be crawled or indexed.

https://www.rdlabo.jp/robots.txt といったファイルが生成されます。

### 2. wwwつきURLに自動的にリダイレクトするための `_redirects` を生成します
> Netlifyではwwwなしのドメインも使うことができますが、wwwつきの利用が強く推奨されています。wwwをつけると、`Netlify’s powerful CDN`を使うことができます。
https://www.netlify.com/docs/custom-domains/

https://angular-default-sample.netlify.com/redirects.txt が生成されます。

### 3. ServerPushするための `_headers` を生成します
> HTTP/2 の新機能「サーバープッシュ」は、次のリクエストが来る前に必要となるコンテンツをクライアントへ送信可能です。
https://developers.google.com/web/fundamentals/performance/http2/?hl=ja#_7

https://angular-default-sample.netlify.com/headers.txt といったファイルが生成されます。

### 4. CSSをインライン化します
> ページの読み込み速度が上がると、ユーザ エンゲージメント、ページビュー、コンバージョン率の向上につながります。ページを高速で読み込むには、初回ペイント時に必要なスクリプトやリンクをインライン化して、それ以外の要素は後回しにします。
https://developers.google.com/web/tools/lighthouse/audits/blocking-resources?hl=ja

## おわりに
なお、弊社サイトではPHPでごにょごにょしてたのですが、公開するためにNode.jsで書き直しました。Angularを公開するためのビルドファイルなので、こっちのほうがしっくりきますねｗ

Ionicプロジェクト用のものは[Ionic-sub CLI](https://qiita.com/rdlabo/items/52bfe3c19ee586abe67a)に直接組み込む予定です。

[rdlabo/netlify_build_angular](https://github.com/rdlabo/netlify_build_angular)

それでは、また。
live2Dで自作したキャラの視線追従設定　unityでの

http://docs.live2d.com/cubism-sdk-tutorials/lookat/

において、視線追従は説明されている。


けれど、視線が追うのはマウスカーソル。

そうではなくて、プレイヤーを追従させたい。



CubismLookControllerコンポーネントの［Target］に追従させたいplayerオブジェクトをドラッグするが入ってくれず、nonのまま



解決方法はplayerオブジェクトの方にも設定が必要で

playerオブジェクトを選択してCubismLookTargetBehaviourをアタッチ


そのように設定した後ならば、CubismLookControllerコンポーネントの[target]にplayerオブジェクトをドラッグで設定することができるようになった。
Python3.7の好きな新機能

# dataclassデコレータ
クラスの定義に`dataclass`デコレータを付けることで`__init__`やら`__repr__`を自動生成してくれる。

通常のクラスは、

```python
class Vector:
    def __init__(self, x, y):
        self.x = x
        self.y = y

    def __repr__(self):
        return f"{self.__class__.__name__}(x={self.x}, y={self.y})"

    def __add__(self, other):
        self.x += other.x
        self.y += other.y
```
dataclassを使うと、

```python
from dataclasses import dataclass

@dataclass
class Vector:
    x: float
    y: float

    def __add__(self, other):
        self.x += other.x
        self.y += other.y
```
コード数がすごい減る。

また、`dataclass`デコレータはデフォルトではミュータブルであるが、`@dataclass(frozen=True)`と書けばイミュータブルなオブジェクトとして扱うことができる。

```console
>>> from dataclasses import dataclass
>>> @dataclass(frozen=True)
... class Vector:
...   x: float
...   y: float
...   def __add__(self, other):
...     self.x += x
...     self.y += y
...
>>> v = Vector(1.3, 1.5)
>>> v.x = 1.9
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "<string>", line 3, in __setattr__
dataclasses.FrozenInstanceError: cannot assign to field 'x'
```

# 組み込み関数breakpoint
Python3.7から組み込み関数`breakpoint()`が追加された。Railsエンジニアにおなじみの`binding.pry`みたいに実行を途中で止めて変数の中身を見れたりする。すごい便利。

```python
a = 1.5
b = a * 4
breakpoint() # ここで止まる
print(a * b)
```

# dictionaryの順序保持
`dictionary`が順序を保持するようになった。これは地味に嬉しい。

```console
>>> dictionary = {'a': 1, 'b':2, 'c':3, 'd':4, 'e':5}
>>> for key, value in dictionary.items():
...   print(key, value)
...
a 1
b 2
c 3
d 4
e 5
```
俺の便利ツール

この記事は移行しました！[最新の内容はこちら](https://naoqoo2.github.io/blog/%E4%BF%BA%E3%81%AE%E4%BE%BF%E5%88%A9%E3%83%84%E3%83%BC%E3%83%AB/)をご覧ください😀

## URL（ドメイン）のサンプルなんだっけ？

- http://example.com/

[test.comやaaa.comをテストデータに使うのはやめましょうという話](https://blog.ko31.com/201304/sample-domain-example/#co-index-0)

## 動画キャプチャを撮りたい

- LICEcap

PC画面をGIF動画としてキャプチャ。[Mac/Windows対応]
[ダウンロードはこちら](https://www.cockos.com/licecap/)

## 画像を圧縮したい

- https://squoosh.app/

google製。ブラウザ完結。

## 画像にテキストを入れたい

- [FotoJet](https://www.fotojet.com/jp/)

web上で会員登録不要でも使える

## ファイルを共有したい

Firefox send サービス終了してた。。。何か探さねば。。。

## ダミーAPIがほしい
- https://www.mocky.io/

APIのモックサービス。
レスポンスの遅延もできる。

## APIのテストをしたい

https://qiita.com/naoqoo2/items/4ecfe2d0922215850965

## ダミー画像がほしい
- http://placehold.jp/

様々なサイズのダミー画像URLを生成。

### ExifのOrientationいろいろ

https://www.galloway.me.uk/2012/01/uiimageorientation-exif-orientation-sample-images/

## 大容量のアップロードテスト用ファイルが欲しい

コマンドで作れるよ！

例）`mkfile -n 1000000000 temp_1GB_file`

参考: https://reasonable-code.com/mkfile/

## パワポマンがほしい
- [パワポマンメーカー](http://tokyotools.webcrow.jp/pawapoman/)

## 画像から人物を抜き出して透過画像を作りたい
- https://www.remove.bg/

画像アップロードまたはURL指定。
アカウント登録不要で無料ですぐ使える。

## キャッチコピーを作りたい
- http://www.copymecha.com/index.php

キャッチコピー自動作成マシン「コピーメカ」

## リアルタイムアンケートしたい

- [mentimeter](https://www.mentimeter.com)

## 速度を表現したい
- http://tateita.com/web_audio_metronome.html

メトロノーム。
速度を伝えたい時などに。

## PHPアプリのパフォーマンス改善したい
- https://blackfire.io/

blackfire。PHPのプロファイリングツール。

## TDD体験したい
- http://www.cyber-dojo.org/

サイト上でTDDを体験できる。

## チュートリアルを作りたい
- [Intro.js](https://introjs.com/)

jsでHTMLをほぼいじらずにページにチュートリアルを作成できる。
Hint（ヘルプのようなもの）も作成可能。

## 英語わからん

- https://codic.jp/engine

変数などの命名で困ったときに。

## JSの挙動を確認したい

- [Runstant Lite](https://lite.runstant.com/)

## 絵を書きたい（落書きしたい）

- [canvas](https://canvas.apps.chrome/)

Google製のwebアプリケーション。Googleのアカウントに自動保存。pngで書き出せる。
ペンをダブルクリックでサイズや透明度を変更可能。

## ER図を描きたい。

https://app.diagrams.net/
旧）　draw.io

線を自由に折り曲げれて好き

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56789/8cb7601c-09bb-10c2-4b50-b72829d5571c.png)


## 今見てるHTMLを編集モードにしたい

chromeデベロッパーツールのConsoleパネルで、

```
document.designMode="on";
```

## ワイヤーフレーム作りたい

- [Figma](https://www.figma.com/)

## ロゴを作りたい

- [Vecteezy](https://www.vecteezy.com/editor)

## アプリアイコンを作りたい。いろんなサイズで

- https://maskable.app/editor
- あわせて読みたい
    - https://web.dev/maskable-icon/

## ビートを刻みたい

- [The Infinite Drum Machine](https://experiments.withgoogle.com/ai/drum-machine/view/)
    - [Googleが開発した日常的な音を自由に並べてビートを刻めるウェブアプリ](https://gigazine.net/news/20210327-the-infinite-drum-machine/)

## テキストを読み上げてほしい

- https://voicevox.hiroshiba.jp/
JDBC経由でOracle DatabaseのTIMESTAMP WITH TIME ZONEにInsertすると、TZR形式でInsertされる場合がある

### 環境
Oracle JDBC Thin Driver 12.1.0.2 (ojdbc7.jar利用)
JDK 8 

### 事象
JDBC経由でOracle DatabaseのTIMESTAMP WITH TIME ZONEにUTC形式でInsertしたいのに、TZR形式でInsertされる場合がある
例えば下記のようなSQLをSQL*PlusでInsertした場合と、JDBCでInsertした場合に差異が発生する。
```insert into test_update values(22,'2018-07-25 19:24:46.792')```

・SQL*Plus inset結果
```25-JUL-18 07.24.46.792000 PM +09:00```
・JDBC経由 inset結果
```25-JUL-18 07.24.46.792000 PM ASIA/TOKYO```
※TIMESTAMP WITH TIME ZONEのカラムのみ抜粋

### 解決策
1.書式を明記してInsert
```insert into test_update values(24,'2018-07-25 19:24:47.323','25-JUL-18 03.16.54.752000 PM +09:00);```

2.セッションのtime_zoneをUTC指定にする
 下記alter文を発行してInsert
```alter session set time_zone='+09:00'```

3.プログラム実行時にtime_zoneをUTC指定にする
```java -Duser.timezone=+09:00 ...```

### 備考
java VMのローカルタイムゾーンが使用されており、そこがtime_zone='ASIA/TOKYO'と同義の設定を行っているのかなと思っているが、だれがどこで制御しているのかまでは追えていない
git 명령어 정리중

# 보관소 초기화
보관소를 사용하기전에 해당폴더로 이동해서 초기화를 해준다
초기화를 해줘야만 git 을 설정할수 있는 파일이 생성된다

```terminal
git init              
```
# Git 사용자 설정
초기화한 후 사용자설정과 이메일등을 입력하면 config 파일에 설정된다

```terminal
git config user.name <사용자 이름>
git config user.email <사용자 이메일>
```
# Git 저장소관련 설정
저장소 관련 명령어들이다.

```terminal
git remote -v                              // 저장소 URL 확인
git remote add <저장소 이름> <URL>.git      // 저장소 URL 추가
git remote delete <저장소 이름>             // 저장소 URL 삭제
git remote set-url <저장소 이름> <URL>.git  // 저장소 URL 수정
```
변경파일 여부 상태확인

```terminal
git status            
```

파일 업로드할시

```terminal
git add filename                  // 파일 단위로 올리는 방법
git add .                         // 변경된 전체 파일을 올리는 방법           
```


```terminal
git commit                        // 깃 에디어를 통해 커밋 메세지 입력
git commit -m "commit message"    // 인라인으로 커밋 메세지 입력하는 법
```

```terminal
git commit -a -m "commit message"
git reset HEAD filename           // 스테이지에 올린파일을 되돌리고 싶을때
git log                           // history 보기
git config --global --list        //git 설정 목록 확인


$ echo <filename> >> .gitignore   // git 관리목록에서 제외한다

```

```terminal
echo "# project-test" >> README.md  // text 를 README 파일에 기록한다
git init                            // setp 01 저장소 초기화
git add README.md                   // setp 02 git 에 파일을 추가한다
git add .                           // setp 02 파일추가명령어지만 git 에 업로드는 아직 아님 중간단계임
git commit -m "first commit"        // setp 03 파일을 커밋한다 설명으로 "first commit" 추가함
git remote add origin https://github.com/xsiasu/project-test.git  //git 저장소 url 추가
git push -u origin master           // setp 04 git 저장소에 푸쉬한다

```
中間テーブルをじっくり

#はじめに
初学者にとってDB設計でつまずくポイントとしては中間テーブルの概念ではないでしょうか？
中間テーブス、いわゆる多対多のテーブルの関係性は、非常に使われることが多いので、是非ここで押さえときましょ！

#中間テーブルとは
アソシエーション、一対多を理解している人が読んでいる前提で進んでいきます。多対多は、一対多に対して、言葉通り、互いに複数所属している状態を言います。今回は、インスタグラムのphotosテーブルとtagsテーブルを例にとって解説します。photoは、複数のtagを有し、tagは複数の写真と結びつきます。

#課題
これらの関係性をテーブルで表そうとすると、photo_id、tag_idのカラム内に複数のidを書かなければならなくなります。しかし、カラムにそのような書き方はできません。

#解決策
そこで、中間テーブル（photos_tagsテーブル）を設けて、どの写真がどのタグと結びついているかの関係性を示していきます。ひとつのレコードには「photos_id × tags_id」の組み合わせがひとつ記録され、全ての写真とタグの組み合わせの数分、レコードが蓄積されていきます。10個の写真にそれぞれ3つずつタグが付いている場合、全ての関係性を表すのに中間テーブルのレコードは30個生成されるということになります。

##アソシエーションの定義の仕方
```
#app/models/photo.rb
class Photo < ActiveRecord::Base
  has_many :photos_tags
  has_many :tags, through: :photos_tags
end

#app/models/tag.rb
class Tag < ActiveRecord::Base
  has_many :photos_tags
  has_many :photos, through: :photos_tags
end

# app/models/photos_tag.rb
class PhotosTag < ActiveRecord::Base
  belongs_to :photo
  belongs_to :tag
end
```

##アソシエーションの実装
```
#通常レコードの作成
tag1 = Tag.create(name: "東京")
tag2 = Tag.create(name: "おしゃれ")
photo1 = Photo.create(image: "cool_cafe.jpg", location: "桜ヶ丘")


# 多対多関係を定義したレコードの作成
tag1.photos.create(image: "cute_shop.jpg", location: "宇田川町")


# リレーションの追加
tag1.photos << photo1
photo1.tags << tag2


# リレーションを利用したレコードの取得
photo1.tags
# => #<Tag id:1, name:"東京">,#<Tag id:2, name:"おしゃれ">
```
Elastic Beanstalkで使うコマンドまとめ


この記事では、僕が現場で実際に利用しているElastic Beanstalkでよく利用するコマンドについてまとめていきます。

# Elastic Beanstalkとは
EB（Elastic Beanstalk）とは、アプリケーションを実行するために必要なインフラストラクチャの構築や、アプリケーションのデプロイを簡単に行うことができるAWSのサービスです。EB を使用することによって、アプリケーションをアップロードするだけで自動的に必要な容量を予測、準備し、負荷分散、拡張、アプリケーションのモニタリングといった細かい処理を自動で行ってくれます。

EBで対応できる言語は以下の通りとなります。

- Go
- Java
- PHP
- .NET
- Node.js
- Python
- Ruby

# EBでよく使うコマンド一覧
僕が実際に現場でよく利用するコマンドは以下の通りです。まだそこまで難しい操作はしていません。

## eb list
現在運用しているアプリケーションの一覧を表示することができます。`--all`オプションを指定した場合は、全てのアプリケーションを一覧表示します。

基本コマンド

```
eb list
```

全てのアプリケーションを一覧表示

```
eb list -a
eb list --all
```

インスタンスを含む全ての環境に関するより詳細な情報を表示

```
eb list -v
eb list --verbose
```

## eb use
デフォルトの環境を選択することができます。`eb list`で環境を確認し、`eb use`で使用したい環境を選択するのが基本的な流れです。そのため、`eb use`コマンドの後には、環境名を指定する必要があります。EBにデプロイする際も、`eb use`で環境を選択してから実行します。

基本コマンド

```
eb use environment_name
```

環境を作成するリージョンを変更

```
eb use environment_name -r region_name

eb use environment_name --region region_name
```
- environment_name => 任意の環境名
- region_name => 任意のリージョン名

## eb deploy
`eb use`で選択した環境に、ローカルのアプリケーションをデプロイします。gitがインストールされている場合、`git commit`された最新のアプリケーションから`.zip`ファイルを作成します。

基本コマンド

```
eb deploy
```

環境を指定してデプロイ

```
eb deploy environment_name
```
- environment_name => 任意の環境名


EBで作成するバージョンに使用するラベルを指定

```
eb deploy -l version_label
```
- version_label => 任意のラベル

アプリケーションバージョンの説明を追加

```
eb deploy -m "version_description"

eb deploy --message "version_description"
```
- version_description => アプリケーションバージョンの説明

コマンドがタイムアウトするまでの時間（分）を指定

```
eb deploy --timeout minutes
```
- minutes => 指定したい時間

## eb ssh
Secure Shell (SSH) を利用して、環境内のEC2インスタンスに接続します。環境内で複数のインスタンスが実行されている場合、接続するインスタンスを指定するように求められます。また、`exit`を入力すると接続を解除することができます。

基本コマンド

```
eb ssh

eb environment_name
```
- environment_name => 接続したい環境

コマンド実行後のインスタンス選択画面

```
Select an instance to ssh into
1) i-hogehogehogehoge1
2) i-hogehogehogehoge2
(default is 1): 1

...

Are you sure you want to continue connecting (yes/no)? yes

```

接続の解除

```
exit
```

接続するインスタンスをIDで指定

```
eb ssh -i

eb ssh --instance
```

接続するインスタンスを数値で指定

```
eb ssh -n

eb ssh --number
```

# まとめ
僕がよく利用するコマンドは

- eb list
- eb use
- eb deploy
- eb ssh

でした。他にもノウハウが溜まったら随時更新していきます。
Field count is less than expected - expected x but was y

# はじめに
`Android開発`の勉強を始めて少し詰まったので備忘録ついでに記載します．
データベースを使って開発していると下記のエラーが出力されました．
> Field count is less than expected - expected x but was y


# なぜこのエラーが出たか
## 概要
データベースのカラム追加を行った際に，アプリケーション内に変更前のテーブルのカラムと，変更後のテーブルのカラム数が一致しないためでした．


## 具体例
以下に具体例および具体的な警告を示します．

**変更前**

|    ID|  Title|Contents|    Date|
|:-----|:-----:|:------:|:------:|
|      |       |        |        |


**変更後**

|    ID|  Title|Contents|    Date|category|
|:-----|:-----:|:------:|:------:|:------:|
|      |       |        |        |        |


>Field count is less than expected - expected ５ but was 4


# 解決策
解決策のフローは以下の通りです．
1. アプリケーションをアンインストール
2. 再ビルド

1をすることでアプリに付加されている`Realm`の設定ファイルを削除します．
2をすることで新規アプリとして新しいテーブルを作成します．

##具体的な流れ
1. 変更前のアプリケーション(カラム数４のテーブル)
2. テーブルの変更(カラム数４→５)
3. アプリケーションの削除（カラム数４のテーブル削除）
4. 再ビルド(カラム数５のテーブル作成)

# 終わりに
android開発初心者のため分かりにくい記事になったのですが参考になればいいかなと.
Choregrapheを複数同時起動して複数のPepperを制御する方法

一台のMacで複数のPepperを制御したくても、通常は一つしかChoregrapheを起動する事が出来ない。
しかし、以下の方法を使えば複数のChoregrapheを立ち上げる事ができるため、一台のMacで複数のPepperを制御する事ができる。

### 環境
macOS: High Sierra 10.13.6
Choregraphe: 2.5.5

### 実行方法
以下の通りターミナルからopenコマンドで起動すると複数のChoregrapheを立ち上げることができる。同じプロジェクトファイルを動かしたい場合は、異なるChoregrapheからのファイル上書きによる不整合を防ぐために、コピーして別ファイルを作って起動するのが良い。

```
$ open -n Choregraphe.app
```
AWS Athena 配列内のJSON値を使って文字列へ変換する

## What is Athena
S3上のCSVやらJSONファイルに対してSQLを発行してCSVを作成できるサービス
Athenaの実態はPrestoとなっているので、ドキュメントを探す場合は
[prestodb.io/docs](https://prestodb.io/docs/current/)を探す事にする

## 解決したい事
JSONの中にはよく配列の中の値がさらにJSONになっている場合がよくある
こんな1レコードの結果をごにょごにょ整形してみたい
機械学習のデータセット作る時に重宝します。

```
{
  "title": "title",
  "list":[
    {"name": 'Bob', "age": 38},
    {"name": 'Alice', "age": 35},
    {"name": 'Jane', "age": 27}
  ]
}
```

## テストデータを作る

prestoではwithを用いてsqlの前提条件を定義する事ができるので
それを利用してテストデータを作成する

```sql
WITH test_data AS (
  SELECT 
  CAST('title' AS VARCHAR) as title,
  ARRAY[
    CAST(ROW('Bob', 38) AS ROW(name VARCHAR, age INTEGER)),
    CAST(ROW('Alice', 35) AS ROW(name VARCHAR, age INTEGER)),
    CAST(ROW('Jane', 27) AS ROW(name VARCHAR, age INTEGER))
  ] AS list
)
```

## テストデータを整形する

1. transformとlambdaを組み合わせて`{"name": 'Bob', "age": 38}`からnameだけを取り出す。　
結果はこんな感じ

```
['Bob', 'Alice', 'Jane']
```

2. array_sortでアルファベット順にソートする
3. ARRAY_JOINで配列を一文字に変換する

```sql
WITH test_data AS (
  SELECT 
  CAST('title' AS VARCHAR) as title,
  ARRAY[
    CAST(ROW('Bob', 38) AS ROW(name VARCHAR, age INTEGER)),
    CAST(ROW('Alice', 35) AS ROW(name VARCHAR, age INTEGER)),
    CAST(ROW('Jane', 27) AS ROW(name VARCHAR, age INTEGER))
  ] AS list
),
transformed AS (
  select
   ARRAY_JOIN(array_sort(transform(test_data.list, x -> (x.name))), ' ')  as names
  from test_data
)
```

以上
【MAYA】選択されたオブジェクトの座標値とピボット値を持ったグループを作る

MAYAでの編集時に、グループ化した時にオブジェクトの持っていた座標値とピボット値をグループ側に引き継ぎたかったのだけど、デフォルトでそんな機能が見当たらなかった（あったらいいな。。）ので作りました。

他の人が使って便利かどうか知りませんが、せっかくなので投稿しておきます。

※ 座標値とピボット値は最後に選択したオブジェクトのものが使われます。

```python
# -*- coding: utf-8 -*-
from __future__ import absolute_import
from __future__ import unicode_literals
from __future__ import print_function
from __future__ import division
import pymel.core as pm


def hryk_group(last_selection_position_based=True):
    selection = [x for x in pm.selected() if isinstance(x, pm.nodetypes.DagNode)]
    if len(selection) == 0:
        pm.displayError('no selection')
        return
    if last_selection_position_based:
        # use last selection position
        new_pos = selection[-1].translate.get()
    else:
        # use average position
        new_pos = [0, 0, 0]
        for node in selection:
            translate = node.translate.get()
            new_pos[0] += translate[0]
            new_pos[1] += translate[1]
            new_pos[2] += translate[2]
        new_pos = [x / float(len(selection)) for x in new_pos]
    grp = pm.group()
    grp.translate.set(new_pos)
    for node in selection:
        translate = node.translate.get()
        translate[0] -= new_pos[0]
        translate[1] -= new_pos[1]
        translate[2] -= new_pos[2]
        node.translate.set(translate)
    # move pivot
    if last_selection_position_based:
        grp.scalePivot.set(selection[-1].scalePivot.get())
        grp.rotatePivot.set(selection[-1].rotatePivot.get())
    else:
        grp.scalePivot.set([0, 0, 0])
        grp.rotatePivot.set([0, 0, 0])


if __name__ == '__main__':
    hryk_group()
```
上流工程における見積もり

## 見積もるもの

1. 人件費：人月
2. ハードウェア費: コンピュータの調達(レンタル含む)，回線使用量，コンピュータ保守費
3. ソフトウェア費: 開発用ソフトウェアの購入費
4. その他消耗品，教育費，電気代など

## 手法

- [ファンクションポイント法](http://www.itmedia.co.jp/im/articles/0504/27/news126.html)
- [ユースケースポイント](http://kmd.essens.co.jp/wp-content/uploads/recipe/requirement/estimation/rcp-est-01.pdf)
- [COCOMO(Constructive Cost Model)](http://www.itmedia.co.jp/im/articles/0308/14/news004.html)
2018-08-09 esa.io > タスクリスト記事 > プレビューペインでタスク項目のチェックが可能 (記事ページでも切替え可能)

### esa.ioのタスクリスト

esa.ioというMarkdown情報を育てるサイト。

Qiitaと同様にタスクリストの項目を作ることができる。
(参照: [タスクリスト](https://docs.esa.io/posts/49#%E3%82%BF%E3%82%B9%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%88))

- [ ] XXXの概要を知る
    - [ ] YYYの処理を知る
    - [ ] ZZZの処理を知る
    - [ ] 

esa.ioでもQiitaと同様に、編集中は左側にMarkdownを記述するペイン、右側にプレビューのペインがある。

タスクリストの項目にチェックを付けるには、左側のMarkdownペインにおいて変更したい項目`[ ]`を`[x]`に書換える。
Markdownが込み入ったとき、対応する項目のチェックを探すのが手間です。

ふと、「プレビューペインでタスクのチェック付けれないかな？」と思い、プレビューのペインのチェックボックスをクリックしてみた。
Markdownの記述の対応する`[ ]`は`[x]`に変わりました。同様に、チェックをはずすこともできます。

小さなことですが、使い勝手は良いですね。

### 追記 2018/08/09
https://docs.esa.io/posts/12
> プレビューや記事ページからもチェックの切り替えが可能です。

記事ページからもチェック切替え可能のようです。

### Qiitaは?

なお、Qiitaではプレビューペインでチェックボックスをクリックしても、何も起きません。

### 検索用キーワード

- TODOリスト
GoLand で interface を満たす仮実装を自動生成

Go の interface は、Java や PHP のように宣言で適用するインターフェイスを明示しません。

他の言語では、クラス宣言に implements キーワードなどを指定すると、IDE が必要なメソッドの仮実装を生成してくれるので便利でした。

GoLand でも似た機能が無いかなと思っていたら、type 宣言のタイプ名にカーソルを置いて、`alt + enter` - `Implement interface` を実行すると、実装したいインターフェイスを選択するダイアログが開き、選択すると interface を満たす仮実装を自動生成できました。

<img width="399" alt="a.png" src="https://qiita-image-store.s3.amazonaws.com/0/12272/9f72f035-9704-cc1b-7ebe-16b8d3f0ad6b.png">

例えば、`io.Reader` を選択すると、下記のような仮実装が生成されました。

```go
type Foo struct {
}

// 自動生成
func (*Foo) Read(p []byte) (n int, err error) {
	panic("implement me")
}
```

いちいち interface 宣言をコピペして実装したりしてたのですが、これは楽ですね。
Running pkexec on environments without GUI (and with X transfer)

If you try to run pkexec on SSH, you might get the following error even if the host machine has GUI session:

```
==== AUTHENTICATING FOR org.freedesktop.policykit.exec ===
Authentication is needed to run `/usr/bin/apt-get' as the super user
Authenticating as: root
Password: 
polkit-agent-helper-1: error response to PolicyKit daemon: GDBus.Error:org.freedesktop.PolicyKit1.Error.Failed: No session for cookie
==== AUTHENTICATION FAILED ===
```

This means host machine GUI session's policykit agent cannot be launched on SSH. So we need to have a standalone agent.

```
sudo apt-get -y install policykit-1-gnome # only first time
/usr/lib/policykit-1-gnome/polkit-gnome-authentication-agent-1 &
```
Digtial Interactive signage (big screen)

#**What is Digital Interactive Signage?**
Digital Signage is a new communication medium for reaching people wherever they are,
shopping, travelling, school..etc. it is a kind of digital screen that displays the content in 3D graphic, slides, graphic, videos, live feeds, database content, pictures.
What content should we develop?
    - Drive Sales
    - Education
    - Entertainment
     
Minimum hardware requirements for digital signage devices: Can be TV box, dongle, tablet, desktop or laptop.
Window version: Window 7 or higher
Processor: Better have a Core i5 or stronger
Memory: 4GB RAM or more if possible
Storage: 16GB or more
#**Big Screen Research Case and Ideas**
The research screen is 80 inch x 3 160 inch.
I am assume the screen would look like this: 

![screen.jpg](https://qiita-image-store.s3.amazonaws.com/0/279562/216c6afe-829e-0ea0-3653-9875504a737e.jpeg)


As the sample we got, the big screen of digital signage interact with human behavior which mean people can interact with the screen. We researched about digital interactive signage which could be implemented with the UWP technology and also can be implement with IoT and AI technology. It’s also implemented by using Unreal Engine 4 and Kinect sensor to detect motion tracking, and also voice recognition technology together. The digital interactive signage can also implement with Unity which is a powerful game engine tool.

#**Researching**
 
- UWP Technology: I have read document from the official website and vary sites as well, UWP is simply powerful, it's responsive application. As of now I am trying to research how it works with digital signage, I have some sample ideas (and also simple ideas :slightly_smiling_face: ), first one is virtual house experience which user can interact with the screen and place the 3d object of the future house they imagine or they want. they can architect their own houses even they are normal users (I don't have any reference for this idea because I just thought of this idea). The second one is findmyway app which mostly place in supermarket, so users can know where they are, they see the map and they can interact with screen to find which place they want to go. I've seen this in AEON Supermarket in Cambodia. Since I am new to that platform I am not sure whether UWP can apply to those or not, but I am pretty sure the first one related to 3d object we can either go with unity.
- Unity: interacting with 3d object and animation. It uses c# as a script language and with the help of virtual studio as IDE. There are some projects in the internet which built for digital signage using unity or Unreal Engine like Virtual dressing room.
Tableau Prep で自動で型変換されるのを防ぐ方法

# Tableau Prep の自動型設定
Tableau Prep のconnectionを作成するときに、自動で型変換を判別されてしまい、
イライラすることが多かったのですが、簡単な回避方法を思いつきました。

## 以下のようなケース

| 日付 | 社員番号 | 作成日時 |
|:-:|:-:|:-:|
| 20180801  | 00001  | 2018/01/02 11:33  |
| 20180801  | 00002  | 2018/01/03 11:33  |
| 20180801  | 00003  | 2018/01/04 11:00  |

- これを普通に取り込むと以下のようになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/192890/5e4755bd-5948-3b80-3a9b-0944f73ed58d.png)

- 問題点
    - これをそのまま出力すると以下のようになってしまいます
        - 日付が勝手にフォーマット変換されてしまう
        - 社員番号の頭0が取れてしまう
        - 
```
日付,社員番号,作成日時
2018/08/01,1,2018/01/02 11:33:00
2018/08/01,2,2018/01/03 11:33:00
2018/08/01,3,2018/01/04 11:33:00
```

## 手動で指定した型で読み込むように、１フィールドづつ選択しなおすのは面倒

## 回避策
1. csvデータにあらかじめ、以下のデータを用意して、いったん取り込む。
```
日付,社員番号,作成日時
AAA,AAA,AAA
```
2. 以下のようにすべて文字列（無変換）で初期表示される
![image.png](https://qiita-image-store.s3.amazonaws.com/0/192890/3b5df00b-1445-dfbb-9129-eb6376f3cf59.png)

## 見事、全てAbc に分類されました！

- 簡単なことですが、100を超えるフィールドの型指定は相当に面倒なので、個人的に大発見です。
- もちろん、数値や実数にしたい場合に、サンプルデータがnullでうまくいかない場合なども、明示的に指定できます。

## 接続を変更するとリセットされるので、毎回選びなおしてイライラしてましたが、これでストレスが無くなりました（＾＾）

- Tableau Prepは面白いですが、発展途上なので今後が楽しみです。
rubyは1..でzip出来るのでチル

ruby 2.6からはRubyで添え字付きでループを回し、かつ0以外の数値で開始したいとき`zip(1..)`出来るのでチル📻

```rb
fruits = ['apple', 'orange', 'melon']
fruits.zip(1..) {|fruit, i| puts "#{i}: #{fruit}" }
# 1: apple
# 2: orange
# 3: melon
```

[each_with_indexには引数を渡せない、わけではない](https://qiita.com/jnchito/items/2b909a3d75728f99bbbe)を読んで韻を踏みたくなったので書きました。
CentOSにSmartyをインストール

Linux環境に不慣れな私が簡単に試したかったので残しておく。
PHPが入ってることは前提。
バージョンなど、必要条件は[公式](https://www.smarty.net/docsv2/ja/installation.tpl#installation.requirements)でご確認のほどを。

<h3>wgetとunzipが無い場合は手に入れる</h3>

```bash
# yum -y install wget
# yum -y install unzip
```

<h3>フォルダ移動</h3>

```bash
# cd /usr/local/lib
```

<h3>Smartyをダウンロード</h3>

```bash
# wget https://github.com/smarty-php/smarty/archive/master.zip
```

<h3>解凍する</h3>

```bash
# unzip master.zip
```

<h3>ドキュメントルートに、下記PHPを配置</h3>

```php:test.php
<?php
require_once('/usr/local/lib/smarty-master/libs/Smarty.class.php');
$smarty = new Smarty();
?>
```
<h3>アクセス</h3>
http://ルートURL/test.php　にアクセスしてエラーが出なければOK！


<h3>終わり</h3>
私の開発環境です。
実際に運用したい場合はいろんな設定が必要だと思います。

参考
https://www.smarty.net/docsv2/ja/installing.smarty.basic.tpl
配列のデータを効率的に入力してみる

##目的
今回は2つの方法で配列のデータ入力を効率化しようと思います

#繰り返しで入力
配列の中に値を連続して入力するときfor文などの繰り返し処理が有効です

##for文で書いてみる
まずはfor文で5つの値を空配列に入力します

```.rb
arr = []
for i in 0..4
  arr[i] = gets.chomp
end
```

##eachメソッドで書いてみる

次にeachメソッドで入力するならば

```rb
arr = []
(0..4).each do |f|
  arr[f] = gets.chomp
end
```

#テキストファイルの内容を配列に入力してみる

テキストファイルを一行ずつ読み込んで配列の中に入力することでデータ入力をもっと効率化してみましょう

今、次のような中身のテキストファイルがあるとします

```test.txt
this
is
TEST
```
この時、これらの文字列を一行ずつ入力する場合、次のように入力できます

```rb
arr = []
File.open("test.txt") do |f|
  f.each_line do |line|
    arr << line.chomp
  end
end
```
ここで、配列の中身を確認してみると

```rb
p arr
#=> ["this", "is", "TEST"]
```
このようにちゃんと配列の中に文字列が入力できてるのが分かります
#まとめ

繰り返し処理で配列のデータ入力を効率化できる

テキストファイルを読みんで配列に入力することもできる
Python3 で Excel を取り扱う

openpyxl の使用例です。
シート名、コラム数、列数を取得します。

## プログラム

```py:xlsx_count.py
#!/usr/bin/python
#
#	xlsx_count.py
#
#						Aug/09/2018
#
# -------------------------------------------------------------------
import sys
import os
from openpyxl import Workbook
from openpyxl import load_workbook
# -------------------------------------------------------------------
# [4]:
def xlsx_read_proc (xlsx_file):
	wb = load_workbook (filename = xlsx_file)
	ws = wb.active
#
	sys.stderr.write ("ws.title = %s\n" % ws.title)
	sys.stderr.write ("ws.max_column = %d\n" % ws.max_column)
	sys.stderr.write ("ws.max_row = %d\n" % ws.max_row)
#
	sheetnames = wb.sheetnames
	count = 0
	for name in sheetnames:
		ws = wb[name]
		sys.stderr.write ("%d\t%s\t%d\t%d\n"
			 % (count,name,ws.max_column,ws.max_row))
		count += 1
#
	wb.close()
#
#-------------------------------------------------------------------
sys.stderr.write ("*** 開始 ***\n")

xlsx_file = sys.argv[1]
sys.stderr.write (xlsx_file + "\n")
#
if os.path.exists(xlsx_file):
	xlsx_read_proc(xlsx_file)
else:
	sys.stderr.write ("*** error *** xlsx doesn't exist ***\n")
#
sys.stderr.write ("*** 終了 ***\n")
# -------------------------------------------------------------------
```

## 使用方法

```text
./xlsx_count.py ex01.xlsx
```

## 確認したバージョン

```text
$ python
Python 3.12.3 (main, Apr 10 2024, 05:33:47) [GCC 13.2.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import openpyxl
>>> openpyxl.__version__
'3.1.2'
>>>
```
2018-08-09 esa.io > #記法による記事参照 > 記事修正後に古いタイトルのまま > 対処: ブラウザリロード

```txt:動作環境
Windows 10 Pro (64bit) バージョン 1803 (April 2018 Update)
Google Chrome バージョン: 68.0.3440.84（Official Build） （64 ビット）
esa.io
```

### 状況

1. ブラウザタブAにて記事を作成 (#9481)
    - タイトル(例): XXXの動作
1. ブラウザタブBにてTODOリスト記事を記載(#9485)
2. ブラウザタブBのTODOリストにおいて`#9481`を入力して別記事を参照
3. ブラウザタブAにて`#9481`の記事タイトルを変更
    - タイトル(例): XXXの概要
4. ブラウザタブBのTODOリストにおいて`#9481`を入力して別記事参照をやりなおす
    - > 9481の記事タイトルは古いタイトル(XXXの動作)のまま。

タイトル文字取得に、ブラウザのキャッシュを使っているのかもしれない。

### 対処

1. ブラウザリロードをする。
    - Chromeの場合: <kbd>Ctrl</kbd> + <kbd>R</kbd>
2. ブラウザタブBにおいて`#9481`を入力して別記事参照をやりなおす
pythonのchardetでWindows-1254とか誤検出するときはuniversaldetectorではなく素のdetectを使う

# なにがおきた

NetscapeNavigator4.xの頃から長年育て上げてきたサイトのhtmlやらcssやらjsやらを舐めたおすプログラムを書いてたんだが、Shift_JISのファイルのオープンに失敗することがある。

# なにがおきてる

chardetのuniversaldetectorを使ってたんだが、文字コードの検出に失敗している模様。

# なにをした

スピードとか必要ないローカル用のプログラムなのでuniversaldetectorじゃなくてchardet.detectを使うようにした。

```detect.py
import chardet
from chardet.universaldetector import UniversalDetector

with open('style.css', mode='rb') as f:
    detector = UniversalDetector()
    for binary in f:
        detector.feed(binary)
        if detector.done:
            break
    detector.close()
    enc1 = detector.result

with open('style.css', mode='rb') as f:
    for binary in f:
        enc2 = chardet.detect(binary)

print(enc1)
# {'confidence': 0.5002330097559203, 'encoding': 'Windows-1254', 'language': 'Turkish'}

print(enc2)
# {'confidence': 1.0, 'encoding': 'ascii', 'language': ''}
```

ちなみに「style.css」はShift_JISのファイルなんで、厳密には誤検出してるんやがとりあえずこれで実害無くなったので。

# 結論

Perlでかきたい。
QlikViewのスクリプトファイルをエクスポートし、インポートするベストな方法

QlikViewユーザの皆さん、ストレージの容量不足に陥ってない？
大量のデータを取り込んだQVWファイルを修正を重ねて、都度履歴を残しておきたいというとき、その都度ファイルで残していると、知らないうちにストレージが...なんてことになる。
今回紹介するのは、ロードスクリプトの修正を行っている時に、スクリプトのみファイルで履歴を残しておき、その時点の状態に戻せるワザを紹介する。

#スクリプトをファイルでエクスポート

現在のロードスクリプトの状態は下記のようにMainタブとDataタブで成り立っている。こんなふうに２つのタブなら、コピペで何ら問題はないけど、実際の開発となるとタブは数十にもなったりする。
これはコピペは無理。
できればタブの構成も含めて再現できるといいよね。

![20180809_00.PNG](https://qiita-image-store.s3.amazonaws.com/0/263849/908493c7-1cb5-fe80-9963-954ee4dd8f31.png)

![20180809_01.PNG](https://qiita-image-store.s3.amazonaws.com/0/263849/541a0a94-071e-ef96-f720-3f618c7ea663.png)

まず、現在のロードスクリプトをエクスポートする。方法は
**ファイルメニュー -> スクリプトファイルにエクスポート**

![20180809_03.PNG](https://qiita-image-store.s3.amazonaws.com/0/263849/839732c6-8776-6901-43e7-97a0cff8c437.png)

こんなふうに保存する。ファイルの形式はqvs形式。
任意にその状態がわかる名前で保存すれば、あとから管理が楽になる。

![20180809_031.PNG](https://qiita-image-store.s3.amazonaws.com/0/263849/d75757f8-4718-73f7-688e-33ad8de84f2e.png)

#スクリプトファイルのインポート

では、上で保存したファイルからスクリプトファイルを取り込んでその時点でのスクリプトの再現してみよう。

まず、このように変数の値を編集しちゃった、しかもQVWファイルを上書き保存しちゃったとする。

![20180809_04.PNG](https://qiita-image-store.s3.amazonaws.com/0/263849/9ee37c2b-5c20-3315-1999-71b687355343.png)

スクリプトは思い切って全て削除する。
やり方は、ちまちまタブを削除するのではなく、
**編集メニュー->スクリプト全体を削除**

![20180809_06.PNG](https://qiita-image-store.s3.amazonaws.com/0/263849/e8522d8f-a196-1e60-24be-361b9f12b39f.png)

スクリプト全体を削除しても、下記のようにデフォルト設定（SET文）は残る。
しかし、ここは惜しげもなく、ドラッグして消してしまおう。

![20180809_07.PNG](https://qiita-image-store.s3.amazonaws.com/0/263849/c45c87d0-1846-dd34-09cb-333e7f6e789b.png)

この状態で、**挿入メニュー -> スクリプトファイル**を選択し、上で保存したファイルを指定して開く。

![20180809_08.PNG](https://qiita-image-store.s3.amazonaws.com/0/263849/a693fc9d-61b9-8cce-0052-8d5edc87d9ad.png)

![20180809_05.PNG](https://qiita-image-store.s3.amazonaws.com/0/263849/fed286e2-e478-7181-8585-bbb7b63c9925.png)

スクリプトを開くと、下記のようにMainタブに全部がまとまってスクリプトが展開される。
//$tab Main
//$tab Data
というのがタブ名なんだが、この状態では、
このコメントを元にタブ作れっていうわけ？タブがたくさんあったらやってられないじゃん！
といいたくなる。

![20180809_09.PNG](https://qiita-image-store.s3.amazonaws.com/0/263849/6c4080f7-e50b-c33c-3ba5-a7213301e2b1.png)

しかししかし、ここは黙ってそのまま[OK]で閉じる。

![20180809_10.PNG](https://qiita-image-store.s3.amazonaws.com/0/263849/3ade3e4b-ccd7-a664-17bd-62ae67aeb86b.png)

そして、再度スクリプトエディタを開くと、タブが再現される。
空白のMainタブができてしまうのはお愛嬌、削除しちゃってね。

![20180809_11.PNG](https://qiita-image-store.s3.amazonaws.com/0/263849/86ae386c-f46e-5c57-9b06-7355effabf5a.png)

#まとめ

QlikViewのロードスクリプトの修正だけなら、qvsファイルの管理さえきちんとしておけば、履歴管理も楽になる、これで惜しげもなく、ファイル（ここではqvs）を保存しちゃおう。

↓↓↓↓↓↓↓ あなたの記事の内容
ファイルメニューの「外部スクリプトファイルを開く」でできるんじゃないかと思っていたんだけど、タブの再現はできないみたいで、じゃあレイアウトファイルでエクスポートするか...など考えてみたんだけど、実は上記の方法であっさり解決。
───────
ファイルメニューの「外部スクリプトファイルを開く」でできるんじゃないかと思っていたんだけど、タブの再現はできないみたいで、じゃあレイアウトファイルいエクスポートするか...など考えてみたんだけど、実は上記の方法であっさり解決。
↑↑↑↑↑↑↑ 編集リクエストの内容

お役に立てたら幸いです。
1MB で Web サーバが動く Docker イメージ

(ネタです)

Amazon ECS や Kubernetes を試す際に「最小限で Web サーバが動く Docker イメージがあったら良いな」と思ったのがきっかけで、変なものを作りました。

Docker Hub で公開しているので是非ご利用ください (？)
[hoto17296/minimum-httpd - Docker Hub](https://hub.docker.com/r/hoto17296/minimum-httpd/)

## 実装
まずはシェルスクリプトを作成します。

``` sh:httpd.sh
while true
do
  echo -e "HTTP/1.1 200 OK\n\nYay!" | nc -l -p $1
done
```

**以上です。**

このまま `sh httpd.sh 8080` と実行してブラウザから `localhost:8080` にアクセスすれば `Yay!` と表示されます。

## Docker イメージ化
`echo` と `nc` コマンドさえ使えればいいので、BusyBox をベースにします。

``` Dockerfile:Dockerfile
FROM busybox

COPY httpd.sh /

EXPOSE 80

CMD ["/bin/sh", "/httpd.sh", "80"]
```

BusyBox イメージにシェルスクリプトをひとつ追加しただけなので、ビルド後のイメージサイズは **1.16 MB** です。

**[多分これが一番小さいと思います](http://dic.nicovideo.jp/id/4996931)**
CSS設計~FLOU~

#はじめに
今まで命名規則にBEMを取り入れていました。ただ、scssファイルの分割等まではしておらず、、、。 
それではいけないと、再度CSS設計を調べたのですが、何がいいのかわからず。　
現状のBEM思想をキープしながらFLOCSSのいいとこ取りをしているFLOUというものを教えてもらったので、備忘録です。

## FLOUとは
FLOCSSのいいとこ取りをして、よりスマートな設計が可能なCSS設計手法の1つ。

## FLOCSSとは
Foundation,Layout,Object(Component,Project,Utility)というレイヤーに分割することができ、これらに沿ってCSSを分類して書いていくCSS設計手法です。　
FLOCSSを使うことで　
・cssがコンポーネント化されるので、使い回したり修正をしたりしやすい
・MindBEMdingのネーミングルールによってクラスの役割を明確化できる
というメリットを得ることができる。
その一方で、どのレイヤーに記述すればいいのか混乱してしまい、メリットを存分に生かせないこともある。
このような混乱が少しでも減るようにと、FLOCSSのいいとこ取りをした、FLOUができた。

[FLOCSSとは](https://github.com/hiloki/flocss)

## FLOUの設計
Foundation,Layout,Object,Utilityの4レイヤーで構成される。

1.Foundation
reset.cssなどのブラウザデフォルトスタイルの初期化、ページのベーススタイル用のクラス。基本的にコードは追加しない。
foundation.scssに記述する。

2.Layout
要素の配置や、幅や高さを指定するクラス。それぞれの要素固有のスタイルを記述する。このレイヤーが一番更新度高い。
layout.scssに記述する。

3.Object
複数ページで使われる要素を定義するクラス。要素内で常に同様の振る舞いをするものに関してのみスタイルを定義する。
object.scssに記述する。

4.Utility
調整用のクラス。margin,padding,font-size,colorなど、細かい調整に必要なものに使用する。
utility.scssに記述する。

それぞれのクラスで記述したscssをstyle.scssでimportする。

## ディレクトリ構造
```
scss
├── _foundation.scss
├── _layout.scss
├── _utility.scss
└── style.scss
```

# 終わりに
スマートなCSS設計の正解は人それぞれ、作りたいものそれぞれだと思います。
この設計以外にスマートで使いやすい設計方法をご存知の方は教えていただければと思います。

###参考
[FLOCSSを扱いきれないあなたに](https://webnaut.jp/technology/20170407-2421/)
Pleasanterのトップページの新規作成ボタンを非表示にする

## デフォルトのアクセス制御
Pleasanterの初期設定のままだと、アクセス権の制御ができるのは、フォルダやサイト単位。
一般ユーザーでもトップページ直下ならサイトやフォルダを自由に作れてしまいます。

## 新規作成ボタンを非表示にする。
このままでは、ユーザーの誰もが好きなようにテーブルが作れてしまい、制御不能になりそうなので、新規作成ボタンを非表示にすることにしました。


##拡張スクリプトでボタンを非表示に
ということで、Pleasanterの拡張スクリプト用フォルダ（{WEBROOT}\pleasanter\App_Data\Parameters\ExtendedScripts)に、以下の拡張スクリプトを配置して、administrator以外のユーザーでログインした時、トップページには、新規作成ボタンと一括削除ボタン、一括移動ボタンを非表示にします。

```JavaScript:disableTopPageButton.js
$(function(){
  var UserId = $("#UserId").val();
  switch (UserId) {
    case "1":
      break;
    default:
      switch (true) {
        case /pleasanter$/.test(location.href):
        case /pleasanter\/$/.test(location.href):
        case /pleasanter\/items$/.test(location.href):
        case /pleasanter\/items\/$/.test(location.href):
        case /pleasanter\/items\/0\/index$/.test(location.href):
          // 新規作成ボタンを非表示にする
          $('[data-action="Templates"]').hide();
          $('[data-action="MoveTargets"]').hide();
          $('[data-action="BulkDelete"]').hide();
          break;
      }
      break;
  }
  // console.log(location.href);
});
```
Administratorでログインすると今まで通りに、新規作成ボタンが表示されていますが

![adminLogin.jpg](https://qiita-image-store.s3.amazonaws.com/0/256425/3ba6e2a1-cf98-cb74-411f-80b510716d9a.jpeg)

一般ユーザーでログインすると新規作成ボタンが非表示になります。

![userLogin.jpg](https://qiita-image-store.s3.amazonaws.com/0/256425/3cbd3464-f6c7-c21e-aa6c-7c0ac0f0c9de.jpeg)

ユーザー用に用意したフォルダに移動すると新規作成ボタンが表示されます。

![userFolder.jpg](https://qiita-image-store.s3.amazonaws.com/0/256425/c10d9419-d3a4-84a8-883e-08e3f464139c.jpeg)

## 許可するユーザーを増やしたい時は…
```JavaScript
   switch (UserId) {
    case "1":
    case "2":
    ︙
      break;
```
というように、ひたすらユーザーIDを並べていきます。
APIでユーザー情報や所属グループを取得できたりすると良いんですけどね～

## うまくいかない時は…
```JavaScript
// console.log(location.href);
```

　　　　↓↓↓

```JavaScript
 console.log(location.href);
```

ここのコメントを外してIISを再起動、F12キーを押してコンソールログを表示した状態で、トップページを再読込みするとURLが確認できます。

![consoleLog.jpg](https://qiita-image-store.s3.amazonaws.com/0/256425/97679147-4366-4637-3e67-d8b91203cf47.jpeg)

if文のlocation.hrefでチェックしているURLと違っていないか確認してみてください。

## まとめ
初期状態で使いづらいなと感じても、拡張スクリプトや拡張SQL、拡張スタイルシートを使用することで、カスタマイズが可能です。どんどんカスタマイズして便利なツールに育てていけるのも、Pleasanterの魅力のひとつだと思います。
SSHに鍵認証でログインする

鍵認証でSSHログインする方法を備忘録のためまとめておきます。

# 鍵認証でのSSHログインとは
サーバ側に公開鍵を入れて、クライアント側の秘密鍵でログインする

# やり方
## 環境
クライアント: mac
サーバ: ubuntu16.04
UNIX系OSであれば基本的には同じ手順でOKだと思います。

## クライアント側で秘密鍵と公開鍵を作る
秘密鍵はどこにおいても良いそうなので、とりあえず`~/.ssh`ディレクトリを作成して、そこに置くことに。

```
% mkdir ~/.ssh
% cd ~/.ssh
% ssh-keygen
```

色々聞かれるけど何も入力せずEnterでもOK。

```
# ファイル名を聞かれるけどデフォルトのままでもOK
Enter file in which to save the key (/Users/hoge/.ssh/id_rsa): 
# パスフレーズを聞かれるけど書かなくてもOK、書いた方がセキュアだとは思うけど。
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
```

## 作成した公開鍵をサーバに配備
サーバ側の自分がログインしたいユーザの`~/`に、~/.ssh/authorized_keys`というファイルを作成し、先ほど作成した公開鍵`id_rsa.pub`の内容を記入する。もしすでに存在する場合は追記する。１行１公開鍵になっている模様。

## クライアントから秘密鍵を使ってログイン
`-i`オプションをつけて秘密鍵のファイルを指定すればログインできる。
```
ssh -i ~/.ssh/id_rsa hoge@hogehoge.com
```

# 良いところ
これしておくとこんないい事があるとおもう。
- パスワード忘れたorzが起きない
- パスワードよりも安全（ブルートフォースアタック回避）
Raspberry Piの電源ランプを点滅させて電源オンオフをわかりやすくする

RaspberryPiは電源が付いてるときも消えてるときもコードが刺さっていれば赤色ランプが点きっぱで分かりづらいので、電源オン時は点滅、電源オフ時は常点灯という形にしてみる。

点灯形式を変えるには`/boot/config.txt`を編集すれば良い。
ということで`sudo nano /boot/config.txt`とかで開いて下記を追記する。

```shell:/boot/config.txt
# 電源ランプを点滅させる
dtparam=pwr_led_trigger=heartbeat
```
あとはラズパイを再起動すれば設定完了。
Metricbeat 6.x で サーバー監視

Metricbeat を install
=============================

```shell:Elasticsearchの公開鍵を取得
rpm --import https://packages.elastic.co/GPG-KEY-elasticsearch
```

```shell:Elasticのリポジトリ追加
cat << EOF > /etc/yum.repos.d/elastic.repo
[Elastic-6.x]
name=Elastic repository for 6.x packages
baseurl=https://artifacts.elastic.co/packages/6.x/yum
gpgcheck=1
gpgkey=https://artifacts.elastic.co/GPG-KEY-elasticsearch
enabled=1
autorefresh=1
type=rpm-md
EOF

```

```shell:Metricbeatインストール
yum install -y metricbeat
```

Metricbeat の 初期設定
=====================

```shell:Kibana,ElasticsearchのURL設定
vi /etc/metricbeat/metricbeat.yml

# Kibana Host
# Scheme and port can be left out and will be set to the default (http and 5601)
# In case you specify and additional path, the scheme is required: http://localhost:5601/path
# IPv6 addresses should always be defined as: https://[2001:db8::1]:5601
#host: "localhost:5601"
host: "{{Kibana Host}}:{{Port}}"

・・・・・・

#-------------------------- Elasticsearch output ------------------------------
output.elasticsearch:
  # Array of hosts to connect to.
  #hosts: ["localhost:9200"]
  hosts: ["{{Elasticsearch Host}}:{{Port}}"]
```

```shell:Metricbeat起動
systemctl enable metricbeat.service
systemctl start metricbeat.service
```


Kibana で 確認
==============

Dashboard を 選択して「[Metricbeat System] Overview」を選択する。
![kibana_dashboard.png](https://qiita-image-store.s3.amazonaws.com/0/45117/f9ac7330-adb7-9cf4-8477-1de0b2fa6904.png)

Dashboard に [Metricbeat System]が無い場合は、Metricbeat を インストールしたサーバーで、次のコマンドを実行してください。

```shell:Metricbeatダッシュボード設定
metricbeat setup --dashboards
```

一覧に新たなサーバーの情報が表示されます。
![kibana_dashboard_002.png](https://qiita-image-store.s3.amazonaws.com/0/45117/3fcc1c5b-c85a-5d35-09e0-f55115a3f8a3.png)

リンクをクリックしていただくとサーバー情報が表示されます。
![kibana_dashboard_003.png](https://qiita-image-store.s3.amazonaws.com/0/45117/a8a0852d-ea68-783f-af5e-05a882d95612.png)