OmniAICreator/Qiita-1.07M huggingface dataset:
[AE エクスプレッション] 現在時間のマーカーキーのインデックスを取得する

どこかの記事でも書いてあると思うけど、これだけ欲しい時にすぐ探せるようにメモです。

ちょっとどこかで自分が良く使うエクスプレッションをまとめたエクステンションを作ろう。

```jsx
function nowKey(){
	var targetLayer = thisLayer; //ここにターゲットとなるマーカーのあるレイヤーを設定する
	var KeyN = 0;
	if (targetLayer.marker.numKeys >0){
		KeyN = targetLayer.marker.nearestKey(time).index;
		if(targetLayer.marker.key(KeyN).time > time) KeyN--
	}
	return KeyN
}
```


#これの変化形を作成

複数行のテキストにキーフレームがあり、行ごとに変化させる何らかのアニメーターを入れて
行ごとの秒数の確認をするように作ったもの

```jsx
var targetcomp;
var myComp =[];

function nowKey(tl){
    var targetLayer = tl; //ここにターゲットとなるマーカーのあるレイヤーを設定する
    var KeyN = 0;
    if (targetLayer.text.animator("アニメーター 1").selector("範囲セレクター 1").start.numKeys >0){
        KeyN = targetLayer.text.animator("アニメーター 1").selector("範囲セレクター 1").start.nearestKey(time).index;
        if(targetLayer.text.animator("アニメーター 1").selector("範囲セレクター 1").start.key(KeyN).time > time) KeyN--
    }
    return KeyN
}

function nextKey(tl){
    var targetLayer = tl; //ここにターゲットとなるマーカーのあるレイヤーを設定する
    var KeyN = 0;
    if (targetLayer.text.animator("アニメーター 1").selector("範囲セレクター 1").start.numKeys >0){
        KeyN = targetLayer.text.animator("アニメーター 1").selector("範囲セレクター 1").start.nearestKey(time).index;
        if(targetLayer.text.animator("アニメーター 1").selector("範囲セレクター 1").start.key(KeyN).time <= time) KeyN++
    }
    return KeyN
}

for( var i = thisComp.numLayers ; i >= 1; i--){
	if ( (thisComp.layer(i).active == true) ){
		try{
			myComp.push(thisComp.layer(i).index)
			thisTimeLayer = thisComp.layer(myComp[myComp.length-2]);![Adobe-After-Effects-2022-Z__CoconalaCustomer_gjtmpdt55_AE_telop.aep-2022-01-15-11-18-15.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178061/f2bc9943-3f6f-a80c-05b9-11ef7b779a10.gif)

			thisTimeLayer.text.animator("アニメーター 1").selector("範囲セレクター 1").start;
			nowKey(thisTimeLayer);
			layerConvertArray =thisTimeLayer.text.sourceText.split("\r");
			nowViewText = layerConvertArray[nowKey(thisTimeLayer)-1];
			if (　nowViewText == "" ){
				nowViewText = "空白行"
			}else{
				nowViewText
			}
			
//時間の計算
		nowKeyTime = thisTimeLayer.text.animator("アニメーター 1").selector("範囲セレクター 1").start.key(nowKey(thisTimeLayer)).time;
		nextKeytime = thisTimeLayer.text.animator("アニメーター 1").selector("範囲セレクター 1").start.key(nextKey(thisTimeLayer)).time;
		resultText = nowViewText.replace(/\s+/g, "");
		resultText +"\r"+ sub(nextKeytime,nowKeyTime)+"秒"
		}catch(e){
			""
		}
	}
}
```


![Adobe-After-Effects-2022-Z__CoconalaCustomer_gjtmpdt55_AE_telop.aep-2022-01-15-11-18-15.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178061/55c9af54-2255-dff6-f811-c6cf9ba16c1f.gif)
Xcode10 Xcode9からバージョンアップ時エラー

Build system infomation Build falled
Showing Recent Messages
:-1: Multiple commands produce '/Users/macintosh/Library/Developer/Xcode/DerivedData/JazzmanClubNotex-ehvnjyzvxenrqtgfdnuofgqvqlal/Build/Products/Debug-iphoneos/JazzmanClubNotex.app/Info.plist':
1) Target 'JazzmanClubNotex' (project 'JazzmanClubNotex') has copy command from '/Users/animalnote_xcode10/JazzmanClubNotex33/JazzmanClubNotex/fmdb/Info.plist' to '/Users/macintosh/Library/Developer/Xcode/DerivedData/JazzmanClubNotex-ehvnjyzvxenrqtgfdnuofgqvqlal/Build/Products/Debug-iphoneos/JazzmanClubNotex.app/Info.plist'
2) Target 'JazzmanClubNotex' (project 'JazzmanClubNotex') has process command with output '/Users/macintosh/Library/Developer/Xcode/DerivedData/JazzmanClubNotex-ehvnjyzvxenrqtgfdnuofgqvqlal/Build/Products/Debug-iphoneos/JazzmanClubNotex.app/Info.plist'

ProjectSettingより
![スクリーンショット 2020-01-10 7.00.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/63b94f6e-7725-570d-9bdd-5dff328df524.png)
Build SystemをLegacy Build Systemに変更します。
![スクリーンショット 2020-01-10 6.59.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/546ea848-f5e1-7935-4707-fb65022c38b6.png)
災害からペットを守ろう

