OmniAICreator/Qiita-1.07M huggingface dataset:
「Flask+Vue.jsでお願い」と言われて試みたことメモ


## 先人の知恵を参考に環境構築
Vue.js(vue-cli)とFlaskを使って簡易アプリを作成する【前半 - フロントエンド編】
https://qiita.com/mitch0807/items/2a93d93adbf6b5fc445c


### 環境構築で出たエラー

```
Module build failed: ValidationError: Invalid options object. Sass Loader has been initialised using an options object that
 does not match the API schema.
```

>モジュールのビルドに失敗しました：ValidationError
無効なオプションオブジェクト。 Sass Loaderは、オプションオブジェクトを使用して初期化されました。
APIスキーマと一致しません。

そのときはこれを参考にした。
npm installでError:EACCESがでたら
https://qiita.com/Gaddict/items/8c76d92bd0adec2bfb6a

→解決

Flask+Vue.jsで作ろうと試していたんだけど、その日に作ってその日にリリースしないといけないってことで・・・・
Vue.jsはとりあえずなし。環境構築苦手すぎてほんとやんなっちゃうわ。。
### とにかく、至急実装するために、htmlを書くことに。


## python動かす環境がなくて環境構築
https://qiita.com/Scstechr/items/10e460c66fb3cbf3bb22

brewはすでに使えるから、minicondaのインストールから。


JS導入に参考にした記事
【Trainer's Recipe】Pythonのフレームワークのflaskを触ってみた。
https://qiita.com/gsacademy_tokyo/items/16cba215a0cd921df87f


基本的な書き方はググりながら進めた。最低限の書き方はこちらを参考に。
Flaskの簡単な使い方
https://qiita.com/zaburo/items/5091041a5afb2a7dffc8

ちょこちょこっとページ作ってみたけど、初心者だけどVue.jsとか書いたことあったからか、propsっぽいな、methodsっぽいなっていう点があってわかりやすく、とっつきやすい。深く触ってない方欠点もわかってない。
ただpythonファイルみたらインデントが綺麗で、こんなコード書きたいなと思い、pythonの勉強を始めようと思う。


### 今後の実装

今後の対応は、まずCDNでVue.jsを導入して、今後フロントとバックエンドを徐々に切り離す。そしてそのあと、そろそろかなってときにFlaskとVue.jsに分けていくようにフロントの環境整えていく。

1日あれば3,4ページぐらいのCMSは作れるんやね。
課題も見えたしよい勉強になった、
MySQL系のサポートの種類は？MySQL テクニカル・サポートとは。

## Oracle Lifetime Support for MySQLとは

MySQL テクニカル・サポートのことです。
Oracle Lifetime Supportは以下の図になります。

<img width="920" alt="スクリーンショット 2019-11-18 11.41.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452135/ebb556e5-6783-5d9b-6682-960486210570.png">

## Oracle Lifetime Supportの３つのフェーズ

### MySQL Premier Support

正式(GA)リリースより5年間、MySQLメンテナンス・リリース、アップデート、バグ修正（エラー修正)およびセキュリティ情報を提供します。

### MySQL Extended Support

Premier Support期間エラー修正を含む、Premier Support期間終了後3年間、特定のMySQLリリースに対する追加サポートを提供します。MySQLメンテナンス・リリース、アップデート、バグ修正（エラー修正)およびセキュリティ情報を提供します。

### MySQL Sustaining Support 

Premier Support 期間終了後の任意の期間、2010年11月１日以降のPremier Support対象のすべてのMySQLリリースについて提供します。サポート・エンジニアからのサポートを受けることができます。新規リリース、新規バグ修正（新規案件に対するエラー修正）、新規アップデートを含みません。既存のアップデート、修正、セキュリティ情報のみ提供します。

## 参照
https://www.mysql.com/jp/support/
Gitで現在のブランチ名をコピーするコマンドを作る

gitを使っていると、今いるブランチ名をコピーしたい時があります
そんな時に使える便利コマンドを作ります。

## 環境
Macを想定しています。windowsの場合は `pbcopy` の部分をwindowsのコピーコマンドに置き換える必要があります。

## コマンドの作成
gitはパスの通ったフォルダに `git-hogehoge`に従った命名規則のファイルを置くと、サブコマンドとして認識します。これを利用してコマンドを作成します。

```bash
vim /usr/local/bin/git-copy-branch 
```

```bash:/usr/local/bin/git-copy-branch
#!/bin/bash
git name-rev --name-only HEAD | pbcopy
```

```bash
chmod +x /usr/local/bin/git-copy-branch 
```

## 使用法
以下のコマンドで先ほど作成したコマンドが呼び出されます。

```sh
git copy-branch
```
AnacondaをProxy環境下使用する為の設定方法

#前置き
###Anaconda
pythonの切り替えなどをスムーズに実施する為に仮想環境を構築してくれる。
pipでも似たようなことが出来るけどコマンドはすぐ忘れる私はGUIで出来るものを選んだ。

###Proxy環境下
一回Proxy通さないと出れないので、
大抵の場合、Anacondaからインストールを選択しても繋がりません。残念と言われてしまう

###Anacondaの設定
$HOME/.condarcに設定を書いたけどダメだった。
Pacファイルをみてそれっぽいアドレスにしたけどうまくいかなかった。

そもそもダウンロード先が全部同じというわけでもないので
一つのProxy設定で出来る範囲も限られると考えた。
Pacファイル指定で動く方法はないのだろうか・・・

#私が取った行動
.condarcを消してシステム環境変数にHTTP_PROXY　及び　HTTPS_PROXY設定追加した。
以下と同じことをした
https://qiita.com/bunaImage/items/988877798b44479cc3c2
ずっとProxyに悩まされていたから試しにやったらうまくいった。

#裏付けが無い
ほんとにこれでうまくいったといえる根拠が不明。謎だけどサクサクダウンロードしてるから良しとする。インストール手順書にも記載する
||= とは？

#||= とは？

代入された値が`nil`だった場合右辺の値を代入する。

```ruby
value3 = nil #nilを代入している。

value3 ||= 'りんご'　#||=で'りんご'を代入

symbol3 = case value3
            when 'りんご','なし','きうい','もも'
                '果物'
            when 'きゃべつ', 'きゅうり', 'トマト'
                'やさい'
            when
                '該当なし'
            end

puts symbol3
```

戻り値
果物
【Bitrise】Create new appで「No shared schemes found for project:」というエラーが出る

Bitriseで「Create new app」を行い、ブランチを指定しバリデーションを行っているとタイトルのエラーが出ました。



## :star: 確認すること
・ プロジェクトの「Manage Scheme」で対象のtargetの「shared」欄にチェックが入っているか確認する、入っていなればチェックする
・ 「.gitignore」ファイルで「usershareddata」フォルダをignoreする設定になっていないか確認する

このあたりだと思います。
さらに自分の場合は少し特殊なケースでハマりました。

・「shared」欄にチェックが入っているにも関わらず「.xcodeproject」内に「usershareddata」フォルダが生成されていない

という感じでした。
この場合は一度「shared」のチェックを外して、再チェックすると無事生成されました。

## :star: まとめ
とりあえず対象ブランチの「.xcodeproject」、あるいは「.xcworkspace」内に「usershareddata」フォルダが存在しているかと、その中のファイルでSchemeのSharedがチェックされている設定になっているかが肝心みたいです。


以上！
gitのコンフリクトの解消

