OmniAICreator/Qiita-1.07M huggingface dataset:
.NET C#でデ辞蔵Webサービス-SOAP版APIを使ってみた

ツールを作るために、国語辞典を検索する方法を探していました。
調べてみると「デ辞蔵」というサービスがありました。
SOAP版とREST版というのがあるものの、SOAP版の方がフル機能らしいので、SOAP版に挑戦してみます。

開発環境は、.NET C# (Visual Studio 2017)が希望です。

Web関係の開発は未経験なので、とりあえず、サンプルコードがないか検索検索...。
最終的にたどり着いた参照先は、以下の通り。

[デ辞蔵Webサービス（公式サイト）](https://www.est.co.jp/dev/dict/SOAP)
[C#でSOAP呼び出しを行う](https://qiita.com/triple4649/items/bfc20cbd36f017dbb2d2)
[VB6でWebサービス(SOAP版API)を呼び出したいのだ！](http://maigo-pg.seesaa.net/article/367757589.html)

ドンピシャの情報はないのだけれど、これらが最も役立ちました。

#手順
##ベースとなるアプリケーションの作成
Visual Studio 2017で、WPFアプリケーションのプロジェクトを作成
画面にボタンを追加
![image.png](https://qiita-image-store.s3.amazonaws.com/0/197297/8dcfa6b0-de11-4a6a-ada2-3333519c9b15.png)

#デ辞蔵サービスを追加
[ソリューションエクスプローラ]から、[サービス参照の追加]を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/197297/18a067db-440b-8d49-bd37-e0f3973821b3.png)

デ辞蔵公式サイトに書かれているサービスの定義を、[サービス参照の追加]ダイアログの[アドレス]の欄に張り付けて、[移動]ボタンを押下し、"～～サービスが見つかりました。"が表示されることを確認する。
[名前空間]欄は、任意の名前を入れる（ここはよく分かっていないけれど）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/197297/8656ddfa-2415-ca9e-5857-81c1f84f12ee.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/197297/25d5a632-8770-6dc6-75ae-da4dc2b065f5.png)


[サービス参照の追加]ダイアログ内の[詳細設定]ボタンを押下する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/197297/08bca107-a88a-37c5-2549-42a917980122.png)

続けて[Web参照の追加]ボタンを押下し、出てきた[Web参照の追加]ダイアログの[URL]欄に、デ辞蔵公式サイトに書かれている「サービス稼働のURL」を入力し、URL入力欄の右側にある矢印ボタンを押下すると、下の大きな欄が更新されます。
そこで、「Web参照名」をとりあえず、ドットを含まない名前に直しました。（良く分からないけれど、試した結果）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/197297/beda4b3b-ff1f-b09f-54c5-1c0f7c2e9ba7.png)

そして、[参照の追加]ボタンを押下すると、ダイアログが閉じて、ソリューションエクスプローラ画面に、次のようなものが現れました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/197297/d3d4228c-5787-82e9-e739-22dc0a5846de.png)

##辞書を利用するコードを作成
そして、次はコードを実装します。自分でコーディングしたのは、実行ボタン_Click()メソッドの中だけです。

```csharp:MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace DejizoSample
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void 実行ボタン_Click(object sender, RoutedEventArgs e)
        {
            MyDejizoWebRef.SOAPServiceV11 sOAPServiceV11 = new MyDejizoWebRef.SOAPServiceV11();

            MyDejizoWebRef.DicInfo[] dicInfo = sOAPServiceV11.GetDicList("");
            foreach (MyDejizoWebRef.DicInfo info in dicInfo)
            {
                MessageBox.Show(info.FullName);
            }
        }
    }
}
```

実行ボタンを押下すると、
APIにアクセスして、使用可能な辞書名の一覧をメッセージボックスで表示できました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/197297/820eb802-4ed3-3e8c-7aae-7282e942a349.png)

#さいごに
この記事は、本当に「やってみた」です。
知らないことばかりで苦労しましたが、できてみると、大したコード量もなかったのに驚きです。
なんか良く分からないでできているところもあるので、ご指導のコメントをぜひよろしくお願いします。
[React Native]ScrollViewにFlexBoxを適用するとスクロールしてもすぐに初期位置に戻ってしまう

# はじめに
最近react nativeを触りはじめて、scroll viewの実装時にタイトルの通りつまずいたので記事にしておく。

# スクロールしてもすぐに初期位置に戻る
以下のサンプルコードのようにScrollViewにflexを適用するとスクロールしてもすぐに初期位置に戻ってしまう。

## サンプルコード

``` React
// App.js

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ScrollView
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <ScrollView contentContainerStyle={styles.container}>
        <View style={styles.item}></View>
        <View style={styles.item}></View>
        <View style={styles.item}></View>
        <View style={styles.item}></View>
        <View style={styles.item}></View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  item: {
    height: 200,
    width: '90%',
    marginTop: '30',
    backgroundColor: 'orange',
  }
});

```
# 解決策
## ScrollViewの高さを動的に変化させる
flexではなくflexGrowを使うことでFlexBoXを適用したScrollViewの高さを動的に変化させることができる。
この記事を参考にしました。
https://medium.com/@peterpme/taming-react-natives-scrollview-with-flex-144e6ff76c08

``` react
// App.js

const styles = StyleSheet.create({
  container: {
    flexGrow: 1, //修正箇所
    alignItems: 'center',
  },
  item: {
    height: 200,
    width: '90%',
    marginTop: '30',
    backgroundColor: 'orange',
  }
});
```

# おわりに
これで無事にスクロールできるようになりました。
あとでスクロールしている動画も入れておこう。
TypeScriptのPropertyDecoratorの使い方を理解するためにオレオレDIを作ってみる

# Decorator？

Decoratorとは、Javaのアノテーションのようなものです。
なお、DecoratorはTypeScriptでは既に利用可能ですが、JavaScriptでは未だドラフトのようです。

# オレオレDIコンテナを作ってみる

PropertyDecoratorの使い方を知るためにも、試しにDIコンテナを作ってみましょう。

## 書きっぷりを見てみる。

まずは、どう書けるといい感じなのか、試してみましょう。

```ts
class Provider {
  feature() {
    console.log("called method");
  }
}

class User {
  @inject(Provider)
  provider!: Provider
  
  callFeature() {
    this.provider.feature();
  }
}

const provider = new Provider();
register(provider).as(Provider);

const user = new User();
user.callFeature();
```

ポイントとしては、`@inject(Provider)`で何を注入するのか指定するところと、`register().as()`で注入するインスタンスを登録しているところです。
JavaのCDIでは、魔法のようにリフレクションでどうにかなっているようですが、TypeScriptやJavaScriptでは難しそうだと判断し、そのへんはちょっと目をつぶることにしました。
また、手動でインスタンスを指定できるのは、テストを書くときにも役立つでしょう。

## 実装してみる

実現に必要なのは以下のふたつです。

* 関数: `register().as()`
* Decorator: `inject`

書いてみましょう。

```ts:DIContainer.ts
const map: Map<any, any> = new Map();

function register(instance: any) {
  return {
    as(specifier: any) {
      map.set();
    }
  }
}

function inject(specifier: any): PropertyDecorator {
  const instance = map.get(specifier);
  return function(target: any, propertyKey) {
    target[propertyKey] = instance;
  }
}
```

書きました。
`map`という変数にインスタンスを管理させます。
`inject`は、`PropertyDecorator`という型の関数を返します。
`PropertyDecorator`は実際にプロパティをいじくる役割の関数です。
`target`には`@inject`が指定されたクラスがまるっと渡ってきます。
`propertyKey`にはプロパティ名が渡ってくるので、二つの変数をもとに、プロパティにインスタンスを突っ込むようにしています。

## 動作確認

試しに、結合してみましょう。

```
this.provider.feature();
              ^
TypeError: Cannot read property 'feature' of undefined
```

むむ、注入できてないようですね。なぜ？

### デバッグ

得意の`printf`デバッグで原因を探ってみたところ、そもそも`inject`が呼び出されるタイミングが早すぎることがわかりました。
`register`より前なのです。
クラスの定義が行われるタイミングで、`inject`が呼び出されています。

### `register`後はきちんとアクセスできるようにしたい

```ts
function inject(specifier: any): PropertyDecorator {
  return function(target: any, propertyKey) {
    Object.defineProperty(target, propertyKey, {
      get() {
        return map.get(specifier);
      }
    })
  }
}
```

プロパティをgetterにすることで、後からアクセスされたときにきちんとインスタンスにアクセスできるようになりました。
ほかのところは同じです。

動きました。

# テストでも使ってみる

jestで書くとこんな感じでしょうか。

```ts
describe("User", () => {
  const provider = { feature: jest.fn() };
  beforeEach(() => {
    register(provider).as(Provider);
  });

  describe("#callFeature", () => {
    it("should call provider feature.", () => {
      const user = new User();
      user.callFeature();
      expect(provider.feature).toBeCalledTimes(1);
    });
  });
});
```