# 目次
1.[実施した場所](#1実施した場所)
2.[ターゲット](#2ターゲット)
3.[アプリについて](#3アプリについて)
4.[特徴について](#4特徴について)
5.[あるべき未来](#5あるべき未来)
6.[行程について](#6工程について)
7.[その他（アプリの資料・発表資料など）](#7アプリの資料)
8.[アプリ紹介スライド](#8アプリ紹介スライド)

---


#1.実施した場所
静岡県浜松市

---


#2.ターゲット
ペットを飼っている家庭（一人暮らしを含む）
理由はペットのためにあるアプリのためペットを飼ってる人が使うことを考えています。
現状では、「災害時にペットを守る方法の認知度」調査の結果、「動物を飼っている」と答えた人の中で「災害時にペットを守る方法を知っている」と答えたのは21％、「知らない」と答えたのは79％でした。以上の結果から災害時にペットを守る方法を知らない人が圧倒的に多いことがわかります。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554287/fe0c3e30-3d6c-7714-ccbc-34f084111b61.png)



---

#3.アプリについて
このアプリでは防災をメインとしたアプリです。ターゲットの部分でもわかりますが、災害時にペットを守る方法を知らない人は圧倒的に多いです。実際に災害の被害にあったときに紙媒体の緊急避難パンフレットを持って逃げることはとても難しいと思います。
よって、アプリ化すれば誰でも気軽に見ることができると思ったからです。

---

#4.特徴について
・被害前から被害中までの状況に対応

・環境省が出しているパンフレット、静岡県動物保護協会が出しているパンフレットからまとめた

・静岡県浜松市にある「静岡県動物管理指導センター」と藤枝市にある「静岡県中部健康福祉センター　動物保護指導班の方」と連携、宣伝

---

#5.あるべき未来
人間と動物が安心して暮らせる未来。
災害が起きた時にペットをどのように避難させればいいか知っておくことによって、飼い主、ペットともに安心して生活ができる。
災害時に飼い主がペットの管理をきちんとできるようになることによって野犬の数が減る。
飼い主としての責任・自覚・知識を身につけ災害時に適切な行動をとることができる。

---

#6.工程について
[工程についてはこちら](https://qiita.com/drafts/b042a0a04d06311d6a59/edit)

---

#7.アプリの資料
アプリのホーム画面
![CBD911C3-DC54-49EB-8337-5877495FCC8E.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554287/3b7b7c45-3a52-c751-98f5-4ae5682b5293.jpeg)

普段から心がけておくことを押す

![5514FB81-0334-479F-9FA3-713BD96F0853.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554287/16dad8b3-2df0-edfa-1b5d-57475baaa1bc.jpeg)

それぞれのページの内容一部

![44028906-3A5A-4000-9F54-E9F35A09970A.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554287/8690c32f-5f04-75c6-3e3d-92fdcf1f43cd.jpeg)

![9B1B9CC6-CBDB-4859-9C26-9CCE3B4D8268.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554287/a97d442c-e5b0-03b3-36c4-13dcc9513710.jpeg)

![2C774781-31D5-4AA1-B282-C4A0BAF35AB2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554287/2a8ba975-b213-3d47-a88b-f3a653238898.jpeg)



---

#8.アプリ紹介スライド
[スライドはこちらをクリック](https://docs.google.com/presentation/d/12UzWPRNCjB1c_4DCmRiu4g1E1ubzAPPskzDE3xhv9U8/edit?usp=sharing)
mp3とかのid3タグを編集するエディタ

mp3のタグを編集するツールを探していたけどなかったので作りました。
メモリをどかぐいするかもしれません

### URL
https://misogihagi.github.io/id3editor/

### 使ったライブラリ
本ツールの最大の貢献者たち
[JavaScript-ID3-Reader](https://github.com/aadsm/JavaScript-ID3-Reader)
[browser-id3-writer](https://github.com/misogihagi/browser-id3-writer)
[handsontable](https://github.com/handsontable/handsontable)
[jszip](https://github.com/Stuk/jszip)
[FileSaver.js](https://github.com/eligrey/FileSaver.js)


### ライセンス
JavaScript-ID3-Readerのライセンスがなんのライセンスかわからないのでここに記載します。ちなみに本アプリケーション自体のライセンスはMITみたいなものです。

```
Copyright (c) 2008 Jacob Seidelin, http://blog.nihilogic.dk/ BSD License

Copyright (c) 2009 Opera Software ASA BSD License

Copyright (c) 2010 António Afonso BSD License

Copyright (c) 2010 Joshua Kifer BSD License
```

### 何かあった時のビルドコマンド
browserify src > dist.js

### おまけ
これの開発するにあたって[こちらの](https://github.com/43081j/id3)ライブラリを試していたのですが、browserifyできずにwebpackを使い、構成がかなり面倒だったので供養しておきます。

```package.json
{
  "name": "id3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "id3js": "^2.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/preset-env": "^7.7.7",
    "babel-loader": "^8.0.6",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^10.0.0",
    "fs": "0.0.1-security",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}
```

```babel.config.js

module.exports = {
  entry: './src.js',
  output: {
    path:　__dirname,
    filename: 'dist.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        options: {
          presets: [[
            "@babel/preset-env",
            {
              "useBuiltIns": "entry"
            }
          ]]
        }
      }
    ]
  },
  node: { //Module not found: Error: Can't resolve 'fs' in 'C:~
    fs: "empty"
  }
};
```
ああ、変数考えるの面倒くさい。西尾維新でもいればいいのに。
気が向いたらプルリクください。
Amplifyのqueryでfilterするときのand orなどの書き方

##書いた経緯
Amplify で自動生成されたqueryのDocsをみていて、自動でandとかcontainsとか自動されていて便利だなと思いつつ、andとorとかの書き方がわからずググっていたのですがすぐみつからず、ああかなこうかなと書いてわかったので同じ感じで迷った方に共有するため書きました。よくよく定義をみたら当たり前の書き方でした。

ググるのではなく、公式のドキュメント
https://aws-amplify.github.io/docs/cli-toolchain/graphql
をちゃんと確認したら書いてました。



##記事の対象の方
- Amplify触り始めて、queryの書き方で試行錯誤している人（私）

##既知とする条件(書かないこと)

- Amplifyの使い方
- graphqlとは?


# 本文

以下のようなtypeを定義したとします。

```ruby:

type User @model
{
  id: ID!
  lastName: String!
  firstName: String!
  createdAt: AWSDateTime
}

```

amplifyが自動で以下のUserリストをとるschemaを作成してくれます。

```ruby:
# by amplify
listUsers(
  filter: ModelUserFilterInput
  limit: Int
  nextToken: String
): ModelUserConnection

```

```filter: ModelUserFilterInput```の定義は以下が自動生成されています。

```ruby:
# by Amplify

type ModelUserFilterInput {
  id: ModelIDInput
  lastName: ModelStringInput
  firstName: ModelStringInput
  createdAt: ModelStringInput
  and: [ModelUserFilterInput]
  or: [ModelUserFilterInput]
  not: ModelUserFilterInput
}

```

ここで以下のシンプルなフィルター使用したqueryを書きます。

```ruby:

# 自分で定義
query listUsers($input: ModelUserFilterInput ){
  listUsers(filter: $input) {
    items {
      firstName
      lastName
      createdAt
    }
  }
}

```

そして変数に値を入力します。まずシンプルなものです。

サンプルデータとして
firstNameにTaro
lastNameにYamada
で1件だけ登録しておきます。

fistNameに```Taro```が含まれるものを取得します。

```ruby:

# 自分で定義
{
  "input": {
    "firstName": {
      "contains": "Taro"
    }
  }
}

```

結果

```Ruby:
{
  "data": {
    "listUsers": {
      "items": [
        {
          "firstName": "Taro",
          "lastName": "Yamada",
          "createdAt": "2020-01-09T15:37:22.819Z"
        }
      ]
    }
  }
}


```

## and or を使ったquery 

以下のように書きます。Docsの定義をみるかぎり
```[ModelUserFilterInput]```とあるので配列を与えるので
以下のようになります。

```Ruby:

{
  "input": {
    "and": [ #andを先に書く!
      {
        "firstName": {
          "contains": "T"
        }
      },
      {
        "lastName": {
          "eq": "Yamada"
        }
      }
    ]
  }
}

```

結果は先ほどと同じです。
同様に```or```は

```Ruby

{
  "input": {
    "or": [
      {
        "firstName": {
          "contains": "T"
        }
      },
      {
        "firstName": {
          "contains": "K"
        }
      }
    ]
  }
}

```

で結果は同じです。

以上です。

### 蛇足

本文とあんまり関係ないですが、```and```とか```or```をさきにかくと関数みたいなのに```eq```とかは違うのが感覚的に迷いました。

Clojureなら```(関数 値)```で一貫してますが

```:clojure
;includesのあとにfirstName
(and 
  (includes?
    (.firstName "T")
  (=
    (.lastName "Yamada"))
```

graphql(Amplify?)の場合はcontainsは変数のあと、andは先にくるのが感覚的に分かり難かったです。

```:graphql
#amplifyの場合 containsはfirstNameのあと
    "and": [ 
      {
        "firstName": {
          "contains": "T"
        }
      },
      {
        "lastName": {
          "eq": "Yamada" 
        }
      }
    ]

```
くもん式の英語学習デバイス"E-Pencil"をハックする[1]

#序
ムスメ(小1)が公文式で英語を学習しているのだが、その英語学習用デバイスである"E-Pencil"がとてもよく出来ている。テキストの英単語や英文のそばに「音声マーク」があって、それをE-Pencilで押すと読み上げてくれる、というものだ。こんな面白いもの、当然仕組みを考えてみたくなるよねってことで考えてみることにした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469946/eacd4590-86dd-938a-b9b5-6e844a88363e.png)

#音声マークとは
説明書には「音声マークを"押す"」と書いてあるのだが、もちろん"押す"ことに意味は無くて、ペン先にカメラが入っていて音声マークという「認識コード」を読みだしているのだろうということはすぐに想像がつく。拡大してみるとこんなコードだ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469946/bbf3d7c2-499d-694c-ff1c-eeea49d23ae1.png)

1つのブロックが縦横に繰り返し並べられているように見える。ペン先の大きさから考えても、1つのブロックはかなり小さいと予想できる。横一列、縦一列に等間隔にドットが並んでいるところがあるので何か読み出しの基準になっていそう…。

と、いろいろ仕様を考えていたのだが、ここでうっかり"**※E-Pencilは、グリッドマーク株式会社の特許技術を用い、凸版印刷株式会社が製造しています**"という情報を得てしまった。

で、グリッドマーク社のWebサイトを見たら、普通に仕様概要が公開されてた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469946/0fc7d4c4-801e-0ffb-730a-9693e4b4eeda.png)
[技術 Gridmark Ink.](http://gridmark.co.jp/technologies)

4x4格子を1単位として、格子の中に(恐らく)必ず1つのドットが存在して、ドットの位置をコード化していると考えられる。(というかほぼそう書いてある)

画像では+x+xのように並んでいて「上下左右位置」のブロックと「斜め位置」のブロックがあるのか(キードットとの誤認識回避のため?)と思ったのだが、4x4の16個の格子で**48bit**を表現できるらしいので、1格子あたり3bit表現できることになる。とすると、「上下左右4情報」と「斜め4情報」ではそれぞれ2bitしか表現できないのでこれでは足りない。ということは恐らく、「上下左右と斜め4か所の合計8情報」から3bitを表現できるものだろうと推測した。

#画像を解析してみる
ほぼ答えのようなヒントを得たので撮影した画像を実際に解析してみよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469946/f910cfdc-1051-fbf7-9c87-ee89215fe50e.png)
説明には4x4となっていたが、実際に解析してみると3x3の繰り返しになっているようだ。9個の格子なので27bitのデータが表現出来ると考えて良いだろう。赤い線でブロック、黄色い線で格子、青い線で情報ドットの基準線を引いてみたら、ドットの位置は確かに明確に8ポジションの内のどれなのかが判別出来るようになっていた。本当によくできているなあと感心した。
ちなみに解析に用いたソフトウェアは「Excel」である。Excelは万能だなあ。

#今後の見通し
当初の予定としては、「くもんからテキストをもらっていない箇所のコードを自作してテキストがなくても使える状態を作る」のが目的だったのだが、ちょっと難しい気がしている。というのも、最初の想定では、「読み取ったコードから該当番号の音声ファイルを再生しているだけ」で「音声ファイルはSDカードに入ってる」と思いこんでいたのだが、いざSDカードスロットを開けてみたら空っぽだったのだ。つまり、この音声データはシステム本体側のFlashに書き込まれていると考えられる。そこまでのハックに時間を費やすつもりはない。
また、仕組みが分かったら自前でSDカードに音声ファイルを入れて、**好き勝手な音声を鳴らせるように改造したい**という狙いがあったのだが、なんとこの機能は公式がそのまんま誰でもオリジナルの音声を鳴らせるツールセットを販売しているのだった。

[DSP Sound Linker版(G-Speak+ドットシールセット+Sound Linker)](https://www.tiotoss.jp/products/detail.php?product_id=2880)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469946/800590be-7e9a-0e82-ecff-5dfb260d49cf.png)

公式がちゃんとしたツールを公開（販売）して「オリジナル作りたいときはこれを使って」と言っているものがあるのに、ハックして自前で作ったりましてやそれを公開するというのは俺倫(俺的倫理規定)に反することになるので、あまり深追いしないことにしようと思ったのだ。

ということで次のステップは、「音声マーク」を自宅のプリンタで出力して再生出来るかどうか、並行してカメラで取り込んだ音声マーク画像をリアルタイムにコード変換する画像処理アルゴリズムの作成を考えてみたいと思う。

長くなってきたし疲れたので今日はここまで。
KotlinのSAM変換とは

#SAM(Single Abstract Method)変換

KotlinのSAM変換はSAMを定義したinterfaceを、ラムダ式に置き換えることです。
（javaで記述しているInterfaceしかSAM変換出来ません。）

SAM(Single Abstract Method)→メソッドが一つしかない抽象クラス


###代表的な`setOnClickListener`での例

```
//SAM変換なし 
AAAButton.setOnClickListener( object: View.OnClickListener{
 override fun onClick(view: View?): Unit {
   Log.v("ログ出力")
 }
})

//第１段階省略
//ラムダ化 'object: View.OnClickListener'を省略して無名関数へ
AAAButton.setOnClickListener( { view ->
 Log.v("ログ出力")
})

//第2段階省略
//引数が一つであれば省略できて、処理部分で必要ならitとして使用できるため'view'を省略
AAAButton.setOnClickListener({ Log.v("ログ出力") })

//第3段階省略
//メソッド(ここではsetOnClickListener)の最後の引数がラムダ式なら、{}部分を後ろに書ける
AAAButton.setOnClickListener(){ Log.v("ログ出力") }

//第4段階省略
//その状態で()内に引数が無ければ、つまりメソッドの引数がラムダ式だけなら()を省略できる
AAAButton.setOnClickListener{ Log.v("ログ出力") }

//Tips
//onClickを行うラムダ関数に２つ以上引数がある場合
AAAButton.setOnClickListener{ 引数１,引数２ => Log.v("ログ出力") }

```

###Tips
SAM(Single Abstract Method)→メソッドが一つしかない抽象クラス
↓OnclickListenerはメソッドが一つのインターフェースでした。

<img width="527" alt="スクリーンショット 2020-01-09 20.22.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226096/a97050fe-f51f-bf5e-5586-d6f2ca6311f0.png">


###参考
http://code.hildsoft.com/entry/2018/06/24/084325
https://blog.satotaichi.info/mystery_of_sam_type_conversion/
git initの取り消し方

```git init```で新規リポジトリを初期化するディレクトリを間違えてしまって、```git init```を取り消せないかと思って調べてみました。

解決するには当たり前ですがバージョン管理をしている```.gitディレクトリ```を削除すればOKです。

 ```shell
# git initをしたディレクトリで行う
$ rm -rf .git
```
上記のコマンドで見事```git init```が無かったことになりました！
簡単でしたね！
React NativeでiOSアプリを環境ごとに共存させる

# 背景・動機

業務でReact Nativeを使ったアプリを開発しています。
実機でアプリをテストする際に、毎回環境を切り替えてビルドする手間がかかっていました。
環境ごとに別名のアプリをビルドし実機にインストールできるようにしたので、備忘録も兼ねて投稿します。

# 概要

アプリからバックエンドのAPIサーバや、WebViewを使ってWebサーバへアクセスしており、バックエンドのサーバには、Development、Staging、Productionの3つの環境があります。

今回は、アプリもバックエンドのサーバと同様にStaging環境を追加し、Debug、Staging、Releaseでそれぞれ別名のアプリをビルドし実機にインストールします。

以下のような状態を目指します。

![iPhone.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127338/7817b21c-4566-fa3e-ad1e-faf985e40adc.png)

# 1. アプリのConfigurationにStagingを追加

デフォルトの状態ではアプリにはDebugとReleaseの2種類の設定しか用意されていませんので、Stagingの設定を追加します。

- Xcodeを開き、PROJECT > Info > Configurationsの「+」をクリック。
- Duplicate "Release" Configurationを選択し、Stagingと入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127338/156d61e7-f3e3-7e8e-6e28-4d786fa79e32.png)

# 2. Reactの各ライブラリがReleaseビルドを参照するようにPathを追加

ConfigurationにStagingを追加するだけではビルドに失敗してしまいます。
Reactをはじめとする外部のライブラリも、Debug、Releaseの2種類の設定しか対応していないためです。
今回は外部のライブラリはReleaseを参照するようにPATHを追加します。

## 2-1. Header Search PathsにPATHを追加

- TARGETS > アプリ名 > Build Settings > Search Paths > Header Search Pathsを開く。
- Stagingの値に`$(BUILD_DIR)/Release-$(PLATFORM_NAME)/include`をnon-recursiveで追加。
- 上記と同様の修正を`アプリ名Tests`にも行う。

<img width="865" alt="スクリーンショット 2020-01-10 0.41.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127338/c9119e85-bb1e-b573-1db0-eebeb1562bef.png">

## 2-1. Library Search PathsにPATHを追加

- Header Search Pathsのすぐ下にあるLibrary Search Pathsを開く。
- Stagingの値に`$(BUILD_DIR)/Release-$(PLATFORM_NAME)`をrecursiveで追加。
- 上記と同様の修正を`アプリ名Tests`にも行う。

<img width="832" alt="スクリーンショット 2020-01-10 0.42.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127338/aacf4fe5-1877-011b-c3f2-54f5b33deca0.png">

同様の修正をTARGETS > アプリ名Testsにも行います。

# 3. 環境ごとにアプリ名とバンドル名を変更する

同一端末にアプリを共存させるためには、バンドル名が異なっている必要があります。
アプリ名も環境ごとに変更した方が、混乱せずに済むと思いますので、修正します。

## 3-1. ユーザー定義変数を設定する

- TARGETS > アプリ名 > Build Settingsの「+」をクリック。
- Add User-Defined Settingをクリック。
- `BUNDLE_IDENTIFIER_SUFFIX`と`DISPLAY_NAME_PREFIX`を追加（名前は任意で構いません）。
- 各Configurationごとに、以下のキャプチャ画像のように設定します。

<img width="611" alt="スクリーンショット 2020-01-10 0.56.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127338/a30cce2b-f1cf-25bb-f917-2f9200d00cd5.png">

## 3-2. バンドル名、アプリ名にユーザー定義変数を追加

- TARGETS > アプリ名 > Info > Custom iOS Target Propertiesを開く。
- Bundle identifierの値を`$(PRODUCT_BUNDLE_IDENTIFIER)$(BUNDLE_IDENTIFIER_SUFFIX)`に設定する。
- Bundle display nameを`$(DISPLAY_NAME_PREFIX)アプリ名`に設定する。

<img width="627" alt="スクリーンショット 2020-01-10 1.05.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127338/5c2b1234-83c3-9a3b-a343-67c65594f29f.png">

# 4. 端末にインストールする

- macにiPhoneを接続しアプリをビルドします。
- Edit Scheme... > Build ConfigurationにStagingが増えていますので、適宜変更してビルドしてください。
- Debugビルドを実行するとアプリ名にDevが追加されたものが、Stagingビルドを実行するとStgが追加されたものがインストールされます。
- Releaseビルドは今までと同じように、アプリ名に何も追加されずインストールできます。
Macで音声ファイルを指定した速度で再生する方法 (速度設定自由)

ターミナルを使える場合は最初から入っている`afplay`コマンド、使えない場合は Chrome の拡張機能 Video Speed Controller をインストールすることで音声ファイルを指定した速度で再生することができます。

# 1. Afplay コマンド (速度設定無制限)

1. アプリケーションから「ターミナル」を起動
2. 以下のコマンドを入力してEnter (`audio.mp3`の部分は音声ファイルをドラッグ)

`-r` の後の数字で速度を指定します。

```shell
afplay audio.mp3 -r 2
```

# 2. Video Speed Controller (0.07〜16倍速)

以下の拡張機能をChromeにインストールし、設定を行います。
https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk?hl=ja

1. `chrome://extensions` へアクセス
2. Video Speed Controller の「詳細」をクリック
3. 「ファイルの URL へのアクセスを許可する」にチェック

再生するときはChromeのウインドウに音声フィアルをドラッグします。
赤枠のところにマウスオーバーするとコントロールが表示されます。拡張機能の設定画面から設定するとキーボード操作も可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155587/0d0344ad-fb48-ae5f-f4b2-9dfc6594087d.png)
pythonでムード値を求める(リケ恋)

#はじめに
リケ恋を読んでいてどうしてもムード値の計算プログラムを作りたい衝動に駆られたのでつくってみました.

ムード値とは理系が恋に落ちたので証明してみた。3巻に出てくるムードを数値化したものである.


#ムード値の定義式
(リケクマの理ア充用語解説コーナーより)


ムード値を以下のように定義する

```math
M = P_1 + P_2 + P_3 + P_4 + P_5\quad(-∞<M\leqq100)
```
・P<sub>1</sub>(美しさ指数)=x<sub>1</sub>(その場の美しさ,おしゃれさを表す点数平均)

```math
x_1=\frac{1}{n}\sum_{i=1}^{n}\frac{1}{5}a_i\quad(-∞<a_1\leqq100,nは評価者の人数)
```

・P<sub>2</sub>(第三者指数)
　　　こちらに注目する人間の数をx<sub>2</sub>とすると

```math
\begin{align}
&x_2=0　のとき　P_2=20\\
&x_2>0　のとき　P_2=-10000x_2　　となる.
\end{align}
```

・P<sub>3</sub>(照度指数)
　　　x<sub>3</sub>　=　その場の照度(ルクス)

```math
P_3 = \frac{1}{5}{104-2(\frac{x_3}{20}+\frac{20}{x_3})}
```

・P<sub>4</sub>(静けさ指数)
　　　その場の騒音値[db]をx<sub>4</sub>とすると

```math
\begin{align}
&0\leqq x_4 < 20　のとき　t=100\\
&20\leqq x_4 <70　のとき　t=100-2(x_4-20)\\
&70\leqq x_4　　　　のとき　P_4=-∞
\end{align}
```

・P<sub>5</sub>(見つめ合い指数)
　　　沈黙見つめ合い秒数をx<sub>5</sub>とすると

```math
\begin{align}
&0<x_5<30　のとき　S=\frac{100}{30}x_5\\
&30\leqq x_5 \leqq60　のとき　S=100\\
&60<x_5　　　　のとき　S = 100-5(x_5-60)
\end{align}
```

#プログラム

```python:ムード値.py
# M = P1+P2+P3+P4+P5 (-∞<M<=100)

# P1

# P1 = x1

n = int(input('評価者の人数:'))
m = 1
a = 0

for _ in range(n):
    ai = int(input(str(m) + '人目の評価:'))
    m += 1
    a = a + ai

x1 = (a / 5) / n

P1 = x1


# P2
x2 = int(input('こちらに注目する人間の数:'))

if x2 == 0:
    P2 = 20

else:
    P2 = -10000 * x2

# P3

x3 = float(input('その場の照度(lux):'))

P3 = (104 - 2 * (x3 / 20 + 20 / x3)) / 5

# P4

x4 = float(input('その場の騒音値[db]:'))

if 0 <= x4 < 20:
    t = 100
    M = None

elif 20 <= x4 < 70:
    t = 100 - 2 * (x4 - 20)
    M = None

else:
    M = '-∞'

if not M == '-∞':
    P4 = 30 - 1000 / t

else:
    pass

# P5

x5 = float(input('沈黙見つめ合い秒数:'))

if 0 < x5 < 30:
    S = 100 * x5 / 30

elif 30 <= x5 <= 60:
    S = 100

else:
    S = 100 - 5 * (x5 - 60)

P5 = S / 5

# M

if M == '-∞':
    pass

else:
    M = P1 + P2 + P3 + P4 + P5

print('ムード値=' + str(M) + 'md')
```

###追記

P<sub>1</sub>を求めるのは以下のプログラムのほうが美しい気がする

```python
# P1

#P1 = x1

n = int(input('評価者の人数:'))

a = []

for m in range(n):

    ai = int(input(str(m + 1) + '人目の評価:'))
    a.append(ai)

x1 = sum(a) / 5 / n

P1 = x1
```

#終わりに
リケ恋面白いのでぜひ読んでみてください.
アニメも1/10から始まるのでぜひ!!!
[未経験] ProgateのHTML＆CSSレッスン受けたからポートフォリオサイト作ってみた。

# 自己紹介<br></br>
- 文理系（？）の４年制大卒

- 新卒未経験でSES＋受託開発の中小企業に入社

- 入社後、３ヶ月間の社内研修を受講（C,Java,HTML,CSS,PostgreSQL,Linux..)

- 現在は大手保険会社のWindowsアプリ開発プロジェクト（C#.Net,SQLite使用）に参画中

- Web系に転職を検討中。。

# Progateについて
- Progateとは・・・
<br><br>
　HTML、CSS、Java、Ruby、SQL etc..様々なプログラミング言語をWebまたはスマホで学習できるオンラインプログラミング学習サービスです。
<br>
　➡︎　https://prog-8.com/
<br><br><br>
- 今回は『HTML＆CSS』の全７レッスンを受講した後、簡単に自作のポートフォリオサイトを作ってみました!



# ポートフォリオサイトについて

[![FireShot Capture 002 - Sakutomo Studio. - sakutomo07.github.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555241/a9a92ccd-4d37-e883-b7af-b3c13af62d05.png)](https://tomohisa07.github.io/sakutomo_portfolio_ver1.0./)

- シンプルなデザインで、内容も軽めのTopページのみ作成しました！
（Simpler is usually better...笑)
<br><br>
- HTML&CSSのみの実装ですので、コンタクトフォームやリンク、ボタンなどありますが、見た目だけになっています。
<br><br>
- ProgateのHTML＆CSSのレッスン受講〜制作完了までにかかった時間は約５０時間くらいです（ちょっと時間かかりすぎたかもです笑）
<br><br>
- 制作〜公開までに参考にさせていただいた文献、使用したソフトや開発環境は後述
<br><br>
- 制作したWebページはGitHubPageにて公開いたしました！

　➡︎ 　https://tomohisa07.github.io/sakutomo_portfolio_ver1.0./


#開発環境・使用ソフト・参考サイト
- **開発環境**<br>
　MacBookAir(macOS Catalina 10.15.2)<br><br>

- **使用ソフト**<br>
Visual Studio Code　➡︎　コーディングに使用<br>
GitHub Desktop　➡︎　ソースファイル、画像ファイルをGitHubにプッシュ（Upload）するために使用<br>
Numbers　➡︎　主にWebページのイメージを設計するために使用<br>　
- **参考サイト**<br></br>
① HTML&CSS学習
　[Progate](https://prog-8.com/)
　[MDN web docs](https://developer.mozilla.org/ja/)
　[qiAz web tech blog](https://q-az.net/fadein-open-only-css/)
<br>
② 画像データ取得
　[Font Awesome](https://fontawesome.com)
　[SVG PORN](https://svgporn.com)
　[pixaboy](https://pixabay.com/ja/images/search/pc/?pagi=2)
　[Online Logo Maker](https://www.designevo.com/logo-maker/)
<br>
③ GitHubについて
　[ferret](https://ferret-plus.com/8498)
　


# 制作開始〜完成までにやったこと

<dl>
 <dt>　1. 目標設定・計画</dt><br>
<dd>・目的の明確化　➡︎　ProgateのHTML&CSSのレッスンの復習&実践
　</dd>
　<dd>・目標の設定　➡︎　ポートフォリオサイトのTOPページ１枚の作成
　</dd>
　<dd>・設計　➡︎　他の方のポートフォリオサイトを参考にどんなデザインにするのか、サイトに入れる内容などを考える。
　</dd>
</dl>
<dl>
　<dt>　2. コーディング</dt><br>
<dd>・設計を基にProgateを復習しながらコーディングを進めていきました。
　</dd>
　<dd>・わからない＆Progateで学習した範囲外のことはググって調べながら進めていきました。
　</dd>
</dl>
<dl>
　<dt>　3. Webページの公開</dt><br>
<dd>・ローカルリポジトリ＆GitHubにリモートリポジトリを作成後、ソースファイル・画像ファイルなどをPush（Upload）してGitHubページに公開しました。
</dl>

# 所感
<dl>
　<dt>・良かった点</dt>
<br>
　<dd>1.　コーディングに入る前に目標設定や簡単な設計によって完成のイメージが固まっていたことで、</dd>
<dd>　割とスムーズに完成までコーディングすることができました。</dd>
<br>
　<dd>2.　コーディングで詰まった時など、どうすれば上手くいくか考えたり自分で試してみたりする時間が</dd>
<dd>　長くなりすぎないように意識し、わからないことはどんどんググっていち早く解決に辿り着けるようにできました。</dd>
<br>
　<dd>3.　Progateで学んだこと以外に、自分で調べて発見した新しい技術・知識</dd>
<dd>　（例：CSSだけでWebページをフェードインで表示させる）を取り入れたりして、楽しみながら制作することができました。</dd>
<br>
　<dt>・反省点</dt>
<br>
　<dd>1.　目標設定した際に、期限（納期）を定めていなかったことで、少しズルズルと制作をしていました。</dd>
<br>
 <dd>　➡︎　今後は制作期間・時間の目標設定を実施</dd>

　<dd>2.　まだまだHTML&CSSについての知識、コーディング経験の不足しているため、</dd>
<dd>　 ソースコードが雑であることが否めない・・</dd>
<br>
<dd>　➡︎　基礎がまだまだ身についていないので、MDN Web Docsなどを読んで知識をinputしつつ、継続的にコーディングしていきます。</dd>


</dl>


# 今後の目標


　・HTML&CSSだけでなく、JavaScriptやBootstrapなどを学んで、動的機能を持つWebサイトを作成する

　・Ruby,railsを学んでSNSサービス（twitter,instagram)などのコピーサイトを作成する



#  最後に

最後までご覧いただきありがとうございます。

宜しければ、こちらの記事やソースについて、ご指摘・アドバイス・感想など頂けると幸いです。

まだまだ未経験新卒新人のヒヨコですので、お手柔らかに、、笑

今後ともよろしくお願いいたします！！
DJI TelloでOMPLを用いた自律飛行ドローンのナビゲーション - 6.2. Turtlebot3 Navigationでmap_fileの代わりにSLAMを使用

DJI Tello等ドローンの自律飛行を実現するには、3D環境でナビゲーション経路を計画としてOMPL（Open Motion Planning Library）を試してみます。

# 目次
1. [OMPLのインストール](https://qiita.com/k-koh/items/4f7e441d1225e6580f82)
2. [OMPLの基礎](https://qiita.com/k-koh/items/9933cd29599c859cac45)
3. [OMPL.appの入門](https://qiita.com/k-koh/items/fe1f05313045ed729c8b)
4. [OMPLの使用](https://qiita.com/k-koh/items/3a8b372537aa29e17863)
5. DJI Telloの使用
    1. [DJI Telloのフロントカメラのcamera_calibration](https://qiita.com/k-koh/items/094631646931ea5bc2bb)
    2. [Visual SLAM ORB_SLAM2 用のカメラキャリブレーションYamlファイルの作成](https://qiita.com/k-koh/items/b524fc175198e701bdff)
    3. [DJI Telloのカメラ でVisual-SLAMのORB-SLAM2 を動かしてみた](https://qiita.com/k-koh/items/98b5f079f784b22dcd01)
6. navigationスタックの使い方
    1. [Turtlebot3 NavigationをGazebo Simulationで動かしてみた](https://qiita.com/k-koh/items/1a4fbc175ca37be6206b)
    2. [Turtlebot3 Navigationでmap_fileの代わりにSLAMを使用](https://qiita.com/k-koh/items/1ec9097e4afedd0b43ca)　← いまココ
    3. [ARdroneのシミュレーターをGazeboで動かす](https://qiita.com/k-koh/items/feccbaee7c11c43c3ab4)
    4. [AirSimのシミュレーターを動かす](https://qiita.com/k-koh/items/52122fb5e96336ac8d33)
    5. [octomapのインストール](https://qiita.com/k-koh/items/c9a3a87e043934456842)
    6. [単眼カメラでORB_SLAM2から3D point clouodの生成](https://qiita.com/k-koh/items/1e069c9dda43b85e2fa0)
    7. [point_cloud2から3D octomapの生成](https://qiita.com/k-koh/items/01e34f353487eb8a6e26)
7. OMPLで3D 経路計画
    1. [状態空間環境のセットアップ](https://qiita.com/k-koh/items/e19ac08bb0a16975081e)

## 動作環境
- Ubuntu 18.04
- ROS Melodic
- Tello EDU

# Turtlebot3 Navigationでmap_fileの代わりにSLAMを使用

## map_fileの代わりにSLAMを使用
- turtlebot3_navigation.launchでmap_serverをコメントアウト

```xml
  <!-- Map server -->
  <!--  <node pkg="map_server" name="map_server" type="map_server" args="$(arg map_file)"/>-->
```
- turtlebot3_navigation.launchにturtlebot3_slamを追加

```xml
  <!-- Map server -->
  <!--  <node pkg="map_server" name="map_server" type="map_server" args="$(arg map_file)"/>-->

  <arg name="slam_methods" default="gmapping" doc="slam type [gmapping, cartographer, hector, karto, frontier_exploration]"/>
  <arg name="configuration_basename" default="turtlebot3_lds_2d.lua"/>
  <!-- SLAM: Gmapping, Cartographer, Hector, Karto, Frontier_exploration, RTAB-Map -->
  <include file="$(find turtlebot3_slam)/launch/turtlebot3_$(arg slam_methods).launch">
    <arg name="model" value="$(arg model)"/>
    <arg name="configuration_basename" value="$(arg configuration_basename)"/>
  </include>
```

## NavigationでTurtlebot3でを動かす
```console
$ roslaunch turtlebot3_gazebo turtlebot3_world.launch
$ roslaunch turtlebot3_navigation turtlebot3_navigation.launch
```
![turtlebot3_navigation_slam-2020-01-10_00.33.36.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/f6ca7b4e-59a9-6745-735d-bc0289d0f539.gif)



Next: 6.3. [ARdroneのシミュレーターをGazeboで動かす](https://qiita.com/k-koh/items/feccbaee7c11c43c3ab4)

Prev: 6.1. [Turtlebot3 NavigationをGazebo Simulationで動かしてみた](https://qiita.com/k-koh/items/1a4fbc175ca37be6206b)
Visual Studio Codeのちょっと便利なショートカットキー


#現在開いているフォルダ内のファイルを指定して開く
Command + P

#ファイル横断検索（Grep)
Command + Shift + F

#置換
Command + Option + F

#キリのいいところまで選択状態にする
Shift + Option + <- or ->

#コード整形
Shift + Option(alt) + F
プルリクをrevert(打ち消す)してみた！

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

#初めてのGit revert
 先輩エンジニアから「このプルリクrevertするのお願い〜」と言われ

あれ、そういえばrevertってどうするんだっけと思い実際に行ったフローをまとめてみました！

###[Pull Request を打ち消す](https://help.github.com/ja/github/collaborating-with-issues-and-pull-requests/reverting-a-pull-request/)

Github公式が分かりやすく説明してくれております。

>Pull Request は上流ブランチへのマージ後に元に戻すことができます。
GitHub で Pull Request を打ち消すと、マージされた元の Pull Request からマージ コミットを 1 回元に戻した、新しい Pull Request が作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394657/25552cc5-89f1-013f-1f58-d0696ac6f861.png)


このHelpの手順に従いPull Request の下部周辺で、[Revert] をクリックします。

ここでPull Requestが打ち消す為のPull Requestを作成しそれをマージしたら見事、プルリクを打ち消すことができました！

簡単簡単！

#参考記事
・[Pull Request を打ち消す](https://help.github.com/ja/github/collaborating-with-issues-and-pull-requests/reverting-a-pull-request/)
・[Revertされたプルリクのブランチ上での挙動の再現](https://qiita.com/motoakim/items/a726ec193e3dbc2dc8a0/)
テーブルの結合ができない。。Mysql2::Error: Column 'updated_at' in order clause is ambiguous

# はじめに
Railsでeager_loadしようとしたときに、下記のようなエラーが出て解消に時間がかかったのでまとめました。

```
Mysql2::Error: Column 'updated_at' in order clause is ambiguous
```

# やりたいこと
user の updated_at を指定した期間のものだけ抽出するために、テーブルの結合をしたい。

# なぜeager_loadできないのか

これを実行すると、

```ruby:user.rb
User.where("updated_at >= '2020/01/01' and updated_at <= '2020/01/31'").eager_load(:post)
```

MySQLのエラーが出る。

```
Mysql2::Error: Column 'updated_at' in order clause is ambiguous
```

なぜか。

updated_at は User にも Post にも存在しているため、どちらの updated_at なのか判別がつかない。

そこで、incidents.updated_at とすることで、User の updated_at なのか Post の updated_at なのかを明確化する。

下のように書き換えることで、エラーを解消することができました。

```ruby:user.rb
# incidents.updated_at とすることで、user
User.where("incidents.updated_at >= '2020/01/01' and incidents.updated_at <= '2020/01/31'").eager_load(:post)
```


# まとめ
updated_at は、どのテーブルでも持っている値となるので、こういう値でjoinするときは気をつけるようにします。

裏話としては、railsでデバックをしていていたのですが、eager_loadを実行したらSQL文しか表示されずエラーが表示されていませんでした。
.to_sで文字列化することで、上記のMysql2::Errorが出てなんとかデバックすることができました。
エラーが隠れてる？？自分の確認方法が悪かっただけかもしれませんが、、
時間はかかりましたが、解決できてよかったです。


# 参考
* includes,joins,eager_load,preloadの違いを噛み砕いて説明する
    * https://qiita.com/ostk0069/items/23beb870adf785506be2
* Mysql2::Error: Column 'created_at' in order clause is ambiguousの対策
    * https://qiita.com/h1kita/items/3b6d5ef27d41a047d078

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/
Flexible Height Gallery (高さ可変ギャラリー)のススメ

# はじめに

Power Appsで普通にリストアプリを作成した際、多くのApp makerが悩むのが、「どの情報を一覧に表示するか」かと思います。
表示内容が多いと、データの特定は容易になりますが、一覧性が下がります。一方で一覧性を確保するために情報を減らすと、誤選択が増えます。(ユーザーはアイテムをクリックし、詳細画面で内容を確認し、違ったらもどってまた探す)
このような状況を緩和する一つのデザインとしてFlexible Height Galleryの利用を紹介します。

# Flexible Height Gallery?
Galleryコントロールを追加する際に、高さ可変ギャラリーという選択肢が表示されます。
このコントロールは、各行に含まれるコントロールの高さの合計、正確には**一番下に配置された、表示対象のコントロールのY+Height**に応じて、行全体の高さが決まるというものです。
なお、非表示のコントロールは、高さには寄与しません。

このコントロールの詳細は [Docs](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/gallery-dynamic-sizing)をご覧ください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/46ed2a8b-f2c2-c3c4-14aa-daa3129e3cf4.png)


# 行内の表示の切り替え

ここからが今回の本題です。
一覧としての表示数を保ちながら、もう少し詳細な情報を、画面遷移なく表示する一つの方法として、高さ可変ギャラリーを利用してみます。

ポイントは「**表示対象**のコントロールのY+Heightの最大」です。

- 詳細情報を行の中に表示すると、全体が間延びして1ページの件数が少なくなる
- 一覧だけだと表示できる情報に限りがある

この2つの両立を、詳細情報の表示切替で実現します。

最も簡単にはチェックボックスのOn/Offで表示状態を変更できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/8da1285e-707b-3163-7ff4-49b877a50b9e.png)


チェックボックスのOn/Off CheckboxN.Value を詳細情報部分のVisibleプロパティにそのまま適用しましょう。
すると、チェックされているときは詳細が表示されて、チェックをはずしたら詳細が隠れる という挙動を実現できます。

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/ded0091e-cd8b-f226-49a0-c5a3f408242e.gif)



これだけで、一覧の中で開閉があるようなコントロールが実現できました。
あとはチェックボックスのプロパティにあるすべてのColor型の変数をTransparentに変更してあげると、下記サンプルのような見た目になります。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">完成しました！<br>Flexible height Galleryを利用した、Airline status board app✈️ with <a href="https://twitter.com/hashtag/PowerApps?src=hash&amp;ref_src=twsrc%5Etfw">#PowerApps</a><a href="https://twitter.com/hashtag/PowerListChallenge?src=hash&amp;ref_src=twsrc%5Etfw">#PowerListChallenge</a> <a href="https://t.co/SyMqGcVkbK">pic.twitter.com/SyMqGcVkbK</a></p>&mdash; Hiro (@mofumofu_dance) <a href="https://twitter.com/mofumofu_dance/status/1214914126192865283?ref_src=twsrc%5Etfw">January 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# おまけ
詳細情報の表示にはContainerコントロールを利用するのが便利です。このContainerコントロールは以前はEnhanced Groupコントロールと呼ばれていたもので、基本的には複数のコントロールのグループ化です。
便利なのは、Container内に配置したコントロールは、Containerの表示切替だけで、表示/非表示されるところです。チェックボックスで切替るだけで、すべてのラベルに表示/非表示の設定を行う必要はありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/d2b04ed6-5d27-33a3-b492-e1fe9ce2464e.png)

Container controlはまだプレビュー機能ですので、本番稼働するようなアプリではGA後に利用されることをお薦めします。

このようにありもののコントロールをうまく活用することで、画面遷移を減らしたり、ユーザーに見やすいアプリを作ることができますので、ぜひトライしてみてください！

# 追記
@hrfmjp 太田さんからコメントいただいたので、詳細部分を動的に変更した場合の挙動も載せておきます。
この場合はSin型で高さを時間に応じて変えていますが、ギャラリーの行の高さがそれに応答している様子がわかります。
![FlexHeight.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/f1a07020-ff94-ea34-9143-c9f1efcd1152.gif)
[Herokuエラー]Error: Missing required flagが出た

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

#Error: Missing required flag

heroku configをするとエラーが発生

```
$ heroku config
 ›   Error: Missing required flag:
 ›     -a, --app APP  app to run command against
 ›   See more help with --help
```

最初、エラー文を読むだけでは原因がわからず
この記事が丁寧に説明してくれたおかげで原因が判明しました。

なんという凡ミス
>初期設定で、ターミナルから $ heroku login したあとに、Herokuのサーバとgitリポジトリを紐付ける必要がある。Herokuのサーバーにリポジトリを紐付けていないためエラーが表示される。

[Herokuで「Error: Missing required flag」が出る場合](https://blog.tanebox.com/archives/630//)

やはり、リポジトリ一覧にherokuが表示されてない

```
$  git remote -v
origin  git@github.com:example.git (fetch)
origin  git@github.com:example.git (push)
```

以下のherokuに紐付けるコマンドを実行したらOK

```
$  heroku git:remote -a アプリ名
```

また、以下のコマンドで自分のしてしたアプリが紐ずいているか確認できる。

```
$  heroku config | grep HEROKU_APP_NAME
HEROKU_APP_NAME: アプリ名
```

#参考記事
・[Herokuでアプリ名を取得する](https://docs.komagata.org/5331/)
・[HerokuにRailsアプリをデプロイする手順](https://qiita.com/tamano/items/96c92efa34cb2922c01c/)
・[macでheroku deploy](https://qiita.com/tetsu-sh/items/f6fcbb6b85df04e5cf3f/)
・[Heroku CLIで「 ▸ Couldn't find that app.」というエラーが出てきた時の対処メモ](https://qiita.com/at-946/items/ce4db1d80429d6984cfc//)
・[Herokuを使いこなすのに必要な術](https://qiita.com/fuwamaki/items/f7752eb7a2727660239f/)
開発環境の１つであるVSCodeの開発環境についてチラ見してみる

# リーマンサットについて
趣味で宇宙開発を行う団体「[リーマンサット・プロジェクト](https://www.rymansat.com)」がお送りする新春アドベントカレンダーです。インデックスは[こちら](https://qiita.com/rsp-dgkz/items/497225739b88c817a90c)

リーマンサット・プロジェクトは「普通の人が集まって宇宙開発しよう」を合言葉に活動をしている民間団体です。
他では経験できない「宇宙開発プロジェクト」に誰もが携わることができます。
興味を持たれた方は [https://www.rymansat.com/join](https://www.rymansat.com/join) からお気軽にどうぞ。


# 概要
機械学習周りやWEBサービスを担当してますAkira Sugawaraです。

開発環境、、、エンジニアなら誰しも気になりますよね？
リーマンサットでは趣味開発なので、特に大きな制限を設けずに自由に開発しています。
開発エディタはVSCodeやIntelliJ、ソースコード・タスク管理はBacklog、といった感じです。

# VSCodeの開発環境
ふと、VSCodeってどう作られてるんだろうか、どんな開発環境なんだろうか、と考えてしまいました。
思いを馳せると夜も眠れなくなってしまいます。

開発環境の一部であるエディタを開発している開発環境は、さぞこだわりがあるんだろう…。

ということで、本記事ではVSCodeの開発環境を調べてみます。

## VSCodeのツールチェーン

2019/12/30時点での[masterブランチ](https://github.com/microsoft/vscode)をcloneして確認しています。。

| type | details |
| --- | --- |
| Language | typescript,javascript|
| Application Framework | Electron |
| Linter | ESLint, TSLint |
| Formatter | prettier |
| TaskRunner | NPM, gulp |
| TestFramework | mocha |
| CI/CD | [Azure Pipeline](https://azure.microsoft.com/ja-jp/services/devops/pipelines/)|

CI/CDに関しては、./build/azure-pipelinesのフォルダの下にOS毎のビルド定義ファイルが格納されています。
さすがにMicrosoftのOSSということなので、Azureになってるんですね。

## 使用してるVSCodeExtension

もちろんVSCodeの開発もVSCodeですよね！
ワークスペースのRecommendリストは下記です。

1. "ms-vscode.vscode-typescript-tslint-plugin"

	[eslintがtypescriptサポートを強化する](https://qiita.com/mysticatea/items/aaf677928e965abe093d)という発表もありましたが、フロントエンドによくあるESLint/TSLint併用構成のようです

2. "dbaeumer.vscode-eslint"

	言わずもしれたESLintのvscodeプラグインです。

3. "EditorConfig.EditorConfig"

	恥ずかしながら使用経験がありませんでした。
	複数人で作業するときのEditorのConfigurationToolで、言語非依存・エディター非依存で規約の準拠が可能になります。
	Prettierと役割重なってるんじゃない？と思いましたが、[この記事](https://qiita.com/yousan/items/fb7b0a18753cddd15dd9)が違いがわかりやすかったです。

4. "msjsdiag.debugger-for-chrome"

	Chromeでjavascriptをデバックするための連携ツールです。

# まとめ
さらーっと、VSCodeの開発環境を見ていきました。
何かしらのプロジェクトで新しく開発を始める場合、著名なOSSの環境を見てみるのは参考になるかもしれませんね。

次の記事は、[@KingBritain](https://qiita.com/KingBritain)の「航空機の流体力学(2次元翼の流体解析)」になります。

# 参考
[GitHub](https://github.com/microsoft/vscode)
[How to build](https://github.com/Microsoft/vscode/wiki/How-to-Contribute#build-and-run)
JavaScript でメタディスクリプションを表示する

JavaScript でメタディスクリプションを表示する例を挙げる。

## 例

### コンソールに表示

`console.log`メソッドを利用して Web コンソールに表示する。

```js
let desc = document.querySelector('meta[name="description"]').content;
console.log(desc);
```

### ダイアログで表示

`window.prompt`メソッドを利用してダイアログで表示する。

```js
let desc = document.querySelector('meta[name="description"]').content;
window.prompt('meta description', desc);
```
io.CopyにはなるべくWriteTo関数を渡してあげた方が良さそう


[io.Readerのファイルタイプを判定する](https://qiita.com/knqyf263/items/6dfc891c6d3c6b94f895) を拝見してちょっと気になったので調べました。

`io.MultiReader`では[Write関数](https://golang.org/src/io/multi.go?s=1440:1500#L58)しか実装されておらず、 [WriteTo(w Writer) (n int64, err error)関数](https://golang.org/pkg/io/#WriterTo)が存在しません。
そのため、みんな大好き[io.Copy](https://golang.org/pkg/io/#Copy)で[積極利用](https://golang.org/src/io/io.go?s=13615:13679#L379)される`WriteTo(w Writer) (n int64, err error)`関数が働かず少し残念な気持ちがありました。

もしかすると気持ちだけの問題かもしれないのでBenchmarkしてみました。

`bufio.Reader`には [WriteTo](https://golang.org/pkg/bufio/#Reader.WriteTo)が実装されいたので、こちらを元の`Reader`に被せてる事にしました。そうすると都合よくまさにリード位置を進めず先頭から指定バイト数だけ読む[bufio.Peek](https://golang.org/pkg/bufio/#Reader.Peek)関数が用意されていたのでそちらを利用しました。
元の[isGzip関数](https://qiita.com/knqyf263/items/6dfc891c6d3c6b94f895#実装)を書き直したのが以下になります。

```go
var head = []byte{0x1F, 0x8B, 0x8}

func isGzip2(input io.Reader) (io.Reader, bool, error) {
	r := bufio.NewReader(input)
	buf, err := r.Peek(len(head))
	if err != nil {
		return nil, false, err
	}
	return r, bytes.Equal(buf, head), nil
}

```
コード全文:
https://github.com/masahide/golang-peek-test/blob/master/peek_test.go

そして、このコードをGithub ActionsでBenchmark実行した結果が以下です。

```bash
2020-01-09T13:28:03.6328460Z goos: linux
2020-01-09T13:28:03.6328821Z goarch: amd64
2020-01-09T13:28:04.8143891Z BenchmarkIsGzip-2    	     100	  11298715 ns/op	     248 B/op	       5 allocs/op
2020-01-09T13:28:05.9750862Z BenchmarkIsGzip2-2   	  918237	      1158 ns/op	    4240 B/op	       3 allocs/op
2020-01-09T13:28:05.9767115Z PASS
2020-01-09T13:28:05.9780877Z ok  	_/home/runner/work/golang-peek-test/golang-peek-test	2.475s
```
[テスト結果全文はこちら](https://github.com/masahide/golang-peek-test/commit/8c4edfb6e3277ca3548ab8ff6cfe647a66171272/checks?check_suite_id=392063663)

入力が`bytes.NewBuffer`で、出力先も`ioutil.Discard`なのでおそらく極端な例にはなってると思うのでかなり差が出てしまってるのだと思うのですが、少なからず`io.Copy`を利用する場合は`WriteTo`を意識しておく方が良さそうです。

ちなみに、標準ライブラリで[WriteToの実装があるパッケージ](https://golang.org/search?q=WriteTo)はここで一覧されるので眺めておくと良さそう。
([ReadFrom](https://golang.org/search?q=ReadFrom)もおそらくは同様だと思われるので一緒にこちらも)
Elmで書いた楽譜(音つき)サイト

# 1.はじめに
ソースとデモはこちら。[https://ellie-app.com/7JpgqVnGk5Va1]  
「ランダム」ボタンで楽譜を選んで、音を鳴らすためのコントロールを押すと、楽譜に対応するMIDIが鳴ります。

# 2.使い方
童謡がたくさん入っていますので、音に合わせてドレミで歌うことによって、楽譜が読めるようになるし、音程の練習になります。
また、習い始めの楽器などあればたくさんの曲の練習をすることができます。

# 3.プログラムについて
楽譜はlilypondで作りました。1曲入れるのに15分ほどですが、200曲ほどありますので、それなりに時間がかかっています。このプログラムのためでなく、楽譜の勉強用に過去に作ったものを使いました。自動でpdfとmidiができますので、ubuntu上のツールを使ってpdfをトリミングしてjpegに変換しました。midiもubuntu上のツールを使って、midi -> wav -> mp3にしました。jpegとmp3をgoogle driveでElmからdirect linkしています。

音はElm(JavaScript)のaudioタグを使っています。midiは鳴りませんが、wav, mp3, base64を鳴らすことができます。base64に変換してプログラムに埋め込むのをやりたかったけど、今回はmp3で鳴らしています。

# 4.感想
楽譜を見ながらドレミで歌いたい、というニーズはあると思うのですが、カラオケソフトを含めてそういうアプリはないと思う。見つけてないだけかもしれませんが。
今回はランダムボタンだけですが、曲の検索とか、キーの上下とか、スピードコントロールとかできると嬉しいけどまだやりかたが思いつきません。

# 5.追記
曲の検索ですが、例えば、「花は咲く」の楽譜が欲しいとか、あるかないか知りたい場合、左側のソースを全部コピー(C-a, C-c)して、自分のエディターにペースト(C-v)して、「花は咲く」を検索すると

```Elm
 , { jpgUrl = "https://drive.google.com/uc?id=1rHwKYFxld4fdO0tfBcfJRSjQgznWBxil"
 , mp3Url = "https://drive.google.com/uc?id=1lW7x2No_cMDxZgZz8eoh03SZ7NvBF2Au"
, title = "花は咲く(まっしろなゆきみちにはるかぜかおる)"
, filename = "hanawasaku_crop.pdf"
 }
```
とかの部分のjpgUrlが楽譜のjpeg、mp3Urlが音のmp3です。

以上
Hexo で layout を使わないページを追加する

## 概要
[Hexo](https://hexo.io/) をつかってWEBサイトを作っている人向けの話です。

以前に [こちらの記事](https://qiita.com/tommy_aka_jps/items/565143f5719ed862364b#%E5%9B%BA%E5%AE%9A%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E8%BF%BD%E5%8A%A0) でも少し触れましたが、Hexo は source ディレクトリの中身を元にデプロイ時にhtmlを生成し、ドキュメントルート直下へ設置されます。

例えば下記のようなファイルを作っておきます。(マークダウンではなく、htmlファイルでもOKです。)

```md:source/sample.md
sample.md の中身です。
```

すると例えば私のサイトでは `https://{domain}/sample.html` というURLで下記のようなページが閲覧できるようになります。

<img width="314" alt="スクリーンショット 2020-01-09 17.48.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70638/3834535b-459d-f57f-2cf0-61ad3f5c0ec0.png">

しかし、基本的には自分のサイトに設定している theme の layout が適用され、前述のキャプチャのように共通のヘッダー、フッター等が適用された状態になります。

もし layout を一切使わない完全にオリジナルのhtmlを作りたいときはどうすればよいか、というのが今日の話です。


## 結論

フロントマターに `layout: false` を書いておくと、文字通り layout が適用されなくなります。先ほどの `sample.md` を以下のようにしてみましょう。

```md:sample.md(html)
---
layout: false
---
<html>
<head>
  <meta charset="UTF-8"><!--文字化け防止-->
</head>
<body>
  <section style="background-color:#CCC;padding: 1em;">
    <h1>タイトル</h1>
    <p style="font-weight: bold;">sample.mdの中身です。</p>
  <section>
</body>
</html>
```

すると以下のように sample.md に記載した内容だけがページに反映されます。

<img width="311" alt="スクリーンショット 2020-01-09 18.06.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70638/c79f0030-c109-2960-6c54-ae71d9009fce.png">

用途は少ないかもしれませんが、期間限定の特殊ページを作りたいときなど、使えそうな場面はなくはないかなーと思いました。

もし機会がありましたらお試しください。

## 参考
[Templates | Hexo](https://hexo.io/docs/templates#Layouts)
> You can specify additional layouts in the front-matter or set it to false to disable it.
PsychoPyで回数制限のある画像呈示プログラムを実行する

こんにちは。python初心者です。

今大学で、imagesという名前のフォルダ内のPNG形式のファイルを読み込み、それをシャッフルしてランダム表示させる呈示プログラムを作っているのですが、その呈示された画像を呈示後に別フォルダ（image=usedという名前のフォルダ）に移動させるようなものに改造したいです。
下記コードに、どのようなコードを追加したらいいでしょうか？
また、回数制限もつけれるようにしたいです。
psychopyを使って実行します。


from psychopy import visual, core, event 
import random, pathlib
import csv
import glob

if __name__ == '__main__':

stimuli_list = glob.glob('images/*.PNG')

for filename in stimuli_list:
with open(filename, 'r') as input:
random.shuffle(stimuli_list); # 順番をランダムにする
print(stimuli_list); # ランダムにした順番を表示

current_folder = pathlib.Path(__file__).parent # 実行しているプログラムが入っているフォルダを特定
new_filename = "results_presented_stimuli.csv" # 新しいファイル名をnew_filenameという名前でプログラム内で使用
new_filepath = current_folder/new_filename # 新しいファイルのパスを指定
datafile = open(new_filepath, mode = 'w') # 新しいファイルを作成

win = visual.Window()
fixation_stim = visual.TextStim(win, "+") # 注視点
no_trials = 0 # no_trialsの初期化

for stim in stimuli_list:
fixation_stim.draw() # 注視点の描画
win.flip() # 注視点の表示
resp = event.waitKeys(keyList = ['space','q','return']) #スペースキーの入力待ち
if resp == ['q']: # qが入力されたら終了する
break
stimulus = visual.ImageStim(win, stim) # 画像刺激の準備
stimulus.draw() # 画像刺激の描画
win.flip() # 画像刺激の表示
core.wait(1.5)
no_trials = no_trials + 1
data = '{},{}\n'.format(no_trials, stim) # カンマ区切りの文字列にする
datafile.write(data) # ファイルに書き込む

datafile.close() # ファイルを閉じる
win.close()
f8: python 2.x -> 3.x 移行エラー メモ (pythonista)

.

以前の以下記事

f5: Pythonista でメール送信
https://qiita.com/cxfgp/items/4849a856be57646bcf34
f6: Pythonista で LINE メッセージ送信
https://qiita.com/cxfgp/items/bb82b4ce7b7af000bd6f

で、

#####※ Pythonista v3 未確認(多分いけると思います)#####

と書き、3.x 的機能は使用していない意味でしたが、
実際に移行をしてみての 「つまずき箇所」 メモです

ほぼ皆さまが「移行」で体感している部分と思います

---
### **[ 1. キッチン ]**

Pythonista v2.1.1
Pythonista v3.2

iphone SE / ios 13:2.3
iphone 8 / ios 12.3.1
iphone 11 / ios 13.3

---
### **[ 2. 調理 ]**

**1) SyntaxError: Missing parentheses in call to 'print'**

```
v2.1.1
print 'abc'

v3.2
print ('abc')
```

**2) ModuleNotFoundError: No module named 'email.MIMEText'**

```
v2.1.1
import smtplib
from email.MIMEText import MIMEText
from email.Utils import formatdate
from email.Header import Header

v3.2
import smtplib
from email.mime.text import MIMEText
from email.utils import formatdate
from email.header import Header

```
**3) UnicodeDecodeError: 'ascii' codec can't decode byte 0xe3**

```
    for linm in linef:
    /ascii.py", line 27, in decode
    return codecs.ascii_decode(input, self.errors)[0]

v2.1.1
with open(cpedf3 + cpedf1) as linef:

v3.2
with open(cpedf3 + cpedf1, encoding='UTF-8') as linef:

```

**4) NameError: name 'raw_input' is not defined**

```
v2.1.1
choice = raw_input("'yes' or 'no' [y/n]: ").lower()

v3.2
choice = input("'yes' or 'no' [y/n]: ").lower()

```

---

.
powershell から fzf を使用する際の文字化け対策

## 環境

```
PS > $PSVersionTable

Name                           Value
----                           -----
PSVersion                      5.1.18362.145
PSEdition                      Desktop
PSCompatibleVersions           {1.0, 2.0, 3.0, 4.0...}
BuildVersion                   10.0.18362.145
CLRVersion                     4.0.30319.42000
WSManStackVersion              3.0
PSRemotingProtocolVersion      2.3
SerializationVersion           1.1.0.1
```

fzf は Scoop で入手済。

```
Scoop install fzf
```

そのまま使おうとするとマルチバイト文字が文字化けしてしまいます。

```
PS > ls -name
hoge_folder
ほげほげフォルダー

PS > ls -name | fzf

  ?????????????
> hoge_folder
  2/2
```

## 対策

```powershell
function psFzf {
    $origin = [System.Console]::OutputEncoding
    $utf8 = [System.Text.Encoding]::GetEncoding("utf-8")
    $OutputEncoding = $utf8
    [System.Console]::OutputEncoding = $utf8
    $out = ($input | fzf.exe)
    [System.Console]::OutputEncoding = $origin
    return $out
}
```

このような関数でパイプすれば文字化けしません（少々のレイアウト崩れはご愛嬌…）。

```
PS > ls -name | psFzf

  ほげほげフォルダー
> hoge_folder
  2/2
```

変数に格納することもできます。

```
PS > ls -name | psFzf | sv hoge
```

パイプの下流にも渡せます。

```
PS > ls -name | psFzf | cd # 選択した先にディレクトリ移動
```

## ポイント
`$OutputEncoding` **に加えて** `[System.Console]::OutputEncoding` **も設定する必要があります。**
前者を変更する記事ばかりヒットしたので数カ月間ハマりました。

`$OutputEncoding` はスコープ的に関数内でのみ適用されますが `[System.Console]::OutputEncoding` はセッション全体に影響するので関数の最後でもとに戻してやる必要があります。

## 2020/03/14 加筆
上記 `psFzf` を使っていると、無視できない頻度で異常終了（フリーズしてからターミナルのウィンドウごと消える）が起きるようです。
同様のツールとして有名な peco や [gof](https://qiita.com/mattn/items/edea1be5a6d84663ab8b) も同じ要領で文字化けに対処することができ、これらは今のところ問題ないようです。

```psGof.ps1
function psGof ([switch]$fuzzy) {
    $origin = [System.Console]::OutputEncoding
    $utf8 = [System.Text.Encoding]::UTF8
    $OutputEncoding = $utf8
    [System.Console]::OutputEncoding = $utf8
    if ($fuzzy) {
        $out = $input | gof.exe -f
    }
    else {
        $out = $input | gof.exe
    }
    [System.Console]::OutputEncoding = $origin
    return $out
}
```

```psPeco.ps1
function psPeco ([switch]$fuzzy) {
    $origin = [System.Console]::OutputEncoding
    $utf8 = [System.Text.Encoding]::UTF8
    $OutputEncoding = $utf8
    [System.Console]::OutputEncoding = $utf8
    if ($fuzzy) {
        $out = $input | peco.exe --initial-filter=Fuzzy
    }
    else {
        $out = $input | peco.exe
    }
    [System.Console]::OutputEncoding = $origin
    return $out
}
```

### 謎の挙動
実用上の問題はないのですが、peco は上記ラッパーをかませると図のようにレイアウトが崩れます。全角文字1つにつきカーソルが余計に動いているようです。
`[System.Console]::OutputEncoding` の部分をコメントアウトすると発生しないので、おそらくこの設定が影響しているようです。
しかし再現性も微妙で、Windows7 からアップグレードした Windows10 では発生し、最初から Windows10 として購入した PC では発生しないという謎……。今後の解明が待たれます。

![cap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501098/1f4de99a-469e-9501-7194-bde424356654.png)

## 2020/06/16 加筆
peco のバージョンを上げたらレイアウト崩れは解消されました。本質的な解決ではありませんが業務上は差し支えないので良しとします。