###はじめに
[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしているやっきーです。

まだまだ勉強中のため、間違いがあればどんどん指摘してください。

#gitのブランチとは？
gitでは、ブランチという仕組みを使って様々な機能を追加していきます。ブランチ（branch）とは木の枝を意味しています。gitのブランチも、１本の幹から複数の枝に分岐していく様子と似ています。
ブランチでは、ソフトウェアの新たな機能の追加、細かなバグの修正などを同時並行で行うことができます。また、それぞれの修正が他の変更に影響するかを確かめてから(masterブランチにある)本来のファイルを書き換えることができることが大きなメリットです。

```
        D     #バグ修正用ブランチ
　　　　/  \
      C---E  #機能追加用ブランチ
     /     \
A---B---F---G　#masterブランチ
```


#コンフリクト
それぞれのブランチで作成した（変更した）ファイルをmasterブランチに統合するとき、分岐したブランチで行った変更とmasterブランチで行った変更が一致しないとき、ユーザーがどのように統合するか操作する必要があります。
##マージ(merge)
コンフリクトと発生している部分を手動で解決します。
コンフリクトの起きた状態では、コードは以下のように表示されます。（VS codeの例）
<img width="1020" alt="スクリーンショット 2019-11-16 11.58.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499419/b510d55f-891f-4ad9-0f81-2282a10ed5a6.png">

上が今コミットしようとした内容、下が以前コミットしようとした内容です。手動で文を消してマージを確定することもできます。また、写真の場合は「現在の変更を取り込む」などをクリックすることでマージを確定することもできます。

この場合、コミットの履歴はブランチの分岐も含めて全て残ります。

##リベース(rebase)
リベースでは、分岐したコミットを元から分岐していなかったように調整することです。分岐した際の差分を最新のmasterブランチのコミットに適用し、履歴が1本の線になるように修正します。

```
        D     
　　　　/  \
      C---E  
     /     \
A---B---F---G　#masterブランチ
```
このように分かれていたものが、

```
A--B--F--G--C--E--D
```

というように、別のブランチで行っていた変更を後から追加していきます。分かれていたブランチは削除します。コミットの履歴もブランチの分岐がなかったかのように書き換えられます。
リベースすると、コミットの順序が変更されるため、公開されているリポジトリにリベースを行うと他の人の作業にも影響が出るため、行ってはいけません。



#参考URL
[git mergeでブランチをマージしよう!いろんな疑問を徹底解説 | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト](https://www.sejuku.net/blog/71003#i)
[Git - リベース](https://git-scm.com/book/ja/v1/Git-%E3%81%AE%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E6%A9%9F%E8%83%BD-%E3%83%AA%E3%83%99%E3%83%BC%E3%82%B9)
[[Git] rebaseとmergeの使い分け - Qiita](https://qiita.com/riku1027/items/ff1f7eac3d08b4f3dc4f)
バックグラウンドでのデータアクセスについて

通常のアプリではまずないんでしょうが、バックグラウンドで動作するアプリを作っていて、いくつかハマったポイントがあるので共有します。

通常、アプリの設定を NSUserDefaultsやファイルに書き出して状態を保存するということをやると思います。

普通にアプリを起動して操作するには問題ないのですが、バックグラウンドで動作するアプリは、端末を再起動した際にiOSから叩き起こされる箇所があります。主にGPSだったりですが、そのdelegateで

1. NSUserDefaultsを読み込んで挙動を変える
2. キーチェーンを読み込んで挙動を変える

とかやっていると注意が必要です。
特に端末再起動後は、デバイスがロックされた状態になるため、NSUserDefaultsは読み込めません。キーチェーンはいろいろ属性があり、

https://developer.apple.com/documentation/security/keychain_services/keychain_items/item_attribute_keys_and_values?language=objc#1679100

```
kSecAttrAccessibleAfterFirstUnlock
```

になっているので、

```
kSecAttrAccessibleAlwaysThisDeviceOnly
```

あたりに変えてやる必要があります。
また、ファイルに保存している場合は、ファイルの読み出しにも同様のロックがかかっているので、このようにパーミッションを書き換えてやる必要があります。


```Swift
let attributes = [
  FileAttributeKey.protectionKey: FileProtectionType.none,
]
    
do {
  try FileManager.default.setAttributes(attributes, ofItemAtPath: path)
  } catch {
  print(error)
}
```
メモ: GCC の specsとは

* 参考: [猫科研究所 - GCCのspecsとは](http://up-cat.net/GCC%25A4%25CEspecs%25A4%25C8%25A4%25CF.html)

```sh
gcc -dumpspecs
```

`make`したとき

> gcc: unknown spec function 'find-plugindir'

と出る場合はgccのバージョンが古い。

```sh
gcc -dumpspecs | grep find-plugindir
```

で確認。
iOS13のバックグラウンドで定期実行させる

その後実行できるようになったので記事を修正しました。

iOS13の特徴としてバックグラウンドでの定期実行ができるようになったと言う点があり、発表と同時に試しております。Appleのドキュメントどうりに実装してみました。

重い処理はしないので、AppRefresh　での短期実行を試しています。

```
let apprefresh = "com.mydomain.refresh"
BGTaskScheduler.shared.register(forTaskWithIdentifier: apprefresh, using: nil) { task in
```

みたいにして登録します。IdentifierはInfo.plistにも登録しないといけません。また、BackgroundFetchを有効にします。

次に、

```
let request = BGAppRefreshTaskRequest(identifier: apprefresh)
request.earliestBeginDate = Date(timeIntervalSinceNow: 15 * 60)
do {
  try BGTaskScheduler.shared.submit(request)
} catch {
  print("Could not nm app refresh: \(error)")
}

```

をアプリをバックグラウンドに遷移したときに上記を叩いてスケジュールをセットします。この書き方だと15分後にsubmitが呼ばれますので、その後適切なタイミングでiOSがアプリを呼んでくれます。
実際に登録されているかは、Xcodeのデバッガで強制的に止め（一時停止みたいなボタンを押す）、下記のコマンドを実行します。

起動と停止

```
e -l objc -- (void)[[BGTaskScheduler sharedScheduler] _simulateLaunchForTaskWithIdentifier:@"タスクの名前"]

e -l objc -- (void)[[BGTaskScheduler sharedScheduler] _simulateExpirationForTaskWithIdentifier:@"タスクの名前"]
```
Firebase/firestoreで位置情報を共有してみた話

Firebaseのrealtime database/firestoreを試してみたくて、お互いの端末の位置情報を共有できないかとやってみました。まずやったのは、2台の端末が共有するドキュメントを作って地図にプロットするようにしてみました。ここでは「loc」としました。

位置情報はお互いが常に許可にし、バックグラウンドでも取得するようにし、

```
public func locationManager(_ manager: CLLocationManager,
                                didUpdateLocations locations: [CLLocation])
```

で値を取得し（多少ゴミは取り除き）、Firestoreにアップするようにしたところ、

```
let name = UIDevice.current.name
let data: [String: Any] = [
                    "name":name,
                    "createAt":FieldValue.serverTimestamp(),
                    "latitude":latitude,
                    "longitude":longitude]
                
defaultstore.collection("data").addDocument(data: messageData)
if let err = err {
  print("Error writing document: \(err)")
} else {
  print("Document successfully written!")
}
```

<img width="975" alt="limit_usage.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4664/e4d5e19f-f9e5-f888-2240-de1a21672333.png">

なんと1日持ちませんでした。
この時のLocationManagerの設定は

```
locationManager.desiredAccuracy = kCLLocationAccuracyBestForNavigation
locationManager.distanceFilter = 5
locationManager.activityType = .fitness
locationManager.requestAlwaysAuthorization()
locationManager.allowsBackgroundLocationUpdates = true
locationManager.pausesLocationUpdatesAutomatically = false
```

です。が、今回上限を超えたのは位置情報の書き込みではなく、読み込み側の方でした。

<img width="1185" alt="limit_write.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4664/f73bf9d8-e779-aae7-6103-8b7ba923aaef.png">

ViewControllerのdidLoadで下記のようにそれまでにたまっていたデータも読み込んでいたためと思われます。

```
defaultstore.collection("data").addSnapshotListener { (snapShot, error) in
  guard let value = snapShot else {
    print("snapShot is nil")
      return
  }
            
  value.documentChanges.forEach{diff in
    if diff.type == .added {
      // 地図にプロット
  }
  }
}
```

よくよく考えると、過去の居場所は不要なので、FirestoreにはaddDocumentをやめて、setDataでアップデートするように変更。

```
defaultstore.collection("data").document(name).setData(data) { err in
  if let err = err {
    print("Error writing document: \(err)")
  } else {
    print("Document successfully written!")
  }
}

```

そして、読み込み側は、.addedに加えて、.modifiedも追加しました。

![changed_usage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4664/3ae35f02-63ae-43b2-e511-0a797400f3ec.png)

数字は減りましたが、相手の居場所が更新されたと同時に読み取り、地図の位置を更新するっていうのは、2端末でこの数字じゃダメですね。chat程度ならせっかくなのでFirestoneではなく、別のアーキテクチャを考えてみたいと思います。
スレッドセーフなリスト

##並列処理怖いよって話
リストについて基本的に注意すべきですが、こと並列処理に関しては
マルチスレッドに要注意です

たとえば

```だめ.java
	private static List<String> list = new ArrayList<>();
	
	private static Consumer<Integer> qwe = v -> list.add(String.format("%s: %s", Instant.now(), v));
	
	public static void main(String[] args) {
		IntStream.range(0, 9).boxed().collect(Collectors.toList()).parallelStream().forEach(qwe);
		list.forEach(System.out::println);
	}
```

これの結果は

```結果
null
null
null
2019-11-08T17:37:22.279Z: 7
2019-11-08T17:37:22.313Z: 3
2019-11-08T17:37:22.313Z: 0
2019-11-08T17:37:22.313Z: 4
2019-11-08T17:37:22.313Z: 6
2019-11-08T17:37:22.313Z: 8
```

とか

```結果
2019-11-08T17:37:48.381Z: 7
2019-11-08T17:37:48.381Z: 5
2019-11-08T17:37:48.381Z: 2
2019-11-08T17:37:48.416Z: 0
2019-11-08T17:37:48.416Z: 8
2019-11-08T17:37:48.417Z: 4
2019-11-08T17:37:48.417Z: 3
2019-11-08T17:37:48.417Z: 6
```

とか、もうめちゃくちゃです
なにnullってw
listにaddするタイミングで同時にやろうとして
よくわからんくなって障害起きてるわけですね

なので...

```これでよし.java
	private static List<String> list = Collections.synchronizedList(new ArrayList<>());
	
	private static Consumer<Integer> qwe = v -> list.add(String.format("%s: %s", Instant.now(), v));
	
	public static void main(String[] args) {
		IntStream.range(0, 9).boxed().collect(Collectors.toList()).parallelStream().forEachOrdered(qwe);
		list.forEach(System.out::println);
	}
```

スレッドセーフなsynchronizedListを使い
かつ順番を整えるためにforEachorderedを使ってaddしました
ラムダのforEachは順次でやってくれているのでsysoutしてるとこはそのままで

```
2019-11-08T17:40:22.228Z: 0
2019-11-08T17:40:22.259Z: 1
2019-11-08T17:40:22.259Z: 2
2019-11-08T17:40:22.260Z: 3
2019-11-08T17:40:22.260Z: 4
2019-11-08T17:40:22.260Z: 5
2019-11-08T17:40:22.260Z: 6
2019-11-08T17:40:22.260Z: 7
2019-11-08T17:40:22.260Z: 8
```
って、綺麗にやってくれます

##一言でいうと
同時に変更したらコンフリクトするやんけ！やめろ！ってことですね
注意しておけばスレッドセーフなものに切り替えるだけで良い感じでしょうか
Webスクレイピングツール10選 | 企業情報を取得する

元記事：https://jp.scrapestorm.com/tutorial/introduce-10-web-scraping-tool-to-scrape-company-information/

情報収集の普及につれて、様々なiタウンページのように膨大な企業情報を集まるWebサイトがどんどん出できます。ならば、ビッグデータの時代に、各企業情報Webサイトを利用して、情報を素早く、効率的に手にいるのが営業マンマとしてスターすべきなテクニクスでしょう。
これから、企業情報Webサイをスクレイピングするよく使われているWebスクレイピングツールを紹介します。
####1.ScrapeHero
米国に拠点を置く、完全に管理されたエンタープライズクラスのWebスクレイピングサービスプロバイダー。 Webクロール、データ抽出、自動品質チェックを行い、使用可能な構造化データを提供します。 素晴らしいカスタマーサービス。 顧客には、フォーチュン50のスタートアップやその間のすべての人が含まれます。
![alt](https://jp.scrapestorm.com/wp-content/uploads/2019/11/1-ScrapeHero.png)
####2.ScrapeStorm
ScrapeStormには人工知能に基づき、Webスクレイピングツールです。プログラミングが必要なく、ほとんどのWebサイトからデータをスクレイピングします。強い機能を持つ、使いやすいです。URLを入力するだけで、自動的にWebサイト内容と次のページボタンを識別できます。1-ClickでWebサイトからデータを自動的に抽出します。デスクトップアプリとしてのScrapeStormには、Windows、Macと Linux のシステムに適用します。Excel、HTML、Txt、CSVなどのさまざまな形式でデータを出力、保存できます。さらに、データベースやウェブサイトにデータをエクスポートできます。
![alt](https://jp.scrapestorm.com/wp-content/uploads/2019/11/2-ScrapeStorm.png)
####3.Parsehub
ParseHubは、誰でもWebからデータを取得する、視覚的なデータ抽出ツールです。
Webスクレイパーを再度編成する必要はありません。APIを持たないWebサイトからAPIを簡単に作成できます。ParseHubは、インタラクティブなマップ、カレンダー、検索、フォーラム、ネストされたコメント、無限スクロール、認証、ドロップダウン、フォーム、Javascript、Ajaxなどを簡単に処理できます。ParseHubは、全員向けの無料プランと、大規模なデータ抽出ニーズがあり企業向けのエンタープライズプランを提供します。
![alt](https://jp.scrapestorm.com/wp-content/uploads/2019/11/3%E3%80%80Parsehub.png)
####4.FMiner
使いやすいビジュアルエディターを使用して、データ抽出プロジェクトを設計できます。
リンク構造、ドロップダウン選択、またはURLパターンマッチングの組み合わせを使用して、サイトページをlドリルスルーするのに役立ちます
クロールが難しいWeb 2.0の動的なWebサイトからデータを抽出できます
サードパーティの自動decaptchaサービスまたは手動入力の助けを借りて、WebサイトCAPTCHA保護をターゲットにできます。
![alt](https://jp.scrapestorm.com/wp-content/uploads/2019/11/4%E3%80%80FMiner.png)
####5.VisualScraper
VisualScraperは、自動Webスクレイピング、インターネットからのコンテンツ抽出、およびWebハーベストに使用される視覚的なツールです。 ソフトウェアは自動的にウェブサイトをスキャンし、製品カタログや検索結果などのデータを収集します。
![alt](https://jp.scrapestorm.com/wp-content/uploads/2019/11/5%E3%80%80VisualScraper.png)
####6.Getleft
Getleft Web サイト グラバーは、すべてのリンクをダウンロードしようとする。それが行くように、それは絶対リンクを相対リンクに変更を取得するように元のHTMLページを変更して、アクティブなページへのリンクは、結果のページに変更を取得。ユーザーが設定したオプションに従って完全な web サイトをダウンロードする。
![alt](https://jp.scrapestorm.com/wp-content/uploads/2019/11/6%E3%80%80Getleft.png)
####7.Diggernaut
Diggernautは、Webからのデータスクレイピング、抽出、および収集サービスのための使いやすい自己管理サービスを提供します。 ユーザーがディガーを作成して、ユーザーに代わってウェブスクレイピングを行い、ウェブサイトからデータを抽出して正規化し、データをクラウドに保存できる小さなロボットを作成できます。 ユーザーが小売店のサイトから製品価格やその他の関連情報、レビュー、評価、世界のさまざまな場所で発生するさまざまな種類のイベント、さまざまな通信社のWebサイトのニュースや見出し、さまざまなソースからの統計データを抽出するのに役立ちます。
![alt](https://jp.scrapestorm.com/wp-content/uploads/2019/11/7%E3%80%80Diggernaut.png)
####8.Websundew
WebSundewは、完全なWebデータ抽出ソフトウェアおよびサービスです。 高精度、生産性、速度でWebデータをスクレイピングします。Windows専用のスクレイピングソフトウェアです。感覚的に操作できます。また、有料版ではありますが、15日間の無料トライアルも用意されています。
![alt](https://jp.scrapestorm.com/wp-content/uploads/2019/11/8%E3%80%80Websundew.png)
####9.Easy Web Extract
Easy Web ExtractとはWebページからコンテンツ（テキスト、URL、画像、ファイル）を抽出し、画面を数回クリックするだけで結果を複数の形式に変換する使いやすいWebスクレイピングツールです。プログラミングは不要です。Windows向けのスクレイピングソフトウェアを提供しています。
![alt](https://jp.scrapestorm.com/wp-content/uploads/2019/11/9%E3%80%80Easy-Web-Extract.png)
####10.Screen Scraper
ユーザーはプログラミングなどを全くする必要がなく、指定のサイトと納品データ・フォーマットを選ぶだけでスクレイピングを実行してくれます。
![alt](https://jp.scrapestorm.com/wp-content/uploads/2019/11/10%E3%80%80Screen-Scraper.png)
スクロールで要素をフェードインで表示する

プラグインが他のスクリプトとバッティングしたので・・・

>スクロールして可視範囲に入ったら要素を表示するアニメーション【jQuery】
https://linkage-design.net/jquery-scroll-fadein

スクロール時の動きはjavascript書く。

```js:script.js
jQuery(window).scroll(function () {

        //要素のフェードイン　クラスfadeinがついたものに対して実行される。
        //ウインドウの表示範囲に入ったら、fadein-onクラスを付ける。
        $('.fadein').each(function(){
            var position = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > position - windowHeight + 300){
              $(this).addClass('fadein-on');
            }
        });
    });
```

アニメーションの設定はcssに書く。

```css:style.css
.fadein{
    opacity : 0;
    transition : all 0.7s;    
}

.fadein.fadein-on{
    opacity : 1;
}
```
とてもシンプルで、大変参考になりました。
ありがとうございました。
Issue一覧やリポジトリ一覧などのGitHubの情報をGraphQLで取得する

# はじめに
GitHubではGraphQLが公開されています。

下記のURLにアクセスしてSign Inすると利用できるようになります。

https://developer.github.com/v4/explorer/

# 特定のリポジトリでIssueを拾う

```graphql
query {
  repository(owner: "FloatingWeed", name: "") {
    name
    issues(first: 100, orderBy: {field: CREATED_AT, direction: DESC}){
      edges {
        node {
          title
          number
        }
      }
    }
  }
}
```

実行例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/3babdac4-57fc-eb45-ff1b-65cb66087e84.png)

# ある所有者のリポジトリ一覧を取得する

```graphql
query {
  search ( query: "user:FloatingWeed", type: REPOSITORY
  ) {
    repositoryCount
  }
}
```

検索条件文字列は下記を参照。

https://github.com/search/advanced
ゼミサマリ : Orthogonal Random Forest

## 概要
[パンハウスゼミ](https://twitter.com/breadhouse_semi)のサマリです。
テーマ : Orthogonal Random Forestに関する3本。
スライドリンク : 追記予定
発表者 : [mkato](https://twitter.com/mkato_csecon)

## 1本目
題名 : Generalized Random Forests
Paperリンク : https://arxiv.org/abs/1610.01271
新規性 : Causal Forest(因果推論に特化したランダムフォレスト)の進化形、GRF(一般化ランダムフォレスト)を提案。

ポイント①：類似重み αをどうやって決めるか
・処置効果（Treatment effect）では「近いサンプルを見つける」ことが重要。
・処置効果を推定したい(テストデータの)xそれぞれに類似重み α_i(x)を定義することで、「テストデータ間の近さ」を定義できる。(そして「このデータは『近い』から、処置効果も『近い』だろう」と推測できる)
・従来はカーネル法などでαを決めていたが、本論文ではRF(ランダムフォレスト)を用いた。
・具体的には、「木がB本あり、そのうちK本でサンプルx1とx2が同じ葉に入っていれば、x1とx2の近さはK/B」と考えられる。
・普通の回帰問題に適用すると通常のRFになるのでGRFと呼んでいる。

ポイント②：木の分割はどうするか
・ふつうのRF(BreimanのRF)だと「あてはまり」を考えるけど、それが定義できないのでエントロピーを考える。

ポイント③：計算量をどう削減するか
・子ノード間の推定量の差を表す指標を大きくするようにサンプルを分割したい。
・でも、分割の全ての候補に対して指標を計算するのは計算量的に大変。
・そこで、子ノードにおける推定量を勾配法と親ノードにおける推定量を用いて近似することで、計算量を削減する。(論文中で理論解析付き)

まとめ：GRFを用いることで今までできなかった色々な推論ができるようになった。

>局外母数：NNの中間層の重みなど、値そのものには興味がないパ ラメータのこと

## 2本目
題名 : Double/Debiased Machine Learning for Treatment and Causal Parameters
Paperリンク : https://arxiv.org/abs/1608.00060
新規性 : 詳細は追記予定。

まとめ：高次元の局外母数を含むセミパラメトリックモデルにおいて、正則化による局外母数のバイアス(過学習防止の正則化によって発生する推定量のバイアス)が関心のあるパラメータに与える影響を軽減できた。

## 3本目
題名 : Orthogonal Random Forest for Causal Inference
Paperリンク : https://arxiv.org/abs/1806.03467
新規性 : 上記2本を組み合わせてORF(直交ランダムフォレスト)を提案。

まとめ：GRFにおいて、パラメータ推定量の正則化バイアスを下げる事ができた。
iOSのATDD開発（準備編）

以前書いた記事[(きゅうりのことはじめ)](https://qiita.com/gdate/items/9f0c381141927d727222)のiOSにおけるATDD開発の備忘録として残します。

#Java のインストール
最新JDKをダウンロードして、dmgからインストール
http://www.oracle.com/technetwork/java/javase/overview/index.html

#IntelliJ IDEAのインストール
最新のIntelliJ IDEA community edition(JBR8)をダウンロードして、dmgからインストール https://www.jetbrains.com/idea/download/
参考: https://reasonable-code.com/intellij-install/

#プラグインのダウンロード
Cucumber for Java
Gherkin
Makefile Support: https://qiita.com/shiraily/items/2c12e09a26be04e0c1c0
![luqKh5d5f2f71a043f4d90be165fd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457333/fef75b26-8b5e-2716-a8ee-f45d0c99e8c5.png)

#Appium（コマンドライン）のインストール
npm からインストール

```
$ npm install -g appium@1.12.1
$ appium
[Appium] Welcome to Appium v1.12.1
[Appium] Appium REST http interface listener started on 0.0.0.0:4723
// ctr + cで終了
```

#Appium Desktopのインストール
下記リンクからver. 1.12.1をダウンロードして、dmgからインストール
https://github.com/appium/appium-desktop/releases
Epson 主催のハッカソンに参加してきた。

## 概要
11/16, 17日に銀座のキラリトギンザ １１階BINARYSTARにて、Epson主催のハッカソンが行われ、５人でチームを組んで行ってきたのでその結果と感想をまとめます。

## 内容
Epsonがプリンターを使った遠隔プリントのAPIを提供し、それを用いて自由にプロダクトを開発、発表して競うハッカソン。
大学生からなかなか年配のエンジニアの方まで、様々なバックグラウンドを持った人たちが50名弱集まり、15チームでそれぞれ思い思いのプロダクト作成。２日目には三分間の発表が与えられ、それで優勝、準優勝などを決定する審査が行われた。

## 感想
- 自分たちのチームはハッカソン初参加のメンバーで構成され、なかなか勝手がわからないことも多かったが、２日間通しで開発を進めるなかで、いろいろな学びがあった（学びについては別に下に書く。）。
- 初参加となったハッカソンが、このハッカソンであったことは運が良かった。理由は下にも書くようなサポートなどが手厚かったため。
- 運営の方達のサポートが手厚かったり、食事や飲み物、会場など豪華で、至れり尽くせりの２日間だった。
- 参加者の熱気がすごく、２割くらいの参加者が泊まり込みで開発をした。（自分たちも数名は椅子の上や小さなスペースで雑魚寝し、夜遅くまで頑張った。）
- - 音楽が大会中終始流れ、開発というよりも開発をしているお祭り、的な感じで楽しかった。
- 各チームのアイディアがとても面白く、ネタ的な開発をして会場を笑いに包ませるようなディベロッパーもいたし、我々のような割と現実的なアイディアで攻めるチームもあり、とても盛り上がった。
- 大会であるために順位はついたものの、各チーム素晴らしいアイディアと開発技術で非常に刺激になった。



## 結果
自分たちのチームはプリンターのシェアサービスを開発し、発表したが、賞の受賞にはいたらなかった。
優勝はプリンターを用いて人生ゲームをプロフィールから作るモバイルアプリを開発したチームだった。
このように、アイディアを元に、プリンターの新しい使い方をプロダクトに落とし込んだチームが高く評価されたように思う。

## 学びについて
２日間という短い中でプロダクトを一から作るに当たって、コーディングなどの技術力はもちろんいろいろと考えることがあった。しかし、それ以上に一人一人がフルに開発に携わり、チームで相乗的に開発していく難しさなどの方が学びが多かった。開発ツールの使い方によってもそれが決定されるし、開発中の振る舞いであったり、コミュニケーションであったり、お互いの信頼感であったり、リーダーシップの大切さなどを総合的に学ぶいい機会だったように思う。
以下、これからの細かい課題

- gitの使い方がまだ甘かった
- 開発に5割程度の時間、テストに3割程度の時間のゆとりのある計画になっていなかった
- プロダクトバックログをきちんと定義できていなかった
- バックログにいきなり新しいものが追加されたり、優先度が変更されたりした
- タスク(スプリント)バックログに明確に落とし込まれていなかった
- 各タスクにどれだけ時間がかかりそうか考えられていなかった
- フロントとサーバーサイドのテストが分けられていなかった
- 個々の機能単位でテストが出来ていなかった


## まとめ
賞を受賞された参加者のみなさん、おめでとうございます！素晴らしかったです！
そしてこのような素晴らしいハッカソンを主催してくださったみなさん、運営に携わってくれたみなさん、そして２日間頑張った参加者のみなさん、本当にお疲れ様でした！！また会いましょう！！
最後に2日間一緒にがんばったチームのみんな、お疲れでした。ゆっくり寝てください。

おわり
npm installしたパッケージにdistなどGitHubにないディレクトリが存在する理由

## npm installしたパッケージにdistなどGitHubにないディレクトリが存在する理由
### 結論
npmの機能でインストール後に自動でビルドが実行されるからです。
### 解説
例えば`vuetify`というnpmパッケージをインストールしたとします。 下の画像を見てください。
<img width="299" alt="Screen Shot 2019-11-18 at 9.15.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250231/e30dd7a5-ff6d-fc2d-da6a-03438d6233d4.png">
これはエディターで`node_modules/vuetify/`以下を展開した様子です。`dist`ディレクトリが存在することを覚えておいて下さい。
一方、GitHubでコードを見ても`dist`ディレクトリは存在しません。
https://github.com/vuetifyjs/vuetify/tree/v2.1.10/packages/vuetify

これはパッケージの設定ファイル`package.json`の`scripts`プロパティの`build`プロパティのスクリプトが実行されるためです。

実行順序は次の通りです。

`npm install`が終了すると、`npm run install`が実行されます。
[公式ドキュメント](https://docs.npmjs.com/misc/scripts#description)にはこう書かれています。
> `install, postinstall: Run AFTER the package is installed.`

`package.json`にinstsallスクリプトが記述されていない場合、デフォルトの設定は`"install": "node-gyp rebuild"`です。これは[公式ドキュメント](https://docs.npmjs.com/misc/scripts#description)のDEFAULT VALUESの項に記述されています。

`node-gyp rebuild`は`npm run clean`,`npm run configure`,`npm run build`の3コマンドを順番に実行します。(vuetifyのpackage.jsonをみると、cleanとconfigureはありません。よって`npm run build`だけが実行されます。)
この`npm run build`によって`dist`ディレクトリが生成されているのです。

なお、逆にインストールされたパッケージには存在せず、GitHubのコードにのみ存在するディレクトリ・ファイルも存在します。
ここの解説はこちらの記事 https://zellwk.com/blog/ignoring-files-from-npm-package/ が分かりやすいです。

## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
WSLでCMake環境を整える

# Install
コマンドラインから以下でOK．

```
$ sudo apt-get install cmake
```
# 使い方
コマンドラインでの操作は以下です．

```
# build用のディレクトリ作成
$ mkdir build
$ cd build 
# CMakeLists.txtのあるディレクトリでcmakeコマンドを実行
$ cmake ..
# build
$ cmake --build .
```

VSCodeを使用しており，そこですべて完結させたい場合は
[Getting Started — CMake Tools 1\.1\.3 documentation](https://vector-of-bool.github.io/docs/vscode-cmake-tools/getting_started.html)
上記記事を参考に設定すれば

```
CMake: Configure
CMake: Build
```
でBuildできます．
floatの値を4つの8bit intに変換して保持する

## 概要

テクスチャにデータを詰めてGPUに送り、色ではなくデータとして扱いたいケースはままあると思います。
ただ、通常のテクスチャは各要素が8bitの精度しかなく、32bitのfloatを送ろうとしても当然、ひとつの要素では表現しきれません。

しかしテクスチャはRGBAと4つの要素があり、合計で32bitを保持することができます。
今回は32bitのfloatの値を、4つの8bit intに変換して保持する方法をメモしておこうと思います。（毎回忘れるので）

ちなみに以前にも似た記事（[[Shader] floatをfixedに変換し、RGBAに格納する](https://qiita.com/edo_m18/items/5ceb9e157fb5de60ede3)）を書いていたんですが、少し違った方法なので改めてメモです。


## コードサンプル

```
public class Hello
{
    public static void Main()
    {
        const float test = 0.93104938143193145f;
        float v1 = test * 255;
        int r = (int)v1;
        float v2 = (v1 - r) * 255;
        int g = (int)v2;
        float v3 = (v2 - g) * 255;
        int b = (int)v3;
        float v4 = (v3 - b) * 255;
        int a = (int)v4;
        
        float r1 = (float)r / 255f;
        float r2 = (float)g / (255f * 255f);
        float r3 = (float)b / (255f * 255f * 255f);
        float r4 = (float)a / (255f * 255f * 255f * 255f);
        
        float result = r1 + r2 + r3 + r4;
        System.Console.WriteLine(test - result);
    }
}
```

これの実際に動くC#のデモは以下になります。

- [paiza.io - Packing a float into 4 8bit-int](https://paiza.io/projects/HR4OyFKTZqzdhRKxeGpBlA)

アイデア自体はこちらの記事で書かれていたものをC#で書いただけのものです。

- [packing a float into a A8R8G8B8 texture (shader)](https://www.gamedev.net/forums/topic/442138-packing-a-float-into-a-a8r8g8b8-texture-shader/?tab=comments#comment-3930130)


## 解説

やっていることは比較的シンプルです。
`float`の値を`255`倍することで8bitに収まるように整数を取り出す、という操作を繰り返すだけです。

参考にした記事では` 0.42889250633567028616881555337687`を保存していく過程が書かれています。
まず、これを`255`倍してみましょう。すると、

```
 0.42889250633567028616881555337687 * 255 = 109.3675891155959229730479661111
```

となります。
そして整数部分だけを取り出すので`109`を保存しておきます。
試しにこれを`255`で割ると`109 / 255 = 0.42745098039215686274509803921569`という数値になります。

元の`float`の値と比較してみると誤差は`0.001441525943513423423717514161`となります。
ここの精度をもっと上げるために、他のテクスチャの要素にさらに値を保存していくことで達成します。

具体的には`109.3675891155959229730479661111`の小数点以下だけを取り出し、最初に行った操作と同じことをします。
つまり、

```
0.3675891155959229730479661111 * 255 = 93.7352244769603581272313583305
```

ということですね。そしてまたこの整数部分の`93`を保持します。
そしてこれを要素分（つまり4回）繰り返し、それぞれの整数部分を保持しておきます。

保存した4つの要素を使って元の32bit floatの値を復元するためには、保存している整数を`255`のべき乗で割ったものを足しわせることで行います。
つまり、

```
109/255^1 + 93/255^2 + 187/255^3 = 0.42889247725233884403434576444957
```

という感じです。（参考にした記事では24bitの3要素なので3つ分だけ計算しています）


元の数値と比べてみると、

```
元の数値: 0.42889250633567028616881555337687
復元した数値: 0.42889247725233884403434576444957
```

だいぶ小さい誤差まで復元できていることが分かるかと思います。


## シェーダでコンパクトに計算

なお、シェーダでこれを実行する場合はとてもスマートに変換する方法がこちらの記事で書かれていました。

- [Encoding floats to RGBA - the final?](http://aras-p.info/blog/2009/07/30/encoding-floats-to-rgba-the-final/)

```hlsl
inline float4 EncodeFloatRGBA( float v ) {
  float4 enc = float4(1.0, 255.0, 65025.0, 16581375.0) * v;
  enc = frac(enc);
  enc -= enc.yzww * float4(1.0/255.0,1.0/255.0,1.0/255.0,0.0);
  return enc;
}

inline float DecodeFloatRGBA( float4 rgba ) {
  return dot( rgba, float4(1.0, 1/255.0, 1/65025.0, 1/16581375.0) );
}
```

めちゃめちゃスマート。すごい。
LINE NotifyをPythonでお試し

[LINE Notify](https://notify-bot.line.me/ja/)は、外部のWebサービスと連携させて、そこからのメッセージをLINEのトークルームで受信できる通知機能です。
指定されたLINE NotifyのURLにメッセージを投げる（POSTする）ことで自分のLINEのトークルームにそのメッセージを送ることができるので、自分でプログラムを書いて利用することも簡単。ということで、Pythonで試してみましょう。（既にほぼ同内容の記事がありますが、自分の備忘録ということで。。。）

# 1.　LINE Notifyの初期設定
1. 上のページから自分のLINE IDでログイン
2. 右上の自分の名前のところからマイページにアクセス
3. 「アクセストークンの発行(開発者向け)」から「トークンを発行する」を選ぶ
<img width="375" alt="LINEnotify1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476884/fb6e35f1-938b-8cba-6f84-5fc032751fa7.png">
4. 「トークンを発行する」画面で、
 - トークン名を記入（毎回メッセージの最初に表示されるのでなるべく簡単に）
 - 「1:1でLINE Notifyから通知を受け取る」で自分だけに通知が来ます。他にLINEグループも選択できます。選んだら「発行する」。<br>
<img width="375" alt="LINEnotify2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476884/6c26e148-ae8a-4801-486d-3f872613a848.png">
5. トークンをコピペ <br>
<img width="375" alt="LINEnotify3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476884/eaa4ca02-ef58-acf1-16dc-bf66e75f16dd.png">
6. トークンを発行すると自分のLINEにLINE Notifyからメッセージが来ます<br><img width="375" alt="LINEnotify４.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476884/5d604a74-f045-0f35-7bf5-8275cdb7d726.png">

# 2. Pythonスクリプト
これだけです。

```python
import requests
token = "XXXXXXXXXXXXXXXXXXXXXXXX"
url = "https://notify-api.line.me/api/notify"
headers = {"Authorization": "Bearer " + token}
payload = {"message": "テストメッセージだよ"}
requests.post(url, headers=headers, data=payload)
```
指定のURLに"message"を伝えてあげることで、認証情報（アクセストークン）をもとに、LINEがそのメッセージを自分のところへ届けてくれます。XXXの羅列は上でコピペしたトークンに代えてください。

このスクリプトを実行すると、以下のようにLINE Notifyからメッセージが来ます（設定したトークン名が[ ]で囲われたところに表示されます）。
<img width="375" alt="LINEnotify5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476884/a3aa9d3d-9b8b-6a94-d4d8-79fc7039e361.png">

<strong>簡単ですね！！！</strong>

---
### 補足
アクセストークンのような他人に漏れるとヤバい情報をコードの中に書くのはよろしくないので、OSの環境変数に書いておき、スクリプトの中でそれを読み込む、という形が良いようです。
（シェルがbashの場合）~/.bash_profileに
```export LINE_ACCESS_TOKEN="XXXXXXXXXXXXX"``` 
を書き込んでアクセストークンを環境変数に設定し、上のPythonコードの上2行を

```python
import os, requests
token = os.environ["LINE_ACCESS_TOKEN"]
```
に変更します。
Python　リスト、for文、辞書

#progateでpythonを学習
##学習コースⅡ
リスト要素の更新は
**リスト[インデックス番号] = 値**
新しい要素の追加は
**リスト.append(値)**
すでに定義されているリストの末尾に追加される

**for文**
リストの要素を順に取り出して処理できる
**for 変数名 in リスト:** と書く
処理はリストの数だけ
変数名は自由、リスト名の単数形にすることが慣習上多い

**辞書**
複数のデータをまとめて管理する
リストとの違いは個々の要素をインデックス番号ではなくキーと呼ばれる名前を付けて管理する点
**{キー1: 値1, キー2: 値2, …}**このように書く
辞書内の要素には順序がない
辞書の値を取り出すには、取り出したい値に対応する「キー」を用いて辞書名[キー]のように書く
辞書の要素の更新と追加は
*更新*　辞書名[キー名] = 値
*追加*　辞書名[新しいキー名] = 値
Windows Terminal (Preview) のカスタマイズで役に立った情報源 (2019年11月)

**5/20/2020 追記**

Windows Terminal 1.0 リリースに伴いアップデートしました。本エントリーは Obsolete です。
こちらをご覧ください。
https://qiita.com/ma2shita/items/19fe6dd71185613d09ed

---

※ Windows Terminal Server の話じゃないからね！

2019年11月現在の [Windows Terminal (Preview)](https://www.microsoft.com/ja-jp/p/windows-terminal-preview/9n0dx20hk701?activetab=pivot:overviewtab) のカスタマイズや普段使いをするために必要な設定が得られた情報源をピックアップしておきます。

## `Profiles.json` のリファレンス

* [Profiles.json Documentation](https://github.com/microsoft/terminal/blob/master/doc/cascadia/SettingsSchema.md)

おそらく今後もこのページがオフィシャルリファレンスになると思います

## WSL 上での $HOME をstartingDirectory にする方法

* [Windows Terminal で WSL(Windows Subsystem for Linux) を開くときに開始されるディレクトリを $HOME にする](https://qiita.com/bindi/items/6aa20a157d83a6efd86f)

正確には `startingDirectory` に `$HOME` や `~` としても機能せず、 `commandline` で `wsl.exe ~ -d DIST_NAME` と、wsl.exe の引数に `~` を入れてあげることで解決されていました。なるほど、助かった。

## Windows Terminal にシェルを追加する

* [Windows Terminalにシェルを追加する](https://news.mynavi.jp/article/win10tips-399/)

Profiles.json へシェルを追加する方法が記載されています。PowerShell で `[guid]::NewGuid()` とすると、GUID が生成されるなんて知らなかった。便利。

### 【ちなみに】WSL のディストリビューション追加を行うと、Profiles.json へ自動追加されます

追加されるタイミングがいまいち不明なのですが、Windows Terminal をインストールされた状態で、Microsoft Store から Linux ディストリビューション(例えば Ubuntu)をインストールすると、Profiles.json の `profiles` に以下のように追加されます。

```json
        {
            "guid": "{588c203a-313e-4dcc-8133-be0da361f138}",
            "hidden": false,
            "name": "Ubuntu",
            "source": "Windows.Terminal.Wsl"
        }
```

最小限の構成となっているので、ここから設定を加えていく形となります。
`source` を消すと、また新たに追加されることから `source` がキーになっているようです。

## あとがき

~~2019年11月現在では IME による日本語入力ができないのですが、コピペによる入力はできるのと、そもそも Terminal で日本語入力する必要があまりないので困らなかったです。~~

12/8 update;
コメントで教えていただきましたとおり、0.7でIMEの日本語入力が可能となりました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22754/9ba7221e-11f0-1c0d-1f40-683b985aaad2.png)

完全に普段使いできるイケてる Terminal、それが Windows Terminal です！

EoT
コマンドラインでのファイル検索に便利な機能

#展開編集子
検索をかけるコードのあとに（:X)の形を追加することで、実ファイル名に影響を及ぼすことなく、自分の見やすい形式でファイル（ディレクトリ）一覧を表示させることができる。

- `r`:当該ファイルの拡張子を取り除いた部分だけを表示
- `e`:当該ファイルの拡張子のみを表示。上のrと対をなす。
- `h`:指定ファイルパス名のディレクトリ名部分だけを取り出す。
- `t`:指定ファイルパス名のファイル名だけを取り出す。上のhと対照的な働き。
- `a`:ファイル名をフルパス名に変換する。
- `s/OLD/NEW`：文字列の置換を行う。

```zsh:例
$ls *
  hogehoge.txt hoge/
$ls hoge/
 hoge.txt
$ls *(:r)
  hogehoge 　 #.txtがなくなっている。
$ls hoge/hoge.txt(:h)
  hoge.txt   #hoge/hoge.txtからhoge/が取り出され、結果的に`ls hoge`と同じものになっている。
$ls *(:s/ho/HO)
 HOgeHOge.txt HOge/
$ls *(:r:s/ho/HO)
 HOgeHOge HOge
```

#lsコマンド
###オプションを効果的に利用する。
- `-t`:タイムスタンプに基づいてソートされる。
- `-r`:ソートを反転させる。
KotlinでDoma2のEnumドメインクラスを実現する方法

## この記事を書くモチベーション
現在担当しているKotilnで書かれたプロダクトにDomaを新規に採用しようとしています。
しかし、Kotlinの理解がまだ浅くEnumのドメインクラス化に苦戦してしまいました。

最終的には実現できたのですが（簡単な設定だったけど時間がかかってしまいましたorz）、おそらく同じように苦戦している人もいると思い、そんな人達に向けてQiitaに解説記事を投稿しておきます。[^1]

## 何はともあれサンプルコード 〜コード解説〜

### Enumのドメインクラス
```kotlin
package sample

import org.seasar.doma.Domain

@Domain(valueType = String::class, accessorMethod = "getCode", factoryMethod = "of")
// if you use enum without additional value and also do not use its value for database, you can do like this.
//@Domain(valueType = String::class, accessorMethod = "name", factoryMethod = "valueOf")
enum class Gender(val code: String) {
    MALE("0"),
    FEMALE("1");

    companion object {
        @JvmStatic // doma requires JvmStatic annotation for factory method
        fun of(code: String): Gender =
            values().firstOrNull { it.code == code } ?: throw IllegalArgumentException("${Gender::class.simpleName} does not have such code => $code")
    }
}
```

ポイントは`@Domain`アノテーションの`accessorMethod`と`factoryMethod`です。
#### accessorMethod
Kotlinをcompileして生成されるJavaのclassでは、kotlinのプロパティに`get`のプレフィックスをつけたgetterが生えるので、その名前に合わせて`accessorMethod`をつけています。

#### factoryMethod
`@Domain`の`factoryMethod`にはJavaのstaticなメソッドを指定します。
Kotlinで同じものに該当するのはコンパニオンオブジェクトですが、コンパニオンオブジェクトはそのままだと対象クラスに`Companion`という名前で内部クラスを生成し、そのクラス経由でアクセスできるようになります。

e.g.) `SomeClass.Companion.staticMethod()`

しかし、Domaはそんなことを知らないので`factoryMethod`で指定されたメソッドを探しに行きますが、`Companion`経由でしかアクセスできない状態なのでコンパイルエラーになります。

そのため、staticメソッドのように見えるために`@JvmStatic`をつけて上げる必要があります。

## 最後に

簡単な内容でしたが、以上でKotlinでもEnumのドメインクラスが使えるようになりました。
この記事で、本質的ではないところで時間の浪費をする人が減ってくれるといいな…

## doma kotlin-sample
ちなみに、[domaのkotlin-sample](https://github.com/domaframework/kotlin-sample/)にも[PR](https://github.com/domaframework/kotlin-sample/pull/3)を送りマージして頂きました。
送ってすぐにマージして頂けました、感謝です。


以上です。


[^1]: Qiitaやはてなブログなどに投稿しておけば検索にHITしやすいはず
Atom使いなら入れるべきパッケージ(拡張機能)

- japanese-menu
- atom-beauty
- autocomplete
- autocomplete-paths
- clang-format
- color-picker
- docblockr
- file-icons
- highlight-selected
- indent-guide-improved
- language-ini
- marge-conflicts
- pigments
- platformio-ide-terminal
- show-indeographic-space
- tag

>https://entotsu44.hatenablog.com/entry/2019/09/13/060000
FreeBSDルータープロジェクト

FreeBSDを使いルーターやファイヤウオールを構築するプロジェクトには以下のようなものがあります。

* OPNsense

https://opnsense.org

PCやサーバを使ったソリューションでWEBインターフェースを持っています。m0n0wall(モノウォール)からforkしたようです。

* pfSense

https://www.pfsense.org

サーバや専用機を使ったソリューションでWEBインターフェースを持っています。m0n0wallからforkしたようです。商用よりです。

* SmallWall

http://www.smallwall.org

m0n0wallからforkしたようですが、開発が止まっているようです。

* Bastille

https://bastillebsd.org

構成管理ツールのようだがNATなども作れるようです。

* BSD Router Project

https://bsdrp.net

amd64,i386を使ったソリューションです。

* ZRouter.org

https://zrouter.org

mips,armの小さいモジュールを対象にしたmakeベースのビルドツールです。クロスビルドでイメージを作成します。buildworld/buildkernelのラッパーです。

* freebsd-wifi-build

https://github.com/freebsd/freebsd-wifi-build

mipsの小さいモジュールを対象にしたshスクリプトベースのビルドツールです。クロスビルドでイメージを作成します。buildworld/buildkernelのラッパーです。

* crochet

https://github.com/freebsd/crochet

ルータープロジェクトではないですが、ラズパイなどのarmボードのためのビルドツールです。


参考

[NATルーターの作り方](https://qiita.com/yamori813/items/eb1f659de3c81c720acd)
inputで０から３以外を入力した時に再入力へ促したい

この内容で実行しようと思っています。
inputで選択できるのは０－３です。
私はこのコードに

もし0.1.2.3以外を入力したら

0-3の数字を入力してください

と出力してもう一度数字を入力できるようにしたいです。
できないなりに
if inputNum != 0 and inputNum != 1 and inputNum != 2 and inputNum != 3:
    print("0-3の数字を入力してください")
とか、isdigitとか例外処理とかやってみたけどpritnは表示されてももう一度数字を入力することはできません。
0-3の入力に「あ」とか「＊」とか、｢11」なんでも０－３以外は駄目なようにしたい。




dic = {}

while True:
        print("[0]新しい英単語を追加\n[1]英単語を検索する\n[2]登録単語を表示する\n[3]アプリを閉じる")
        inputNum = input()

        if int(inputNum) == 0:
            print("単語の意味（日本語）を入力してください。")
            word1 = input()
            print("英単語（単語）を入力してください。")
            word2 = input()

            dic[word1] = word2

            print("追加しました")
            print(dic)
        elif int(inputNum)== 1:
            print("検索したい(単語）の日本語を入力してください。")
            word = input()
            print(dic[word])
        elif int(inputNum) == 2:
            print("登録英単語帳データ:")
            for k, v in dic. items():
                print("英単語の意味", k)
                print("英単語", v)
        elif int(inputNum)== 3:
            print("終了します")
            break

でもできない;;
grub画面にwindows10が認識されない問題

windows10のマシンにubuntu 18.04 LTSをインストールしたが、grubにwindows10がなかった。
※そもそもgrub画面が出なかったので、この問題は[こちら](https://qiita.com/richardf/items/1d038d6b4412feedb25e)で解決。

まず[こちら](https://qiita.com/pg_pyro/items/3f928ec04c192884c0ed)で解決を試みたけれどもうまく行かなかった。
grub画面で作成したwindowsを選択しても以下のエラーができ起動できなかった。

```
エラー: unspecified search type
エラー: file '/efi/Microsoft/Boot/bootmgfw.efi' not found
```

その理由はwindows10をインストールしているHDDのパーティションがMBR形式になっていたからであった。
windows上でMBR2GPT.exeを使用することでGTP形式に変更ができた。変更方法は[こちら](https://qiita.com/richardf/items/6e988861b8f902c6ff07)。

変更後、ubuntu上で`sudo update-grub`でgrub更新。
再起動したら「Windows Boot Manager (on /dev/...)」という欄が追加され、ここからwindowsの起動ができた。
windows10がインストールされたHDDをMBR形式からGPT形式にする方法

# GPTかどうか調べる
cmdで`diskpart`と入力。
diskpart.exeというcmdに似た画面が開くのでここに`list disk`とコマンド。
GPTの列に＊マークがあればGPT、なければMBR。

<!--
スタートボタン（左下の窓アイコン）を右クリック&rarr;ディスクの管理を開く。
OSが入ったディスクを右クリック&rarr;プロパティ&rarr;ボリュームを開く。
パーティションのスタイルの欄にMBRかGPTかが確認できる。
-->

# GPTに変換できるかチェック
変換したいディスクをdisk:0とする（ディスクは上記で調べる）。
cmdで以下をコマンド。

```
mbr2gpt /validate /disk:0
```
「Validation completed successfully」と出ればOK。
「ERROR: MBR2GPT can only be used from the Windows Preinstallation Environment. Use /allowFullOS to override.」
と出た場合は以下のように`/allowFullOS`オプションを追加すればうまくいく。

```
mbr2gpt /validate /disk:0 /allowFullOS
```

# GPTに変換
cmdで以下をコマンドする。

```
mbr2gpt /convert /disk:0
```
上記のチェックで`/allowFullOS`が必要だった場合は以下のようにオプションを追加。

```
mbr2gpt /convert /disk:0 /allowFullOS
```

# メモ：MBRとGPTの違い 
- MBR形式：昔のパーティション形式。レガシBIOSで使用。
- GPT形式：これからの主流。UEFIモードで使用。昔のマザボでは使えない。2TB以上の容量が扱える。
【rails】Mysql2::Error::ConnectionError【凡ミス系】

#あなたのブラウザではこのようなエラーが出ていますか？
```
Mysql2::Error::ConnectionError
Access denied for user 'root'@'localhost' (using password: YES)
```
<img width="1016" alt="484f05f97644782bbee9a9ebc0484481 (1).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480700/d310d45a-2be8-13fb-69cb-966b32c4ac16.png">

#修正した箇所
サーバーデプロイでうまくいかなく、いろんな方法をこねくり回していて、
その残留コードが残ってました。password:に設定したpassを削除したら再度見れるようになりました。


```database.yml
default: &default
  adapter: mysql2
  encoding: utf8
  pool: 5
  username: root
  password: xxxx
  socket: /tmp/mysql.sock

  ↓

default: &default
  adapter: mysql2
  encoding: utf8
  pool: 5
  username: root
  password: 
  socket: /tmp/mysql.sock
```
根本的な解決方法はわかりませんが、修正したい箇所の修正と、ブラウザチェックできたので
一時的にOKかと思ってます。
この後サーバーデプロイを
再試行するのですが、そこでこの記述を直さなきゃいけなくなった時に再度チャレンジします。
まずは、一時的でも直る方法ををば。

そんな初歩的なエラーではないわ！というかたは下記の記事を参考にしていただた方が良いと思います。

#参考記事
Mysql2::Error::ConnectionErrorの謎を解明！
https://qiita.com/takuyanin/items/d06168f63bdbffbce3f3
【Ruby】scanメソッドでフォーマットがバラバラの年月日情報を抜き出す

## はじめに
Rubyでデフォルトで用意されている`scan`メソッドを使ってみたら便利だったのでまとめました。

参考にしたのはRuby公式リファレンスです。
[instance method String#scan (Ruby 2.6.0)](https://docs.ruby-lang.org/ja/latest/method/String/i/scan.html)

## この記事が役に立つ方
- `scan`メソッドの使い方を知らない
- Ruby初心者

## この記事のメリット
- `scan`メソッドで欲しい情報だけを抜き出した**配列**を作ることが出来るようになる

## 環境
- macOS Catalina バージョン10.15.1
- シェル：zsh
- Ruby 2.6.3

## `scan`メソッドとは？
### 公式リファレンスの説明

> self に対して pattern を繰り返しマッチし、 マッチした部分文字列の配列を返します。
> pattern が正規表現で括弧を含む場合は、 括弧で括られたパターンにマッチした部分文字列の配列の配列を返します。

### 基本構文
以下のようになります。

```ruby
文字列.scan(探索するパターン)
```

探索するパターンには**文字列**や**正規表現**が入ります。
では、次に具体的な使用例を確認しましょう。

## 具体的な使用例
### 【フォーマットが定まっていない年月日を配列にして取得したい】
例えば、以下のような年月日のデータがあるとします。
人によって表現がまちまちで、あげくの果てにはひらがな表記まであるとします。

前から何番目、、、とかでは抽出出来ません。

```
	2019/11/18
	2019-11-18
	2019.11.18
	2019年11月18日
	2019ねん11がつ18にち
```

ここから共通[年, 月, 日]の配列を取り出したい場合、以下のようにします。

```ruby
年月日の文字列.scan(/\d+/)
```

`/\d+/`は**１文字以上の数字**を表す正規表現です。
では、出力をみてみましょう。

### 【出力】

```ruby
"2019.11.17".scan(/\d+/)
=> ["2019", "11", "17"]

"2019/11/17".scan(/\d+/)
=> ["2019", "11", "17"]

"2019-11-17".scan(/\d+/)
=> ["2019", "11", "17"]

"2019年11月17日".scan(/\d+/)
=> ["2019", "11", "17"]

"2019ねん11がつ17にち".scan(/\d+/)
=> ["2019", "11", "17"]
```

どれも同様の出力を得ることが出来ました。

**間に入る文字がパターン外であれば無視される**ので、文字数の決まっていないシーンで便利です。

あとはこの配列を用いて**好きなフォーマットに整形しなおす**ことが可能になります。

## おわりに
記述がシンプルで済むのもいいですね。

他にこういうシーンで真価を発揮する！ということをご存知の方がいらっしゃれば是非教えて頂きたいです:relaxed:

## 参考にさせて頂いたサイト（いつもありがとうございます）
[instance method String#scan (Ruby 2.6.0)](https://docs.ruby-lang.org/ja/latest/method/String/i/scan.html)
検索機能実装ができる　Rails　全3回(3/3)

この記事では、Rails 5.2.3を使用した内容となっています。
WEBアプリを作成する上で必須となる機能なので、活用しましょう！
全3回にわけて記載しています。 これは、3/3ページです。

下記のリンク先が検索フォームに関する全3回のページです。
[検索機能実装ができる　1 / 3ページ]
(https://qiita.com/NishiguchiHiroki/items/9a8c55e3c248f565da1f)
[検索機能実装ができる　2 / 3ページ](https://qiita.com/NishiguchiHiroki/items/5233d421428533db8fd2)

##概要
・７つのアクションで検索機能を実装する
・コントローラーを作成する
・コントローラーを編集する
・ルーティングを設定する
・ビューを作成する
####7つのアクションで検索機能を実装する
可読性やMVCの観点から、7つのアクションを利用して開発する方が推奨されている<br>書き方になりますので、7つのアクションで仕上げるのがいいと思います。

####コントローラを作成する
| 1 | # 名前空間(tweets)を付けてコントローラーを作成する|
|:-:|:-:|
| 2 |  $ rails g controller tweets::searches |
#####名前空間(namespace)
同様のクラス名を名付けたクラスであってもそれらを区別することができます。
分割するために付けられる識別名を名前空間と呼びます。

####コントローラーを編集する
```controllers/tweets/searches_controller.rb
class Tweets::SearchesController < ApplicationController
  def index
    @tweets = Tweet.search(params[:keyword])
  end
end
```

####ルーティングを設定する
```config/routes.rb
Rails.application.routes.draw do
  devise_for :users
  root to: 'tweets#index'
  namespace :tweets do
    resources :searches, only: :index
  end
  resources :tweets do
    resources :comments, only: :create
    collection do  # この行は削除する
      get 'search'  # この行は削除する
    end  # この行は削除する
  end
  resources :users, only: :show
end
```
注意点として、必ずnamespaceメソッドの記述は、resources :tweets do<br>よりも上に書きましょう
コードは上から読み込まれるので、①検索　⇨　②検索内容を探すの順番と<br>して覚えておきましょう。
#####最後にフォームのPrefixの指定はお間違えなく！
Flutterでfirebase使えなかったのでメモ

```
Xcode build done.                                           15.4s
4.13.0 - [Firebase/Core][I-COR000003] The default Firebase app has not yet been configured. Add `[FIRApp configure];` (`FirebaseApp.configure()` in Swift) to your application initialization. Read more: https://goo.gl/ctyzm8.
*** First throw call stack:
(
	0   CoreFoundation                      0x0000000106a3c1e6 __exceptionPreprocess + 294
	1   libobjc.A.dylib                     0x00000001060d1031 objc_exception_throw + 48
	2   CoreFoundation                      0x0000000106ab1975 +[NSException raise:format:] + 197
	3   Runner                              0x0000000101e3336a +[FIRApp configure] + 352
	4   Runner                              0x0000000101eeef49 -[FLTFirebaseAnalyticsPlugin init] + 185
	5   Runner                              0x0000000101eeee28 +[FLTFirebaseAnalyticsPlugin registerWithRegistrar:] + 168
	6   Runner                              0x0000000101d9723c +[GeneratedPluginRegistrant registerWithRegistry:] + 124
	7   Runner                  <…>
```

以下を参考

- https://github.com/flutter/flutter/issues/16871

やったこと

- `GoogleService-Info.plist` を削除
- `ios/Runner.xcodeproj` をxcodeで開く
- 展開後 `Runner/Runner` 配下に `GoogleService-Info.plist` を置く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116518/08e5e494-5d86-aed2-f117-432fa0ab697e.png)

いけた！！！！！🚀

```
Xcode build done.                                           30.8s
	path: satisfied (Path is satisfied), interface: en0
	path: satisfied (Path is satisfied), interface: en0
	path: satisfied (Path is satisfied), interface: en0
[VERBOSE-2:ui_dart_state.cc(148)] Unhandled Exception: DatabaseError(1, com.firebase, Permission Denied)
```

公式ドキュメントがわかりにくいな〜〜〜😂
FILEベースCMSのGravを使い倒す！

社内の共有ツールにお手軽なブログをさがしていたところ、FILEベースのCMSというものを見つけたので、Gravを使ってみることとしました。

## 実現したいこと

wiki に代わって下記を満たせるものを探していました。

* コンテンツをマークダウンで記述したい。
* マークダウンドキュメントをそのまま公開したい。
* 面倒な画像アップロードなどはやりたくない。

## Grav とは

公式サイトより

```
Gravは、高速、シンプル、柔軟なファイルベースのWebプラットフォームです
```

キーテクノロジーは下記だと記述がありますが、詳細は調査してアップデートします。

* Twig Templating: for powerful control of the user interface
* Markdown: for easy content creation
* YAML: for simple configuration
* Parsedown: for fast Markdown and Markdown Extra support
* Doctrine Cache: for performance
* Pimple Dependency Injection Container: for extensibility and maintainability
* Symfony Event Dispatcher: for plugin event handling
* Symfony Console: for CLI interface
* Gregwar Image Library: for dynamic image manipulation

## 使ってみる

難しいインストールはなし。zipファイルをダウンロードして公開ディレクトリに置くだけ。
前提として、apache / php7.1 をインストールしておくこと。

どんなページが作成できるかも含め[スケルトンパッケージ](https://getgrav.org/downloads/skeletons)があるので、
https://getgrav.org/downloads/skeletons
からダウンロードしておいてみるのが良い。

下記２つほどスケルトンをおいて表示させてみた。

```
[root@cent html]# pwd
/var/www/html
```

```
[root@cent html]# ls -al
合計 12
drwxr-xr-x.  5 root   root   4096 11月 18 01:28 .
drwxr-xr-x.  5 root   root     46  8月  8 20:42 ..
drwxrwxr-x  14 apache apache 4096 11月  7 09:56 grav-skeleton-soraarticle-blog
drwxrwxr-x  14 apache apache 4096 11月  7 09:56 grav-skeleton-striped-site
```
SoraArticle
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141148/2dcbf9ea-3f15-77bd-370d-30698db609fa.png)

Striped Site
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141148/6e65a364-4bae-c5e6-c796-7acf64d0a262.png)



## 今後記載していきたいこと

* インストール手順
* コンテンツの書き方（特にリストページの書き方など）

## 参照

https://getgrav.org/
https://getgrav.org/downloads/skeletons

https://learn.getgrav.org/16
Flask入門その2：データフレームをスタイルシートで見栄えよく表示

# 環境
Mac、ローカル

# おしゃれなスタイルシートを拾ってきてそのまま適用できないかと目論んだが、だめだった
http://www.htmlandcssbook.com/extras/table-styles/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237551/5a346985-b3d9-dc4f-df13-546c1563c181.png)

なぜか？このスタイルシートが想定している構造（例えば下図）と
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237551/ed06f3a0-823f-674d-fab1-2244f06052be.png)

pd.DataFrame.to_html()で吐き出される構造とは違うからでる

# to_html()で吐き出される構造とJupyterっぽく表示できるところまで
非常に分かりやすいのがあった。まじでここに全部書いてあるのでコード掲載等は割愛
https://stackoverflow.com/questions/50807744/apply-css-class-to-pandas-dataframe-using-to-html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237551/f75c5cb2-8b9c-6953-3df2-1a00bb93dcd3.png)

ちなみにスタイルシートを変更したのに反映されてないぞ？と思ったら
127.0.0.1:5000/static/style.css
変更が確認できるまで何度か読み込んでからアクセスすると、反映される場合がある

# 上記参考に、cssを書き換えてちょいおしゃれにする
頑張ってこんな感じにした
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237551/5ae7b582-c09a-1b5e-9294-09e6f5b75523.png)

app.py

```python
from flask import Flask,render_template,url_for
import seaborn as sns
app = Flask(__name__)

@app.route('/')
def index():
    df = sns.load_dataset('iris')
    return render_template('index.html', 
                            table=(df
                                .head(15)
                                .to_html(classes="mystyle"))
                            )

if __name__ == "__main__":
    app.run()
```


index.html

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>mystyle</title>
    <link rel="stylesheet" 
        type="text/css"
        href="{{url_for('static', filename='style.css')}}">
    <style type="text/css">
        body {
                font-family: Arial, Verdana, sans-serif;
                font-size: 90%;
                color: #666;
                background-color: #f8f8f8;}
        </style>
</head>
<body>
        <h1>iris data table</h1>    
        {{table | safe}}
</body>
</html>
```

style.css

```css
mystyle {
	border-spacing: 0px;
	border-top: 0px solid;
	border-left: 0px solid;
	border-right: 0px solid;
	border-bottom: 0px solid;
}

.mystyle th, td {
	border-spacing: 0px;
    padding: 5px;
	border-top: 1px solid #f1f8fe;
	border-bottom: 1px solid #cbd2d8;
	border-right: 1px solid #cbd2d8;
	margin: 0px;
}

.mystyle thead, th:first-child {
	background-color: #90b4d6;
	text-shadow: -1px -1px 1px #666666;
}

.mystyle thead th{
	color:white;
	text-align: center;
	border-bottom: 2px solid #547ca0;
	letter-spacing: 0.15em;
}
.mystyle th:first-child {
	color:white;
	text-align: right;
}

.mystyle td {
	text-align: right;
}

.mystyle tr:nth-child(even) {
    background: #E0E0E0;
}

.mystyle thead tr th:first-child {
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;}

.mystyle thead tr th:last-child {
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;}    
```
※style sheetはあんまり理解してない。無駄が多いと思う