ということで、Decoratorを使えば簡単にDI的なことができそうです。
以上です。よろしくお願いいたします。
【Python】多重ループの「ネストの深さ」が変数で決まるときの書き方


# 問題
多重ループの深さが変数$n$で渡されるときに，以下のようなことがしたい。

- $n=2$ のとき

```py
for i in range(5):
    for j in range(5):
        # 処理
```

- $n=4$ のとき

```py
for i in range(5):
    for j in range(5):
        for k in range(5):
            for l in range(5):
                # 処理
```


長らく「調べ方がわからない＆調べても解決方法が見つからない」状態だったのですが，やっと解決方法が分かったので備忘録も兼ねて記録しておきます。



# 解決方法
なんのことはない。`itertools.product()`を使えばいいだけだった。

```py
import itertools
for i in itertools.product(range(5), repeat=n):
    # 処理
```

`itertools`は本当に優秀だなぁ(；´∀｀)


# おまけ
おまけとして，僕が今まで使用していた方法を載せておきます。一応やりたいことはできるのですが，パッと見何やってるか分かりづらいのでもっと簡単に書きたかった。

```py
# 再帰ジェネレータ
def for_gen(n, count):
    for i in range(5):
        if count == 1:
            yield [i]
        else:
            for li in for_gen(n, count - 1):
                yield [i] + li

for i in for_gen(n, n):
    # 処理
```
PHPで汎用的な関数のメモ化を考えてみる。

# はじめに

PHPの勉強がてら記事を書いています。
変なこと書いてあったら内容を理解した上で修正できるよう努力するのでご指摘お願いします。

# やりたいこと

PHPの学習過程でPHPで関数のメモ化ってどうやるのだろうかと気になり、調べてみた。

知らない方のために**メモ化アルゴリズム(memoization)**を簡単に説明すると、

最初に`ある部分問題`を解いたことがあるか調べ、
**解いたことがあれば、保存されている値を返し、後の計算を節約する。**
解いたことがなければ、通常通り計算する。

という仕組みです。[wiki](https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%A2%E5%8C%96)は多分もう少し詳しいです。
上のwikiによるとキャッシュはより広範な用語であり、メモ化はキャッシュの限定的な形態を指す用語である。とのこと。
Qiitaにもたくさん記事があると思います。

# 調べてみた結果

こんな感じでいったん決着した。

```php
function memoize(callable $func) {
    return function(...$args) use ($func) {
        static $cache = [];
        $key = serialize($args);

        if (!isset($cache[$key])) {
            $cache[$key] = $func(...$args);
        }
        return $cache[$key];
    };
}
```

