OmniAICreator/Qiita-1.07M huggingface dataset:
google スプレッドシート => BigQuery => pandas

__「google スプレッドシート」__をソースに指定した BigQuery のテーブルを__「read_gbq」__する方法を説明します。

## 権限の設定
### スプレッドシートへの参照権限追加
使用するサービスアカウントに対象のスプレッドシートへの参照権限を付与します。
なお、ここではサービスアカウントを使用することを前提としています。
### APIの有効化
GCP コンソールから、__「APIとサービス」__を選択して、__「Google Drive API」__と __「Google Sheets API」__ を有効にする。
### サービスアカウントにスコープを設定する
GCP コンソールから、__「セキュリティ」__を選択して、つぎの2つをカンマ区切りで設定する。

- "https://www.googleapis.com/auth/spreadsheets"
- "https://www.googleapis.com/auth/drive"

上2つの情報はつぎのURLから得たものであり、助かりました。
https://blog.nijohando.jp/post/building-private-timestamp-system-1/
## pandas と pandas-gbq のバージョンを確認する
read_gbq の __credentials__ というパラメータを使うのですが、これが次のバージョン以降から追加されています。
New in version 0.8.0 of pandas-gbq.
New in version 0.24.0.<= pandas

これ以前のバージョンの場合は、更新します。

    pip install --upgrade pandas-gbq
    pip install --upgrade pandas

## コードを書く
注意点はつぎの３つの Scope を追加する必要があることです。

- "https://www.googleapis.com/auth/drive.readonly"
- "https://www.googleapis.com/auth/spreadsheets.readonly"
- "https://www.googleapis.com/auth/cloud-platform

この、Scope を追加するために credentials があるバージョンが必要でした。

    import pandas as pd
    from google.oauth2.service_account import Credentials

    query = """
    SELECT * FROM `dogs-111.pretty.beagle`
    """

    cred = Credentials.from_service_account_file("./auth/account.json")
    cred = cred.with_scopes(
        ["https://www.googleapis.com/auth/drive.readonly", 
         "https://www.googleapis.com/auth/spreadsheets.readonly",
         "https://www.googleapis.com/auth/cloud-platform"])
    df_result = pd.read_gbq(query, project_id="dogs-111", dialect="standard", credentials=cred)

## 最後に
今回紹介した方法とは別の方法もあるかもしれません。私がかなり苦戦したので、知識の共有として一事例を紹介しました。
CSS animation で遊び倒す　-SVG Line - 

CSS animation day18 となりました。
本日は、SVG を使って、Line でアニメーションを設定します。


#1. 完成版
![ダウンロード (44).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/364ba046-a1f6-9f13-a60b-1d518d1d33cd.gif)


#2. なぜか？
モニター心電図って病棟管理ではめちゃくちゃ大事ですが、なかなか難しいです。特に看護師さんたちが教科書で勉強するのに、適した教材は少なく、現場で苦労している姿をよく目にします。教科書のような静止画を、座学で見て勉強しても、臨場感がないため実戦に活かしづらく、苦手意識を持つ人々は多いと一循環器内科医として、感じております。
そこで、近い将来、SVG animation を使って、モニター心電図のweb siteを作りますが、この技術をふんだんに使えればと思いました。

