OmniAICreator/Qiita-1.07M huggingface dataset:
レーザー

レーザーポインターを、作るというのであれば。僕はそれなりに簡単に強力なものを作る作り方を教えるコトも出来ますが。
エアーガンに「装着」させるのであれば無難に、超強力レーザーポインター市販品を買うのが良いと思います。
https://www.ledpointa.com/super-laser-pointer-50000mw.html
duでカレントディレクトリ以下の使用容量をパッと見たいとき用のコマンド　隠しファイルも

# コマンド

これ使っておけば大体ＯＫ
tmp.txtが元からあった場合、壊すので注意

```shell
 du -scmh ./* ./.[^.]* | tee tmp.txt; echo "\n------------result-----------\n"; sort -rh tmp.txt ; rm tmp.txt
```

## 隠しファイルとかは出さなくていい場合

```shell
du -scmh ./* | sort -rh
```

## 隠しファイルだけ見たい場合

```shell
du -scmh ./.[^.]* | sort -rh
```
NetworkX と Matplotlib の使い方

次のページの最初のサンプルです。日本語を使えるようにしました。
[Python networkx.draw_networkx_nodes() Examples](https://www.programcreek.com/python/example/89537/networkx.draw_networkx_nodes)

```py:example_01.py
#! /usr/bin/python
#
#	example_01.py
#
#						Apr/18/2019
# ------------------------------------------------------------------
import sys
import networkx as nx
import matplotlib
import matplotlib.pyplot as plt
# ------------------------------------------------------------------
def draw_graph(edges):
    G = nx.DiGraph()
    G.add_edges_from(edges)

    values = [1.0 for node in G.nodes()]

    # Specify the edges you want here
    edge_colours = ['black' for edge in G.edges()]
    black_edges = [edge for edge in G.edges()]

    # Need to create a layout when doing
    # separate calls to draw nodes and edges
    pos = nx.spring_layout(G)
    nx.draw_networkx_nodes(G, pos, cmap=plt.get_cmap('Reds'), node_color = values, node_size=4800)
    nx.draw_networkx_edges(G, pos, edgelist=black_edges, arrows=True)
#    nx.draw_networkx_labels(G,pos,font_size=12,font_family='sans-serif')
    nx.draw_networkx_labels(G,pos,font_size=12,font_family='TakaoExMincho')
    
    plt.axis('off')
    plt.show()
#
# ------------------------------------------------------------------
edges = [('明治','大正'),('大正','昭和'),('昭和','平成'), \
		('平成','令和'),('令和','明治')]
draw_graph(edges)
# ------------------------------------------------------------------
```

実行結果
![matplot01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/b17a6ad4-cc60-bb0f-1213-b7befb0e423d.png)

日本語を使えるようにするには、次のようにします。
> font_family='TakaoExMincho'

次のバージョンで確認しました。

```text
$ python
Python 3.7.3 (default, Mar 26 2019, 21:43:19) 
[GCC 8.2.1 20181127] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import networkx
>>> import matplotlib
>>> networkx.__version__
'2.2'
>>> matplotlib.__version__
'3.0.3'
```
AWS Data PipelineとGlue

# Data Pipeline
ETLやデータ以降をマネージドでできる

以下のような機能・特徴を持つ

- ETL
- AWS間のデータ以降とかであれば、簡単なマウスとキーボードの操作だけで処理を作り、実行できるようなGUIがある
- 複雑な変換処理などは自前のプログラムを噛ませることもできる
- スケジューラ機能
- オンプレでも使える


例えばRDBからRedshiftにデータ移したいときなどに有効。
1. RDBからS3にデータをエクスポート
2. Redshiftのテーブルに合わせて変換と加工
3. Redshiftにインポート

ここがわかりやすい。
https://www.slideshare.net/AmazonWebServicesJapan/aws-black-belt-tech-2015-aws-data-pipeline-52837923?ref=https://dev.classmethod.jp/cloud/aws/cm-advent-calendar-2015-getting-started-again-datapipeline/

# Glue
フルマネージド且つサーバレスのETL
Glue単体で動かすのでは無く、AWSの他サービス間で連動させる事で機能する、つまりAWSの各サービスの連携を管理することができる
lambdaと組み合わせるとイベントドリブンで動かしたりできるらしい

以下のような機能・特徴を持つ

- AWSの各サービスの連携を管理できる
- クローラでデータソースから情報を取得してくる
- 完全マネージド
- データカタログで、Athena、EMR、Redshiftと統合できる  
データカタログに追加されたテーブル定義はETLに利用でき、各サービスでのクエリにも簡単に利用できるため、サービスの間で共通のデータビューを設定可能


# Data PipelineとGlueの違い
▼Data Pipeline

- マネージド型のオーケストレーションサービス
- 実行環境、コードを実行するコンピューティングリソースに対するアクセスと制御、およびデータ処理のコードが柔軟に変更できる
- 実行時にアカウント内でコンピューティングリソースが起動、EC2やEMRクラスタに直接アクセスできる
- Apache Spark以外のエンジンの使用が必要なユースケースや、HiveやPigなどのエンジンで複数のジョブを実行する場合はData Pipelineのほうがよい

▼Glue

 - データ優先のアプローチが採用されている
 - データカタログによって、Athena、EMR、Redshiftでのクエリにもメタデータを利用できる
 - ETLジョブは、Scala または Python
JetPackによるapt-getエラーについて

Jetson TX2での開発を行っていたら、突然ホストPC側で「sudo apt-get update」
でのエラーが発生
```
Err:41 http://us.archive.ubuntu.com/ubuntu xenial/main arm64 Packages
404 Not Found [IP: 91.189.91.23 80]
Ign:52 http://us.archive.ubuntu.com/ubuntu xenial/universe arm64 Packages
Ign:58 http://us.archive.ubuntu.com/ubuntu xenial/multiverse arm64 Packages
Err:64 http://us.archive.ubuntu.com/ubuntu xenial-updates/main arm64 Packages
404 Not Found [IP: 91.189.91.23 80]
Ign:74 http://us.archive.ubuntu.com/ubuntu xenial-updates/universe arm64 Packages
Ign:80 http://us.archive.ubuntu.com/ubuntu xenial-updates/multiverse arm64 Packages
Err:86 http://us.archive.ubuntu.com/ubuntu xenial-backports/main arm64 Packages
404 Not Found [IP: 91.189.91.23 80]
Ign:93 http://us.archive.ubuntu.com/ubuntu xenial-backports/universe arm64 Packages
Fetched 553 kB in 3s (147 kB/s)
Reading package lists... Done
W: Invalid 'Date' entry in Release file /var/lib/apt/lists/_var_nv-deep-learning-repo-ga-cuda8.0-digits5.0_Release
E: Failed to fetch http://security.ubuntu.com/ubuntu/dists/xenial-security/main/binary-arm64/Packages 404 Not Found [IP: 91.189.91.23 80]
E: Failed to fetch http://us.archive.ubuntu.com/ubuntu/dists/xenial/main/binary-arm64/Packages 404 Not Found [IP: 91.189.91.23 80]
E: Failed to fetch http://us.archive.ubuntu.com/ubuntu/dists/xenial-updates/main/binary-arm64/Packages 404 Not Found [IP: 91.189.91.23 80]
E: Failed to fetch http://us.archive.ubuntu.com/ubuntu/dists/xenial-backports/main/binary-arm64/Packages 404 Not Found [IP: 91.189.91.23 80]
E: Some index files failed to download. They have been ignored, or old ones used instead.
```

いろいろ試したけどだめだった。
行き着いた先が
[NVIDIA DEVELOPER Ubuntu 14.04/16.04 and Jetpack 3.0](https://devtalk.nvidia.com/default/topic/1003434/jetson-tx2/ubuntu-14-04-16-04-and-jetpack-3-0/)


```
> sudo apt-get purge ".*:arm64"
...
> dpkg --remove-architecture arm64
```
以上のコマンドで無事「sudo apt-get update」ができるようになった。
外部CSSファイルを動的に読み込む方法

意外とこの方法を紹介してるページが見当たらなかったので、こんな情報もあるよ的な感じで軽く残しておく。

何故この方法を使わなきゃならないのか？
⇒キャッシュがウザいからに他ならない！！ｗｗｗ

```html:index.html
<!doctype html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache">
 		<link rel="stylesheet" href="./jquery-ui-1.10.4.custom.min.css" />
		<script src="./jquery-1.11.1.min.js"></script>
		<script src="./jquery-ui-1.10.4.custom.min.js"></script>

		<link rel="stylesheet" href="./css.css" /> <!-- ←このCSSを編集後にページ再読込しても読んでくれないのです。 -->

		<!-- なので仕方ないから… -->
		<style type="text/css"></style>
		<script>
			//外部サーバのファイルを読み込む必要がある場合は、これ必須。
			//IEだとページ読み込み前にダイアログが出てウザい。
			jQuery.support.cors = true;

			//複数のファイルを指定できるように配列に
			var css = [
				"css.css",
				"hoge.css",
				"moge.css",
			];
			var css_src = "";
			
			$(function() {
				//styleタグの後ろにscriptタグ書けば、onloadイベントでの実行じゃなくても大丈夫かも。
				
				for (var i in css) {
					//同期通信＆キャッシュ無視でCSSファイルを読み込み
					$.ajax({
						type: "GET",
						url: css[i],
						async: false,
						cache: false,
						success: function(data) {
							css_src += data;
						},
						error: function(e) {
							console.log(e);
							alert("外部CSSファイルの読み込みでエラーが発生しました。\n\n" + css[i]);
						}
					});
				}
				
				//styleタグに読み込んだCSSを埋め込み
				$("style").text(css_src);
			});
		</script>
	</head>
	<body>
	…
	</body>
</html>
```

スクリプトを改造すれば、ページ読み込んだあとに切り替えも可能ですかね。
AWS LmabdaでBeautifuleSopuによるスクレイピング

# AWS LmabdaでBeautifuleSopuによるスクレイピング
AWS Lmabda環境でBeautifuleSopuによるスクレイピングでするための必要なモジュール
ソースコードと一緒にzipにしてuploadすればよい。  

bs4
requests
certifi
chardet
idna
（個人用）Djangoチュートリアルその３：汎用ビューによるviews.pyファイル作成

views.py を(PyQにおいても)これまでは関数を用いて記述してきたものの、
汎用ビューを継承してクラス定義を行うことで、よりコンパクトな記述が可能となる。

```python:polls/urls.py
from django.urls import path

from . import views

app_name = 'polls'
# detail, results の <int:question_id> を、 <int:pk> に修正
# views.index を views.IndexView.as_view() に修正
# views.detail を views.DetailVIew.as_view() に修正
# views.result も同様に修正
urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
    path('<int:pk>/', views.DetailView.as_view(), name='detail'),
    path('<int:pk>/results/', views.ResultsView.as_view(), name='results'),
    path('<int:question_id>/vote/', views.vote, name='vote'),
]
```

```python:polls/views.py
from django.http import HttpResponseRedirect  # HttpResponse は不要となった
from django.shortcuts import get_object_or_404, render
from django.urls import reverse
from django.views import generic  # django.views.generic をインポート

from .models import Choice, Question


# リストを表示するページでは、ListViewを継承してクラス定義を行うと良い
class IndexView(generic.ListView):
    # template_name を指定しない場合、"polls/question_list.html"が自動的に指定される
    template_name = 'polls/index.html'
    context_object_name = 'latest_question_list'  # コンテキスト

    def get_queryset(self):
        return Question.objects.order_by('-pub_date')[:5]


# 詳細ページでは、generic.DetailViewを継承してクラス定義を行うと良い
class DetailView(generic.DetailView):
    model = Question
    template_name = 'polls/detail.html'


class ResultsView(generic.DetailView):
    model = Question
    template_name = 'polls/results.html'

# ...
```

ここでは、ListView と DetailView を使用しています。
これらのビューはそれぞれ、「オブジェクトのリストを表示する」および「あるタイプのオブジェクトの詳細ページを表示する」という二つの概念を抽象化しています。
ionicとCapacitorとCordovaの三角関係

#はじめに
完璧に備忘録です。主にCapacitorを主観にして書いてあります。
次回はCapacitor触ってみた記事書きたい。
[Capacitor公式サイト](https://capacitor.ionicframework.com/)
#Capacitorとは
クロスプラットフォームWebアプリケーションのネイティブブリッジ。
1つのコードベースでiOS、Android、Electron、Web上でNative SDKを起動出来る。Ionic Frameworkアプリ用に最適化されていて、あらゆるWebアプリフレームワークで使用できる。

#Capacitorの依存関係
Node v8.6.0以降、およびNPMバージョン5.6.0以降
ionicでCapacitorを使うにはCordovaのSplashscreen Pluginと競合してしまうので既存のプロジェクトの場合CordovaのSplashscreen Pluginを削除する必要がある。

#Cordovaと違う点
CordovaのようにWebView上にWebページを表示するが、ページの一部、たとえばトーストだけはネイティブUIを利用するといった、ネイティブとWebViewの共存を行える点が特徴。
Web アプリケーション用のPWA。

Native APIまでの流れ
Cordova→Cordova Pliugin → Obj-c/Java → Native API
Capacitor→Swift/Kotlin→ Native API
【fish】npm -gでインストールしたらパッケージのコマンドが使えなかった

# 概要

npm -gでionicとcordovaをインストールしたらcommand not foundと言われたので色々調べて解消した話。


# 現象

* npm -gでインストールしたのにパッケージが使えない！ただ、パスを指定すれば動く
* shellはfishを利用

# 原因

PATHが通って無かった。

# 対応（ダメだったやつ）

shell上で`export PATH`を試すが、なぜか既存のPATHが上手く反映されなかった。

```sh
$ echo $PATH
/usr/local/bin /usr/bin /bin /usr/sbin /sbin
$ export PATH=$PATH
$ echo $PATH
/sbin
```

何故じゃぁぁぁぁああ...(´・ω・｀)

# 対応（解決したやつ）

fish_user_pathsを使う。コマンドは以下のような感じ。詳細は[こちら](https://fishshell.com/docs/current/tutorial.html#tut_path)を参照。

```sh
$ set -U fish_user_paths /hoge/piyo/bin $fish_user_paths
```

# 最後に

自分の使ってるものはちゃんと理解しないとダメですね。
ionicとstencilの関係性について

#はじめに
ionic4を触っていたらstencilという名の知らない奴が出てきたのでせっかくだから記事にします
[公式サイト](https://stenciljs.com/)
[ionicのブログでstencilについて語っているやつ](https://blog.ionicframework.com/tag/stencil/)
#stencilとは
再利用可能なWeb Componentsのコンパイラ。
Web componentはブラウザに組み込まれているため、どんなフレームワークやフレームワークなしでも使用できる。

#ionic4とstencilの関係
v4に更新するとStencilで作られたWeb componentに移植したIonicコンポーネントが使用される。
なのでionicの公式ブログでは特にstencilについて深く考えずに開発して問題ないとの事。
ComponentからWeb Componentになった事によりロード時間の大幅な短縮に成功した。

#stencil導入で可能になった事
特定のフレームワークに依存しないで開発ができるようになり、ReactやVueでもionicが使える様になったがReactで使うと現状不具合が起きているので開発中との事。

#まとめ
まぁなんというかstencilが導入された事により色んなフレームワークでionic使えますよーって事らしい
ionic=Angular的な考え方じゃなくなるのかなーって程度の理解度ですw
openFrameworksでOSC通信できない時はセキュリティソフトが問題かも

openFrameworksでOSC通信できず、原因を探っていました。

公式のサンプルも動かない状況で謎は深まるばかり…。

試行錯誤した結果、OSC通信できるようになったので、その原因や解決策を備忘録もかねて簡単にまとめます！

## セキュリティソフトのファイアウォールが原因だった
私がインストールしているセキュリティソフト”ESET”のファイアウォールが原因でした。

このファイアウォールをオン→オフにすると通信できたんですね！

公式のサンプルでさえ動かない…っていう人は以下をチェックすると良いでしょう。

- IPアドレスが正しいかどうか
- ポートが送受信側で一致しているかどうか
- セキュリティソフトのファイアウォール

## セキュリティソフトで通信を許可すればOK！
もしセキュリティソフトが問題であるなら、設定で通信を許可してあげれば、いちいちファイアウォールを切らなくても通信できるようになります！

今回はESETの例で紹介します。
### ESETにて通信を手動で許可する方法

#### 詳細設定をクリック
<img width="885" alt="スクリーンショット_2019-04-18_11_28_08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314351/29a97693-0a81-0a8a-c4ae-0934f03d79bf.png">

#### ネットワークをクリック→追加
<img width="442" alt="スクリーンショット_2019-04-18_11_28_21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314351/241edb58-fce8-4a7e-fbd8-f6b7f357664e.png">

<img width="629" alt="スクリーンショット_2019-04-18_11_33_28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314351/48c5f030-efd6-a155-9a72-c558fb35aaab.png">

#### 該当アプリを選択(デバック or リリース２つあるので、注意！)
<img width="603" alt="スクリーンショット_2019-04-18_11_29_39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314351/5b44b814-7216-09b1-6c88-6ace45a03ce2.png">

#### 通信の許可設定
<img width="448" alt="スクリーンショット 2019-04-18 11.29.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314351/5dfde6f7-f4ad-84f2-5768-d7cf3bf6cabd.png">

<img width="443" alt="スクリーンショット 2019-04-18 11.30.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314351/bea3a4d8-5bee-28a9-121f-ebe7699e3d37.png">

<img width="456" alt="スクリーンショット 2019-04-18 11.30.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314351/f00d731f-3bbd-6c6b-8850-a372b47bbb63.png">

## 最後に
これで無事にOSC通信ができます！

まさかセキュリティソフトが原因だったなんて、思いもしなかったです…。

快適なOSC通信ライフに繋がったら幸いです！
クラウド/Docker/Kubernetes関連の勉強会/コミュニティ/イベント

初投稿です。共有したい情報！の最初に思い浮かんだものになります。
コメント・編集リクエストをお待ちしています。

## 記載に当たって
+ 都内で参加できるクラウド/ Docker / Kubernetes 関連の勉強会/コミュニティ/イベント を列挙する
+ 分類はせず、列挙するまでに留める
+ 投稿者が実際に参加したもの
+ 投稿日時点で存在が確認できたもの
+ Twitter のハッシュタグがあればつける



## そもそも
勉強会/コミュニティ/イベントを管理運営されているWebサイトがいくつかあります。
サイトからのフィードを受け取りアンテナをはっています。

+ [connpass](https://connpass.com)
+ [Doorkeeper](https://manage.doorkeeper.jp)
+ [ATND](https://atnd.org)

TECH PLAY さんでは上記サイトでのイベントを収集・掲載されています。[^1]

+ [TECH PLAY](https://techplay.jp/)
<img width="751" alt="スクリーンショット 2019-04-18 11.02.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232123/75f9c53f-dba2-56e2-752d-cd62759aef60.png">



## リスト
+ [Docker Meetup Tokyo](https://dockerjp.connpass.com/) : [#dockertokyo](https://twitter.com/search?q=%23dockertokyo)
+ [Kubernetes Meetup Tokyo](https://k8sjp.connpass.com/) : [#k8sjp](https://twitter.com/search?q=%23k8sjp)
+ [Cloud Native Developers JP](https://cnd.connpass.com/) : [#cndjp](https://twitter.com/search?q=%23cndjp)
+ [NoOps Japan Community] (https://noops.connpass.com/) : [#NoOpsJP](https://twitter.com/hashtag/NoOpsJP?src=hash)
+ [OpenShift Japan](https://openshift.connpass.com/) : [#openshiftjp](https://twitter.com/hashtag/openshiftjp?src=hash)
+ [Oracle Cloud Hangout Cafe](https://ochacafe.connpass.com/) : [#ochacafe](https://twitter.com/search?f=tweets&q=%23ochacafe&src=typd)
+ [Container Build Meetup](https://build.connpass.com/) : [#container_build](https://twitter.com/hashtag/container_build?src=hash)
+ [JAWS-UG](https://jaws-ug.jp/) : [#jawsug](https://twitter.com/hashtag/jawsug?src=hash&lang=ja)
+ [CloudNative Days](https://cloudnativedays.jp/) : [#CNDT2019](https://twitter.com/search?f=tweets&q=%23CNDT2019&src=typd)[^2]


[^1]: https://techplay.jp/about
[^2]: 2018年までは [JapanContainerDays](https://containerdays.jp) にて活動
Materializeに挑戦

#はじめに
ビューを作っていくときに、まずはhtml.cssを用いて作成していくのが通り道であろう。自分もhtml.cssを学習して簡単なwebページくらいは一応作れるレベルだが、やはりあれはなかなかに使い勝手はよろしくない、と勝手に感じてしまっている(あくまでも個人の経験レベル)
そこで新しく学ぶのが、haml。これはhtmlをもう少し利便性を持たせて書くことができるようになるため、hamlを導入するのも多くの人が経験していく道であろう。だがそれでも、やりやすいかどうかと言われると、まぁそういう訳でもない(これも個人の経験レベル)
そこで今回はマテリアルデザインを導入して、ビューを今回は作っていこうと思う。

##Materialize
今回扱っていくのは、マテリアルデザインの中での代表格、Materializeをやっていこうと思う。
Materializeは多様なプラットフォームで統一したデザインを実装できる点や、質量感や奥行きなど現実世界のような形で扱うことができるため、非常に取り組みやすいという利点がある。

##導入法
まずはgemgfileにて、以下のgemをインストールする。

```ruby:Gemfile
gem 'materialize-sass', '~> 1.0.0'
gem 'material_icons'
```

これでmaterializeのインストールをした後に、次にscssの準備をする。railsアプリを作成したときに、`application.css`が作成されていると思うが、materializeで扱うのは`scss`ファイルである。したがって、cssファイルから`application.scss`表記を変え、以下のコードを挿入する。

```ruby:appllication.scss
 @import "materialize";
 @import "material_icons";
```

```ruby:application.js
//= require materialize
```

また通常railsでは`html.erb`ファイル形式を用いるようになっている。そのため、今回では主として`html.haml`を用いていきたいため、そこも変換していく必要がある。
そのため、まずはhamlを扱えるようにgemをインストールしていく。

```ruby:Gemfile
gem 'haml-rails'
gem 'erb2haml'
```

そして、すでに存在しているhtml.erbファイルをhamlに変換するのだが、以下のコマンドを用いれば一括でフォルダ内のhtml.erb形式ファイルをhamlに変換することができる。

```
rake haml:erb2haml
```

##使い方
実際のMaterializeの使い方は、Materializeの公式ページを参照して作っていく。例えばヘッダー部分を作りたいと思ったならば、`Materialize ヘッダー`と調べるだけでソースコードを参照できるようになる。
細かい色やサイズ、文字のフォントなどはその都度自分の好みに合わせてcssを当てることで変更させていける。

#まとめ
今回はMaterializeを使ってみた。自分でhamlのコードを一から作成してページの見た目を作っていくよりかは圧倒的にやりやすい。デザインが割と統一されてしまうため、そこがオリジナリティを出していかなければならないところとなっていきそうだが、圧倒的にこれはサイトの外観を作っていく上での時短を図れるのではないのだろうか。
これはマテリアルデザインにはまってしまいそうな予感。
【擬似ブロック】Slackで特定のユーザーをミュートにする方法

(ブラウザでSlackを使っている方向けです。済みません)


Slackで大人数のコミュニティに属していると荒らしに近い行為をする人が少なからずいますよね。

反論しても自分が荒らしに加担することになるので無視が一番なのですが・・・見るに堪えません。

そんな時に役立つスクリプトを作りました。

Slackにはユーザー単位でのブロック機能が無いんですね・・

2019/4/18:GoogleChrome動作確認済み

#使用イメージ
ビフォアアフターをご覧ください。
##【before】赤枠の部分が消えます。
<img width="1427" alt="before.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144544/775c3a60-5206-20be-8c3e-d399c6a5432a.png">

##【after】消えました。
<img width="1423" alt="after.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144544/99620be1-2694-c46a-e140-8888d72944d2.png">

#スクリプトはこちら
「ユーザー名」のところを書き換えてください。クォーテーションは要りませんよ。

```javascript

javascript:(function(){$("body").on('DOMSubtreeModified propertychange', function() {$(".c-message__sender:contains(ユーザー名)").closest(".c-virtual_list__item").hide();});})();
```

#使用方法
ブックマークレットで使いましょう。
ブックマークレットの使用方法はこちらが詳しいです。
https://qiita.com/aqril_1132/items/b5f9040ccb8cbc705d04

ではでは。
bashのプロンプトをいい感じにしていい感じの色をつける

zshだとちょー簡単にいい感じにできるみたいだけど、bashでもプロンプトをいい感じにしたいと思った。
最終的にこんな感じにできた。
正常に終了した場合は黄色のゆのっち、エラーがあった場合は赤のゆのっち。

![image](https://camo.githubusercontent.com/5b83ef7d2393840db7c3492c7e5634520146e23f/68747470733a2f2f692e6779617a6f2e636f6d2f32303730313963643037646632303035626334303738356430373462376239332e706e67)

【環境】
macOS Mojave v10.14.4
GNU bash, version 3.2.57

もっとうまく書けると思うけど、見よう見まねであんまり詳しくないので。。。

```bash
source ~/.git-prompt.sh

GIT_PS1_SHOWDIRTYSTATE=true
GIT_PS1_SHOWUNTRACKEDFILES=true
GIT_PS1_SHOWSTASHSTATE=true
GIT_PS1_SHOWUPSTREAM="auto"

# define for PS1
black=$'\e[30m' # Black - Regular
red=$'\e[31m' # Red
green=$'\e[32m' # Green
yellow=$'\e[33m' # Yellow
blue=$'\e[34m' # Blue
purple=$'\e[35m' # Purple
cyan=$'\e[36m' # Cyan
white=$'\e[37m' # White
gray=$'\e[90m' # Gray
reset=$'\e[m'

# add new line after the output
function add_line {
  if [[ -z "${PS1_NEWLINE_LOGIN}" ]]; then
    PS1_NEWLINE_LOGIN=true
  else
    printf '\n'
  fi
}
PROMPT_COMMAND='add_line'

function check_result_yunocchi {
  if [ $? -eq 0 ]; then
    face="\001${yellow}\002 ✖╹◡╹✖"
  else
    face="\001${red}\002 xX_Xx"
  fi

  echo -e "${face}\001${reset}\002 < "
}

# output prompt
prefix="\u \[$purple\]\w\[$reset\]\[$cyan\] "'$(__git_ps1 "(%s)")'"\[$reset\]\n"
PS1="${prefix}"'$(check_result_yunocchi)'
```

## ハマったところ

### `\[色\]`でくくる
くくらないと上下キーでのhistory選択したときの表示がバグる。。
友人のターミナルではくくらなくとも発生しなかったらしいので何かしらのバージョン依存の問題みたい

![image](https://camo.githubusercontent.com/e04e358cff6cac4156772ac95febf8e9c5ba6054/68747470733a2f2f692e6779617a6f2e636f6d2f36643634313965356631633866373937316363356339633161636535633962332e676966)

### `echo -e` でのエスケープコード？
ゆのっちを出し分けるところを関数にしてechoしてもうまくエスケープされない問題があった。
> \\[\\]✖╹◡╹✖\\[\\] < 

よくわかってないけど、どうやら`echo -e`、というよりはreadlineを用いるとき？の非表示文字のシーケンスは`\001`と`\002`にする必要があるらしい。
大変ハマった。。。
https://superuser.com/questions/301353/escape-non-printing-characters-in-a-function-for-a-bash-prompt
OpenLDAPが起動しない場合


インストール

```
yum install openldap-clients openldap-servers
```

設定ファイル

```
cp -p /usr/share/openldap-servers/DB_CONFIG.example /var/lib/ldap/DB_CONFIG
```


バージョン確認

```
slapd -V
```

起動

```
systemctl start slapd
Job for slapd.service failed because the control process exited with error code. See "systemctl status slapd.service" and "journalctl -xe" for details.
```

ここでどうしても起動しない、詰んだ。

journalctl -xeすると

```
 4月 18 10:51:59 runuser[15166]: pam_unix(runuser:session): session opened for user ldap by (uid=0)
 4月 18 10:51:59 runuser[15166]: pam_unix(runuser:session): session closed for user ldap
 4月 18 10:51:59 slapd[15169]: @(#) $OpenLDAP: slapd 2.4.44 (Jan 29 2019 17:42:45) $
                                                   mockbuild@x86-01.bsys.centos.org:/builddir/build/BUILD/openldap-2.4.44/openldap-2.4.44/
 4月 18 10:51:59 slapd[15169]: daemon: bind(8) failed errno=98 (Address already in use)
 4月 18 10:51:59 slapd[15169]: daemon: bind(8) failed errno=98 (Address already in use)
 4月 18 10:51:59 slapd[15169]: slapd stopped.
 4月 18 10:51:59 slapd[15169]: connections_destroy: nothing to destroy.
 4月 18 10:51:59 systemd[1]: slapd.service: control process exited, code=exited status=1
 4月 18 10:51:59 systemd[1]: Failed to start OpenLDAP Server Daemon.
```

解決方法

```
cd /var/run/openldap
rm slapd.args
```

ほかにもSELinuxのせいで起動しないとかもあります。
dbunitからBlobを読む

DBunitからBlobの項目読みたいけど、やり方がよくわからない。
記事もうまく見つけられなくて、結局ゴリゴリ実装。

もしやり方知ってる方いたら、教えていただけると嬉しいです><

```java:dbunit版

IDatabaseTester databaseTester = dbUnitUtil.getDatabaseTester();

Itable tbl = databaseTester.getConnection().createQueryTable("BLOB_TBL", "select * from BLOB_TABLE");

// 実行時error(java.lang.ClassCastException:[B cannnot be cast to java.sql.Blob])
(Blob)tbl.getValue(0, "BLOB_COLUMN1"));
```

仕方ないので、結局jdbc経由でゴリゴリ実装。

```java:jdbc版

Connection con = null;
Statement st = null;
ResultSet rs = null;

try{
   con = Drivermanager.getConnection("jdbc:oracle:thin:@XXX.XXX.XXX.XXX:XXXX:YYY");
   st = con.createStatement();
   rs = st.executeQuery("select BLOB_COLUMN1, BLOB_COLUMN2 from BLOB_TABLE");

   rs.next();

   // カラム指定は1始まりらしい
   Blob bl1 = rs.getBlob(1);
   Blob bl2 = rs.getBlob(2);
} catch(Exception e){
   e.printStackTrace();
} finally {
   rs.close();
   st.close();
   con.close();
}
```
ionic3から4への変更点まとめ

#はじめに
ionic4を触ってみてionic3からionic4への変更点結構あったので備忘録的に纏めてみました！
何か間違っている点や他にもこんなん変わったよってのがあればコメントおねしゃす！！
[公式ドキュメント](https://ionicframework.com/docs)
#ionicアプリ作成コマンド"ionic start" 
--typeオプションが追加されangularのフォルダ構造や古いionicのバージョン環境で始める事が可能。
--type=○○で実行。
[公式ドキュメントionic start](https://ionicframework.com/docs/cli/commands/start)
例:angularの環境で始める場合
$ ionic start myApp blank --type=angular

#フォルダ構造とファイル名が変更 
ionic4では、pagesフォルダが無くなり、appフォルダ直下にページ用フォルダを作成するようになった。

#`<ion-button>`の変更
これめんどくさかったのでgood
`<button ion-button></button>` // Ionic 3
`<ion-button></ion-button>  `  // Ionic 4

#routingの変更
Ionic3では、NavControllerのpushなどを用いてページ遷移していたが、ionic4ではangularのルーティングを使用。app-routing.morule.tsでルーティング管理。
$ionic g page ○○で自動的にapp-routing.morule.tsにpathが下記の様に追加され、
{ path: ‘○○’, loadChildren: ‘./○○/○○.module#○○PageModule' }
loadChildrenという記法でLazy Loadingを実装している。

Ionic3で、NavCtrl.push() を用いたときのように、ページ遷移先で自動的に「戻る」ボタンは表示されない。

# slot 
ボタンやロゴの配置の設定をする。
下記以外にも色々とオプションがあるので公式をちぇきら。
[この参考サイト](https://www.joshmorony.com/understanding-how-slots-are-used-in-ionic-4/)でも良い感じに説明してくれてます。

例:ionic3の場合

```
<ion-item>
 <button ion-button item-right>home</button>
</ion-item>
```

例:ionic4の場合

```
<ion-item>
  <ion-buttons slot="end">
    <ion-button>hoge</ion-button>
  </ion-buttons>
</ion-item>
```

#ion-navbarがion-toolbarに変更 
へーって感じ。

#RxJS5からRxJS6に変更 
これは@pondayさんの記事に分かりやすく纏めてあったのでそちら見てみてください。
[RxJS 6.0 変更点まとめ（適宜更新）](https://qiita.com/ponday/items/7966787fa0bc8f3e2dde)

#おまけ
今後 ionicは独自のフレームワークとしてAngular以外の主要フレームワークのReact、Vueでも使用可能にするとオフィシャルのブログで宣言してます。
現在ベータ版がリリースされている。
なんでこんな事が可能になったのかって記事書きましたので参考までに
###[ionicとstencilの関係性について](https://qiita.com/shinjiro-suzuki/items/e9a97f9c27454e7019a4)
DDAを使った円の描画　python

DDA（デジタル微分解析器）を使った円の描画（基礎的図形処理）のコードです。
Arch Linuxで動作確認しました。
グラフィックスのプラットフォームはpygameを使っています。
シフトと加減算のみを使った整数演算の円描画アルゴリズムですので、低性能CPUのアセンブリ言語に落とす時、便利です。

```ddacircle.py
#!/usr/bin/python3
from pygame.locals import *
import pygame
import sys
import os
from pygame.locals import *

def waitkey():
    while True:
        for event in pygame.event.get():
            if event.type == QUIT:
                sys.exit(0)
            if event.type == KEYDOWN:  # キーを押したとき
                k=pygame.key.name(event.key)
                return(k)


def draw_circle(screen,cx,cy,r):
  x=r
  y=0

# ブレゼンハムの円アルゴリズムによる円の描画
# 比較、加算、減算による座標計算
  while ( x >= y ):
    set(screen,( y+cx, x+cy))  # 0-45°の間
    set(screen,( x+cx, y+cy))  # 45-90°の間
    set(screen,(-x+cx, y+cy))  # 90-135°の間
    set(screen,(-y+cx, x+cy))  # 135-180°の間
    set(screen,(-y+cx,-x+cy))  # 180-225°の間
    set(screen,(-x+cx,-y+cy))  # 225-270の間
    set(screen,( x+cx,-y+cy))  # 270-315の間
    set(screen,( y+cx,-x+cy))  # 315-360の間
    y+=1
    r -= y+y
    if r < 1:
      x-=1
      r+=x+x

def set(screen,p):
  screen.set_at(p,(255,255,255))

def main():
    pygame.init()    # Pygameを初期化
    screen = pygame.display.set_mode((200,200))        # 200x200の画面を作成
    pygame.display.set_caption("DDAによる円の描画")    # タイトルを作成
    screen.fill((0,0,0)) # clear screen

    draw_circle(screen,100,100,50)

    pygame.display.update()
    key=waitkey()
    pygame.quit()
    sys.exit()

if __name__=='__main__':
    main()

```
Vue.js のパッケージを一括でインストール　（npm）

# 方法
package.jsonがあるディレクトリに移動して、

```
$ npm install
```

これだけで、package.jsonに書いてある必要なパッケージを一括でインストール出来ます！

pipとかでよく見るrequirements.txtみたいな感じですね！
RecButtonにて"Cannot terminate an externally created thread."が出力されてエラーになる

検証動画作成によく使っています

https://freesoft-100.com/review/recbutton.html

OS側の再生デバイスをすべて無効化している場合に、
"Cannot terminate an externally created thread."が出力されて動画が保存できなくなる

![WS000000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60220/4236462f-c822-7759-960f-0c04babe04d9.png)

再生デバイスを有効化すればOK
AWS SNSでhttpsへの通知をjson_decodeで読み込む

jsonでデータが送られてくるが、```json_decode
```しても多重連想配列が正しく読み込めず。。。。

SNSのコンソールで
「raw メッセージ配信の有効化」
を有効化したら、```json_decode
```で読み込めるようになった。
PostgreSQL　9.6.11　の使い方

#DBへの接続

```
psql -h <endpoint> -U <username> -d <dbname>
```


##テーブルを削除する

```
DROP TABLE [ IF EXISTS ] name [, ...] [ CASCADE | RESTRICT ]
```
###パラメータ
`IF EXISTS`
テーブルが存在しない場合でもエラーになりません。 この場合、注意メッセージが発行されます。

`name`
削除するテーブルの名前です（スキーマ修飾名も可）。

`CASCADE`
削除するテーブルに依存しているオブジェクト（ビューなど）を自動的に削除します。

`RESTRICT`
依存しているオブジェクトがある場合に、テーブルの削除を拒否します。 こちらがデフォルトです。

##table作成

```
CREATE TABLE table_name (
    id            varchar(255),
);
```

##tableへのお問合せ
`SELECT * FROM table_name;`

`\dt`テーブル一覧
`\q`切断

#参考
[DROP TABLE](https://www.postgresql.jp/document/9.4/html/sql-droptable.html)
Ruby に令和がやってきた 🎉

# Ruby 2.6.3 リリース

2019/04/17 (水) に Ruby 2.6.3 がリリースされました。

* [Ruby 2.6.3 リリース](https://www.ruby-lang.org/ja/news/2019/04/17/ruby-2-6-3-released/)

主な変更点は

> このリリースでは日本の新元号「令和」のサポートを追加しています。 具体的には Unicode のバージョンを 12.1 beta に更新する (#15195) とともに、date ライブラリを更新しています (#15742)。

とのことです。

ついに Ruby に令和がやってきましたね！

<img src="https://1.bp.blogspot.com/-TEfo3GegD2s/XKGJu6JrLzI/AAAAAAABSHs/_loS9jFH9GkNq7CDvHuKthAnoTy4VTWAACLcBGAs/s800/gengou_happyou_reiwa_kakageru.png" width='40%'>


# 確認

## Unicode について

「令和」の合字[^1] である U+32FF が Unicode 12.1 で予約されています。そして Ruby 2.6.3 ではそのベータ版である Unicode 12.1 beta をサポートしています。

### Ruby 2.6.2

```rb
"\u32FF"
#=> "\u32FF"
```

### Ruby 2.6.3

```rb
# 2019/04/18 (木) 時点では、ほとんどのフォントがまだ U+32FF (令和の合字) に対応していないので
# ほとんどの環境で豆腐になってしまう。
"\u32FF"
#=> "㋿"

# NFKD で Unicode 正規化すると……
"\u32FF".unicode_normalize(:nfkd)
#=> "令和"
```

令和きたー :tada:

## Date について

[Date#jisx0301](https://docs.ruby-lang.org/ja/latest/method/Date/i/jisx0301.html) メソッドで和暦 ([JIS X 0301](https://ja.wikipedia.org/wiki/ISO_8601#%E6%97%A5%E6%9C%AC_(JIS_X_0301)) 形式) を取得できるのですが、これが令和に対応しました。

### Ruby 2.6.2

```rb
require 'date'

Date.new(2019, 4, 30).jisx0301
#=> "H31.04.30"

Date.new(2019, 5, 1).jisx0301
#=> "H31.05.01"
```

### Ruby 2.6.3

```rb
require 'date'

Date.new(2019, 4, 30).jisx0301
#=> "H31.04.30"

Date.new(2019, 5, 1).jisx0301
#=> "R01.05.01"
```

R01 きたー :tada:

### おまけ

Date オブジェクトを和暦の文字列に変換するメソッドを実装してみました。

```rb
def wareki(date)
  era_initials = %w[M T S H R]
  era_names = %w[明治 大正 昭和 平成 令和]
  wday_names = %w[日 月 火 水 木 金 土]
  jisx0301_pattern = /\A([A-Z]?)(\d+)[\.-](\d+)[\.-](\d+)\z/

  era_initial, year, month, day = date.jisx0301.match(jisx0301_pattern).captures
  era_name = era_initials.zip(era_names).to_h[era_initial]
  wday_name = wday_names[date.wday]
  
  format('%s%d年%d月%d日(%s)', era_name, year, month, day, wday_name)
end

require 'date'

wareki(Date.new(1872, 12, 31))
#=> "1872年12月31日(火)"
wareki(Date.new(1873, 1, 1))
#=> "明治6年1月1日(水)"
wareki(Date.new(2019, 4, 30))
#=> "平成31年4月30日(火)"
wareki(Date.new(2019, 5, 1))
#=> "令和1年5月1日(水)"
```

[^1]: `㍼` ([U+337C](https://www.compart.com/en/unicode/U+337C)) や `㍻` ([U+337B](https://www.compart.com/en/unicode/U+337B)) のように複数の文字を合成して一文字にした文字のこと。
Webサービス等の不具合報告の方法

Webサービスの不具合を報告する時、

# URL、静止画面ファイル
をつけることがある。
例えば、読書メーターで、
https://bookmeter.com/notifications/none?status=unread
![未読.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/452b695b-f00b-9358-138e-2b7cd5ce9757.png)

未読が692件なのに、「通知はありません」
と出る。

URLだけだと、その利用者で起きている現象であるため、
他の人がそのURLでブラウザで表示しても、同じ現象が現れるとは限らない。

# エラーメッセージ、静止画面ファイル
画面ファイルに表示されている文字が読み取りにくかったり、
OSが死んでいるのかうまく動作しない時に、画面をファイルにできない場合がある。

写真で撮って、静止画面ファイルとして添付する。

写真が斜めったり、光ったりして、文字が読みやすい状態で写真が撮れないことがある。
写真を撮りなおすより、自分が読んで判断したエラーメッセージの文字を、合わせて入力して送ると助かることがある。

# 文書履歴(document history)
ver. 0.01 初稿 20190418
### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
####  Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
独学でプログラミングを学んでいる僕が今までに買った本

前回投稿したudemy教材の本Version

##フロント関係(HTMLとかCSSとかデザインとか)
<font color="red">（１）ホームページ辞典　HTML CSS JavaScript</font>
一番最初に買った本。最初はホームページ作りたかったから、これを買ったんだよね。作り方みたいなものを買うよりこういう辞典的なものを買った方が早く作れるじゃんとなった記憶がある。

<font color="red">（２）これからの「標準」を身につける HTML+CSSデザインレシピ</font>
BookOffで400円で売っていたから初心者の時に買った本。あの時は割と使っていた気がするけど、情報が古くて、もう使ってないです。プログラミング関係は新しい本を買った方が良いよ。お金を出してでも。

<font color="red">（３）WEBデザイン基礎</font>
古本で買った気がする。Webのプログラミングというよりデザイン向けの本な感じ。別途プログラミングやデザインについて学ぶ必要性を感じた。

##JavaScript関係
<font color="red">（４）jQueryデザインの教科書</font>
「JavaScriptで書くよりjQuryでコード書いた方が早い」と謎な情報を手にしてしまった時に買ったもの。割と分かりやすかった気がする。ただ、買わなくてもudemyで勉強できた気がする。jQueryはプラグインも沢山あるし。

<font color="red">(5)現場で通用する力を身につける Node.jsの教科書 </font>
まだそんなに読んでないです<font color="blue">。・゜・(/Д`)・゜・。</font>

<font color="red">（６）JavaScript フレームワーク入門 </font>
Vueなり、REACTなり、Angularの専門書買った方がよかった感は否めないですが、まぁメルカリで買ったし良いかなという感じ。勉強にはなったし。
多分自分の今の駆け出しプログラマーくらいの実力だと、一つの（Or２・３辺り）フレームワークに精通した方が良きな気がする。

##PHP関係
PHPはUdemyで学んでいるものが多い気がする。あと何冊かあると良いな。
<font color="red">（6）基礎からのPHP</font>
基礎からのPHP。色々と無料のUdemyの英語の無料の講座やらでPHPは主に勉強したけど、一冊書籍で体系的にまとまっている奴が欲しいなって思ったので書いました。
あともう一冊詳しい本（例えばPerfectPHPあたり)欲しい。

<font color="red">（7）Web職人好みの新世代PHPフレームワーク　Laravelレファレンス</font>
メルカリで安かったのと、Laravelの勉強をしたくて買った。
Udemyの教材と合わせて勉強できている感あるＯ(≧∇≦)Ｏ
まだそんなに読み込めてないです<font color="blue">。・゜・(/Д`)・゜・。

##Ruby関係
Rubyは勝又さんの動画とかの影響で一番初め勉強していたけど、PHPの案件の方が圧倒的に多いからPHPに変えました。
<font color="red">(8)Ruby on Rails 5 アプリケーションプログラミング</font>


###おわりに
まだあるので、適宜追加していきます。
とりあえず投稿して行くスタイルなのでその点ご理解頂けたら。
拙い駄文を読んで頂き誠に有難う御座いました！！
今後とも宜しくお願い致します。
BigQueryについて

#SQLによってデータ分析
SQL文によって欲しい情報を取り出す。

SELECT*FROM `$sdm-projectb2019.SYOHIN` LIMIT 1000　は
sdm-projectb2019.SYOHINに含まれるデータの中から1000件だけ取り出すことを意味する。

##条件で絞る
ある営業日のデータだけを取り出したいときは
**WHERE EIGYO_DATE=“20160411”**を挿入すれば良い。

##ソートを掛ける
単価が低い順番に並べ替えたいときは
**order by TANKA1**を挿入すれば良い。
(降順にしたい際はorder by TANKA1 **desc**)

##集計する
SELECT **count(*)** FROM `$sdm-projectb2019.SYOHIN` WHERE EIGYO_DATE=“20160411”
によって営業日が2016年4月11日のデータの合計数を計算できる。

##グループごとの総数を数える
SELECT **TANKA1**,count(*) FROM `$sdm-projectb2019.SYOHIN` group by TANKA1
あるテーブル(TANKA1)に注目し、それをグループに分類して、グループの総数を数える。
模型の知見は伝わるか。仮説（38）

模型(model)周りの知見は、何を抽象化しているか、どれくらいの水準で抽象化しているか、対象の粒度はどれくらいか、どらくらいの時間の範囲を、どれくらいの時間の刻みで把握するかなどで、千差万別かもしれない。

そこで、最近取り組んでいる案件に関連する知見をなるべく広く紹介し、どう伝えたらいいかを試行錯誤してみる。

 <この項は書きかけです。順次追記します。>

# 動的模型(dynamic model)
通信規約、OSなどのように、時間の経過に応じて処理の優先順位が変わるような場合は、動的模型を想定する。

利用者視点では、use case図を描く。
use case図では、利用者は、利用組織の社長の写真を貼ったりして分析する。
社長の発想を思い浮かべながら、分析するといろいろ進む。

通信部分をsequence図にする。
CPUの1クロックあるいは機械語の１命令の処理時間から積み上げていくか、
10μsごと、100μsごと、msごと、10msごと、100msごとの処理なのか6段階くらい検討する。

時刻同期、遅延測定、並列処理、論理回路設計などについては、timing図を描く。
すでに動作する物理的な仕組みがあれば、オシロスコープで測定した図でもよい。
あるいは、模擬試験器(simulator)で信号生成した図でもよい。

信号図のtimig図への変換については別途調査。

# 静的模型(static model)
静的なデータが存在し、その構造を操作する場合に、静的模型が役立つ。

階級・階層(class)でもよい。

課題は、階層の継承・展開の仕方
一つの方法だけだと窮屈。
いくつか方法があると、どの方法がよいかの選択方法を厳密に規定できない。

動的であれば、振る舞いの構造が似たものにすればよい。
静的だと、どういう継承がよいかが分からない。

# 新人
マネージャ・リーダーの私にとって有益な知見が得られた書籍

https://qiita.com/kazuo_reve/items/6976029e72763ea73245#_reference-df08fb0b4ee7eedaec9d

新人の方によく展開している有益な情報

https://qiita.com/kazuo_reve/items/d1a3f0ee48e24bba38f1

新人(学生)を指導するよりも新人(学生)に指導してもらった方が効率的。仮説・検証（139）

https://qiita.com/kaizen_nagoya/items/db993b1536055029f7c8

現場の新人教育：新人から学んで欲しいこと

https://qiita.com/kaizen_nagoya/items/4feb9af8a02074d16dc3

「 10年後のために今勉強しておきたい技術」は勤務時間内だけで

https://qiita.com/kaizen_nagoya/items/0ad5c118a5be4d36b4d8

# 参考資料(reference)
模型における入力と出力の均衡

https://qiita.com/kaizen_nagoya/items/f1334ad3ab5ab0375b6c

模型の知見は伝わるか。仮説（38）

https://qiita.com/kaizen_nagoya/items/3737e31c8201a288dd44

模型駆動開発(Model Driven Design)への道

https://qiita.com/kaizen_nagoya/items/bb4d73bfb3cbba88727f

USE Case図で顧客の社長の顔写真を貼る手法

https://qiita.com/kaizen_nagoya/items/84ec2775059fbf2c50a4

あなたの模型(Model)は離散(digital)ですか連続(analog)ですか

https://qiita.com/kaizen_nagoya/items/009b344ee145d7969d61

与件解析(data analysis)入門。仮説（195）

https://qiita.com/kaizen_nagoya/items/d9474c3bdb8ea0029bee

仮説（120）無限次元空間を想定すること

https://qiita.com/kaizen_nagoya/items/9f2c4d2e1ae4e1b4a7c6

仮説（122）分析と設計

https://qiita.com/kaizen_nagoya/items/d7341c407026af61f216

 ＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞

# 文書履歴(document history)
ver. 0.01 初稿 20190418
ver. 0.02 静的追記 20190419 午前
ver. 0.03 みだし変更 20190419 午後
ver. 0.04 新人追記 20210930
ver. 0.05 参考資料追記 20220306

### 最後までおよみいただきありがとうございました。

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

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

Please press the like icon 💚　and follow me for your happy life.
負荷テストシナリオ設定

#負荷テストシナリオ設定
記述方法まとめ
sample

```
?xml version="1.0"?>
<!DOCTYPE tsung SYSTEM "/home/user/work/tsung/tsung-1.0.dtd">

<tsung loglevel="notice" version="1.0">
  <clients>
    <client host="localhost" weight="1" cpu="8" maxusers="30000"/>
  </clients>
<servers>
  <server host="gsc-1611782495.us-east-1.elb.amazonaws.com" port="80" type="tcp"></server>
</servers>

  <load>

   <arrivalphase phase="1" duration="2" unit="minute">
     <users maxnumber="10" arrivalrate="2" unit="minute"></users>
   </arrivalphase>
  </load>

  <options>
   <option type="ts_http" name="user_agent">
    <user_agent probability="100">Mozilla/5.0 (Windows; U; Windows NT 5.2; fr-FR; rv:1.7.8) Gecko/20050511 Firefox/1.0.4</user_agent>
   </option>
  </options>

 <sessions>
  <session name="stress-test" probability="100" type="ts_http">

    <request subst="true">
      <http url="/" method="GET" version="1.1"></http>
    </request>
  </session>
 </sessions>
</tsung>
~

```
Let's EncryptのDNS-01方式をニフクラDNSで認証して無料のSSL証明書を取得する(lego編)

## はじめに

[Let's EncryptのDNS-01方式をニフクラDNSで認証して無料のSSL証明書を取得し自動更新する ](https://tech.fjct.fujitsu.com/entry/advent-calendar/2017/1)という話を昔しました。  
上記では、certbotとフック用のシェルスクリプトを利用する方法を紹介しましたが、今回は[lego](https://github.com/go-acme/lego)というOSSを利用した方法を紹介したいと思います。

## legoとは

Go言語で書かれたACMEクライアントで、配布されているCLIバイナリをダウンロードして使用するとコマンド1つでLet's Encryptの証明書が取得できます。  
DNS-01で認証する場合、様々なDNSサービスが対応して、サポートされているDNSサービスならすぐに証明書を発行できます。  
もちろん ニフクラ DNS にも対応しております！(使いたいので対応させました)  
このようにOSSなので、対応していないDNSサービスでも自分で実装してプルリクエストを送ることもできます。  


## 証明書を取得する

以下の流れで証明書を取得します。

### DNSゾーン登録

まずはニフクラDNSを利用するため、[こちら](https://pfs.nifcloud.com/guide/dns/zone_new.htm)を参考に認証したいドメインをコンパネからゾーン登録しておきます。

### legoのダウンロード

curlやwgetでバイナリを利用するOS等の種類に応じて[こちら](https://github.com/go-acme/lego/releases)からlegoをダウンロードしてきます。

```console
$ curl -Ls https://github.com/go-acme/lego/releases/download/v2.4.0/lego_v2.4.0_linux_amd64.tar.gz | tar zxvf - -C /usr/local/bin/ lego
$ lego -v
lego version 2.4.0 linux/amd64
```

### 証明書発行

ご自身のメールアドレス、証明書を取得したいドメイン、ニフクラAPIの認証キーを設定し、以下のコマンドを実行することで証明書を取得できます。

```console

$ export MAIL_ADDR=your_mail_address
$ export DOMAIN=your_domain

$ export NIFCLOUD_ACCESS_KEY_ID=your_access_key_id
$ export NIFCLOUD_SECRET_ACCESS_KEY=your_secret_access_key

$ lego --dns nifcloud -a --email $MAIL_ADDR --domains $DOMAIN run
```

コマンドの実行が完了すると、 `.lego/certificates/` ディレクトリに取得した証明書が作成されています。

## まとめ

certbotと比較して、DNS認証にフックスクリプトが不要な点やシングルバイナリで動作する点が便利なのでおすすめです。
React Native にて FormData 形式でファイルをアップロードしようとして詰まった話

# はじめに
自分が携わるプロジェクトでは、数100kB程度の軽い画像ファイルを通信する際に、 [GraphQL multipart request](https://github.com/jaydenseric/graphql-multipart-request-spec) で直接ファイルを転送しています。

ionic + cordova で動作している既存処理を React Native に移行する際に色々と試行錯誤しました。

かなりニッチなシチュエーションですが、同じ状況に悩む人の救いになれば、と備忘も兼ねて記事に残します。

**ニッチなシチュエーション**
- 動作環境：React Native
- [react-native-signature-pad](https://github.com/kevinstumpf/react-native-signature-pad) で生成した署名データ
- 手動で作成した HTTP Header / Body
- `content-type: 'multipart/form-data'`
- 仕様：GraphQL multipart request

# 既存のロジック（ionic）
現在動いているシステムでは、http header / body を自前で構成してサーバサイドにポストする処理が実装されていました。

参考までに、下記のような感じです。（ボディ部の定義のみ記載しています。）
`file: null` は意図的です。詳細は[コチラ](https://github.com/jaydenseric/graphql-multipart-request-spec#multipart-form-field-structure)をご覧ください。

```typescript
const body = new FormData();
body.append(
  'operations',
  JSON.stringify({
    operationName: 'UploadFileMutation',
    variables: { file: null },
    query: `mutation UploadFileMutation($file: Upload!) {
      uploadFile(file: $file) {
        success
      }
    }`,
  }),
);
body.append('map', JSON.stringify({ file: ['variables.file'] }));
body.append('file', this._fileBlob);
```

# ハマったこと（その１）
結論を先に言うと、今回 [axios](https://github.com/axios/axios) の利用は断念しました。
その理由は、こちらの [issue](https://github.com/axios/axios/issues/1321) にあります。

生成したデータを axios でサーバ側に post していましたが、リクエストを見ても `content-type` がセットされていませんでした。
ボディ部のデータが悪いのかな？と思い、色々とトライしてみてもうまくいかず…。

上述の issue では、似たような状況に陥っている人が見受けられました。（React Native 特有の問題のよう）
結局、解決策は見つけられなかったので[あるコメント](https://github.com/axios/axios/issues/1321#issuecomment-373895734)を参考にして、XMLHttpRequest で通信することにしました。

その結果、正しく `content-type: 'multipart/form-data'` がセットされるようになりました。

# ハマったこと（その２）
その１で、`content-type` は正しくセットされるようになりましたが、ファイルのアップロードはまだうまく処理されていませんでした。

今回のケースでは、既存の処理に倣い、ファイルは `Blob` で通信を試みていました。

試行錯誤する中で、[気になるコメント](https://github.com/axios/axios/issues/1321#issuecomment-402551109)を見つけました。
> true gets stringified when sent to the server, which is interesting.

Boolean で処理したはずの `true` という値がサーバ側では String の `'true'` になっている、という内容でした。

このコメントは axios のケースですが、axios は xhr adapter を利用しているようなので、もしかしたら xhr にも当てはまるのでは？と仮定し、 `Blob` での処理を断念しました。

代わりに、[apollo-upload-client](https://github.com/jaydenseric/apollo-upload-client) にある、 ReactNativeFile クラスを利用しました。

```typescript
const file = new ReactNativeFile({
  uri: values.signatureDataUrl,
  type: mimeType,
  name: 'blob',
});
```

Wiresharkを使ったリクエストの確認やサーバ側の受信データの確認をサボってしまったので、推測が入ってますが、ともあれこれでバックエンドに正しくファイルをアップロードできました。

# おわりに
その２で導入している、[apollo-upload-client](https://github.com/jaydenseric/apollo-upload-client) を使えばもっと簡単じゃないの？って思った方もいるかもしれません。

おっしゃる通りです。
いきなり apollo-upload-client を導入しようとして色々とエラーが発生したので、ステップバイステップで既存処理のコピーをやろうとしてまたハマるというお間抜けな展開でした。

とりあえず React Native 上で既存処理と同等の処理は動作したので、apollo-upload-client の導入・リファクタリングはそのうち取り掛かります。
Gmailでプレビューモードを使う

#初めに

OutLookなどのメールソフトを使っている方々にとっては当たり前となっているプレビューモード

メールをいちいちダブルクリックして開かずにシングルクリックでメールの中身を見ることができるため、時間に追われるサラリーマンなどの方々にとっては重宝します。

しかしながら、Chromeに搭載されているGmailではできない。だから、
<a href="https://outlook.live.com/owa/">outlook</a>や、<a href="https://www.thunderbird.net/ja/">thunderbird</a>にメールソフトを移行したという方も少なからずいるはずだ。

#結論
長々と書いていて結局できませんでした。みたいなことは書きたくないので、先に結論を書いておく。
Gmailでもプレビューモードにすることはできる。

以下で、そのやり方を解説していく。


#やり方
##設定方法
これが、普通のGmailのウィンドウ

<img width="898" alt="スクリーンショット 2019-04-18 10.14.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/62dd515b-47b2-2660-10b4-f93d0b85c5a2.png">

<img width="898" alt="スクリーンショット 2019-04-18 10.14.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/666cca11-8eae-1858-d194-fb7afdac906e.png">

ここから歯車アイコンを選択して
<img width="243" alt="スクリーンショット 2019-04-18 10.12.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/65c42377-21b6-2525-b936-6f2f3c32bc41.png">

設定を押下してください。すると以下のようなウィンドウに遷移するので
<img width="1130" alt="スクリーンショット 2019-04-18 10.12.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/50a566c2-3aa8-afcc-fe95-3d7ee05b5bf4.png">

タブバーから詳細設定を選択してください。

そしたら、プレニューパネルという項目がありますので、これを有効にするにチェックしてください。
<img width="1124" alt="スクリーンショット 2019-04-18 10.12.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/184995e9-3572-76fa-06c5-f3a4eab96f0e.png">

<img width="1111" alt="スクリーンショット 2019-04-18 10.12.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/b9ef5350-77c4-9024-9136-e6e6d4ca526f.png">

選択したら、画面をスクロールして「変更を保存」ボタンを押下します。
<img width="240" alt="スクリーンショット 2019-04-18 10.12.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/22c5a8e0-743b-f2a1-a05f-6693b7ec518a.png">


##画面分割のやり方
変更を保存を押下すると、一番初めの画面に戻ります。
<img width="1147" alt="スクリーンショット 2019-04-18 10.13.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/6e2921ec-ea27-4f09-080d-54ead8e697ff.png">

ここで、歯車アイコンの左に見慣れない記号があるので押下してみると
<img width="175" alt="スクリーンショット 2019-04-18 10.13.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/545c0c08-d52e-2934-76e1-0f072f216953.png">

分割なし、垂直分割、水平分割とあります。

分割なしは、一番初めのリスト状態のことですね。

###垂直分割
垂直分割を選択すると画面はこのようになります。
<img width="1130" alt="スクリーンショット 2019-04-18 10.13.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/47fe9dba-be54-bc76-a4ae-b45f54a52bb5.png">

###水平分割
水平分割を選択すると画面はこのようになります。
<img width="1131" alt="スクリーンショット 2019-04-18 10.13.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/21d47eb3-68fa-b46b-47a9-63c51dd05aa7.png">


#最後に
プレビューモードは一見便利に見えますが、短所もあります。
それは、スパムメールについてです。

通常のメールの添付ファイルはダウンロードしないとひらけないのですが、
プレビューモードをONにしておくと、添付ファイルの内容をダウンロードすることなく見れてしまうのです。これが原因で大目玉を食らった記憶があります。

・宛先のわからないメールを開くときは細心の注意を払う。
・そういったメールを開いた後には、セキュリティソフトを走らせ、ウイルスの有無をチェックする。

以上です。
PHPでASCII文字を使う

# TL;DR
一般的なパスワードとして入力可能なASCII文字をPHPで使う。

##変換
### １０進数→ASCII文字への変換

[chr関数](https://www.php.net/manual/ja/function.chr.php)を使う

```php
php > echo chr(80);
P
```

### ASCII文字→10進数への変換

[ord関数](https://www.php.net/manual/ja/function.ord.php)を使う

```php
php > echo ord('P');
80
```

##総当たり
パスワードとして使用可能なASCII文字は１０進数の33から126の範囲に含まれているので、数値のインクリメントで表現することができる。

```php
for($i=33; $i<127; $i++) {
    echo chr($i) . "\n";
}
```
独学でプログラミングを学んでいる僕が今までに読んだKindle unlimitedの本

前回やったもののKindle Unlimited Version。
割と良著も月額９８０円（私が加入した時は２ヶ月で１９９円であった）読めるのは大変良い。何冊か読めば、普通に本買うよりコスパも良いし、風呂場とか移動時間に読めるのは強い！！

Kindle　unlimitedがやってるセールについての記事
https://www.k-taimiler.com/entry/kindle-unlimited
調べれば定期的にやっているみたいなので、
気になる方はとりあえず入会してみれば良いのでは。

###(1) <font color="red">Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール Web制作者のための教科書シリーズ</font>
GitとGitHubについて。割と初心者向け。
チーム開発にまで触れられているのは、仕事でどのようにGitやGitHubを使うかをイメージ出来るようになるから良かったかな〜Udemyの講座
はじめてのGitとGitHub https://www.udemy.com/share/100dDgBEYSd1dXRng=/ 
とgoogle検索で学んだ知識が体系的になってきた感じはあります！良著な気がします。

###(2) <font color="red">Vue.jsでToDoアプリを作ってみよう</font>
Vue.jsについての参考書少なかったりするから、たまに読んだりしている。

###(３) <font color="red">Dockerのことが全くわからず現場で肩身の狭い思いをしているプログラマー向けの本</font>
Dockerについて無料で書かれているものって特にないから、読んでいる。



####おわりに
PHP系も色々と勉強しているから読んでいるけど、結局Kindle Unlimitedはビジネス書と漫画と小説ばかり読んでいるな〜（プログラミングをしろ）
拙い駄文を読んで頂き誠に有難う御座います！！
.htaccessで、アクセス制限下ページに許可していないユーザーがアクセスした時、ステータス403を404で返す方法

# 結論

IP制限をかけたいディレクトリ配下に「.htaccess」を作成し、次のような記述をします

```apache:/admin/.htaccess
### Define Environment Variables
<IfModule mod_env.c>
    # 許可するIPアドレスをここに記入
    SetEnvIf REMOTE_ADDR 192.168.33.1 IsAdmin=1
    # ロードバランサなどを使ってるならコメントアウトを外してここに記入
    #SetEnvIf X-Forwarded-For xx.xx.xx.xx IsAdmin=1
</IfModule>

### Access Restriction By Client IP Address
Order deny,allow
Deny from all
Allow from env=IsAdmin

### Replace 403 Page To 404
ErrorDocument 403 /admin/403.html
ErrorDocument 404 /admin/404.html

<Files ~ "40(3|4).html">
    Order allow,deny
    Allow from all
</Files>

### Return 404 Error To Denied Clients (To Hide Directory Exists)
<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{ENV:IsAdmin} !=1
    RewriteRule 403.html - [R=404,L]
</IfModule>
```

IP制限を記述した`.htaccess`と同階層に404ページを作成し、次のようなHTMLを記述します
(403ページは必要ありません)

```html:/admin/404.html
<!DOCTYPE html>
<html>
<head>
<title>404 Not Found</title>
</head>
<body>
<h1>Not Found</h1>
<p>The requested URL /admin/ was not found on this server.</p>
</body>
</html>
```

# 目的

アクセス制限を行っているApacheでステータス403を404で返す方法
http://blog.shinkaku.co.jp/archives/45972397.html

ほとんど上のブログに書いてある記述の通りなんですが、`Location`ディレクティブは`.htaccess`では使えません。(`httpd.conf`なら使える)
私の環境では`httpd.conf`を編集できないため、`.htaccess`だけで完結できる方法を探すことが目的でした。
(私の環境はCentOS7 - Apache2.4 ですが、CentOS6 - Apache2.2でも動くと思います)

# ディレクトリ構造

次のようなディレクトリ構造を想定しています。

```
document_root/
    admin/
        .htaccess
        404.html
    index.html
```

ドキュメントルート配下は普通に誰でも見えるが、
`/admin`ディレクトリ配下は、IP制限をかけ、許可していないユーザーのアクセス時、「404」エラーを返します。
(普通は403エラーを返しますが、それだとそこにディレクトリが存在するのを暗に示してしまうので、なんかセキュリティ上よくない気がして。)

# 追記

特定のディレクトリ配下はBASIC認証もIP制限も不要な公開領域にする必要が出てきたので、
全文を公開します。覚えられる気がしないので。
ちなみに当方環境はApache 2.4です

```apache:/admin/.htaccess

### Define Environment Variables
<IfModule mod_env.c>
    ## Allow Authenticated User Access By Client IP Address
    # Local Host
    SetEnvIf REMOTE_ADDR 192.168.33.1 IsAdmin=1
    # Global IP Address
    SetEnvIf X-Forwarded-For xx.xx.xx.xx IsAdmin=1

    ## Allow Unauthenticated User Access By Following URL
    SetEnvIf REQUEST_URI /api/ IsPublic=1
    SetEnvIf REQUEST_URI /admin/uploads/ IsPublic=1
</IfModule>

### BASIC Authorization
AuthUserFile /path/to/project/admin/.htpasswd
AuthType Basic
AuthName "Web access"
Require valid-user
Require env IsPublic

### Access Restriction
Order deny,allow
Deny from all
Allow from env=IsAdmin
Allow from env=IsPublic

### Replace 403 Page To 404
ErrorDocument 403 /admin/403.html
ErrorDocument 404 /admin/404.html

### Allow All User Access For Showing 403 And 404 Pages
<Files ~ "40(3|4).html">
    Satisfy Any
    Order allow,deny
    Allow from all
</Files>

### Return 404 Error To Denied Clients (To Hide Directory Exists)
<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{ENV:IsAdmin} !=1
    RewriteCond %{ENV:IsPublic} !=1
    RewriteRule 403.html - [R=404,L]
</IfModule>
```
CODE COMPLETE (上) -第1部 基礎を固める ④-

自分の理解を深めるために投稿します。
## 第4章：コンストラクションの重要な決断

### プログラミング言語の選択
- **高級言語**を選んだほうが**生産性・信頼性・単純さ・理解しやすさ**が向上する
  - C++, Java, Smalltalk, Visual Basicなど

- **使い慣れた言語**を使用したときのほうが生産性が向上する
- ただし、どの言語にも**長所と短所**があるので、**きちんと把握**しておく

### プログラミング規約
- コンストラクション開始前に細かく規定しておく
- 後から規約に合わせるのは困難

### 言語の「中へ」のプログラミング
- 言語の「中で」プログラミングすると、表現できることが限られてしまう
- まずは**表現したいことを決め**、それを特定の言語を使って実現していく

### コンストラクションプラクティス
- ペアプロ、テスト駆動開発など…
- プロジェクトによって合うものと合わないものがある
- 最適なプラクティスを選択・組み合わせること
【Rails】herokuへのデプロイでPrecompiling assets failedの原因がuglifier のES6部分におけるエラー

#エラー
```
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !	Push rejected to ancient-fortress-26133.
remote: 
To https://git.heroku.com/ancient-fortress-26133.git
 ! [remote rejected] master -> master (pre-receive hook declined)
```

herokuデプロイしようとしたら
Precompiling assets failed. と表示されデプロイがrejectされた。
asset周りを調べるも悪戦苦闘。

ログを遡っているとこんなメッセージが

```
Uglifier::Error: Unexpected token: keyword (const). To use ES6 syntax, harmony mode must be enabled with Uglifier.new(:harmony => true).
```

何がなにやら分からないが、ES6に基づいて書いた部分はコンパイルできないらしい。ローカルではうまくいっていたのは uglifier でコンパイルしていなかったため。

```:config/environments/production.rb
# config/environments/production.rb
config.assets.js_compressor = :uglifier
↓
config.assets.js_compressor = Uglifier.new(harmony: true)
```

これでエラーがでなくなりました！

参考にした物
https://github.com/lautis/uglifier/issues/127