ほぼ[参考元][memoize]のまんまで申し訳ないが、いったんはこれでいい気がする。
考え方としては[この記事](http://smrmkt.hatenablog.jp/entry/2014/12/07/195752)も参考にするといいと思う。
もっとPHPに慣れてきたらクラス化やさらに汎用的なやり方が考慮に入るだろう。

## 実際にメモ化されているか試す

これも[参考元][memoize]からほぼ引っ張ってきたものである。
とりあえず、メモ化によって高速化されていたら成功とする。
以下は高速化されたか図るタイマー関数とメモ化対象の関数である。

```php:タイマーとメモ化対象の関数
function timer(callable $func) {
    return function(...$args) use ($func) {
        $start = microtime(true);
        $result = $func(...$args);
        echo(sprintf("%f\n: ", microtime(true) - $start));
        return $result;
    };
}

function sleepz(int $time) {
    sleep($time);
    return $time;
}
```

以下のコードで確認する。

```php:メモ化がちゃんとなされたか確認する。

// メモ化されていない場合を試す。
$sleepz = timer(sleepz);

// 1.005205
$sleepz(1);

// メモ化する。
$sleepz = timer(memoize(sleepz));

// 1.004555 (計算結果がメモされた。)
$sleepz(1);

// 0.000008 (メモした計算結果を返しているので速い。)
$sleepz(1);

// 2.005246 (引数が上と違い、メモされていなかったので当然、それ相応の時間がかかる。)
$sleepz(2);
```

返してくる値もきちんとメモされた場合とメモされていない場合で同じものなので気になる方は試してみてほしい。

## 再帰はどうする？

[参考元][memoize]にもあるが、この実装だととりあえず無名関数でごまかす感じになりそうだ。
まあ今後の課題にしておこうと思う。

```php
$fibonacci = memoize(function($n) use (&$fibonacci) {
    return $n < 2 ? $n : $fibonacci($n - 1) + $fibonacci($n - 2);
});
// 12586269025
echo($fibonacci(50) . "\n");
```

# さいごに

5億年ぶりにPHP書いてみたが若干のPerlっぽさがあって笑ってしまう。

転職活動中だったが自分の理想を追い求めるにはPHPとJavaScriptを勉強したほうがよさそうなので
しばらくはこういった慣れない言語や環境の記事が増えるかもしれない。


[memoize]:<https://eddmann.com/posts/implementing-and-using-memoization-in-php/>
Vue.jsをはじめる

# はじめに
nodeが入っていないと始まりません。
ノードが入っていない方は、以下を参照してください。
・[macにNode.jsをインストール（ndenv編）](https://qiita.com/griffin3104/items/a8ae5b271bf9246eeadd)

# Vue.jsのプロジェクトを生成する環境を作る。
vue-cliを使ってプロジェクトを作るが、グローバルにインストールしたくないので、Vue.jsのプロジェクトを作成する環境を構築して、改めてvue-cliを使ってプロジェクトを生成します。

## フォルダの作成
プロジェクト生成用の環境を作ります。
web-factoryというフォルダ内をその環境にしますので、そのフォルダの作成から。

```console
host:~/ user$ mkdir web-factory 
host:~/ user$ cd web-factory
host:web-factory user$
```

## package.jsonを作成する。
続いて、package.jsonを作成します。

```console
host:web-factory user$ npm init -y
```

色々調整したい人は、-yを外して、生成してください。

## vue-cliをインストールする。
vueのプロジェクトを生成する為の、vue-cliをインストールします。

```console
host:web-factory user$ npm i -S @vue/cli
```

これで環境構築は完了です。

# 早速プロジェクトを作ってみる
早速プロジェクトを作りましょう。

## web-proというプロジェクトを生成する。
以下のコマンドで、プロジェクトを生成します。

```console
host:web-factory user$ npx vue create web-pro
```
めんどくさい人は、このコマンドで始まる問答に、最初defaultを選択してください。
色々カスタマイズしたい人は、Manually select featuresを選択して、マニアックに設定してください。
生成には、結構時間がかかります。

# 早速動かしてみる
早速動かしてみましょう。

## run serveする
以下のコマンドを入力します。

```console
host:web-factory user$ cd web-pro
host:web-pro user$ npm run serve
 DONE  Compiled successfully in 21155ms                                                                                 11:31:56

 
  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://xxx.xxx.xxx.xxx:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
```
こんな感じで起動しましたか？

## ブラウザで確認

ブラウザを開いて、http://localhost:8080/と入力してください。
vue-cliが生成した画面が確認できます。

#最後に
以上簡単ながら、Vue.jsを始める部分のみを開設しました。
生成したプロジェクト（web-pro)の中には、srcというフォルダが入っていて、この中のソースを修正すると、画面が変わっていくのが確認できます。
色々触って確認してみてください。
numpyを使って２つのベクトルの成す角を求める。

##２つのベクトルの成す角を求めたい。

ベクトルの内積を学習すると、必ず出てくるのが２つのベクトルの成す角を求める演習問題です。
今回はこの定番の演習問題をPythonを使って解いてみたいと思います。

---
#### まず２つのベクトルのインプットできる状態にする。

コード内でベクトルを決めてしまうのではなく、入力待ちの状態にすることにします。

```python:
import numpy as np

a = list(map(int, input().split()))
b = list(map(int, input().split()))
A = np.array(a)
B = np.array(b)
```
####内積を計算。

今回はnumpyを使ってしまいましょう。(;^_^A

```python:

x = np.inner(A,B)
print(x)
```




####各ベクトルの長さを計算。

これもnumpyを使えばあっという間ですね。

```python:
s = np.linalg.norm(A)
t = np.linalg.norm(B)
print(s)
print(t)
```
   

####２つのベクトルの成す角を求める。

あとは、逆三角関数arccosを使えばおしまい。

```python:

theta = np.arccos(x/(s*t))
print(theta)
```


#### コサイン類似度

余談ですが、ベクトル間の類似度を求める時には以下のコサイン類似度がよく用いられます。

```python:
def similarity(A,B):
    return x/(s*t)
print(similarity(A,B))
```
localeを日本語(ja_JP.UTF-8)にする

##概要

Linux(CentOS)の言語設定を日本語(ja_JP.UTF-8)にする。
Dockerで取得したCentOSはデフォルトは　"en_US.UTF-8" になっている。localectl list-localesで確認するとja_JPがない。そんな状態からja_JP.UTF-8を使えるようにするまでの内容です。

##実行環境
CentOS Linux release 7.6.1810 (Core)

補足
macOS High Sierra 10.14.3
Docker version 18.09.1, build 4c52b90

##手順

####現在のロケール確認
```
localectl status
   System Locale: LANG=en_US.UTF-8
       VC Keymap: us
      X11 Layout: us
```

本記事は ja_JP.utf8 に設定することが目的なので、
すでに ja_JP.utf8 の場合は目的達成しています！

####使用可能なロケール確認

```
localectl list-locales
```

ja_JP.UTF-8があればファイル生成部分の記事は読み飛ばしてください。
DockerのプレーンなCentOSを使っている場合は存在しないようです。


####ロケール生成・設定

ja_JP.UTF-8を生成できるか確認するため、下記コマンドでja_JPのソースが入っているか確認する。

```
ls /usr/share/i18n/locales/ | grep ja
ja_JP
```

localedefコマンドでロケールを生成する。charmap(-fオプション)はUTF-8を指定する。

```
localedef -i /usr/share/i18n/locales/ja_JP -f UTF-8 /usr/lib/locale/ja_JP.UTF-8
```

localedefコマンドでロケールをアーカイブに登録する。

```
localedef --add-to-archive /usr/lib/locale/ja_JP.UTF-8
```

localectlコマンドでロケールを設定する。

```
localectl set-locale LANG=ja_JP.UTF-8
```

設定を反映させる。

```
source /etc/locale.conf
```

設定確認

```
localectl status
   System Locale: LANG=ja_JP.UTF-8
       VC Keymap: us
      X11 Layout: us
```

以上！

設定して思ったこと。
余計なロケールが多いし、今後使うこともないので不要なロケールは削除した方がいいですね。
サイト制作依頼と自作との違い

自分でサイトを作るなら、ブログやWordPressやHTML自作など選択肢はたくさん。ヒトから依頼を受けると、HTMLやCSSの経験とスキルがすべて。知らないことは独学という世界。本に書いてあることでも自分のスキルとして身につくには時間がかかるのです

WordPressサイト制作では、作ったあとにやることも出てきます。修正依頼が多いこと。エラーや表示の不具合等バグ修正。クライアントの好みや嗜好の修正などがあります。

最近ではモバイル用とPC用とで別に分けることが求められていて、簡便なWordPress運用も増えてます。CMSは一般の運営者には易しいツール。専門家にとっては仕様が独特で覚えないといけない。

<a href="https://premium-catfood.com/monpetit-review-safety/" >猫のモンプチの口コミサイト</a>は個人サイト。個人だと好きにレイアウトして、細かい部分も自由です。

依頼を受けるときでは、お金が発生するだけに質の高い仕事が求められます。サイト制作では個人ブロガーよりは法人の依頼が多くなります。<a href="https://premium-catfood.com/grain-free-cats-food-comparison-recommendation/" >グレインフリーのおすすめ</a>のようなランキング形式は作るのが難しいようでツールで作れます。コピペ、テンプレートを使い回すならかんたん。

CSSでもデザイン性が問われる。最新のHTMLを習得できているか。ここが自作と請負の違いです。自作だったらミスは許される。請負は修正したりクレーム対象。
RDKitの芳香環判定について実験メモ

### 初めに
掲題の件、SDFやSMILESでケクレ構造式で与えた構造を、芳香環として判定してくれているのか、ふと疑問に思ったので実験した時のメモ。

### 環境
- Python 3.6
- RDKit 2018/9/2
- Jupyter Notebook

### やったこと

まずはケクレ構造式でベンゼン環を書いて表示する。

```
from rdkit import Chem
from rdkit.Chem import AllChem, Draw, Descriptors, PandasTools
from rdkit.ML.Descriptors import MoleculeDescriptors

mol1 = Chem.MolFromSmiles("C1=CC=CC=C1")
Draw.MolToImage(mol1)

```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/329816/8f850b54-d4da-b05b-9620-cdcda874d024.png)


このMOLオブジェクトに対し、芳香環の数、再度SMILES化したものを出力

```
Descriptors.NumAromaticRings(mol1)
1
Chem.MolToSmiles(mol1)
'c1ccccc1'
```

おおう、芳香環として認識されているようだ。
Three.jsとシェーダー　〜ドキュメントを読む〜

Three.jsはめっちゃ便利なラッパーライブラリです。object作って、マテリアル設置して、ライトおいて、カメラおいてレンダリングっていう非常にわかりやすい手順で3Dをweb上で実現することが可能です。

が、そろそろもうちょっと自由度の高い描画がしたいなーなんて気分になってきたのでここいらで自作シェーダーを使ってみようと思いました。

シェーダーというものが存在するのはわかってたのですが、実際の記述方法とかが全くわからなかったのでこれからそれを学んでいこうというわけです。半分メモみたいなものですが、読者の想定としては、**シェーダーとかいうものが存在して、それを使えば自由度の高いことができるっぽいけど、実際の書き方はわからん**みたいな人です。

WebGLをthree.jsに頼らず全て直書きするという選択肢もあったのですが、将来的に組み合わせて、Three.jsで楽できるところは楽をするという使いかたを想定し、Three.js上で自作シェーダーを使うことに決めました。

# シェーダーって何よ

「ものすごくざっくりとですが、頂点シェーダは頂点に関する情報を、フラグメントシェーダは画面上の色の情報を、それぞれ処理するものだと考えるとわかりやすいかもしれません。」
(https://wgld.org/d/webgl/w008.html より引用)

とのことです。

頂点シェーダで頂点を歪めたりできます(例えば曲面の鏡の前に立つと自分が太ったり痩せたりして見えるってのは頂点シェーダに近いかなとか思っています。)
フラグメントシェーダは色を変えることができます。(緑のフィルムのメガネで見ると緑に見えるみたいな感じとか？これはちょっと違うかもですが)

# Three.jsでのシェーダってどういう扱い？

Three.jsではシェーダーはマテリアルの扱いになります。このときジオミトリにはBufferGeometryを使うみたいです。つまるところ

```.js
let mat = new THREE.ShaderMaterial(hoge)
let geo = new THREE.BufferGeometry(fuga)

let mesh = new THREE.Mesh(geo,mat)
```

みたいな感じにするらしいです。

# 実際にどうやって書くのよ。

ShaderはGLSLとかいう言語によって記述されます。
パラメータについて値や処理を書き込んでいくようです。このとき一つ特殊なところがあって、**一部の基本的な情報(時間やオブジェクトの頂点情報などなど)はWebGL側から特定の名前の変数に与えられます。**

これがかなりややこしい。この仕様のせいで知らない人から見たら虚無から変数が登場してるように見えます。
また、このWebGL側から与えられる情報は**変数宣言が必要なものと必要でないものがあるみたいです**

ほへー。
これから実際に書いて理解を含めていこうと思います。
ABC123 B - Five Dishes (200点)

Bにしては難しかったので、書いておこうかなと。

#問題概要
[問題のリンク](https://atcoder.jp/contests/abc123/tasks/abc123_b)

以下の料理が提供される店がある。(「調理時間」は料理を注文してから客に届くまでの時間)

- ABC 丼： 調理時間 $A$ 分
- ARC カレー： 調理時間 $B$ 分
- AGC パスタ： 調理時間 $C$ 分
- APC ラーメン： 調理時間 $D$ 分
- ATC ハンバーグ： 調理時間 $E$ 分

またこの店には以下のような注文のルールがある。

- 注文は、$10$ の倍数の時刻 (時刻 $0,10,20,30,...$) にしかできない。
- 一回の注文につき一つの料理しか注文できない。
- ある料理を注文したら、それが届くまで別の注文ができない。ただし、料理が届いたちょうどの時刻には注文ができる。

5つの料理全てを注文する時、最後の料理が届く最速の時間を求めよ。

#考えたこと
入力例で実験してみればわかるが、この問題は実は1~4番目の順番は何でもよく、最後の値によって答えが決まる。時刻の和を取っていく時に、注文は $10$ の倍数の時刻に行われるので、10で割った剰余が0でなければ1の位が繰り上げられるが、最後の値だけは次の注文がないため繰り上げられずに和を取ることになるからだ。

以下の入力例1で実験する。

- ABC 丼： 調理時間 $29$ 分
- ARC カレー： 調理時間 $20$ 分
- AGC パスタ： 調理時間 $7$ 分
- APC ラーメン： 調理時間 $35$ 分
- ATC ハンバーグ： 調理時間 $120$ 分

この時答えは $ABC$ 丼 → $ARC$ カレー → $AGC$ パスタ → $ATC$ ハンバーグ → $APC$ ラーメン の順で注文して $215$ 分であるが、例えば$ABC$ 丼と$ARC$ カレーの順番が逆でも問題はない。
一方、例えば、　$ATC$ ハンバーグ と $APC$ ラーメンの順番を入れ替えると答えは$220$となる。

よって、それぞれの料理が最後になった場合を全通り出して最小値をとればよい。
計算量は  $O(1)$ である。

#解答

```b.cs
using System;
using System.Linq;

class Program
{
    static void Main(string[] args) {
        int[] l = new int[5];
        for (int i = 0; i < 5; i ++) {
            l[i] = int.Parse(Console.ReadLine());
        }
        int[] t = new int[5];
        for(int i = 0; i < 5; i ++) {
            t[i] = l[i];
            for (int j = 0; j < 5; j ++) {
                if (j != i) {
                    if (l[j]%10 == 0) t[i] += l[j];
                    else t[i] += l[j] + 10 - l[j]%10;
                }
            }
        }
        Console.WriteLine(t.Min());
    }
}
```
JavaScriptを使わずに、スクロール量に応じて伸び縮みするプログレスバーを作る

##何がしたいか
こんなやつを作りたい。
![1554600665978.gif](https://qiita-image-store.s3.amazonaws.com/0/358159/687b98e4-da39-0aae-85f2-b4cdbce7ff08.gif)
スクロールしたらそれに応じて伸縮するバー。ページの50%まで進んだらバーも50%のとこまで進む、みたいな。

これをJavaScriptとかjQueryプラグインとか使わずに作ります。

##作り方
CSSでスクロールバーをカスタマイズします。``-webkit-scrollbar-***``という擬似要素を使います。ここから分かる通り、Chromeとかsafariとかの**webkit系ブラウザでしか動きません。**（[::-webkit-scrollbar - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar#Browser_compatibility)）

##とりあえずコードを
「コード見りゃ分かる」という人のためにまずは全体のコードを載せます。コードは必要最低限な箇所のみを抜粋して載せます。すべてのコードは[こちらのCodePen](https://codepen.io/Mryoo/pen/WWxVdX)に載せています。

```html:HTML
<div>
  <p>ほげーーーーーーーーーーーーーーーーーーーーーほげほげほげーーーーーーーーーーーーーーーーー</p>
</div>
```
```css:CSS
div {overflow-x: scroll;}
div::-webkit-scrollbar {height: 16px;}
div::-webkit-scrollbar-track-piece {
  background: #ccc;
  border-top: 6px solid #fff;
  border-bottom: 6px solid #fff;
  border-radius: 8px;
}
div::-webkit-scrollbar-track-piece:decrement {
  background: #666;
  border-top: 6px solid #666;
  border-bottom: 6px solid #666;
}
div::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 8px;
}
p {white-space: nowrap;}
```

##コードの解説
どの擬似要素がどの部分を指定しているのかを簡単に解説します。もっと詳しく知りたい方はググってください。先人方が丁寧に解説してくれています。

###``-webkit-scrollbar``
スクロールバー全体のスタイル。水平スクロールバーの高さは``height``で指定する。垂直スクロールバーの幅は``width``で指定する
![無題.png](https://qiita-image-store.s3.amazonaws.com/0/358159/a3eee973-251b-2133-5bc7-a563e9b98eb1.png)

###``-webkit-scrollbar-track-piece``
スクロールバーの動くやつの動ける領域のスタイル。
![無題.png](https://qiita-image-store.s3.amazonaws.com/0/358159/69fbde4c-9e20-a60c-0bf8-1a47ffe0bf4c.png)

###``-webkit-scrollbar-track-piece:decrement``
スクロールバーの動くやつの動ける領域のスタイルのうち、動くやつの左側にある領域。
![無題.png](https://qiita-image-store.s3.amazonaws.com/0/358159/98e531b2-c9e3-fa1c-9f0f-fe5baa32ba25.png)

###``-webkit-scrollbar-thumb``
スクロールバーの動くやつ。
![無題.png](https://qiita-image-store.s3.amazonaws.com/0/358159/7ebee2dc-d622-e078-cbd4-ae2e51c007f1.png)

##仕組み
スクロールバーの動くやつの左側の領域（``-webkit-scrollbar-track-piece:decrement``）を動くやつ（``-webkit-scrollbar-thumb``）と同じ色にしている、だけです。

##応用
![1554599974002.gif](https://qiita-image-store.s3.amazonaws.com/0/358159/6a8eb818-4e2b-8832-b479-873cab591baa.gif)
横スライド式の画像スライダーと組み合わせれば、スライダーがどこまで進んだかが直感的に分かる！
このスライダーの全体のコードは[こちらのCodePen](https://codepen.io/Mryoo/pen/mgENQR)から見れます。

##最後に
ここで紹介した以外にもいろいろな擬似要素があるので、もっと面白いものも作れるかも
RDKitにおける立体異性体に関する実験メモ

### はじめに
掲題の件、SDFやSMILESで与えた立体異性体をきちんと区別しているのか、ふと疑問に思ったため実験した。

### 環境
- Python 3.6
- RDKit 2018/9/2
- Jupyter Notebook

### やったこと
まず、あらかじめSDFで立体異性体の関係にある2つの化合物を作成した。
3次元座標ではなく、結合の種別として、手前側に伸びるのか、後ろ側に伸びるのかを指定し作成した。
1つ目

```
mol1 = Chem.SDMolSupplier("data/kiral.mol", removeHs=False)[0]
Draw.MolToImage(mol1)
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/329816/335cc176-dad7-f02d-429e-93f177a92802.png)

2つ目

```
mol2 = Chem.SDMolSupplier("data/kira2.mol", removeHs=False)[0]
Draw.MolToImage(mol2)
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/329816/1c3529aa-f857-99b3-cc69-51f54cf12213.png)

処理の都合上、画像の大きさが一致していないが、確かに2つをきちんと区別して描画している。
このMOLオブジェクトをSMILESに変換してみよう。

```
Chem.MolToSmiles(mol1, isomericSmiles=True)
'[H][C@@](F)(Cl)Br'

Chem.MolToSmiles(mol2, isomericSmiles=True)
'[H][C@](F)(Cl)Br'
```

SMILES上でもきちんと区別されている。
今度は逆に、上の2つのSMILESが区別されてMOLオブジェクトとして認識されるか確認しよう。


```
mol1FromSmiles = Chem.MolFromSmiles("[H][C@@](F)(Cl)Br")
mol2FromSmiles = Chem.MolFromSmiles("[H][C@](F)(Cl)Br")
```

上でSMILESから、MOLオブジェクトを生成し、以下の通り表示。

```
Draw.MolToImage(mol1FromSmiles)
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/329816/e9b8f01c-22e3-d174-ba68-1af2727ec010.png)


```
Draw.MolToImage(mol2FromSmiles)
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/329816/a6dcd5a9-b12e-6305-6e36-e2fdcdb0a161.png)


きちんと区別されて認識されているようだ。
ここには記載していないが、3次元化についても区別されることを確認。

当たり前の機能ではあるが、ちょっとスッキリした。
Datalabで分析環境を用意する [GCP]

# はじめに

会社の組織力向上活動の一環として「チーム活動」名目で、ある程度自由に予算を使っていろんな活動ができるようになったので、チームメンバー全員で[GCP Professional Data Engineer](http://cloud.google.com/certification/data-engineer?hl=ja)の資格を取得しようということに。。。

サービスの概要なんかを勉強していったのはいいものの、

「DataFlow。。。なんや、それ。。。」

「BigtableとDatastoreってなにが違うねん！！！」

「Datalab便利やのになんでひっそりサービス提供されてんねん！！」

「AWS程ではないけど、サービス多すぎ！！ええことやけど。。。」

と、実際にサービスの種類が多すぎて使ってみないとよくわからないという結論に至ったので、勉強記も兼ねてGCPの各サービスを実際に使ってその結果をQiitaに投稿していく

# Datalab
GCPのホーム画面にもナビゲーションメニューにも表示されず、ひっそりとデータサイエンティストの仕事を支援してくれているサービス

それが[Datalab](http://cloud.google.com/datalab/)

Colaboratoryも同じように瞬時にJupyterを立ち上げて分析環境を構築できるため、重宝しているがセッションが切れると作業してた内容が吹っ飛ぶためデータの取り扱いに気をつけないといけない

でもDatalabは、自身のGCP環境上に環境を立ち上げているのでその心配は無用


- DeepLearningをお試しで実行したい場合には**Colaboratory**

- 毎回GCSにデータを移すのが面倒なアドホック分析は**Datalab**

あまりお金をかけずに簡単な分析するなら上の選択肢が現実的かも。。


## サービス概要
[公式](http://cloud.google.com/datalab/?hl=ja)の内容をまとめると

- データの探索、分析、可視化と機械学習のための使いやすいインタラクティブなツールというかJupyter
- Datalabは実際にはComputeEngineが裏側で起動している
- Google BigQuery、Cloud Machine Learning Engineなどのデータ分析が可能
- Datalab自体は無料。裏側で起動しているGCEや利用したBigQueryの料金が課金対象
- githubで公開されてる

[github]
https://github.com/googledatalab/datalab

## 起動する
Datalabはcloudshell上で実行できる

試しに`datalab-sandbox`の名前でDatalabを起動する

超簡単！！

```shell
datalab create datalab-sandbox
```

Datalabが作成されるとPortを8081に変更してwebでプレビューボタンを押すと、こんな感じの画面が出てくる

![スクリーンショット 2019-04-06 10.32.10.png](https://qiita-image-store.s3.amazonaws.com/0/55225/eab38dcd-e7ab-42b2-317c-1dbd574d57bf.png)

コレでcloudshellで起動している間は、Datalabを利用できる

デフォルトのVMマシンはn1-standard-1だが、create時にVMマシンのタイプは指定できる

## 使ってみる
使ってみると言っても、まぁただのJupyterなんでね。別に、コレと言って目新しいことはないわけで。。。

ただ、Datalabで色々分析したい場合にいいなと思ったのは、元々`scikit-learn`や`tensorflow`は既にインストール済みなのでそこは良さげ（colaboratoryでもデフォルトで入っているけど）

また、マジックコマンドに`%%bigquery`とかあって他のGCPのサービスと連携取りやすいのもいいところかも

デフォルトで入っていないライブラリに関してもColaboratoryと同じようにセルに`!pip install XXX`と打ち込めばインストール出来る


ちなみに画面はこんな感じ

![スクリーンショット 2019-04-06 10.42.07.png](https://qiita-image-store.s3.amazonaws.com/0/55225/3d08ffee-d753-3bf7-3ca2-62e641a52274.png)

## ungitを使ってソースをforkしてくる
Datalabのメニューバーのところにgitアイコンがあるが、コレをクリックするとDatalabに外からソースを色々forkしてくることができる


![スクリーンショット 2019-04-06 13.10.56.png](https://qiita-image-store.s3.amazonaws.com/0/55225/c3963f3d-66f8-e229-8c7c-075ce3745a3d.png)



## Datalabを削除する

ちなみに料金は起動している間から削除するまで発生するので、料金がチャージされないようにするためには

```shell
datalab delete --delete-disk datalab-sandbox
```

上記のようにすれば、ディスクもVMも削除できる

他のDatalab関連のコマンドを知りたい場合は以下を参照

https://cloud.google.com/datalab/docs/reference/command-line/commands


# 参考リンク
[[GCP] Datalab の起動方法](http://qiita.com/nanairoGlasses/items/2a22768d996862140552)

[公式リファレンス](http://cloud.google.com/datalab/docs/quickstart?hl=ja)


まぁ、コレくらい調べればええやろ

どうせ試験にDatalabが詳しく出題されることもないだろうし。。。

おしまい
WindowsでChildeProcessを使ってもENOENTばかり出てくる際の対処法

# 概要

Electronでマルチプラットフォームなアプリを作ろうとした際、Windowsが行う処理のときにコマンドを叩かせる必要があったため叩かせたところ、落としたバイナリの実行はおろか、echoやcdのような単純なコマンドすらENOENTエラーになる。
検索してもかなり出づらい情報だったため、ここに記載する。

# 結論

spawnやexecを使う場合はcmdコマンドを叩けばいい。

# 問題のコード

echoでhogeと言わせたかったが動かなかった。
パスが通ってない様子だがcmdファイルを直接叩いても同じ状況が発生した。
なお、単純にこのままだと文字化けするのであとで直すこと。

```javascript
const child_process = require("child_process");
let proc = child_process.spawn("echo",["hoge"]);
proc.stdout.on('data',function(data){
  console.log(data);
});
```

# 解決策

上記の状況でも何故か動くcmdコマンドに/cオプションをつけて実行すれば解決。
Linuxのcdコマンドみたいにシステムコマンドは特殊な状況でもだいたい動くみたいな感じなんだろうか…

```javascript
const child_process = require("child_process");
let proc = child_process.spawn("cmd",["/c","echo","hoge"]);//ここでcmdコマンドを使うように書き換える。
proc.stdout.on('data',function(data){
  console.log(data);
});

```

# 参考

https://github.com/nodejs/node-v0.x-archive/issues/4240
Power9 CPUのUsers Manualを読んでいく(2)

今日もPower9 CPUアーキテクチャのUsers Manualを読んでいきます。

原著は以下からダウンロードできます。
https://openpowerfoundation.org/?resource_lib=power9-processor-users-manual

Page29から開始していきます。

>From a logical perspective, the POWER9 processor consists of six main components:

論理的な視点から、POWER９プロセッサは６のメインのコンポーネントから成り立っています。

>• POWER9 processing core including the L1 cache

L1キャッシュを含むPOWER9プロセッシングコア

>• L2/L3 caches and noncacheable unit (NCU)

L2/L3キャッシュとノンキャッシャブルユニット（NCU)

noncacheable unitについてググってみると、以下のような文面がヒットしました。

>The Non-Cacheable (NC) Unit is responsible for handling instruction serializing functions and performing any noncacheable operations in the storage topology.

(https://en.wikipedia.org/wiki/POWER4)

ノンキャッシャブルユニットは、シリアライズ関数の命令の扱い、ストレージのトポロジーにおけるノンキャッシャブル操作の実行に責任を負います。

うーむ何言ってるのかわからないですが、スルーしておきます。

>• Processor bus fabric interconnect

プロセッサのバスの組織の相互接続の機能が、POWER9プロセッサの機能として存在するようです。

>• Memory subsystem

メモリの下位組織がPOWER9プロセッサの一部として存在するのかな？

>• PCIe I/O subsystem

PCIe I/Oのサブシステム

>• Accelerator subsystem

アクセラレータのサブシステム

次、P30のGeneral Featureですね

>The POWER9 processor can have up to 24 cores enabled on a single chip and is offered with a direct-attached memory for scale-out computers.

POWER9プロセッサは、一つのチップに２４のコアを有効にすることができ、スケールアウトコンピュータ用に、メモリをダイレクトアタッチすることができるようです。

POWER9プロセッサは、以下のアーキテクチャーの機能を持つようです。

>• Power ISA Architecture (Books I, II, and III), version 3.0B

Power ISAという標準規格があって、それに準拠しているようです。３冊のPDFにまとめられています。

>• Linux on Power Architecture Platform Requirements

Powerアーキテクチャ上のLinuxをサポートしているようですね。

>• I/O Design Architecture v2 (IODA2) Specification, Version 2.4+

IODA2をググってみたら、以下のような記述を見つけました。

>The IODA2 Specification will describe the chip architecture for key aspects of PCIe-based host bridge (PHB) designs for POWER8 systems.

IODA2の仕様は、POWER8システムのPICeベースドホストブリッジのキーとなるチップのアーキテクチャを記述しているようです。

>• IEEE P754-2008 floating-point compliant

IEEEで決められた浮動小数点の要求も機能として入っているようです。

>• Big-endian, little-endian, strong-ordering support extension

ビッグエンディアン、リトルエンディアン、はわかるんですが、strong-orderingって何だろうと思って、調べてみたけどよくわからないです。

>• 56-bit real address, 68-bit virtual address

56ビットの実アドレス、68ビットのバーチャルアドレス、物理アドレスと仮想アドレスという記述ならいかにありましたね。

http://128bit.blog41.fc2.com/blog-entry-32.html

>The following features describe the main components of the 24-core POWER9 processor chip:

以下の機能が２４コアのPOWER9プロセッサチップのメインコンポーネントを記述しています。

>• POWER9 core and cache

POWER9のコアとキャッシュ。

>Up to 24 processor cores

24のプロセッサコアで構成されている。最近はかなりマルチコアになってますね。タスク管理が大変そうです。

>Four-slice design plus
>-Branch Unit
>-Decimal floating point Unit

Decimalって１０進数ですよね。金融計算に使われる型。Decimalって浮動小数点演算って可能でしたっけ？

>Crypto Unit

暗号ユニット、暗号ってCPUにビルトインで実装されているんですね。

>Each slice can perform one FX or VSX operation per cycle and one LS operation

FX VFX LSって命令セットの一種なのかなとは思ったりします。operationというからには、そういうことみたいですね。cycleってのはCPUサイクルのことかなと思います。

> Four SMT,O-o-O

SMTとはSimultaneous Multithreadingのことみたいですね。O-o-Oって何ってよくわからないです。
追記：Out of Order実行のようです。@tenmyoさんありがとうございます。

>32 GPR ,32 FPR , and 64 VSR register per thread

GPRってのは、General Purpose Registerだと思います。FPRはFloating Point Register、VSRは、何かのレジスタだと思うんですが、よくわからないです。一つのスレッド（一つのコアかな？）あたりこれだけレジスタがあることになりそう。

ということで、次回に続きます。
[Python]フォルダ構造をDataFrameに入れる方法

# はじめに
フォルダ毎や形式毎にファイルを読み込んで処理する時、それぞれのファイルpathを検索しながら取得するのは面倒ではありませんか？
そこで、ファイル情報をDataFrameに格納することで、直感的にpathを取得出来るようにしました。

# サンプル
以下のようなディレクトリ構成があったとき、

```:tree構造
/data
└── dir_A
    └── a.txt
└── dir_B
    └── b.txt
```

以下のようなDataFrameを取得します。

|index|ファイル名|相対path|ファイル形式|a|b|c|絶対path|
|:---|:---|:---|:---|:---|:---|:---|:---|
|0|data|./data|ディレクトリ|data|||C:/data|
|1|dir_A|./data/dir_A|ディレクトリ|data|dir_A||C:/data/dir_A|
|2|a.txt|./data/dir_A/a.txt|.txt|data|dir_A|a.txt|C:/data/dir_A|
|3|dir_B|./data/dir_B|ディレクトリ|data|dir_B||C:/data/dir_B|
|4|b.txt|./data/dir_B/b.txt|.txt|data|dir_B|b.txt|C:/data/dir_B|

# コード
```python:tree_to_df
import pathlib
import pandas as pd
import string

def tree_to_df(path ='.', dir_only=False, file_only=False, path_only=False):
    
    # get target_path
    p = pathlib.Path(path)
    
    # get tree
    pathlist = list(p.glob("**/*"))
    
    # get file_info
    namelist = [i.name for i in pathlist]
    str_p = p.resolve().as_posix()
    str_pathlist = [i.resolve().as_posix() for i in pathlist]
    str_relpath = [path + '/' + i.replace(str_p + '/', '') for i in str_pathlist]
    str_pathlist_split = [i.replace(str_p + '/', '').split('/') for i in str_pathlist]
    type_list = [i.suffix if i.suffix !='' else 'dir'  for i in pathlist]
    
    def col_name(num):
        n = map(int, str(num))
        w = [string.ascii_lowercase[i] for i in n]
        result = ''.join(w)
        return result
    
    # make_df
    df_splitpath = pd.DataFrame(str_pathlist_split)
    df_splitpath = df_splitpath.rename(columns=lambda s: col_name(s))
    df_namelist = pd.DataFrame(namelist, columns= ['name'])
    df_type_list = pd.DataFrame(type_list, columns= ['type'])
    df_str_relpath = pd.DataFrame(str_relpath, columns= ['relpath'])
    df_str_abspath = pd.DataFrame(str_pathlist, columns= ['abspath'])

    # result_df
    df = pd.concat([df_namelist,df_str_relpath,df_type_list,df_splitpath,df_str_abspath],axis=1)
    
    # select_df
    df = df = df[df['type']=='dir'] if dir_only else df
    df = df[df['type']!='dir'] if file_only else df
    df = df['abspath'] if path_only else df

    return df
```

# 使い方
検索したいpathを関数に渡します。引数で、フォルダ・ファイル・pathのみ出力もできます。出力したDataFrameにqueryを叩くことで、直感的にpathを取得することが出来ます。

```python:use
# cwd
tree_to_df()
# cwd
tree_to_df('.')
# up_dir
tree_to_df('../')
```

# 参考文献
[Pathlibチートシート - Qiita](https://qiita.com/meznat/items/a1cc61edb1e340d0b1a2)
[Pythonでフォルダ内のファイルリストを取得する - Qiita](https://qiita.com/amowwee/items/e63b3610ea750f7dba1b#pathlibpathを使う)
[Python, pathlibでファイル名・拡張子・親ディレクトリを取得 \| note.nkmk.me](https://note.nkmk.me/python-pathlib-name-suffix-parent/)
[Pythonの三項演算子（条件演算子）でif文を一行で書く \| note.nkmk.me](https://note.nkmk.me/python-if-conditional-expressions/)
[string - Alphabet range python - Stack Overflow](https://stackoverflow.com/questions/16060899/alphabet-range-python)
[[python]リストの中身を文字列に変換する。 \| 岡田デザインラボ](https://www.okadalabo.com/pythonリストの中身を文字列に変換する。/)
MacとLinuxのBashでランダムな文字列を取得する

```bash
$ LC_CTYPE=C tr -dc A-Za-z0-9 < /dev/urandom | head -c 32

CbV13JABZPi8L4Ej7g8SimnixD6jIlHV
```

出力例

![image.png](https://qiita-image-store.s3.amazonaws.com/0/47327/99b55e67-c726-2358-afa2-fc20cf47d3d8.png)

記号を入れる場合にはtrに下記のようにオプションを指定する。

```bash
$ LC_CTYPE=C tr -dc A-Za-z0-9_\!\@\#\$\%\^\&\*\(\)-+= < /dev/urandom | head -c 32

MlA&_Ic1lMuDj#*pez^@Rkl!X17OCUw!
```


> https://unix.stackexchange.com/a/45406

# 参考など
もともとは下記の記事を参考にして動かそうとしました。

[ランダム文字列をたくさん生成する - Qiita](https://qiita.com/Vit-Symty/items/5be5326c9db9de755184 "ランダム文字列をたくさん生成する - Qiita")

が、`tr`に`urandom`のデータを入れると`tr`がエラーを出してしましました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/47327/3399b11e-5fa2-5f47-a146-fca9dd4320fb.png)


上記のように`LC_CTYPE=C`とすると解決しました。
phpmyadminのえらー

#1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'varchar(10)) DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci' at line 1 


うへ、エラー吐かれた。

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10165998220

メモ帳で保存しなおしてもだめ。

ファイルの最初の行にテーブルのカラム名が含まれている。(これをチェックしなかった場合、最初の行はデータの一部と見なされます。)
↑これ無効化したらいけた。なんでだろう


レコード1つ1つ削除できないじゃんバカ。
https://deco8.net/web/phpmyadmin-error/
ユニークキーの作成をすると解決するっぽい。てか解決した。なんでこれちゃんと説明してくれる人が全然いないの？

なんかまたインポートでエラーでるようになった。
メモ帳でutf-8で保存したら読み込みの時のcsv-なんちゃらかんちゃらにすればいいのね。
https://teratail.com/questions/126451
RDKitで水素を付加するときにハマったメモ

### はじめに
RDKit等で3次元構造を生成する際には、水素原子を付与することが推奨されている。しかしSDFから読み込んで生成したMolオブジェクトにChem#AddHsメソッドで付与しても正しく水素原子が付与されてない場合があるので、メモ

### 環境
- RDKit 2018/9/1
- Python 3.6
- Jupyter Notebook

### うまくいかない方法

まずは読み込んで表示。

```
import rdkit.Chem 
from rdkit import Chem
from rdkit.Chem import Draw
from rdkit.Chem import AllChem

molBlock = '''3-methylpentane
     RDKit          2D

  6  5  0  0  0  0  0  0  0  0999 V2000
    0.2606    0.1503    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.3000    0.7500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    2.6000    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    2.6000   -1.2000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    3.9000    0.7500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    4.9394    0.1503    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
  1  2  1  0
  2  3  1  0
  3  4  1  0
  3  5  1  0
  5  6  1  0
M  END'''

molFromSDF = Chem.MolFromMolBlock(molBlock)
Draw.MolToImage(molFromSDF)

```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/329816/a7527acf-7a0e-5e4c-e99c-55099cc4e037.png)

次にAddHsで水素を追加。

```
molFromSDFH = Chem.AddHs(molFromSDF)
Draw.MolToImage(molFromSDFH)
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/329816/46ed6543-8690-938e-bddc-ee9437bf10e0.png)

明らかに失敗。

### 正しい方法
MOLオブジェクトをいったんSMILES化し、SMILESからMOLオブジェクトを再作成する。

```
smiles = Chem.MolToSmiles(molFromSDF)
molFromSDFnorm = Chem.MolFromSmiles(smiles)
```

次にAddHsで水素追加

```
molFromSDFnormH = Chem.AddHs(molFromSDFnorm)
Draw.MolToImage(molFromSDFnormH)
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/329816/a4c28a6a-d458-6529-8fc0-5aa0f22126eb.png)


おおう、正しく表示された。うまくいったようだ。

# 追記(重要) 2022/06/19
どうやら、AddHsを行う時に全ての水素の座標が(0,0)の位置に追加されるため、表示が崩れるらしい。addCoordsオプションをTrueに指定することで、水素の座標がいい感じで追加され表示が崩れないようである。

```例
Chem.AddHs(ligand_mol, addCoords=True)
```
[WIP]Beatsメモ書き

# Beatsとは

BeatsはElastic Stackを構成するカスタム可能なdata shippersである。Beatsには以下の8種類がある。

1. Audit data : Auditbeat
2. Log files : Filebeat
3. Cloud data : Functionbeat
4. Availability : Heartbeat
5. Systemd journals : Journalbeat
6. Metrics : Metricbeat
7. Network traffic : Packetbeat
8. Windows event logs : Winlogbeat

これらのBeatsを以下のような構成で用いる。

![](https://www.elastic.co/guide/en/beats/libbeat/current/images/beats-platform.png)
図出典：https://www.elastic.co/guide/en/beats/libbeat/current/beats-reference.html

# Filebeat

ログデータをいろんな人に配信できる軽量なbeat。

![](https://www.elastic.co/guide/en/beats/filebeat/6.7/images/filebeat.png)
図出典：https://www.elastic.co/guide/en/beats/filebeat/6.7/filebeat-overview.html

Filebeatは以下の2つで構成される。

- harvester
    - 責務：1つのファイルを読み込む。
    - 処理：1つのharvesterは1つのファイルに対して生成され、ファイルを開閉し、1行ずつ読み込む。
- input
    - 責務：harvesterを管理し、読込対象のファイルを確認する。

この2つの構成を簡単に実装できるのが、moduleである。

- module
    - 責務：標準的ログフォーマットの収集、パース及び可視化を実現する。
    - 備考：Nginxログ用モジュール等の典型的なモジュールは内蔵されている。
微分同相写像等の定義

## この記事は
多様体に関する用語の定義を書籍(松本, 1988)[^1]から引用しています。忘れたときに見る用。
随時追記します。

##定義

###C<sup>r</sup> 級写像
>$U, V$をそれぞれ$R^{m}, R^{n}$の開集合とする.
写像$h:U \rightarrow V$が$C^{r}$級写像($C^r$ map)であるとは, $h$の座標表示$h=(h_1, h_2, ..., h_n)$に現れる関数$h_1, h_2, ..., h_n $がすべて$U$上の$C^{r}$級関数になることである.



###微分同相写像
>写像$f:U \rightarrow V$が次の条件(1)(2)をみたすとき、$f$を**$C^{r}$級微分同相写像**($C^r$ diffeomorphism)という.
(1) $f:U \rightarrow V$は全単射である.
(2) $f:U \rightarrow V$も$f^{-1}:V \rightarrow U$もともに$C^r$級写像である.

<font color="LightSteelBlue"></font>

###微分同相
>$M, N$を$C^{r}$級多様体とする. $f:M \rightarrow N$が$C^{s}$級微分同相写像であるとは, 
(1) $f:M \rightarrow N$は全単射(1対1かつ'上'への写像)であり, 
(2) $f:M \rightarrow N$と$f^{-1}:N \rightarrow M$は, ともに$C^s$級写像である.

また、$MとN$の間に$C^{s}$級微分同相写像が存在するとき, $M$と$N$は互いに**$C^{s}$級微分同相**($C^{s}$ diffeomorphic)であるという



###全単射


[^1]: 松本 幸夫, 多様体の基礎 (基礎数学5), 1988, 東京大学出版会.
Numpy > loadtxt() > ファイル読取り処理にて一行目をスキップしたい > skiprows=1

```txt:動作環境
Ubuntu 16.04.3 LTS desktop amd64
tmux 2.1-3build1
Python 2.7.12
Python 3.5.2
Jupyter Notebook v5.2.1-0d9838c
```

Jupyter Notebookにてcsvファイルの可視化をしていた。

### ファイル形式 (input.csv)

- 一行目
    - 項目名の文字列がカンマ区切りで記載
- 二行目以降
データがカンマ区切りで記載

loadtxt()をそのまま使うと、一行目で失敗する

### Error例

`ValueError: could not convert string to float: b'yyyymmdd'`


### 参考

skiprows=1を使う

- https://cmdlinetips.com/2018/01/how-to-read-a-numerical-data-file-in-python-with-numpy/

> data = np.loadtxt(filename, delimiter=",", skiprows=1)


### 実装元コード

- [matplotlib > csvファイルを読み込んで折れ線グラフにする / 散布図にする](https://qiita.com/7of9/items/864a98294448f4c4bdc0)

### 実装

```py
%matplotlib inline

import numpy as np
import matplotlib.pyplot as plt

#data = np.loadtxt('input.csv', delimiter=',')
data = np.loadtxt('input.csv', delimiter=',', skiprows=1)
input1 = data[:,2]
output = data[:,3]

fig = plt.figure()
ax = fig.add_subplot(1,1,1)

ax.plot(input1, output, color='black', linestyle='solid')

ax.set_title('First line plot')
ax.set_xlabel('x')
ax.set_ylabel('y')
ax.grid(True)
#fig.show()

```

### 結果

結果として、2列目と3列目のデータの散布図が得られる。

### 検索用キーワード

- 行飛ばし
- Skip
- 1行目
- 項目行
- タイトル行
[JavaScript]remove();とempty();

# remove();とempty();について
今回はremove();とempty();について説明していきたいと思います。
どちらも取得した要素を削除するメソッドですがそれぞれ役割が違うので解説していきます。

まずは下記のようなhtmlを定義しておきます。

```削除.html
<div class="contents">
  <div class="content_a">
    <div class="content_b">
    </div>
  </div>
</div>

<a class="delete">削除</a>
```


## remove();
まずremove();ですがこれは指定した要素（子孫要素を含む）を削除します.

```remove.js
$(function(){
  $('.delete').on('click', function(){
    $('content_a').remove();
  });
});
```

まず$('.delete')つまり、class="delete"である「削除」をクリックするとイベントが発火します。
クリックをするとclass="content_a"に対してremoveしているので、content_aと　　content_bが削除されます。

## empty();
empty();は指定した要素の子孫要素を削除します。
指定した要素自体は削除されないのが特徴です。

```remove.js
$(function(){
  $('.delete').on('click', function(){
    $('content_a').empty();
  });
});
```
これでcontent_aの子要素であるcontent_bのみが削除されます。

### どのタイミングで使い分けるか？
どちらも削除するならremove();だけ使えば良いのでは、と思うかもしれませんが、例えば下記のようなコードがあります。

```削除.html
<div class="main_contents">
  <div class="content_a">
    <div class="content_b">
    </div>
  </div>
</div>

<div class="sub_contents">
  <div class="content_a">
    <div class="content_b">
    </div>
  </div>
</div>


<a class="delete">削除</a>
```
この時に削除をクリックした時sub_contentsのclass="content_a"以下を削除したい場合

```remove.js
$(function(){
  $('.delete').on('click', function(){
    $('content_a').remove();
  });
});
```

このように記述してしまうと同じクラス名であるclass="main_contents"以下のclass="content_a"も削除されてしまいます。
こういった場合に

```remove.js
$(function(){
  $('.delete').on('click', function(){
    $('sub_contents').empty();
  });
});
```

このように記述すればclass="main_contents"以下を削除することなく、class="sub_contents"以下の要素だけを削除することができます。
ROSでNode.jsを使う

やっと、rosnodejsの環境が整ったのでその時のメモです。
環境は以下の通り。

- Ubuntu18.04
- ROS Melodic


## 準備
まずはいつもどおり、パッケージを作ります。
パッケージ名は好きに変更してください。今回はサンプルなのでstd_msgsを使います。

```
$ cd ~/catkin_ws/src
$ catkin_create_pkg rosnodejs_sample std_msgs
```

次にパッケージに移動しrosnodejsをインストール
```
$ cd ~/catkin_ws/src/rosnodejs_sample/
$ npm init
$ npm install rosnodejs
```

## サンプルコード
サンプルはtalkerとlistenerを作ります。以下のファイルをrosnodejs_sample/scripts/に置きます。

```talker.js
#!/usr/bin/env node
'use strict';

const rosnodejs = require('rosnodejs');
const std_msgs = rosnodejs.require('std_msgs').msg;

function talker() {
  rosnodejs.initNode('/talker_node')
    .then((rosNode) => {
      let pub = rosNode.advertise('/chatter', std_msgs.String);
      let count = 0;
      const msg = new std_msgs.String();
      setInterval(() => {
        msg.data = 'hello world ' + count;
        pub.publish(msg);
        rosnodejs.log.info('I said: [' + msg.data + ']');
        ++count;
      }, 100);
    });
}

if (require.main === module) {
  talker();
}
```

```listener.js
#!/usr/bin/env node
'use strict';

const rosnodejs = require('rosnodejs');
const std_msgs = rosnodejs.require('std_msgs').msg;

function listener() {
  rosnodejs.initNode('/listener_node')
    .then((rosNode) => {
      let sub = rosNode.subscribe('/chatter', std_msgs.String,
        (data) => {
          rosnodejs.log.info('I heard: [' + data.data + ']');
        }
      );
    });
}

if (require.main === module) {
  listener();
}
```

その後、package.jsonに以下のように書きます。

```package.json
{
  "name": "rosnodejs_sample",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "rosnodejs": "^3.0.0"
  },
  "scripts": {
    "talker": "node scripts/talker.js",
    "listener": "node scripts/listener.js"
  },
  "author": "",
  "license": "ISC"
}

```

## ビルドと実行
上記までできたらビルドします。rosrunで起動するためにscriptに実行権限をつけておきましょう。

```
cd ~/catkin_ws/src/rosnodejs_sample/scripts/
chmod +x *.js
```
ビルドはいつもどおりcatkin_makeで行います。

```
cd ~/catkin_ws/ && catkin_make
```

実行方法も特に変わりはありません。
端末を3つ開いて、それぞれで以下を実行します。

```
#terminal A
$ roscore

#terminal B
$ rosrun rosnodejs_sample talker.js

#terminal C
$ rosrun rosnodejs_sample listener.js 
```

##　参考
- https://github.com/RethinkRobotics-opensource/rosnodejs
- https://github.com/RethinkRobotics-opensource/rosnodejs_examples
Kaggle Kernels環境で出力した結果ファイルが手動で submit できない時の解決法

当たり前のこと過ぎるのかインターネッツに情報が見当たらなかったので、書いておきます。
#Solution!
/kaggle/workingの下に 結果ファイル (submission.csvとか) は出力して下さい。
/kaggle の下とかだと、Outputがあると、Kaggle側に認識されません。
　
自分は間抜けなので、/kaggleにカレントディレクトリを変えていたために、この問題にずっとはまって、結局、無理やり Kaggle cli を Kernel内から叩けるようにして、それ経由で (kaggleコマンドの実行を notebooke に書いておいて) submit するとかアレなことをしてしまいました。
　
Kaggle cli を使うためには、おそらく API KEYを含む kaggle.json を Kernels 内にアップロードすることが必須で（環境変数で渡す方法はうまくいかなかった。し、そっちの方がnotebook内に残ってしまうので危ない）、セキュリティ的に大変よろしくない感じなので、真似はしない方がいいと思います。
♯ Kernelsって 閲覧権限を public に設定して他の人とノウハウを共有する的な側面もあるのでなおさら
　
なんか、Kernels環境で動かすためのバッドノウハウ的な知識も得られましたが、真似する人が出てもアレなので、書きません。
　
以上！
　
# おまけ
最終的に手動submitできた自分のKernels
https://www.kaggle.com/ryogrid/titanic-self-submit?scriptVersionId=12589184
　
コードは下の記事でリンクされていた notebook のものを使わせていただきました。ありがとうございます！
[Kaggleでタイタニックの生存者を予測をしてSubmitしてみた](https://qiita.com/teru855/items/02bd885179bd8e39ba43)

### 補足
　2019年4月冒頭時点では、上記の私が参考にした記事が書かれた当時と Kernels 環境における、作業ディレクトリや入力データの配置が違うようなのでご注意。少なくともinputディレクトリは最初のカレントディレクトリ (/kaggle/working) の下ではなく、/kaggle/input にあります。
　関連して、データセットを追加でアップロードしたりすると、inputディレクトリ内の各種データファイルは、データセット名のディレクトリに分けて配置される（最初からあったデータは自分の所属するデータセットに対応する名前のフォルダが作られてそこに移る）ようなので、この点もご注意。最初から複数のデータセットが与えられているKernelsの場合は、最初からディレクトリは分かれている、と思います。

Kernels環境の仕様？やらは以下参照。ただ、やはりコンペに参加した場合にファイル出力先には言及がないですね。
https://www.kaggle.com/docs/kernels
　
# ひとりごと
ちゃんとドキュメント読んでれば、このことって書いてあるのかな。
working から出るなボケ、でもいいんだけど。
Pythonでテキストファイルを解凍→保存で躓いた

#Windows上で、UTF-8のテキストファイルをPythonで解凍→保存
テキストファイル処理の関係で、
解凍→UTF8のままテキストファイルとして保存　という処理が必要になった。

そのとき、結構はまったので備忘録としてメモ。
なお、Windowsの文字コードにやられた感じ。

- importするモジュール
    - gzip
    - codecs

#躓きポイント
gzip.open(filename,mode="rb")と指定、バイナリ形式で読込む。
※デフォルト設定が"rb"なので、gzip.open(filename)だけでもOK
gzip.open(filename,"rt")とテキスト形式で読込むと、エラーが発生し変換できない。


```python:sample.py
import gzip
import codecs

filename = "utf8.gz"
with gzip.open(filename,mode="rb") as f: ###元ファイルがutf-8なので、バイナリで解凍
    newname = filename.replace(".gz",".txt") ###解凍後のファイル名を作成
    reader = codecs.getreader("utf-8") ###codecsでutf-8で読込するオブジェクトを作成
    contents = reader(f) ### バイナリで開いたファイルオブジェクトをcodecsで読込 StreamReaderオブジェクト
    with open(newname,mode="w",encoding="utf-8",newline="\n") as newf: ### 書込ファイルを作成するため、ファイルオブジェクトのnewfを作成
        newf.write(contents.read()) ### contentsを一度に読み、書き込む
```
jsイベント間引き(throttle+debounce)

scrollやresizeなど、大量のイベントが発生する処理はフレームレート低下によるアニメーションのカクつきや、CPUに不要な負荷をかけてしまうことがあるため、適宜処理を間引きをすると良いです。

throttle … 実行してから一定時間内に発生した処理を無視
debounce … 連続したイベントの最後だけ実行

throttle は一定時間の処理が無視されるため、スクロール端に到達時のタイミングによっては必要な処理が実行されないことがあるので、debounceと組み合わせてみました。

また、まれに throttle と debounce の時間差が1フレーム以下の場合に同時に発火してしまうことがあったので、重複実行しないよう debounceDelay で調整しています。
※1フレーム(1/60fps)＝ 1/60秒 = 約16ms

サンプルではインターバル時間 256ms（16フレーム）をデフォルト値にしていますが、もっと細かい精度が必要な場合は、設定時間を短くしてください。※16ms(1フレーム)以下に設定すると間引きしないのとほぼ同義（無意味）となります

## sample

### native

```javascript
var throttle = (function(callback, interval = 256) {
  var time = Date.now(),
      lag,
      debounceTimer,
      debounceDelay = 16;

  return function(callback) {
    lag = time + interval - Date.now();
    if (lag < 0) {
      //console.log( time + "：throttle：" + lag);
      callback();
      time = Date.now();
    } else {
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(function() {
        //console.log( time + "：debounce：" + (interval - lag + debounceDelay));
        callback();
      }, (interval - lag + debounceDelay));
    }
  }
})();

// 間引きしたい処理
var myCallback = function() {
  console.log("myCallback");
};

// イベント発火
window.addEventListener('scroll', function() {
  throttle(myCallback);
  //throttle(myCallback,64); //第二引数 インターバル時間
});
```

### jquery

```javascript

(function($) {

  $.fn.throttle = function(callback, options) {
    options = $.extend({
      interval: 256
    }, options);
    var time = Date.now(),
        lag,
        debounceTimer,
        debounceDelay = 16;

    return function() {
      lag = time + options.interval - Date.now();
      if (lag < 0) {
        //console.log( time + "：throttle：" + lag);
        callback();
        time = Date.now();
      } else {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(function() {
          //console.log( time + "：debounce：" + (options.interval - lag + debounceDelay));
          callback();
        }, (options.interval - lag + debounceDelay));
      }
    }
  };

  var myCallback = function() {
    console.log("myCallback");
  };

  $(window).on('scroll', $.fn.throttle(myCallback));

  //$(window).on('scroll', $.fn.throttle(myCallback,{
  //  interval: 64  //オプション
  //}));

})(jQuery);
```

## 参考

* [JavaScriptでの多発するイベントの間引き処理](https://blog.tsumikiinc.com/article/20141125_javascript-event-throttle.html)
* [カッコいいけど遅すぎる！ JSのスクロールイベントを改善するベストな方法](https://www.webprofessional.jp/throttle-scroll-events/)

以上、ありがとうございました。
iTextSharpのB4はISO B4。日本はJIS B4。プリンタが認識しない！ 

リコー社のPDF directプリント対応の複合機で、PageSize.B4だと 不定形 エラーが出たので調べていたら、
__生成したPDFの用紙サイズが日本のB4（JIS B4）の定義と数ミリ違っていました。__
原因は　__ISO B4　と　JIS B4　とではサイズが異なる__　というのが原因でした。
日本で利用するにはJISのBサイズを定義して利用します。
iTextSharpは独自の単位で float型で持っているので、誤差の割合分だけ修正したところ、用紙の自動選択が
正常に機能しました。

ということで、以下が修正後の値です。

float B4_width = 1031.74f;
float B4_height = 728.4f;
float B5_width = 728.4f;
float B5_height = 517.92f;

以下は用紙の縦・横を考慮して、PageSize.B4.Rotate()相当にしたものを用意してみたものです。

case "B4":
case "B4縦":
return new iTextSharp.text.Rectangle(B4_height, B4_width, 90);
case "B4横":
return new iTextSharp.text.Rectangle(B4_width, B4_height, 0);

PDF表示のソフトウェアからの印刷ではエラーは出ないし、微妙に引き延ばされた程度なので気づきにくく、
等倍ならなおさら判明しません。

B4は
>「日本で江戸時代に使われていた「美濃判」の寸法がもととなってできた日本独自の規格。こちらは面積が1.5㎡の長方形をB0」[リンク](https://sirabee.com/2015/03/28/23543/)

のようにJISが本家だと勝手に思っていました。
なのでISO と JIS では同一だと勝手に思っていました。ちなみに__何故か A4はISOとJISは同一でした・・・__
iTextSharpは外国製なので、B4にしてもISOを標準としてISO B4 の実装は当然です。


整理すると、
###iTextSharpは、ISO 216 で画定されている国際標準(ISO-Bシリーズ) ISO B4の大きさは 250mm×353mm
###日本は JIS P0138 縦横比は 1:√2 JIS B4の大きさは 257mm×364mm

印刷はリコー MPC4503 で試しました。