#3. 参考文献
[CSS trick](https://css-tricks.com/almanac/properties/s/stroke-dasharray/)
[SVG line drawing animation | SVG Stroke Animation With Html and CSS](https://www.youtube.com/watch?v=k-SI1xHN0x8)
 
#4. 分解してみる

❶. 

まず、Figma で適当に、ラインを書きます。

<img width="1039" alt="スクリーンショット 2019-02-08 13.01.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/299f657d-339b-9987-fccb-3bbf99a6ddba.png">

では、コードを書いていきましょう。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
    
  </head>
  <body>
    <svg
      width="288"
      height="175"
      viewBox="0 0 288 175"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M1 143.5C28.6 143.1 42.5 143.333 46 143.5C52.3333 128.834 70.2 108.3 91 143.5H109L113.5 174.5L133.5 1L159.5 174.5L167 143.5H201C208.167 134.5 227.5 121.9 247.5 143.5H287.5"
        stroke="black"
      />
    </svg>
  </body>
</html>
```

```styles.css
body {
  margin: 0;
  padding: 0;
}

svg {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

<img width="1008" alt="スクリーンショット 2019-02-08 15.13.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/9160448b-ee19-a5f0-099c-a901cfec3b9d.png">


❷. 
では、どうしたら、Line のアニメーションができるでしょうか? 

答えは、stroke-dasharray と stroke-dashoffset を使います。
順に説明します。
<br/>
. [stroke-dasharray](https://css-tricks.com/almanac/properties/s/stroke-dasharray/)
破線の間隔をつけるプロパティです。
値が大きけれ大きいほど、間隔が広くなります。　

・ [stroke-dashoffset](https://css-tricks.com/almanac/properties/s/stroke-dashoffset/) 
SVG pathが始まる場所を指定します。
<br/>
この2つをどう使うかというと、

__1. 破線の間隔が、SVG の線の長さと同じ値を探し、stroke-dasharrayに設定して、全てを隠します。__
__2. SVG のpathが始まる場所を、全てが隠れる位置になるよう設定します。つまり、stroke_dasharray と、stroke-dashoffset に同じ値を設定します。__
__3. stroke_dashoffset をアニメーションで動かします。__


実際のコードで見て見ましょう。


```styles.scss
svg {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .line {
    stroke-width: 4px;
    stroke-dasharray: 700px;
    stroke-dashoffset: 700px;
    animation: draw 2s linear infinite;
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0px;
  }
}
```

![ダウンロード (44).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/d4fb3054-23c5-b822-e13b-0f235ecf9b51.gif)


こんな簡単なコードで、心電図波形が出来上がりました。
本日は以上です、また明日〜
AWS CDKでIAMのインラインポリシーとサービスロールを作る

AppSyncのDataSourceを作るのにサービスロールが必要だったので、覚書。

```
$ cdk --version
0.23.0 (build 1d705e7)
```

## IAMパッケージ

```
$ @aws-cdk/aws-iam@0.23.0
```

## ポリシー

だいたいこんな感じになる。
ステートメントをメソッドチェーンでビルダー的に書けるので、この書き方に慣れさえすれば普通に書くより楽かもしれない。

```
import cdk = require('@aws-cdk/cdk');
import IAM = require('@aws-cdk/aws-iam')
const app = new cdk.App();
const stack = new cdk.Stack(app, 'TestStack');

const statement = new IAM.PolicyStatement()
        .allow()
        .addActions(
          "dynamodb:GetItem",
          "dynamodb:Query",
        )
        .addResources(
          "*"
        )

const servicePolicy = new IAM.Policy(
  stack,
  'AppSyncInlinePolicy', {
    policyName: 'AppSyncInlinePolicy',
    statements: [statement]
  }
)
```

## ロール

さっきのポリシーインスタンスをそのまま放り込んでやればOK。

```
const serviceRole = new IAM.Role(stack, 'AppSyncDynamoDBRole', {
  assumedBy: new IAM.ServicePrincipal('appsync.amazonaws.com'),
  path: '/service-role/'
})
serviceRole.attachInlinePolicy(servicePolicy)
```

## 出力

```
Resources:
  AppSyncInlinePolicyED30ADB5:
    Type: AWS::IAM::Policy
    Properties:
      PolicyDocument:
        Statement:
          - Action:
              - dynamodb:GetItem
              - dynamodb:Query
            Effect: Allow
            Resource: "*"
        Version: "2012-10-17"
      PolicyName: AppSyncInlinePolicy
      Roles:
        - Ref: AppSyncDynamoDBRoleBDD57878
    Metadata:
      aws:cdk:path: TestStack/AppSyncInlinePolicy/Resource
  AppSyncDynamoDBRoleBDD57878:
    Type: AWS::IAM::Role
    Properties:
      AssumeRolePolicyDocument:
        Statement:
          - Action: sts:AssumeRole
            Effect: Allow
            Principal:
              Service: appsync.amazonaws.com
        Version: "2012-10-17"
      Path: /service-role/
    Metadata:
      aws:cdk:path: TestStack/AppSyncDynamoDBRole/Resource
  CDKMetadata:
    Type: AWS::CDK::Metadata
    Properties:
      Modules: aws-cdk=0.23.0,@aws-cdk/aws-iam=0.23.0,@aws-cdk/cdk=0.23.0,@aws-cdk/cx-api=0.23.0,jsii-runtime=node.js/v10.5.0
```

## 感想

とにかくCloudFormationのプロパティをJSのクラスメソッドで書くのが違和感すごい。
ただしIDEの入力補完や型参照を活かしながら書けば、普通にYAML書くよりコード量が減って楽です。

なお破壊的変更でぶっ壊れることがあるみたいですが、最悪`cdk synth`でCloudFormationにアウトプットしてCDK使うのやめればいいと思うと気楽ではある。
初めてのnpmパッケージを公開して良かったことを書く

今回初めてのnpmパッケージ公開をしたので良かったことを書こうと思います。

## 公開したパッケージについて
[vue-pug](https://github.com/ToshioAkaneya/vue-pug)というパッケージを公開しました。
これは、.vueファイルの中の\<template\>を\<template lang="pug"\>に変換して、中のHTMLを[pug](https://kumaweb-d.com/web/basics-of-pug/)に変換するというCLIツールです。

使い方についてはこちらの記事をご覧下さい。
[VueのtemplateをHTMLからpugに自動で書き換える方法](https://qiita.com/ToshioAkaneya/items/48c261770992c2f462dd)
## npmパッケージを公開して良かったこと
### ポートフォリオになる
エンジニアは多くの場合ソースコードを勝手に公開したり、他人に見せてはいけない決まりになっています。

セキュリティや、秘密保持の観点から仕方のないことですが、エンジニアにとっては自分の実力を示すことが難しくなっているの事実です。

一方で、npmパッケージならば自由に公開することが出来ます。もしそのパッケージが世間から評価されるものであれば、エンジニアにとって良いポートフォリオになることは間違いありません。

僕は学生なので、インターンや就職の選考の際にはしっかり履歴書に書こうと思います^^
### npmパッケージの勉強になる
普段は意識する必要のない、package.jsonやnodne_modulesに真剣に向き合う必要があります。

もともとある程度は理解している認識でしたが、パッケージを公開することでnpmのシステムをより深く勉強することが出来ました。

また、npmパッケージを公開するとnpmの機能を一通り使うことになるので、npmを手早く理解するのにもっとも良い方法だとも感じました。
### その他の良かったこと
普段からお世話になっているnpmパッケージの作者の一員になれるというのはテンションが上がるものでした。

また、npmパッケージにして公開しておくと、どの環境からでも利用できるので世間的にあまり需要のないものでもnpmに公開しておくと便利かもしれません。
## 悪かったこと
ありません。大変勉強になりました。

## まとめ
皆さんもぜひnpmパッケージを公開してみて下さい！きっと色々な学びがあると思います。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
osmbonuspack を使ってAndroid の OpenStreetMap 地図の  KML の　スタイルを変更する

[ osmbonuspack を使ってAndroid の OpenStreetMap 地図に KML をインポートする](https://qiita.com/ohwada/items/90aec2d0a96d42676a70)
の続きです

osmbonuspack　では、XML　ファイルにより、使用されるスタイルが異なります

### スタイルを持つ XML　ファイル

XML　ファイルのスタイルが使用される
![xml_style.png](https://qiita-image-store.s3.amazonaws.com/0/64075/92bfe121-fcc9-5406-ee95-51a821205b68.png)

###　スタイルを持たない XML　ファイル

osmbonuspack　のデファルトの XML スタイルが使用される
![xml_default_icon.png](https://qiita-image-store.s3.amazonaws.com/0/64075/0351571b-a93c-d373-6c45-b521e131bad9.png)

###　osmbonuspack の KML スタイルを変更する

```
Drawable newMarker = getResources().getDrawable( R.drawable.new_marker );

Bitmap newIcon  = ( (BitmapDrawable)newMarker ).getBitmap();

Style newStyle = new Style( newIcon, 0x901010AA, 3.0, 0x20AA1010 );

        FolderOverlay kmlOverlay = (FolderOverlay)kmlDocument.mKmlRoot.buildOverlay(mMapView, newStyle, null, kmlDocument);
```

![xml_custom_icon.png](https://qiita-image-store.s3.amazonaws.com/0/64075/d483cf18-3cc5-67e3-d5a2-202c251dd19a.png)

github にソースを公開した

https://github.com/ohwada/Android_Samples/tree/master/Osmbonuspack2
【忙しい人向け】新しいユーザーに、postgresのテーブルのCRUD権限を一括で与える手法。

# 序
PostgreSQLでは、作業中のデータベースのテーブル名一覧を、
> SELECT tablename  FROM pg_tables;

で取得できる。

ということは、文字列メソッド組み合わせると、テーブルのCRUD権限を与えるSQLを作ることができる。
こりゃ便利！　

....って、[postgresのテーブルの所有者を一括で変更する](https://qiita.com/YusukeHigaki/items/ea81633bd1ccac078c7c)のパクリなんだけど、忙しい人はそのままコピペしたいだろうから、自分の備忘録を兼ねて貼っておく。

# 新しいユーザーに、postgresのテーブルのCRUD権限を一括で与える

以下、新ユーザー名は「shinjin」とする。
新人にSELECT , INSERT , UPDATE , DELETE権限全てを与えたい場合には、

```make_grant_shinjin.sql
SELECT
  'GRANT SELECT , INSERT , UPDATE , DELETE ON ' || tablename ||  ' TO shinjin;'
FROM pg_tables;
```
とする。

後は、
> psql -U 現ユーザー名 -h 接続先 -p ポート -d データベース名 -f "./make_grant_shinjin.sql" -A -F, > ./grant_shinjin.sql

などとして実行して生成されたgrant_shinjin.sqlを（適宜編集の上）psqlに流し込んでいく。

あとは、スキーマのUSAGE権限を付与しよう。

>ユーザは、デフォルトでは所有していないスキーマのオブジェクトをアクセスすることはできません。 アクセスするためには、そのスキーマの所有者からスキーマのUSAGE権限を付与してもらわなければなりません。
https://www.postgresql.jp/document/8.4/html/ddl-schemas.html#DDL-SCHEMAS-PRIV

```
-- 例
GRANT USAGE ON SCHEMA public TO shinjin;
```

おしまい。
Firebase学習にオススメのYoutube動画(英語)

##紹介するのは、こちらの動画
https://youtu.be/aN1LnNq4z54

解説は主にFirebaseを中心としていて、
それ以外の部分は深く触れていません。

###前提
- JavaScriptによるDOM操作
- ターミナルの操作(特にnpm)

はある程度できる状態だとスムーズに実装できるかと思います。

##実装する機能一覧
- メールアドレスとパスワードによるユーザ登録
- ユーザのログイン・ログアウト
- ユーザへの管理者権限付与
- ユーザのログイン状況と権限の種別による画面表示の切り替え
- Firestoreへのデータの登録
- Firestoreのデータの表示

##何が学べるのか
- メール・パスワードによる認証
- Cloud Functions
- Firestore
- セキュリティルール

…etc

##最後に
解説動画では以下のコードが書かれています。

```html:index.html
<script>
・
・
・
//update firestore settings
db.settings({ timestampsInSnapshots: true });
</script>
```

自分の環境ではコンソールに下記メッセージが表示されました。

```
@firebase/firestore: Firestore (5.8.2): 
  The timestampsInSnapshots setting now defaults to true and you no
  longer need to explicitly set it. In a future release, the setting
  will be removed entirely and so it is recommended that you remove it
  from your firestore.settings() call now.
```

timestampsInSnapshotsは既にtrueになっているので
このコードは消していいよとのことなので、消しました。

##最後に
最後まで読んでいただきありがとうございました。
Firebaseに関するオススメの動画がありましたら、どしどしコメントお願いします。
AWS CDKでクラスを使わずにスタックを定義する

使うかどうかわからないけど、見つけたのでとりあえず覚書。

```
$ cdk --version
0.23.0 (build 1d705e7)
```

## よくやる書き方

```
import cdk = require('@aws-cdk/cdk');
import sqs = require('@aws-cdk/aws-sqs');
export class TestStack extends cdk.Stack {
  constructor(scope: cdk.App, id: string, props?: cdk.StackProps) {
    super(scope, id, props);
    new sqs.Queue(this, 'ProjdynamoQueue', {
      visibilityTimeoutSec: 300
    });
  }
}

const app = new cdk.App();
new TestStack(app, 'TestStack');
app.run();
```

これがこうなる。

```

Resources:
  ProjdynamoQueueF6B39BFE:
    Type: AWS::SQS::Queue
    Properties:
      VisibilityTimeout: 300
    Metadata:
      aws:cdk:path: TestStack/ProjdynamoQueue/Resource
  CDKMetadata:
    Type: AWS::CDK::Metadata
    Properties:
      Modules: aws-cdk=0.23.0,@aws-cdk/aws-iam=0.23.0,@aws-cdk/aws-kms=0.23.0,@aws-cdk/aws-s3-notifications=0.23.0,@aws-cdk/aws-sqs=0.23.0,@aws-cdk/cdk=0.23.0,@aws-cdk/cx-api=0.23.0,jsii-runtime=node.js/v10.5.0
```

## クラスを使わずに書く

注目すべきなのはSQSのリソースを定義している部分。

```
new sqs.Queue(this, 'ProjdynamoQueue', {
      visibilityTimeoutSec: 300
    });
```

thisを第一引数にしているが、これは`cdk.Stack`を渡している。

ということは`cdk.Stack`インスタンスを渡してやれば別にこの書き方をする必要はない。

```
import cdk = require('@aws-cdk/cdk');
import sqs = require('@aws-cdk/aws-sqs');
const app = new cdk.App();
const stack = new cdk.Stack(app, 'TestStack');
new sqs.Queue(stack, 'ProjdynamoQueue', {
  visibilityTimeoutSec: 300
});

app.run();
```

こちらのほうがパット見はわかりやすいかもしれない。
ネストしたスタックなどを作り出すと地獄が見えるけども。
Bigqueryデータセットのメタデータ確認とか

Bigquery のテーブルごとのサイズを調べる必要が出てメタデータを確認したい事があったのだが、
時間が UnixTime になっていて、JSTに直すの少し詰まってしまった。

同じ事をまたやりそうなのでメモしておく。


```sql:テーブル
SELECT
  project_id,
  dataset_id,
  table_id,
--  datetime_add(datetime(TIMESTAMP_MILLIS(creation_time)), interval 9 hour) AS creation_time_JST,
  FORMAT_TIMESTAMP("%F %T", TIMESTAMP_MILLIS(creation_time), "Asia/Tokyo") AS creation_time_UST, 
--  datetime_add(datetime(TIMESTAMP_MILLIS(last_modified_time)), interval 9 hour) AS last_modified_time_JST,
  FORMAT_TIMESTAMP("%F %T", TIMESTAMP_MILLIS(last_modified_time), "Asia/Tokyo") AS last_modified_time_JST, 
  row_count,
  size_bytes
FROM `データセット.__TABLES__`
;
```

### 参考
https://cloud.google.com/bigquery/docs/datasets?hl=ja#tables-meta-table
AWS CDKでスタックを複数作ったりYAML出力する覚書

```
$ cdk --version
0.23.0 (build 1d705e7)
```

AWS CDKでは、cdk.Stackクラスを継承することでスタックを定義できる。

```
import cdk = require('@aws-cdk/cdk');
import sqs = require('@aws-cdk/aws-sqs');

export class TestStack extends cdk.Stack {
  constructor(scope: cdk.App, id: string, props?: cdk.StackProps) {
    super(scope, id, props);
    new sqs.Queue(this, 'ProjdynamoQueue', {
      visibilityTimeoutSec: 300
    });
  }
}
```

以下のよう書くことで`cdk deploy`でデプロイできる。

```
#!/usr/bin/env node
import cdk = require('@aws-cdk/cdk');
import { TestStack } from '../lib/test-stack';

const app = new cdk.App();
new TestStack(app, 'TestStack');
app.run();
```

`cdk.Stack`クラスをインスタンス化すればスタックができるので、以下のようにすると同じスタックを複数作れる。

```
#!/usr/bin/env node
import cdk = require('@aws-cdk/cdk');
import { TestStack } from '../lib/test-stack';

const app = new cdk.App();
new TestStack(app, 'TestStack');
new TestStack(app, 'TestStack1');
new TestStack(app, 'TestStack2');
new TestStack(app, 'TestStack3');
app.run();
```

そしてconstructorの第二引数でスタック名を決めているので、`cdk deploy`や`cdk synth`にスタック名を渡してやれば任意のスタックのみ操作ということができる。

```
$ cdk synth TestStack2

Resources:
  ProjdynamoQueueF6B39BFE:
    Type: AWS::SQS::Queue
    Properties:
      VisibilityTimeout: 300
    Metadata:
      aws:cdk:path: TestStack2/ProjdynamoQueue/Resource
  CDKMetadata:
    Type: AWS::CDK::Metadata
    Properties:
      Modules: aws-cdk=0.23.0,@aws-cdk/aws-iam=0.23.0,@aws-cdk/aws-kms=0.23.0,@aws-cdk/aws-s3-notifications=0.23.0,@aws-cdk/aws-sqs=0.23.0,@aws-cdk/cdk=0.23.0,@aws-cdk/cx-api=0.23.0,jsii-runtime=node.js/v10.5.0
```

## 複数スタック設定時のsynth

`cdk synth`は複数スタック設定していると引数必須になる。
標準出力では１スタックしか出せないらしい。

```
$ cdk synth

Multiple stacks selected (TestStack, TestStack1, TestStack2), but output is directed to stdout. Either select one stack, or use --output to send templates to a directory.
```

スタック名の指定かoutputディレクトリの指定すればOK。

```
$ mkdir output
$ cdk synth --output ./output && tree output/
./output/TestStack.template.yaml
./output/TestStack1.template.yaml
./output/TestStack2.template.yaml
output/
├── TestStack.template.yaml
├── TestStack1.template.yaml
└── TestStack2.template.yaml
```
git rebase後のpushを間違った時の対処


#なぜgit rebaseをしたのか
github上のPR上でissueの解決を進めていました。
いざmasterにmergeできるかと思った際に、masterよりかなり遅れている作業branchであったことがわかったためrebaseを行ないました。

#rebaseの開始

```
$ git rebase master
```
これでrebaseを開始できます。
その後、conflictが発生したため、修正→`git rebase --continue/skip`ということを行なった。

```
$ git rebase --continue

// if nothing to change but still rebase is not finised,
// rebaseが終わらなかったらskipで加えて進めていきました。

$　git rebase --skip

// conflictが生じたらその都度修正していきます。
```

最終的にrebaseしているbranchの内容を作業branchにapplyすることになり以下のように行いました。

```
$ git add .
$ git commit -m "fix: something"
$ git push
```

しかし、
![commits.jpg](https://qiita-image-store.s3.amazonaws.com/0/272596/f46cd921-fce4-3694-dee2-c411ab745572.jpeg)

このようにcommitが膨れ上がってしまいました。ありゃありゃ。

#解決策

```
$ git reset --hard HEAD~4　 // rebase前のコミットへ変更しました。

$ vim src/...  // ファイルを編集するなどしてエラーを消します。

$ git add .  // 変更を加えてコンフリクトもなくなれば、コミットします。
$ git commit -m "fix: errors"
$ git push --force  // ここのpush --forceであるのを忘れないように。

// 必要であれば
$ git cherry-pick  // rebaseの後のコミットの変更を反映してもいいかと。
```

#反省
`git rebase --continue` をした時に`git push --force`をする必要がありました。
少ないコミットで綺麗なPRを心がけていきます。

#参考文献
[git push の取り消し方法](http://www-creators.com/archives/2020)
[チュートリアル3 コミットを書き換えよう！4. cherry-pick](https://backlog.com/ja/git-tutorial/stepup/stepup7_4.html)
cmake Cmakelists.txt 

CMakeの使い方（その１）
https://qiita.com/shohirose/items/45fb49c6b429e8b204ac


CMakeLists.txt から始めよう
https://qiita.com/nonbiri15/items/c77c046f0e10f8140cfe

CMakeの使い方〜覚書〜
https://qiita.com/tchofu/items/69dacfb93908525e5b0b

CMakeスクリプトを作成する際のガイドライン
https://qiita.com/shohirose/items/5b406f060cd5557814e9

make cmake を知る．使う
https://qiita.com/Beef1297/items/2c2765ae811fd7c0b2ab

Linuxに特定のバージョンのcmakeをインストール
https://qiita.com/pollenjp/items/391afc3e9f93006b83ba


cmakeでオプション付きの関数を定義する
https://qiita.com/termoshtt/items/8b5249e858198f017f0c

CMAKE_INSTALL_PREFIXの初期値を変更する
https://qiita.com/kenyabe/items/d25d26778f7280a15bab

cmakeでCMAKE_C_FLAGSに設定した値が無視される
https://qiita.com/tchofu/items/5645c6ee1b3dffc94ae0

たのしい組み込みCMake
https://qiita.com/tnishinaga/items/c01dfd5f43e446653cd1


#c++

C++初心者がMacでCMakeを利用してみる
https://qiita.com/kai_kou/items/df335eb7ee78229ee46f


GoogleTest + CMakeでC++の実践的なユニットテスト環境を構築する：その１
https://qiita.com/imasaaki/items/c56639c86627a8a950de

GoogleTest + CMakeでC++の実践的なユニットテスト環境を構築する：その２（カバレッジ表示）
https://qiita.com/imasaaki/items/0021d1ef14660184f396


#ruby

cmake error when installing rugged with ruby 2.3 image
https://qiita.com/cgtdnpck/items/7b049fbb2a4cf16cd76f

#参考資料
The Modern C++ Challenge
https://qiita.com/kaizen_nagoya/items/5e390e5a4afc8bb9cb1f

error.log, output.logをconsoleと比較できるように保存


#文書履歴
ver. 0.01 初稿 20190207 午後
ver. 0.02 追記 20190207 夕方
ver. 0.03 参考資料追記 20190210
### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

#### Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
AdobeXDについて教わったこと備忘録

やさしい後輩が色々教えてくれました。
個人的備忘録
Mac準拠？


#ショートカット

cmd+1:倍率を100%に
z:ズームモード ptionを押している間はズームアウトする
スペース+ドラッグ:アートボード全体を持ち、移動させることができる
cmd+n:新しいアートボードの作成
Cmd + クリック :ーソル状にある要素にひとっ飛び
p:自由線(パス）モード
cmd + shift + m:マスク
cmd + G:グループ化

#その他細かいこと
グループ化
オブジェクトの共通化ができる。一緒に移動させたりするのが容易に

アートボード
開いている画面のことを指す？


XDではオブジェクトはレイヤーで管理されている
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234908/9f4e8aea-1d5e-104a-bebd-a3ef56622d46.png)
これも正方形オブジェクトの中に文字列が入っているの一発ではテキストを選択できない。
cmd+クリックで直アクセスできる。

フォントに境界線が設定できる。
フォントの一部を別の色にすることができる。境界線の位置も変えることができる。

パス
自由線。ただのオブジェクトと違い互いに結合させることができる。

マスク
オブジェクトやパスと写真を結合させることができる。オブジェクトやパスがあるところだけ画像が切り抜かれるので
それっぽい形の写真を作ったりするときに便利。

コピーの手段
・Ctl + c Ctl + v
・opt + ドラッグ
・リピードグリッド
リピードグリッドは等間隔にコピーができる。
またXDではオブジェクトに画像を配置できる。リピードグリッドされたオブジェクトは一箇所に画像を貼り付ければ他のオブジェクトにも広がる
LDA in PythonをPython 3で使う方法（2019年2月8日現在）

# はじめに

この記事では、下記リンク先にあるLDA in Pythonを、Python 3で使う方法を説明します。
（conda 4.6.2で確認しています。Pythonのバージョンは3.6.7です。）

[http://chasen.org/~daiti-m/dist/lda-python/](http://chasen.org/~daiti-m/dist/lda-python/)


# makeする前の準備

上のWebページにあるtar.gzファイルをダウンロードしたら、

```shell-session
$ tar zxvf lda.py-0.1.tar.gz
```
として解凍します。そして、

```shell-session
$ cd lda.py-0.1
```
と、ディレクトリに下りていきます。

logging.pyというファイルがありますが、`logging`モジュールと名前がかぶっているので、

```shell-session
$ mv logging.py mylogging.py
```
と、適当なファイル名（ここではmylogging.py）へと変更します。
そして、lda.pyというファイルの中に現れる`logging`という文字列を、すべて`mylogging`へと置き換えます。
こうすれば、lda.pyの中ではmylogging.pyを見に行くようになります。

この後で、

```shell-session
$ make
```
として、ldac.pyxのコンパイルをおこないます。

# lda.pyの実行

lda.pyを実行するとき、

```shell-session
$ ./lda.py -h
```
とすると、

```shell-session
$ ./lda.py -h
Traceback (most recent call last):
  File "./lda.py", line 8, in <module>
    import ldac
ImportError: No module named ldac
```
というエラーが出るかもしれませんので、

```shell-session
$ python lda.py -h
```
とします。

あとはPython 2とPython 3の違いに由来するエラーがいくつか出るだけです。
それらをひとつずつ修正していきます。

# Python 3で使うためのコードの修正

まず、lda.pyでもfmatrix.pyでも、`xrange`が使われていますので、`range`に置き換えておきます。

そして、他のエラーについては、以下のように対処します。

```shell-session
$ python lda.py -h
  File "lda.py", line 40
    except getopt.GetoptError, err:
                             ^
SyntaxError: invalid syntax
```
これについては、lda.pyの所定の行に行って「`, err`」を削除します。
（コードの気持ちとしては「`except getopt.GetoptError as err:`」だと思いますが、
単に「`, err`」を削除して「`except getopt.GetoptError:`」と書き直すだけでも、ちゃんと動きます。）

```shell-session
$ python lda.py -h
Traceback (most recent call last):
  File "lda.py", line 12, in <module>
    import fmatrix
  File "/data10/masada/lda.py-0.1/fmatrix.py", line 55
    print data
             ^
SyntaxError: Missing parentheses in call to 'print'. Did you mean print(data)?
```
これについては、fmatrix.pyの所定の行に行って「`print(data)`」と丸カッコを追加します。

```shell-session
$ python lda.py -h
Traceback (most recent call last):
  File "lda.py", line 15, in <module>
    import cPickle as pickle
ModuleNotFoundError: No module named 'cPickle'
```
これについては、lda.pyの最初のほうにある「`import cPickle as pickle`」を、
「`import pickle`」と書き直せばいいだけです。

# 2019年2月14日の追記

同じ内容の記事が以下の場所にあります。
[https://gist.github.com/nzw0301/7b1047dde2528b47aaabc9a4010a1003](https://gist.github.com/nzw0301/7b1047dde2528b47aaabc9a4010a1003)

私のここの記事では、`lexicon`関数の`v = None`に関するエラーに言及するのを忘れていました。


# おわりに

以上でLDA in PythonがPython 3で使えるようになると思います。

```shell-session
$ python lda.py -K 10 -N 100 train model
LDA: K = 10, iters = 100, alpha = 5, beta = 0.01
loading data.. documents = 100, lexicon = 1325, nwords = 16054
initializing..
Gibbs iteration [100/100] PPL = 698.9706
saving model to model ..
done.
```
[自分用] VSCode (on Mac)使い方メモ

# ショートカット

| やりたいこと | ショートカット |
|------------|-----|
| コマンドパレットを開く | Cmd + Shift + P |
| ターミナルを開く | Ctrl + Shift + @ |
| タブを移動する | Ctrl + Tab |
| 開いているフォルダの中からファイルを検索する | Cmd + P |
| エクスプローラー ↔ エディターの移動 | Shift + Cmd + E |

# 設定

| やりたいこと | 設定 |
|------------|-----|
| 新しいファイルを開くと今開いているファイルが閉じられてしまう対策 | `"workbench.editor.enablePreview": false` |
| ファイルを自動保存する | `"files.autoSave": "afterDelay"` |
| Welcomeページを表示しない | `"workbench.startupEditor": "none"` |
| コピペ時に書式を保持しない | `Editor: Copy With Syntax Highlighting` のチェックを外す |
| ミニマップの無効化 | `"editor.minimap.enabled" : false` |


# エクステンション

| やりたいこと | エクステンション |
|------------|-----|
| テーマをIntelliJ Darcula風にする | Darcula Theme - WebStorm Edition |
| テーマをPyCharm Darcula風にする | Darcula PyCharm Theme |
| Docker | Docker
| Kubernetes | Kubernetes
| Python | Python
| ESLint | ESLint
| ファイルをデフォルトブラウザで開く | open in browser (ショートカットはAlt + B) |
| キーバインドをIntelliJ風にする | IntelliJ IDEA Keybindings |
| IntelliJ風のPostfix Completion | TS/JS postfix completion |
| TODO一覧表示 | Todo Tree |

※キーバインドを変えるとショートカットが上記と変わってしまうので注意

```json:settings.json
    "todo-tree.customHighlight": {
        "TODO": {
            "icon": "alert",
            "type": "text",
            "foreground": "blue",
            "background": "white",
            "opacity": 100,
            "iconColour": "blue"
        },
        "FIXME": {
            "icon": "alert",
            "type": "text",
            "foreground": "blue",
            "background": "white",
            "opacity": 100,
            "iconColour": "blue"
        }
    },
```
ActionSheetIOS.showShareActionSheetWithOptions()で、画像を保存が表示されない

# 結論
showShareActionSheetWithOptions()は、リモートファイルを指定することができない模様

# 詳細
以下のように記述していた。
Activity View Controllerは表示されるが、「画像を保存」が表示されずに困っていた。
urlの部分をローカルファイルパスに変更したところ、「画像を保存」や「共有アルバム（フォトライブラリ）」が現れてくれた。

```jsx
<View style={styles.isCenter}>
  <Button
    title="save"
    onPress={Platform.OS === 'ios'
      ? () => ActionSheetIOS.showShareActionSheetWithOptions(
        { url: 'https://facebook.github.io/react-native/img/header_logo.png' },
        () => {},
        () => console.tron.log('success.'),
      ) : () => {
        // abbreviation for android
      }
    }
  />
</View>
```
VB.NET で DB接続 した記録

### やりいたいこと
 - VB.NET で DB につないで SELECT して作成したテーブル用クラスに情報ぶち込みたい。
 - とりあえず VisualBasic はじめて 3日目。しんどい。勉強中です。

### 環境
 - Microsoft Visual Studio 2015(Visual Basic 2015)
 - Widnwos 10 
 - PostgreSQL 10.6

### 下準備
 - 「NuGetパッケージ管理」から Dapper と Npgsql をインストールする。
 - Dapper がクラスに代入する際につかうlib
 - Npgsql がDB接続時につかうlib

### 実装
#### ① テーブル読み込み用クラスを作成
下記クラスと同等のテーブルが PostgreSQL の中に存在する

```visualbasic
Public Class TableName
    Public Property ID As Integer
    Public Property ITEM1 As String
    Public Property ITEM2 As String
End Class
```

#### ② DB 関連の処理を作成

```visualbasic
Imports Npgsql
Public Class DB

    ' プロパティ
    Private Property m_connection As IDbConnection

    ' 接続情報の作成
    Public Sub dbConnect()
        Dim strConn As String = String.Format("Server=localhost;Port=XXXX;User Id={0};Password={1};Database={2}",
                                                "ユーザ名", "パスワード", "接続DB名")
        m_connection = New NpgsqlConnection(strConn)
    End Function

    ' 接続
    Public Sub dbConnectionOpen()
        If Not m_connection Is Nothing Then
            m_connection.Open()
        End If
    End Function

    ' 切断
    Public Sub dbConnectionClose()
        If Not m_connection Is Nothing Then
            m_connection.Close()
        End If
    End Sub

    ' 検索
    Public Function dbSelect(Of talbe_name)(ByVal query As String) As List(Of table_name)
        Return Dapper.SqlMapper.Query(Of table_name)(m_connection, query).ToList()
    End Function
End Class
```

#### ③ 実行側をつくる
```visualbasic
    ' DB接続
    dbConnect()
    dbConnectionOpen()

    ' 検索用SQLを作成
    Dim strSql As String = "SELECT * FROM TableName"

    ' select する
    Dim getList As List(Of TableName)
    getList = dbSelect(Of TableName)(strSql)

    ' DB 切断
    dbConnectionClose()
```
↑ このとき、 getList 変数には List で ① で作成した TableName クラスの情報が代入される。

### 次は
- ループでまわしてデータを取得したり？？

### お手本にしたQiitaの記事
- [2018年の今、VB6からコンバートしている人へ](https://qiita.com/sin_cos_tan/items/c681da327ec64847cbe7)
vscodeのcss設定をいじる

## 「Command + Shift + P」で、コマンドパレットを開く
<img width="497" alt="スクリーンショット 2019-02-08 15.42.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/55003/6456c515-b222-ac59-44e6-a74b4aa2d391.png">


## 「Developer: Toggle Developer Tools」を開く
<img width="498" alt="スクリーンショット 2019-02-08 15.43.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/55003/b523e067-0297-622d-9a06-1561cedceae9.png">


## Chromeでおなじみの DeveloperTools が開く
<img width="912" alt="スクリーンショット 2019-02-08 15.43.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/55003/40bf8f05-5670-12c9-3f5e-2e17b85e167d.png">


## 今回のようにCSSを変えたい場合
ここからクラス名等を調べることができます。


## vscodeのウィンドウのほうのfontサイズを変更した。
参考：[Visual Studio Codeでフォントサイズをいい感じにする](https://qiita.com/tkyaji/items/45d5f88047e99c29dda2)

```
/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.css
```

注：（最近この設定してないからわかりませんが、）VScodeをアップデートするとたぶんリセットされます。
PHPで重い処理を非同期で実行


PHPで重たい処理を非同期実行して、ストリーミングで処理途中かどうかを返す方法

## コード

```php

function post()
{
    echo "処理を開始します。<br>\nしばらくお待ちください<br>\n<br>\n";
    ob_end_flush();
    ob_start('mb_output_handler');

    $ps_cmd = 'ps x | grep ${重たい処理書いたファイル} | grep -v grep';
    exec($ps_cmd, $output);

    if (count($output) <= 0) {
        $cmd = '${重たい処理書いたファイル} > /dev/null &';
        exec($cmd);
    }

    while (true) {
        sleep(1);
        $output = null;
        exec($ps_cmd, $output);

        echo ".";

        ob_flush();
        flush();

        if (count($output) <= 0) {
            break;
        }
    }

    echo "<br>\n<br>\n処理が完了しました<br>\n";
    ob_flush();
    flush();
    ob_end_clean();
}
```

## 説明的な

### ブラウザからURL何度叩いても、プロセス立ちまくらないように

```php
$ps_cmd = 'ps x | grep ${重たい処理書いたファイル} | grep -v grep';
exec($ps_cmd, $output);

if (count($output) <= 0) {
// ~ 省略 ~
```

### 関数

```php

# バッファ出力
ob_end_flush();

# バッファリング開始
ob_start('mb_output_handler');

# バッファ出力
ob_flush();
flush();

# 終了
ob_end_clean();
```

## 実行的な

<img src="https://qiita-image-store.s3.amazonaws.com/0/53200/23e7059f-20c1-6321-2c01-a0a0b9e3f846.gif" width="50%">
最近気がついたAIXの謎ソート

# なぜこの並びなのか？
lsvgコマンドの出力

```
$ lsvg -l rootvg
rootvg:
LV NAME             TYPE       LPs     PPs     PVs  LV STATE      MOUNT POINT
hd5                 boot       1       1       1    closed/syncd  N/A
hd6                 paging     64      64      1    open/syncd    N/A
hd8                 jfs2log    1       1       1    open/syncd    N/A
hd4                 jfs2       7       7       1    open/syncd    /
以下略
```

なんでLV NAMEなりマウントポイントでソートしてくれないのかずーっと不思議だったけどついに理由がわかった。

```
# ls -l /dev/ | grep 10,|sort -n -t6
brw-rw----    1 root     system       10,  1 Feb 08 13:10 hd5
brw-rw----    1 root     system       10,  2 Nov 21 2017  hd6
brw-rw----    1 root     system       10,  3 Nov 21 2017  hd8
brw-rw----    1 root     system       10,  4 Nov 21 2017  hd4
以下略
```

マイナー番号順で並んでた。

これがわかったところで何に有用なのかは全く思い当たらない。
ただのトリビア。
DroidKaigi2019のAndroidクイズでQ4の解説

DroidKaigi2019で、リクルートさんのブースで出されていた問題が面白かったので、なぜそうなるのか調べてみたので、解説したいと思います。

# 問題

```kotlin
val x = object: ((Int) -> Unit) -> Unit by {} {} {}
```
と宣言した時、Xの型は？

1. Int
2. Unit
3. (Int) -> Unit
4. ((Int) -> Unit) -> Unit

答えは解説の後に書きます、皆さんも一度考えてみてください。

# 解説

```kotlin
val x = object: ((Int) -> Unit) -> Unit by {} {} {}
```

では、上記のコードがどうなっているのか解説していきたいと思います。

## objectキーワード

https://kotlinlang.org/docs/reference/object-declarations.html

まず、objectキーワードですが、以下の様に無名クラスを作成することが出来ます。
この無名クラスはシングルトンになってます。

```kotlin
val a = object: OnClickListener {
    // オブジェクトのブロック クラスと同じ様にメンバー変数やメソッドの定義が出来る
    override fun onClick(v: View) {
      // ...
    }
}
```



```kotlin
val x = object: ((Int) -> Unit) -> Unit
```
上記のコードは、```((Int) -> Unit) -> Unit```を継承した無名クラスを作っているということになります。

この無名クラスは```((Int) -> Unit) -> Unit```を継承しているので```invoke(p1: (Int) -> Unit)```をオーバーライドする必要があります。

```kotlin
val x = object: ((Int) -> Unit) -> Unit {
    override fun invoke(p1: (Int) -> Unit) {
        // ...
    }
}
```

問題のコードでは、なぜ```invoke```メソッドをオーバライドせずに動くのかは、次の委譲(Delegation)で説明します。

## byキーワード 委譲(Delegation)

https://kotlinlang.org/docs/reference/delegation.html

Kotlinの委譲には２種類あり、今回はクラスデリゲーションが使われています。

- クラスデリゲーション
- プロパティデリゲーション

### クラスデリゲーションとは？

継承しているインターフェイスのメソッドを、同じシグネチャのメソッドを実装しているインスタンスに委譲できる仕組みです。

```kotlin
interface ClickListener {
    fun onClick()
}

object DefaultClickListener : ClickListener {
    override fun onClick() {
        println("DefaultClickListener onClick")
    }
}

object HogeButton: ClickListener by DefaultClickListener

fun main(args: Array<String>) {
    HogeButton.onClick() // "DefaultClickListener onClick"
}
```

```invoke```メソッドをオーバライドせずに動いたの理由は、```((Int) -> Unit) -> Unit```のラムダから```invoke```メソッドを委譲していたからです。

あとはobjectのボディを書くとobject式は完成です。

```kotlin
val x = object: ((Int) -> Unit) -> Unit by { /* ((Int) -> Unit) -> Unit型のラムダ */ } { /* objectのボディ */ } {}
```

では、byの後にある三つ目の```{}```は、何なのかをみていきましょう

## 対応する引数として渡されるラムダ式は括弧の外側に置くことができる

https://kotlinlang.org/docs/reference/lambdas.html#passing-a-lambda-to-the-last-parameter

byの後にある三つ目の```{}```の正体ですが、これは ```object: ((Int) -> Unit) -> Unit by {} {}```のメソッド呼び出しです。

```object: ((Int) -> Unit) -> Unit by {} {}```を実行するには```invoke(p1: (Int) -> Unit)```を呼び出す必要があります。

```kotlin
val o = object: ((Int) -> Unit) -> Unit by {} {}
o.invoke({ i -> /* Unit */ })
o({ i -> /* Unit */ }) // invokeは()に省略可能です
o { i -> /* Unit */ } // 引数の最後のラムダは丸括弧の外に記述でき、それ以外に引数がない場合は丸括弧を省略できます。
```

この```invoke```の省略と、最後のラムダの場合は丸括弧の外で記述できる記法を使い
```object: ((Int) -> Unit) -> Unit by {} {}```を実行していたということですね。

これで問題の謎は全て解けました。

# 回答　まとめ
整理してみると以下の様になります。

```kotlin
val x = object: ((Int) -> Unit) -> Unit by { /* ((Int) -> Unit) -> Unit型のラムダ */ } { /* objectのボディ */ } { /*  object: ((Int) -> Unit) -> Unit by {} {} の実行、呼び出し  */ }
```

byの後にある1つ目の```{}```を実行しているので、回答は```2. Unit```になります。

Kotlinでは、様々な省略記法などがあり様々な書き方が出来ます。
今回の問題の様なコードをプロダクトで書くことはないと思いますが、難読なコードが書けてしまうので気をつけて使いましょう。
clasp/typescript の罠

Google Apps Script を扱う上で激アツな [clasp](https://github.com/google/clasp) は、 typescript を書いて google apps に **アップロードと同時に変換** できるが、いくつか罠があるのでメモ(version 2.0.1 2019/2/8)

 * typescript 上で `import` できるが、js変換した際には `import` 行が消されるだけ。
     * 関数や変数を他のモジュール（ファイル）で定義した名前と同じ名前で別ファイルに定義すると、単純に上書きされる。
     *  `import` が複数行になると、消し逃して構文エラーになる(アップロードして実行されるまで気づかない)
     * `import { A as B }` としてもアップロード時に消されるだけなので、実際には `B` が定義されていないことになって死ぬ（IDE等で rename するとありがち) 
 * `export const` したものが他のファイルから import できない
    * 実際には `export const hoge=` が `exports.hoge=` と変換されるので import どころか同じファイル内でも利用できない。
    * `export function` は、しても問題ない。
 * いくつかのメソッド ( `Array#find` 等)が gas 上にはなくて実行時エラーになる
    * "Automatically include polyfill" という [issue](https://github.com/google/clasp/issues/609) で紹介されている [gasのesメソッド対応一覧](https://docs.google.com/spreadsheets/d/1ClWEIgFJy22svbtkRWnRvTfJ7w_-Ofs48Pi9Ky4_DII/edit#gid=0) が参考になる
 * 何故か `clasp push` を2回しないと gas 上のファイルが書き換わっていないことが多い


解決方法をご存知なら教えてください。。。。
数字を指定の桁数に整える

# 記法

```php5:書式
str_pad(対象文字列,埋める桁数,埋める文字列,埋める辺)
```

第一引数：0埋めの対象となる文字列
第二引数：埋める桁数
第三引数：埋める文字
第四引数：左を埋める場合はSTR_PAD_LEFT、右を埋める場合はSTR_PAD_RIGHT、両側を埋める場合はSTR_PAD_BOTHを指定します。実際にコードを書くとなると下記のようになります。

# サンプルコード
```php5:Sample.php

$CountOfFiles=100;
for($i=1;$i<$CountOfFiles;$i++){
    echo str_pad($i, 2, 0, STR_PAD_LEFT);
}
```

# 結果
```php5:結果
$ sample.php
001
002
003
004
...
```

# 参考
http://wp.tech-style.info/archives/582
UIImageをCGImageを利用してトリミングする場合は注意するという話

## はじめに

以前書いた [CGImageは画像の向きを保持していない](https://qiita.com/YutoMizutani/items/de6c0f2200bdbab10624) という記事で，cgImage については理解していたつもりでしたが，まだまだでした。

UIImage を CGImage を利用してトリミングした際に，再び CGImage にハマってしまったので記録しておきます。

## UIImage と CGImage の関係
UIImage と CGImage は，以下の図のようになっています。CGImage は方向を持ちません。
<img width="493" alt="ss 2019-02-08 at 14.43.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/195913/993c4d25-f0ab-f054-4b6d-3f6f98251973.png">

## UIImage を self.cgImage でトリミングする場合に起こり得ること

CGImage には，[`cropping(to rect: CGRect) -> CGImage?`](https://developer.apple.com/documentation/coregraphics/cgimage/1454683-cropping) という，トリミング用の関数が用意されています。

しかし，そのまま `image.cgImage?.cropping(to: rect)` としてはいけません。

<img width="373" alt="ss 2019-02-08 at 14.43.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/195913/d904dd16-5eb9-9136-1605-b4a83905d532.png">

UIImage と CGImage の向き (size) が異なる場合，例え UIImage の size にフィットするような CGRect を用意しても，内部の CGImage が異なっていた場合，
CGImage のトリム範囲にズレが生じ，UIImage に戻したとしても，上手くトリミングがされません。

<img width="559" alt="ss 2019-02-08 at 14.44.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/195913/fa045e7e-115e-86b7-9295-333750b3467d.png">
<img width="704" alt="ss 2019-02-08 at 14.47.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/195913/531f12a9-c8cd-cefe-6216-ef91d05d316b.png">

#### つまづきポイント
通常のトリミングでは，以下のようなコードになると思います。
CGImage から UIImage を生成する際に，`orientation` プロパティが存在するので，ここで補正されたと思い込んでしまいます。
しかし実際は，`cgImage?.cropping(to: rect)` の時点でズレが生じており，生成時に方向を正したとしても，思う方向と異なるトリミングがされた画像が返ってしまいます。

```swift
extension UIImage {
    func cropping(to rect: CGRect) -> UIImage? {
        guard let cgImage = self.cgImage?.cropping(to: rect) else { return nil }
        let cropped: UIImage = UIImage(cgImage: cgImage, scale: scale, orientation: imageOrientation)
        return cropped
    }
}
```

## どうすれば良いのか

UIImage からトリミングする際，cgImage に渡す CGRect を，UIImage が持つ方向に合わせて調整する必要があります。

初めに，横向きの状態を取得する `UIImage.Orientation` の extension として `isLandscape: Bool` を用意します。
今後追加された場合を考え，switch 文の case は網羅しておきます。

```swift
extension UIImage.Orientation {
    /// 画像が横向きであるか
    var isLandscape: Bool {
        switch self {
        case .up, .down, .upMirrored, .downMirrored:
            return false
        case .left, .right, .leftMirrored, .rightMirrored:
            return true
        }
    }
}
```

次に，横向きであった際に回転させる `CGRect` の extension，`switched: CGRect` を用意します。

```swift
extension CGRect {
    /// 反転させたサイズを返す
    var switched: CGRect {
        return CGRect(x: minY, y: minX, width: height, height: width)
    }
}
```

UIImage の extension に合わせて向きを揃えるように書いて，完成です!

```swift
extension UIImage {
    func cropping(to rect: CGRect) -> UIImage? {
        let croppingRect: CGRect = imageOrientation.isLandscape ? rect.switched : rect
        guard let cgImage: CGImage = self.cgImage?.cropping(to: croppingRect) else { return nil }
        let cropped: UIImage = UIImage(cgImage: cgImage, scale: scale, orientation: imageOrientation)
        return cropped
    }
}
```

## References

https://github.com/YutoMizutani/til/blob/b8ae4b9b5ecdab75ce6fa9e9e23ab6ba2198bd60/swift/swift4/uikit/uiimage/crop.md
Pythonで漢字の情報を取得する方法(音訓読み、画数など)

#使うもの
-[文字情報基盤データベースのapi]( https://mojikiban.ipa.go.jp/search/help/api)
-pythonの[urllib.request](https://docs.python.org/3/library/urllib.request.html)
-pythonの[json]( https://docs.python.org/3/library/json.html)

#Python3 コード
漢字charの読み方を辞書で返すファンクションです。

```python
import urllib.request
import helper.directory
import json

def get_yomi(character):
    # convert character to he x unicode
    letter_a = str(character)
    decimal_a = ord(letter_a)
    hex_A = hex(decimal_a)

    # insert into api request format
    request_url = "https://mojikiban.ipa.go.jp/mji/q?UCS=*"
    request_url = request_url.replace('*', hex_A)

    req = urllib.request.Request(request_url)

    with urllib.request.urlopen(req) as res:
        body = json.load(res)

    return body['results'][0]['読み']
```
使い方:

```
print(get_yomi('蛇'))
{'音読み': ['ジャ', 'ダ', 'タ', 'シャ', 'チ', 'イ', 'ヤ', 'ジ'], '訓読み': ['へび']}
```


#Python3のUnicode
文字情報基盤のapiはUCSキャラクターに対応してますのでunicodeをhexに変換してからリクエストURLに埋め込みます。Python3にはPython2にあったunicodeタイプはありません、strタイプを使いましょう。

#jsonフォーマット
jsonから得られる辞書のフォーマット。

```
pprint.pprint(body)

{'count': 1,
 'find': True,
 'results': [{'IPAmj明朝フォント実装': {'フォントバージョン': '005.01', '実装したUCS': 'U+86C7'},
              'JISX0213': {'包摂区分': '0', '水準': '1', '面区点位置': '1-28-56'},
              'MJ文字図形': {'MJ文字図形バージョン': '1.0',
                         'uri': 'http://mojikiban.ipa.go.jp/MJ023408.png'},
              'MJ文字図形名': 'MJ023408',
              'UCS': {'対応するUCS': 'U+86C7', '対応カテゴリー': 'A'},
              '住基ネット統一文字コード': 'J+86C7',
              '入管外字コード': '',
              '入管正字コード': '86C7',
              '大字源': 8747,
              '大漢和': '32964',
              '大漢語林': 10023,
              '戸籍統一文字番号': '374860',
              '新大字典': 14646,
              '日本語漢字辞典': 11206,
              '漢字施策': {'人名用漢字': True, '常用漢字': True},
              '登記統一文字番号': '00374860',
              '総画数': 11,
              '読み': {'訓読み': ['へび'],
                     '音読み': ['ジャ', 'ダ', 'タ', 'シャ', 'チ', 'イ', 'ヤ', 'ジ']},
              '部首内画数': [{'内画数': 5, '部首': 142}]}],
 'status': 'success'}

```
vb.net(2010)でリクエスト(JSON)を送信する

※肝は漢字のデータ　　ずっとこれが原因でエラー(400)がでていた
1. JOSNデータをシリアライズ化
2. その結果をエンコード
3. WebClientのUploadDataを使ってJSONをリクエスト送信する


#リクエスト側（クライアント）
```vb

	Imports System.ServiceModel.Channels
	Imports System.Net
	Imports System.Collections.Generic
	Imports System.Runtime.Serialization.Json
	Imports System.Runtime.InteropServices
	Imports System.Security.Cryptography.X509Certificates
	Imports System.Text
	Imports System.IO
	Imports System.ServiceModel.Web
	Private Function RequestToPz3(ByRef json As RequestJson3) As String
        '--- 文字コードを指定する
        Dim enc As System.Text.Encoding = System.Text.Encoding.GetEncoding("UTF-8")
        '--- WebClientクラスの定義
        Dim wc As New System.Net.WebClient
        '--- ヘッダ（Content-Type）
        wc.Headers.Add("Content-Type", "application/json; charset=utf-8")
        Dim eMsg As String = ""
        Try
            Dim result As String
            Using stream As New IO.MemoryStream
                '---    シリアライズ実行
                Dim serializer As New DataContractJsonSerializer(json.GetType)
                serializer.WriteObject(stream, json)
                '---    結果を取得
                result = System.Text.Encoding.UTF8.GetString(stream.ToArray())
            End Using
            '*****  データを送信し、結果を受信する *****
            reqCount = reqCount + 1
            Dim resData As Byte()
            Try
                '---    これで漢字も送れた
                Dim postDataBytes2 As Byte() = enc.GetBytes(result)
                resData = wc.UploadData(tmpRequestUrl, postDataBytes2)      '成功
            Catch ex As Exception
            End Try
            wc.Dispose()
            '受信した結果(JSONデータ)を表示する
            Dim resText As String = enc.GetString(resData)
            Console.WriteLine(resText)
        Catch e As WebException
            ' 予期せぬエラー
        Catch e As System.Exception
        End Try
        Return eMsg
    End Function
```


#受取側（コントローラ）
```vb

	Option Strict On
	Imports System.ServiceModel
	Imports System.ServiceModel.Activation
	Imports System.ServiceModel.Web
	Imports System.Runtime.Serialization
	Imports System.Collections.Generic
	Imports System.Net
	Imports System.ServiceModel.Channels
	Imports System.Text

	'*******************************************************************************************************
	'   処理概要：コントローラー
	'*******************************************************************************************************
	<ServiceContract(namespace:="http://aaaaaaa/bbb/api/assets/")>
	<AspNetCompatibilityRequirements(RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)>
	Public Class ss09030r

	    Inherits System.Web.UI.Page
	    Private Const X_REQUEST_ID = "X-request-id"
	    '--------------------------------------------------------------------
	    '   reportコントローラー	ここでリクエストを受取る
	    '--------------------------------------------------------------------
	    <OperationContract(), WebInvoke()>
	    Public Function report(req As RequestJson3) As RequestJson3
	        Dim RequestHeaders = WebOperationContext.Current.IncomingRequest.Headers        '   リクエストヘッダー
	        Return req
	    End Function
	End Class
```
Eclipseでアプリケーション実行時に環境変数を設定する方法

# はじめに

環境ごとに値が変わったり（データベースの接続情報）、機密情報（外部API利用時のアクセストークン）を直接ソースに埋め込むのと、セキュリティ上好ましくありません。通常は環境変数を使いますが、利用方法はいくつか存在します。
今回はEclipseを使った環境変数の設定方法について説明しようと思います。

# 検証した環境
- Mac 
- Eclipse

# 手順

Javaアプリケーションのプロジェクトを作成し、メインクラスを作成します。

```java:Main.java
public class Main {
  public static void main(String[] args) {
    System.out.println(System.getenv("HELLO_MESSAGE")); // HELLO_MESSAGEを環境変数名とする
  }
}
```

上部メニューの「実行」->「デバッグの構成」の順でクリックします。
左メニューの「Javaアプリケーション」を選択し、「新規構成」をクリックします。

表示されたダイアログの「環境」タブに下記の設定を行う。

|変数名|値|
|:--|:--|
|HELLO_MESSAGE|Hello World!|

設定できたら、「適用」ボタンをクリックし、ダイアログを閉じます。

設定完了後、デバッグ実行すると、上記で設定したメッセージがコンソールに表示されます。
worldspaceのcanvasを最前面にレンダリングする

## VRにおいてScreenSpace-Overlayでは、UIの設定ができない
通常であれば、UIはあらゆるオブジェクトの最前面にレンダリングされるもので、UnityではUIをScreenSpace-Overlayで実現する。
しかし、**VRにおいては、その仕様上目の焦点が合わないため実は設定ができない**（できるがUIがレンダリングされない）

なので、World Spaceでの使用を推奨される。
https://unity3d.com/jp/learn/tutorials/topics/virtual-reality/user-interfaces-vr


しかし、このやり方だと、UIがworldspaceに置かれるため、他の3dモデルなどに遮蔽されて隠れてしまう問題もある。

UIをworldspaceに置きつつ、他のオブジェクトに遮蔽されることなく最前面にレンダリングする方法を以下にまとめた。


## 手順
1. Main Cameraをduplicateして、UI Cameraにrename
2. UI CameraをMain Cameraの子コンポーネントに指定
3. UI CameraのClear FlagsをDepth Onlyに変更
2. UI Cameraからaudiolister, flareLayerコンポーネントをremove
3. UI CameraのCulling MaskにUIのみチェック
4. Main CameraのCulling MaskからUIをアンチェック
5. UI CameraのDepthをMain Cameraよりも大きくする（Main Cameraが0ならUIの方は1でOK）
6. 最前面に描画したいcanvasの設定をworldspace, Event CameraをUI Cameraに設定


以上
テスト・ケース制作ツールの制作記( 開発成果物を読み込んでテスト・ケースを直接つくる)

今はなくなった、某企業から、政府支援課題をする時でした。
成果物を確認し、成果物でテストケースを導出することをガイドしていました。大体コードのドキュメントであり、このコードに対するテストケース導出するガイドが僕の仕事でした。
テストケースを作成するのは企業側の担当者が進行しました。しかし、
「たくさん面倒な作業ですね...」

その際には愚痴だとおもいました。すべての成果物は、MS Wordで書かれ、これを一つ一つ見て分析をしなければならいたからです。

後でマークダウン（markdown）であることがわかりました。その当時はHarooPadというアプリケーションを使用して作成をしてみたところ、かなりの文書形式は、ある程度これでカバーなるという感じがした。特にコード関連マニュアルを作成する際に多くの助けになろうと考えました。
マークダウンで作成した文書をそのまま読み込んでテストケースを作ってくれるアプリケーションがある場合は非常にいいような気がして、これがテストケースの設計ツールの始まりでした。


マークダウン構文でコード部分は、｀｀｀で囲まれた部分です。マークダウン文書（テキストファイルである）をパーシングしながら ｀｀｀をぶつかるとコードを読み込むとよくないだろうか。

今ではこの機能はないです。ここで告白しますが、現在のWeb版（analyzingcontext.com）の以前のバージョン（exe版）では、私の怠惰のために、一度コードを入力受けてコードの前と後を ｀｀｀で囲まれたようコーディングした部分がある。エンジン部分を触りが面倒からでした。

<img width="650" alt="chapter1_1.png" src="https://qiita-image-store.s3.amazonaws.com/0/55902/40e68560-7575-3a67-2b51-b30bd4779d14.png">


コードを読み込んで、無条件に ｀｀｀で囲まれてエンジンに投げていいます。
当時のバグだらけのコード分析エンジンを作って完璧ではなかった、ある程度のマークダウン文書を解析して、コードを読んでケースを作るのバージョンまで達しました。当時書いた手法は、MC/DCではなくて条件分の場合の数の「すべての組み合わせ」を作ったのだった。それも条件に3つ以上の移れば機能が動かなかったんです。

コードをgithubに上げて公開するのがどうという話も時々聞きましたが、正直に言うと「恥ずかしい」なでした。自分のコードを自信を持って公開する人は本当にすごい人だと思います。

進行できなかった理由は、いろいろなことがありますが、一度マークダウンというフォームがすべての開発者の間で通用することはなかった。前述し某企業側もMS Wordに習いすぎてマークダウンの反発があり、部外者である私の立場では、これを強制的に力もありませんでした。
もう一つの問題点は、マークダウンエディタがサポートしているマークダウン構文がまちまちであることです。マークダウンがある程度共通のフォーマットを持っているが、注釈機能のようなものは標準機能ではないので、エディタごとにサポートするかどうかが違います。最初はAというツールを基準にとったが、後で出てきたBというツールが機能が多く、より良く見える場合なかなか困難なことですね。

2019年2月の時点で出てきたマークダウンツールを見ると、信じられないほどの機能が良くなりました。特にJavaScriptライブラリ機能のサポートしてシーケンス図やグラフやグラフ（mermaid.js）、フローチャート（flowchart.js）を別心配なしに書き置くのが可能になった。

これを持って成果物を作成し、アプリケーションでこれを読み込んでテストケースを作成することができるという考えは具体化が可能ではないでしょうか。

後で時間になると、上記のスクリプトをサポートするパーサーを作成みようと思う。後で時間になると...
HTML,CSS中級編　基本概念について


こんにちは。
今回も学習段階の私が私のために(笑)
忘れないようにメモ書きを残していきたいと思います。
同じく基本から学びたい方やエッセンスだけを掴みたい方に
有益な記事になれば幸いです。


#背景画像の入れ方から画面中央調整方法
`Background-image:url();
Background-size:cover;`

`.box{
Width:300px;
Margin:0 auto;`
└こうすることで、自動で中央揃えにすることができる。
ただし横幅は絶対設定しないといけないので注意。
また、縦を自動で中央に合わせる方法はありません。


#文字の透明度をつける方法
CSSで
Opacity:●;
をいじれば透明度を選択することができる。
これが1であるほど不透明であり、小数点以下になるにつれて透明度が増していく。


#文字の隙間を空ける方法
CSSで
`Letter-spacing:●;`
をいじれば文字の隙間感覚を調節することが可能

#ボタンで飛ばす方法
`<a href="#" class="btn twitter">Twitterで登録</a>`

このように、`<a>`で囲むことでリンク先に飛ばせます。
ボタンで飛ばしたい場合は、HTML上でbtn twitterなどと書きます。
この際btnをクラス付けしておきましょう。

#カーソルを合わせた時に色が変わるようにしたい
このような現象をhoverと言います。
CSSにて
`Div:hover{
 Background-color:red;
}`
など、セレクタ：hover｛でコードを書き始めれば大丈夫です。
セレクタ部分には、.btnなどのクラス分けしたものが来ることもあります。

#角を丸くする方法
CSSにて、`border-radius: 10px;`
などと記述すればOKです。

#文字の揃え
CSSにて
`Text-align:left
Text-align:center
Text-align:right`
として文字をそろえることが可能です。

#中央揃えの２つの使い分け
今まで、
`・text-align:center
・margin: 0 auto;`
を学びました。

#アイコンを表示させる方法

`<span class=”fa fa-●●”></span>`
で完了。

#クラスを伴った画像挿入方法
`<img class="logo" src="https://prog-8.com/.png>`でOK

#
Aの中にBを作りたい場合、

★
　☆
　　●
　　●
　☆
★

となっているので、divの次にまたdivが来て違うものをクラス分けしてても大丈夫な点に注意してください。

#ログインコードの書き方
`<div class="header-right">`
         ` <a href="#" class="login">ログイン</a>`
          `</div>`
      

#変化の起こらせ方
CSSにて
`Div{
Translation: all 1s;
}`
で完成です。
Allは全体を反応させること、1sは反応時間を1秒としています。

また、これを使う場合何色にするのか決める必要があるため大体hoverと
一緒に使います。

#行間の設定方法
`Line-height: 10px;`
といった形で設定することができます。
この数字が大きくなるほど行間は広くなります。


#ブロックとは
親要素いっぱいに適応を広げることができる。
CSSにて`display:block;`と書き加えれば良い

#文字の大きさを変更したい
CSSにて`font-weight:normal;`が細文字
`Font-weight:bold;`が太文字です。
H1~h6で設定した分に関しては自動でboldが適応されているので
もし補足したい場合には、自分でnormalに変えると良いでしょう。

#基本に立ち返ってみよう
Divのクラスの中にpのクラスを作ったりと頭が混乱してしまうかもしれませんが、基本的には枠内にまた枠を作っているというイメージを持つようにします。
今何をしていて、どこに反映されているのかという意識は常に持つようにしましょう。

#CSSを用いて要素同士を重ねてみよう
`Position:absolute;
Top:50px`
のようにして要素同士を重ねることが可能です。
Topというのは左上を起点としています。
右、下、左をそこに照らしてどこに配置するのか設定することで重ねられます。

もし左上ではなく、別に基準にしたい親要素があれば、
CSSにて
`.parent{
Position:relative;
Top25px`
のようにして、基準を変更することが可能です。`Psition-relative`と記述しましょう。

#ボタンを作る際に中に文字を入れる方法
Spanタグを使用すれば良いです。
HTML上で、`<span class=”btn message”>●●</span>`を作りましょう。
そしてその文字●●の編集に関しては、CSSで
`.btn message{`
としていじっていけば良いです。

#カーソルの形を変更する方法
CSSで`cursor:pointer;`とすると変更できます。
ちなみに、ポインターが指です。
縦線のものを表示させたい場合は「`text`」とします。
また矢印の形にしたい場合には「`default`」とします。

#カーソルを合わせた時にアニメーションを付けたい時

理解としては、
カーソルを合わせる前の画像の表示方法
そしてカーソルが合わされた時`.message:active;`に
どのような画像に変更するのかをHTMLを使って設定していきます。
そのためコードを２つ書くということを覚えておきましょう。

`.message {
  padding: 15px 40px;
  background-color: #5dca88;
  cursor: pointer;
  box-shadow: 0 7px #1a7940;
}`

`.message:active {
  position: relative;
  top: 7px;
  box-shadow: none;
}`

#ヘッダーを固定する方法（応用可）

`header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
  /* positionプロパティをfixedに、topを0に指定してください */
  position:fixed;
  top:0;`
  
  `/* z-indexを10に指定してください */
  z-index:10;
}`

z-indexは階層を示します。0が一番下に位置し、大きくなるほど階層が上になります。
また`z-index`を使用する際には`position:fixed;`と併用します。