OmniAICreator/Qiita-1.07M huggingface dataset:
Django-extensions

[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしている[箕牧和廣](https://qiita.com/mimaki_kazuhiro)です。
今回はDjango-extensionsについて書いていこうと思います。

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

#Django-extensions
これはDjangoの機能を拡張してくれるライブラリ。
まずはインストール。

```sh:terminal
$ pip install django-extensions Werkzeug
```

そして`settings.py`のINSTALLED_APPにdjango-extensionsを追加。

```sh:settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django-extensions', #追加
]
```

#便利な機能

###graph_models

```sh:terminal
$ python manage.py graph_models -a -o myapp_models.png
```
`graphviz`によるアプリケーションモデルのグラフを生成し、見ることができる。

###show_urls
```sh:terminal
$ python manage.py show_urls
```

プロジェクトの( url_pattern, view_function, name)のリストを生成。

###validate_templates

```sh:terminal
$ python manage.py validate_templates
```
テンプレートにレンダリングエラーがないかチェック。

###shell_plus

```sh:terminal
$ python manage.py shell_plus
```
強化されたDjango shellを起動。

###runserver_plus（Werkzeugも必要）

```sh:terminal
$ python manage.py runserver_plus
```
強化されたDjango runserverを起動。
画像をグレースケールにしてからcsvとして保存

## やりたいこと
RGBの画像ファイルを読み込んで、グレースケールかつCSV形式で保存する
需要としてはニッチだと思われるので、自分用のメモの色合いが強いです。

## 動作環境
google colaboratory

## 参考元サイト
https://newtechnologylifestyle.net/%E7%94%BB%E5%83%8F%E3%83%87%E3%83%BC%E3%82%BF%E3%81%8B%E3%82%89numpy%E5%BD%A2%E5%BC%8F%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/
参考にしました。

## コード内容
```python
from PIL import Image
import os, glob
import numpy as np

# ここらへんは自分の環境に合わせて下さい
files = glob.glob(path + "/" + class_names[1] + "/" + "*.png")
 
img_list = []

image = Image.open(files[0])
# image = image.convert("RGB")
image = image.convert("L")
data = np.asarray(image)     # <class 'numpy.ndarray'> (33, 13, 3)
print(data)
print(type(data))
print(data.shape)
from matplotlib import pyplot as plt
plt.imshow(data, cmap="gray")
plt.show()

img_list.append(data)            # <class 'list'>  
print(type(img_list))

img_list = np.array(img_list)           # <class 'numpy.ndarray'>  shape(1, 33, 13, 3)
plt.imshow(img_list[0], cmap="gray")
plt.show()

import pandas as pd
df = pd.DataFrame(data)
save_path = drive_root_dir + "/xxxxxxx/data/" + "train.csv"
df.to_csv(save_path, encoding="")
```
この後、img_listに画像を追加していく処理を追加します。
(33, 13, 3)の３つ目の3って、RGBを表していたんですね。やっと理解しました。

## コードを修正
画像のtrain.csvデータにしたいので、list型にappendして追加しているところを修正してます。このコードも自分のメモ用の性格が強いので、コメントアウトも確認用に残しています。

```python
from matplotlib import pyplot as plt
from PIL import Image
import os, glob
import numpy as np

files = glob.glob(path + "/" + class_names[1] + "/" + "*.png")
 
img_list = []
for i, file in enumerate(files):
    image = Image.open(file)
    image = image.convert("L")
    data = np.asarray(image)     # <class 'numpy.ndarray'> (33, 13, 3)
    # print(data)
    # print(type(data))
    # print(data.shape)
    # plt.imshow(data, cmap="gray")
    # plt.show()

    img_list.append(data)            # <class 'list'>  
    # print(type(img_list))

    # img_list = np.array(img_list)           # <class 'numpy.ndarray'>  shape(1, 33, 13, 3)
    plt.imshow(img_list[i], cmap="gray")
    plt.show()
    if i == 3:   # テストしたいだけなのでbreakしてます
      break

import pandas as pd
df = pd.DataFrame(img_list)
save_path = drive_root_dir + "/xxxxx/data/" + "train.csv"
df.to_csv(save_path, encoding="")
print("end")
```
デスクトップ背景にyoutube動画を再生しながらVimでコードを打てるようにしてみた

# はじめに
私はVim(Neovim)を使ってコードを書いています．私は動画を観ながらコードを書くことが多いのですが，Macではブラウザ上でのyoutubeのfull screenモードの上にVim(正確にはターミナルapp)を展開できないので，大きくともシアターモードあるいはブラウザのズームによる拡大の上でvimを重ねるしかありません．どちらにせよPCのモニター全体に動画を表示することができません．(しかもブラウザでyoutubeを見る場合はタブやメニューが有，ただし設定次第では消せるかも)

そこで，geektoolというアプリケーションを用いてhtmlページをPCモニター全体に表示しターミナルアプリの透明にすることによりVimでコードを書きながらyoutube動画をフルスクリーンで視聴できるようにします．

# そもそも...
最近はMacしか触っていないのでわかりませんでしたが，windowsやlinuxはやろうとすればブラウザ経由のyoutube動画のフルスクリーンにターミナルを重ねることができるみたいです．Windows,lLinuxユーザの方はなぜこんな回りくどいことを?状態になるかもしれないです．
Macじゃあそれができないんですよ(私が試した限りでは).

この方法で使用するgeektoolですが，これはMac(Linuxでも使用可能かも)用アプリケーションになるので，そういう意味でもMacユーザ向けになります．

# 私の環境について
IDEのような高級な環境(値段が高いという意味ではない)ではbackgroundを透明に設定できるものはなかなかないと思います．おそらくVimのようなエディタやターミナル経由で起動できるものを使用することになり，今までそれを使用してこなかった方は何を使えば良いかわからないかもしれないです．そこで一例にはなりますが，私の環境を紹介しようと思います．(おそらくこんなに面倒な思いをしてまでマネする人はいないと思が)

## 使っているもの
### Mac book Pro
こんな面倒なことまですることになった理由というか原因です．これを実現するときに初めてWindows使おうかなと思いました．

### [Alacritty](https://github.com/jwilm/alacritty)
なんだそれ？と思った方がいるかもしれませんが，Alacrittyはターミナルアプリです．
https://github.com/jwilm/alacritty
仲間ですとMacにデフォルトでインストールされているターミナル(app名です)やiTerm2です．もともとはiTerm2を使っていましたが，Alacrittyに変えました．
理由は私がプログラミング言語としてrustを使っているので，そのrustで作られているAlacrittyに惹かれたからです．それだけです．ただ，体感だとAlacrittyの方がiTerm2より起動が早く感じました．しかし，shellの設定の違いのような別の要因を考えることもできるので，アプリの違いにより早くなったかどうかはわかりません．
Alacrittyは設定をテキストベース(alacritty.yaml)でいじるので慣れていない方は難しいかもしれません．そのときはiTerm2を使うと良いです．多くの方が使用しているので調べやすいと思います．

Alacrittyを使う場合はbackgroundを透明にする際，alacritty.yaml内の**background_opacity**を次のようにすれば良いです.

```yaml:~/.config/alacirtty.yaml
... # other codes
background_opacity: 0.4 # select 0.0~1.0
... # other codes
```

0.0が完全な透明で1.0が不透明になります．

### Neovim
エディタです.私は純粋なVimではなくNeovimを使っています．どちらでも問題ないので好きな方を使えば良いです．私は新しく出てきたものを使いたくなりがちなのでNeovimを使っています(本当はもう少ししっかりした理由もありますが)．詳しくないのであまりはっきりしたことは言えませんが，ターミナル経由で起動できるものなら別のエディタ(emacsのような)でも背景は透明になるかもしれないので，Vimが必須というわけではありません．もっと言えば背景を透明にできるのであれば単独のアプリとして起動するエディタやIDEでも問題ありません．


# 使用方法
[私のリポジトリ](https://github.com/faluna/vim-bg-youtube)のREADME.mdに使用方法は記してあるので，もし私と同じように動画を観ながら(単一モニターしかない状況でフルスクリーンモードで観ながら)コードを書きたいという欲張りな方(効率性，集中力なんて興味ない方)はそちらを見てください．
https://github.com/faluna/vim-bg-youtube

ただ汎用的に作っているわけではないので，現在はyoutubeのplaylist idから動画を再生します．単一の動画をリピートし続けるような別の設定をしたい場合は自分でコードを変更していただく必要があります．Youtube-IFramePlayerAPIの使い方は公式か以下の記事でGeekToolの使い方も含めて解説している記事がありますのでそちらを参照してください．というか私はこの記事を参考にして作成しました．
[GeekToolとYoutube-IFramePlayerAPIを使って、MacでWallpaper Engineを再現する](https://qiita.com/natmark/items/43f151ae663057a1883e)

# 最後に
多くの需要があるような機能は誰かしらが実現してくれますが，このようなマイナー要望はどうしても自分で作成する必要があり，しかもなかなか記事もないです．というか数件(片手で数えるくらい)しかありませんでした．
そこまでというか全く難しいことはしていませんが，同じような要望を持っている方の役にたてば幸いです．

同じことをしたい方にこれを使って欲しいというより，これを元により良いものを作っていく参考になればと思います．

# 参考

*  [GeekToolとYoutube-IFramePlayerAPIを使って、MacでWallpaper Engineを再現する](https://qiita.com/natmark/items/43f151ae663057a1883e)
* http://www.koupapalog.com/entry/2017/12/24/000000
* https://github.com/jwilm/alacritty
【BluePrism】コレクションの重複データを除外する

こんなコレクションがあったとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186221/b337159b-d468-e777-d189-6bfc873fcbb1.png)

例えば、フィールド1～3で値が重複している行は削除したいとします。
現状、BluePrismの標準VBOには、複数列の重複を見て行削除するオブジェクトはありませんでした。（あったらすみません）
なので自作しました。

想定する結果は以下の通りです。
3、4行目が値が重複しているので、3行目を残して4行目を削除しています。
上記の通り、**残す行はコレクションデータの上から数えて最初の行**とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186221/e7910e6d-9359-663f-c7e4-db6f3730373c.png)

###Input
最大3フィールドを見て重複判定できるようにしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186221/e41752ef-2d97-01a5-4f5e-90d62233ed60.png)

###Output
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186221/9c0af404-3bd9-ebc4-5d36-935ee429c64f.png)

###Code

```vb
Try
	If Target_Field1 = "" Then
		Success = False
		Message = "Target_Field1は必須項目です。"
		Exit Sub
	End If

	Dim New_Collection As DataTable
	New_Collection = Collection_In.Clone

	Dim count As Long = 0
	For Each r As DataRow In Collection_In.Rows
		If count = 0 Then
			New_Collection.ImportRow(r)
		Else
			Dim find_rows As DataRow()
			find_rows = New_Collection.Select(Target_Field1 & " = '" & r(Target_Field1) & "'" & _
					If(Target_Field2 <> "", " AND " & Target_Field2 & " = '" & r(Target_Field2) & "'", "") & _
					If(Target_Field3 <> "", " AND " & Target_Field3 & " = '" & r(Target_Field3) & "'", ""))

			If find_rows.Length = 0 Then
				New_Collection.ImportRow(r)
			End If
		End If
		count　= count + 1
	Next

    Deduplication_Collection = New_Collection.DefaultView.ToTable
    Success = True
    Message = ""
Catch e As Exception
    Success = False
    Message = e.Message
End Try
```

##サンプル
[https://github.com/falcslab/blueprism/tree/collection](https://github.com/falcslab/blueprism/tree/collection)
BPA オブジェクト - コレクション重複削除.xml
AWS Innovate  Online Conferenceでためになった事（Amazon Connect）

# 2019/10のAWS Innovate  Online Conferenceでためになった事
はい皆さんこんにちは

結論から言うとこの記事は
Amazon Connectで１００％クラウドのコールセンターが構築できると知って
へぇーーーーーーーと思った
という話です。

ちなみにOnline Conferenceは期間限定ですが無料で視聴できます。

# 詳細
Amazon Connectを使って
・電話回線はAWSのものを使える
・従量課金
・オートスケール（アクセスに合わせてサーバが増減）
・ハードウェアや設置場所は不要

１００％クラウドとは言っているが最終的にはオペレーターに繋げて対応する事になる。

AWS 無料利⽤枠 として、サインアップした⽇から12 か⽉間︓
• 1 か⽉あたり 90 分の Amazon Connect 使⽤料 無料
• リージョンのローカル直通ダイヤルイン (DID) 番号1つ 無料
• 1 か⽉あたり 30 分のローカルインバウンド DID コール 無料
• 1 か⽉あたり 30 分のローカルアウトバウンドコール 無料

## 設定できる事

・電話番号（いくつか候補から選ぶ）
・通話録音
・IVR（新規のお問い合わせの方は、１を押してください・・・とかを機械音声で流す）
・ACD（番号に応じて優先度を変える、混雑時にアナウンスを流す）
・CTI（CRMと連携して、過去の対応履歴を表示するー＞オペレーター用）


##Elasticsearch と Kibana を使って Amazon Connect のデータをリアルタイムに活用する

こちらのブログ
https://aws.amazon.com/jp/blogs/news/use-amazon-connect-data-in-real-time-with-elasticsearch-and-kibana/

ダッシュボードを活用して業務を可視化してパフォーマンスを上げる事もできると。


~~でも今現在キバナと聞くとこれしか出ない~~
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532987/94295f07-d85b-dea6-77be-e48f17a26199.png)


##感想

今回の感想は
これを物理の時代で考えると相当大変だったよね

につきます。

・電話回線、各種機器、ストレージ、移行・・・保守・・・





**ありがとうございました。**
css 背景画像だけ暗くする

background-imageを使用してテキストを表示する場合、
画像の色とテキスト色がかぶってしまい見難いので画像のみ暗くする方法を
記載する。

HTML

```haml
<div class="background">
  <div class="text">
    <h1>WHITE</h1>
  </div>
</div>

```
CSS

```css
.background{
	background: url(任意の画像パス) no-repeat center;
	background-size: cover;
	position: relative;
	height:100vh;/* 要注意！！中身の要素を浮かせるため、
　　　　　heightを指定しておかなければbackground-imageは
　　　　　表示されない！！ */
}
.background::before{
	/* 透過した黒を重ねる */
	background-color: rgba(0,0,0,0.5);
	/* 重ねる範囲を指定 */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: ' ';
}
.text{
  position: absolute;
  width: 100%;
  text-align: center;
}
h1{
  color: white;
}

```
class="text"をposition:absoliute;で浮かせる
(浮かせないとbackground-color: rgba(0,0,0,0.5);の影響を
受けることになる。)
以上のことから、
空っぽになるclass="background"は高さを指定しておかないと
表示するものがないので、background-imageも表示されない！
なんで表示されないのかずっと悩んでいた。
AWSで分析をしてみよう

こんばんは．
この前，オンプレサーバーのconoHaでアプリを構築していたら，
マルウェアを発見しました．

FTPのアカウントがバレたらしく，バックアップをリストアしても治らなかったです．

ガバガバすぎて意味が分からなかったので，クラウドサーバーの利用を勧めました．

そんな日々が一週間続いてしまって，更新が1週間ぶり．

#ベストな分析を行おう
今回はAWSで分析シナリオを実現するために，
「どんなサービスを選択するか」
をお話ししようと思います．

##分析の流れ
分析の流れは，
収集，保存，加工，分析，可視化です．

**収集　→ kinesis
保存　→ S3
抽出　→ EMR,pipeline,Glue
分析　→ Redshift,Athema
可視化　→　QuickSight**

という流れで使っていきます．

###Kinesis
リアルタイムに大量のストリーミングデータを収集するサービス
I/O可能なので，これをS3にOutputします．

###S3
ストレージサービスです．
ここは簡単なので割愛させていただきます

###EMR
Elastic Map Reduceの略
簡単に言うと，機械学習のアプリケーションが使えるように構造を変換してくれる．

###pipeline
AWSやオンプレのデータソースについてのデータの転送を定義し，転送と抽出，変換処理を自動化できるサービス．
具体的な例を言いますと，
web鯖のログを毎日1回集めて，週に一回EMRに転送して適切な構造に変換し，
ログの分析を行う．

###Glue
転送と抽出，変換処理を自動化できるサービス．
Redshiftで利用できる構造データに変換
pythonかscalaで自動生成してくれます．
変換サービスのpipelineと何が違うの？
ってとこなんですけど，
Apach sparkっていう分散処理のエンジンにはGlueを使う．
それ以外はpipelineでok.

###Athena
S3のデータに対してテーブル定義を作って，標準的なSQLを直接発行出来ます．
ちなみに従来ではs3のデータをRedshiftのDBにロードしてクエリを発行してました．

###QuickSight
RedshiftなどのデータウェアハウスやS3/Athena/RDSなどのAWSのデータソースに接続できるBIツール
簡単に言うと企業に蓄積された大量のデータを集めて分析し、迅速な意思決定を助けるのためのツールです。．


<a href="https://qiita.com/moyuta/items/e124f8117c2e8b51da1a">Redshift</a>の内容は重たいので次回お話しします．
ログの置換出力あれこれ

# はじめに
会社的にPHPの話題が多い中、自分は.netの仕事をしているのですが、
先日そのプロジェクトで扱った話を。

# ロガーで置換出力したい
その時は「個人情報に相当する文字列をマスキングして出力したい！」という要件だったのですが、
「ロガーにより出力される文字列を正規表現置換して出したい」という、よく有るのか無いのかわからない要件に対応した記録です。

## NLogで置換出力
業務で扱っているプロジェクトにおいて、ロガーにNLogを使っていました。
configに追記すれば当該機能を利用できることがわかりました。

一般的な出力形式はtargetに以下のように書くと思います。

```xml

    <target xsi:type="File" name="file" fileName="${var:rootdir}/../var/log/app/${shortdate}.json">
      <layout xsi:type="JsonLayout">
        <attribute name="time" layout="${longdate}" />
        <attribute name="level" layout="${uppercase:${level}}" />
        <attribute name="eventid" layout="${event-properties:item=EventId.Id}" />
        <attribute name="logger" layout="${logger}" />
        <attribute name="message" layout="${message}" />
        <attribute name="url" layout="${aspnet-request-url}" />
        <attribute name="action" layout="${aspnet-mvc-action}" />
        <attribute name="exception" layout="${exception:format=tostring}" />
      </layout>
    </target>
```

この記述の前に以下のように定義を追加し

```xml

<variable name="replace_message" value="${replace:searchFor="正規表現":replaceWith="置換文字列":regex=true:inner=${message}}" />
```
もとの記述を

```xml
<attribute name="message" layout="${message}" />
↓
<attribute name="message" layout="${replace_message}" />
```

としてやればOK。
最初、ロガーの実装を弄ったり面倒なことになるかと思いましたが、
ちゃんと機能が用意されていて助かりました。

参考：https://github.com/NLog/NLog/wiki/Replace-Layout-Renderer

## node.jsのconsole.logで置換出力
当該プロジェクトではnodejsの実装もあり、console.logにおいても同様に置換出力しなくてはなりませんでした。
そんなことできるのかと思いきや、よくよく考えたらこれも大したことなく実現可能でした。

```javascript

const orglog = console.log;
console.log = (log) => {
  if (!log) {
    orglog(log);
    return;
  }
  log = {置換処理};
  orglog(log);
}
```

JSのこういう柔軟さは良くも悪くもゾクっとしますね。
WildFly 18 + mysql 8.0

WildFly でのJDBCドライバの設定

管理画面での設定は、エラーが出るので断念

参考にさせていただきました。
https://qiita.com/masahiro-aoike/items/1fb9b4d0fdf38c1314c9

https://mvnrepository.com/artifact/mysql/mysql-connector-java

######ドライバファイルをコピー
1. *Wildfly_home*/modules/system/layers/base/com/mysql/main/ ディレクトリを作成
2. 配下に mysql-connector-java-8.0.18.jar をコピー
　　Windows は、C:\Program Files (x86)\MySQL\Connector J 8.0 にインストールされているものをコピー 
3. 配下に module.xmlを作成

``` module.xml
<?xml version="1.0" encoding="UTF-8"?>
<module xmlns="urn:jboss:module:1.5" name="com.mysql">
    <resources>
        <resource-root path="mysql-connector-java-8.0.18.jar"/>
    </resources>
    <dependencies>
        <module name="javax.api"/>
        <module name="javax.transaction.api"/>
        <module name="javax.servlet.api" optional="true"/>
    </dependencies>
</module>
```

######ドライバを登録
standalone.xmlのdatasourcesセクション内の*drivers*セクションにドライバを追加

```standalone.xml
  <drivers>
    <driver name="mysql" module="com.mysql">
      <xa-datasource-class>com.mysql.cj.jdbc.MysqlXADataSource</xa-datasource-class>
    </driver>
  </drivers>
```
#####権限の追加が必要
```
GRANT XA_RECOVER_ADMIN ON *.* TO ‘usuario’@’localhost’;
FLUSH PRIVILEGES;
```
#####データソースを設定
```standalone.xml
  <datasources>
    :
    :
    <xa-datasource jndi-name="java:/webdemo" pool-name="webdemo" enabled="true">
      <xa-datasource-property name="URL">
        jdbc:mysql://localhost:3306/webdemo?serverTimezone=JST
      </xa-datasource-property>
      <driver>mysql</driver>
      <transaction-isolation>TRANSACTION_REPEATABLE_READ</transaction-isolation>
      <xa-pool>
        <min-pool-size>2</min-pool-size>
        <initial-pool-size>2</initial-pool-size>
        <max-pool-size>4</max-pool-size>
        <prefill>true</prefill>
        <flush-strategy>FailingConnectionOnly</flush-strategy>
      </xa-pool>
      <security>
        <user-name>loginuser</user-name>
        <password>loginpassword</password>
      </security>
      <validation>
        <valid-connection-checker class-name="org.jboss.jca.adapters.jdbc.extensions.mysql.MySQLValidConnectionChecker"/>
        <background-validation>true</background-validation>
        <background-validation-millis>60000</background-validation-millis>
        <exception-sorter class-name="org.jboss.jca.adapters.jdbc.extensions.mysql.MySQLExceptionSorter"/>
      </validation>
      <statement>
        <share-prepared-statements>false</share-prepared-statements>
      </statement>
    </xa-datasource>
    :
    :
  </datasources>
```
matplotlibの謎の1行目をたった1文字で消し去る超小技

#はじめに
Pythonで簡単にグラフを描画できるツールであるmatplotlib
これをJupyter Notebook上などで使いグラフを書こうとすると、グラフの上に謎の1行目が表示されることがある。今回はその謎の1行目を**たった1文字**で消す方法を書く。


# 問題
謎の1行目とは、以下の画像のようなものである。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542184/02a69c20-3117-12a1-697c-e1b668911f75.png)

この\<matplotlib.legend.Legend at ....\>の他にも、\<matplotlib.lines.Line2D at ....\>など、謎の1行目に表示される文字列はさまざまである。

# 原因
そもそも、この1行目はmatplotlib固有の問題ではなく、Jupyter Notebookの仕様によるものである。
Jupyterでは、セルの最後に評価したオブジェクトが出力される。例えば、変数strの中身を表示したいときは、わざわざ print(str) と書かなくてもセルの最後にstrと書くだけで、strの中身が表示される。これはjupyterを使う人たちにとっては周知の事実かもしれない。
この仕様により、セルの最後に評価したオブジェクト（上の画像の例でいうとplt.legend）が謎の1行目として出力されているのである。

#解決方法
この謎の1行目を消すには、セルの最後で評価したオブジェクトがNoneであれば良い。
最後のオブジェクトをNoneにするにはどうするのか、
それは**セルの最後に;（セミコロン）を打つだけである**。

なぜ最後にセミコロンを打つと、最後に評価したオブジェクトがNoneになるのか。
それはPythonにおいて（というかだいたいどの言語も）セミコロンが一文の区切りを意味するからである。つまり、最後にセミコロンを打つことで、最後の行の後に文が区切られ、最後は空のコードになる。だから評価もNoneになるということである。

これによって、謎の一行目はこのようにキレイさっぱり消え去る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542184/6381f858-a6b5-689b-df0a-f7593ffaadfa.png)

#さいごに
正直謎の1行目があったとてそれほど気にならないし、どうでもいい。
むしろあったほうが何となくカッコいい気もする。
~~研究室のAdvent Calenderの記事を書くにあたって誰ともテーマが被りたくないとの思いから、このようなニッチなテーマになったというのが正直なところである。~~
Apache Cordovaの環境構築

#はじめに
業務でApache Cordovaを使う必要に迫られたので、とりあえずインストールして動くか確認したところまでの備忘録。
OSはWindows10。
[Cordovaの公式サイト](https://cordova.apache.org/)に従って進めていく。

#Apache Cordovaとは
HTMLとJavaScriptというWebライクな言語でマルチプラットフォームアプリを作るよっていう技術。（そういうものをハイブリッドアプリというらしい）
多くの場合はiOSやAndroidといったモバイル向けアプリ作成に使われるが、Windowsや普通のWebアプリも作れる。

文系学部出身の筆者からしたらコルドバって後ウマイヤ朝の首都（Cordoba）かなって感じだけど、スペルが違った。

#下準備
Node.jsというものが必要。
>Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。

(https://nodejs.org/ja/about/ より)

うーん。
とりあえず[Node.jsの公式](https://nodejs.org/en/)からLTS版をデフォルト設定のままインストール。

その他にもアプリを動かしたいプラットフォームによって必要なものがあるらしいので、そのあたりは各自で。
筆者の場合はWindowsで動かしたかったのでVisualStudioの環境を整える必要があったが、これがまた一苦労。（それはまた別のお話）

#Cordovaのインストール
```console
npm install -g cordova
```
作成されたファイルのツリーが出力されていればたぶん成功。

#サンプルアプリケーション作成
公式チュートリアルだと、サンプルアプリはWebアプリとして作られる。~~（Cordovaを使う意味とは）~~

まずアプリを作りたいディレクトリに移動して

```console
cordova create MyApp
```

途中で匿名のレポートを送信します的なことを聞かれるので、とりあえずY。

`Creating a new cordova project.`とか出てきたら成功。
プロジェクトディレクトリの中に入りましょう。

```console
cd MyApp
```

続いてプラットフォームの追加。
先述の通り、ブラウザ上で動くWebアプリを作成するので、

```console
cordova platform add browser
```

ここまででWebアプリのサンプルが出来上がる。
実行してみてブラウザが立ち上がり、Apache Cordovaのロゴが表示されれれば完璧。

```console
cordova run browser
```

（場合によっては自動でブラウザが立ち上がらないこともあるそうなので、その時はURL手打ちで）

確認が終わったら`Ctrl` + `C`でサーバを閉じる。

#いじってみた
`MyApp/www/index.html`の`<body>`の中身を全部消して書き換えてみた。

```html:index.html
<body>
    <h1>Hello, World!</h1>
</body>
````

こうなった。
cssが効いている模様。

<img width="600" alt="Hello World - Google Chrome 2019_12_17 15_13_42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496804/49e5bb60-660f-c3d6-a610-0db7e78a010a.png">

#おわりに
序盤で言及した通り、Cordovaはハイブリッドアプリを作る技術なので、ブラウザで動くアプリを作ってもあまり意味がない。
動かしたいプラットフォームに合わせて環境を構築したり、プラグインを作成したりが醍醐味らしいが、そのあたりは追い追い。
macで su ログインできなかったので、、、

#状況

`su`でログインしようとしたら、


```
su:Sorry
```

ばかり言われてログインできなかった。
謝ってばっかじゃわかんねえよ。

てことでgoogle先生に聞いてきた。

#原因
調べてみると、どうやらMacではデフォルトでrootのパスワードが設定されていないらしい。

#設定方法
以下で設定できました。

```
$ sudo passwd root
Password:
Changing password for root.
New password:
Retype new password:
```

こんな感じで、ログインパスワードと新しいrootパスワードを要求されるので、それを打ち込めば自由にsuログインできるようになります。


それだけ。
python google 翻訳seleniumを使って英訳を得る(備忘録)

Google翻訳するには、様々な方法があります。
[このリンク](https://merkurio.blog.ss-blog.jp/2019-03-29-1)を参考にしてど自動翻訳してみました。

```python

from bs4 import BeautifulSoup
from selenium import webdriver
import urllib.parse

driver = webdriver.Chrome(r"C:\Users\xxxxxxxx\xxxxx\study\chromedriver.exe")
text = "本日は晴れ。"
url_text = "https://translate.google.co.jp/#ja/en/{0}".format(text)
url = urllib.parse.quote_plus(url_text, "/:?=&#")
driver.get(url)
html = driver.page_source
result = BeautifulSoup(html, "html.parser").find(class_="tlid-translation translation").text

print(result)

driver.close()
driver.quit()

```
It is sunny today.と訳されました。It's fine today.が正しいと思いますが、一応通じます。
Pythonで文字列からクラスを生成する

なにかの処理をスクリプトでやらせるとき、私はたいていconfigファイルを外出しにし設定値をそこに集約させ、実行するときにそのconfigを読み込ませて処理実行することにしています。  
設定値の中でも、ある処理を特定のクラスで実行させたいときがありました。
こういった時どうしたらいいでしょうか？  
数値などのパラメータを書いておいて、例えば1だったらClassA、2だったらClassBなど、コードの中でif分で分けてクラス生成しますか？  
新しくClassCのパターンが必要になったら、コードのif分を追加しないといけませんね。
pythonであればglobals()を使えば文字列からクラスオブジェクトを生成することができるので、こういった時に便利です。  

(更新)
コメントにありましたようにeval関数でも文字列からクラスオブジェクトを生成することができます。

# globals()
globals()関数を使うと実現できます。globals()は現在読み込んでいるモジュールの辞書を返してきます。これを使って文字列からクラスを生成することができます。  

# サンプルコード
サンプルコードです。

```python:parent_child.py
# 親クラス
class Parent(object):
  def __init__(self):
    pass

  def call(self):
    print("I am parent.")

# 子クラス　その１
class ChildAsBrother(Parent):
  def __init__(self):
    super().__init__()

  def call(self):
    print("I am child as brother.")

# 子クラス　その２
class ChildAsSister(Parent):
  def __init__(self):
    super().__init__()

  def call(self):
    print("I am child as sister.")

# 通常のオブジェクト生成と呼び出し
obj = Parent()
obj.call()

obj = ChildAsBrother()
obj.call()

# globals()を使ったオブジェクト生成
obj = globals()["ChildAsSister"]()     # <--- 文字列からオブジェクト生成することができる
obj.call()

# 追加
# evalを使った方法
obj = eval("ChildAsSister")()
obj.call()

obj = eval("ChildAsSister()")
obj.call()

```
実行結果はこうなります。

```
I am parent.
I am child as brother.
I am child as sister.
I am child as sister.
I am child as sister.
```
このように使えばconfigファイルに使いたいクラス名を指定しておいて、それをコードの中で直接使うことができます。便利ですねー

# そもそもglobals()って...
そもそもglobals()は具体的に何を返してくるんでしょう。
ちょっと確認してみました。ここは参考までにご紹介します。

```
print(globals())

# 実際は1行で表示されますが見にくいので改行してます。
{'__name__': '__main__', 
'__doc__': None, 
'__package__': None, 
'__loader__': <_frozen_importlib_external.SourceFileLoader object at 0xffdc5c90>, 
'__spec__': None, 
'__annotations__': {}, 
'__builtins__': <module 'builtins' (built-in)>, 
'__file__': 'parent_child.py', 
'__cached__': None, 
'Parent': <class '__main__.Parent'>, 
'ChildAsBrother': <class '__main__.ChildAsBrother'>, 
'ChildAsSister': <class '__main__.ChildAsSister'>, 
'obj': <__main__.ChildAsSister object at 0xffd18b90>}

```
詳しいことはわかりませんが、メタデータや実行環境でのクラスやオブジェクトなどが管理されているようですね。
その中のクラスを実行しているみたいです。
HCD（人間中心設計）の考え方と企業への導入について

この記事は「[株式会社エイチームフィナジーのAdvent Calendar 2019](https://qiita.com/advent-calendar/2019/ateam-finergy)」19日目の記事です。

今回はデザイン関係のお話になりますので、noteに寄稿した物をシェアさせていただきます。

[HCD（人間中心設計）の考え方と企業への導入について](https://note.com/leo_ito/n/nc9ba1c56d588)
CycleGANとpix2pixを用いて、水中画像からノイズ除去

# 论文
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550605/cdc748ec-a44d-978d-e646-2780f32637e0.png)


# 背景
CycleGANとpix2pixはあるスタイルの画像から他のスタイルに変更できます、この性質基つく、ノイズ除去できます。
CycleGANは非ペア、pix2pixはペアのデータセットが必要。

# データセット

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550605/3bb87b5b-fb51-4222-c0fc-5378b8ea978f.png)　　ペア
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550605/b02e464a-a6f4-93e0-fcaa-e472805c35fc.png)　　非ペア　







# 人工ノイズ作成
![捕获.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550605/47056de3-0c9c-d72d-5550-e3413e49b401.png)



# 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550605/694f3271-425d-3b8f-45b2-fa84b1f49eb9.png)



# まとめ
解像度が減らしたが、ノイズ除去できます。相応の研究成果はすでにDIAに投稿しました。
Switch等のゲームをYoutubeで配信するには（簡易篇）

# 配信に必要なもの
1. Switch本体や配信をしたいゲームソフト。
2. パソコン、ゲーム用のモニター
3. OBS等の配信用ソフトウェア
4. キャプチャーボード
5. マイク
6. Youtubeのアカウント

## 1. Switch本体や配信をしたいゲームソフト
これがないと何も始まりません。自身のやりたいゲームを準備しましょう。今回はSwitchに絞って記事を書きます。

## 2. パソコン、ゲーム用のモニター
パソコンに関しては割とスペックの高いものの方がいいです。あまり低スペックのパソコンだと配信画面がガクガクになったりしてしまいます。僕はGTX1070のグラボを積んでる20万ぐらいのWindowsPCを使ってたまに配信していますが、画質等を下げて安定させている感じです。
ゲーム用のモニターはパススルー機能というのをしたいからです。パススルーとはSwitchのゲーム画面をモニターにも出力して遅延を低くするものです。

## 3. OBS等の配信ソフトウェア
自身の買ったキャプチャーボードの会社が出してる配信ソフトウェアがあるとこはありますが、個人的にOBSが良いです。OBS、とても使いやすいです。

## 4. キャプチャーボード
Switchの画面をPCに出力する場合はキャプチャーボードが必要です。自分はelgatoのhd60sを使っています。今のところ困ってないので良いと思います。

## 5. マイク
配信環境にもよると思いますが、アーム等で上から吊り下げたりするとノイズが発生しにくくなります。自分はSonyのコンデンサマイクを使ってどっかに付いてきたSonyの音をよくする奴につないで配信しています。家にオーディオインタフェースがあるのでそれを今後つなげてみたいと思います。

## 6. Youtubeのアカウント
Youtubeのアカウント、あなたは作れますか？作れないならググってください。細かいことだと、ホットキーというものが配信するのに必要なので、OBS側に設定しましょう。

#終わりに
結構ざっと説明したのでさらに深いことはまた記事を書きます。
Ruby on Railsの基本的なルーティング

#はじめに
Ruby on Rails 2 Advent Calendar 2019の16日目の記事になります！
今回はRailsのルーターの基本的な記述についてまとめてみました。

#railsのルーティングとは
どのURLにアクセスすることで、何を行うか決定するのがルーティングとなります。
Ruby on Railsではroutes.rbにルーティングの設定情報を記述していきます。
routes.rbはアプリ名/config/routes.rbのパスに存在します。

#主な記法
####rootメソッド

トップページ(例えば、「http://localhost:3000/」)を開いたとき,
特定のアクションを呼び出すよう設定ができます。
以下に記述例を書いていきます。

```
root :to => 'コントローラ名#アクション名'

#下記ではトップページを開いたときtopコントローラーのindexアクションを呼び出すよう設定しています。
Rails.application.routes.draw do
  root :to => 'top#index'
end
```

####resourcesメソッド
resourcesメソッドを用いてルーティングを設定すると、
そのリソースに応じた複数のルーティングが一度に設定できます。
RESTful(RESTに従っていること)なアプリケーションを作る際にも利用することになると思います。
以下に記述例を示します。

```
Rails.application.routes.draw do
 resources :posts
end

上記の記法で以下と同じ意味合いとなります。
↓
get    '/posts',          to: 'posts#index'
get    '/posts/:id',      to: 'posts#show'
get    '/posts/new',      to: 'posts#new
get    '/posts/:id/edit', to: 'posts#edit
post   '/posts',          to: 'posts#create
patch  '/posts/:id',      to: 'posts#update'
delete '/posts/:id',      to: 'posts#destroy'

#onlyをつけることで必要なルーティングのみ出来上がります。
#下記の場合、index,showのみ有効となります。
resources :コントローラー名, only: [:index, :show]

```


####その他

ルーティングはそれぞれ個別に書くこともできます。

```
Rails.application.routes.draw do
#toを用いたり=>を用いたりする記法がありますが結果としては同じ意味になります。
　get '/posts', to: 'photos#index'
　get  "hogehoge/new"  => "hogehoge#new"
　post '/posts', to: 'photos#create'　
　post "hogehoge"      => "hogehoge#create"
end
```

#終わりに
この記事で誤っている箇所や追記したほうが良い点がありましたらコメント欄などでご指摘いただけますとありがたいです！
ルーティング１つとっても、いろいろ記法があるので用途に合わせて楽できるよう書いていきたいですね！
【Laravel】複数のartisanコマンドを同期実行し、エラーになったら途中で終了する

##環境
PHP : 5.6.30
Laravel : 5.1.46

##実装
呼び出されるバッチの中身

~~~Start.php
class Start extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'start';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'start batch';

    /**
     * Execute the console command.
     *
     * @return mixed
     */
    public function handle()
    {
        try {
            // 何らかの処理

            // 成功した場合、1を返す
            $ret = 1;

        } catch (Exception $e) {
            // エラーの場合、0を返す
            $ret = 0;
            Log::error("error_message: " . $e->getMessage());
          
        }

        return $ret;
    }
}

~~~

→他バッチも同様の戻り値を返すように設定


呼び出すバッチの中身

~~~Batch.php
class Batch extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'batch';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Batch to be executed';

    /**
     * Execute the console command.
     *
     * @return mixed
     */
    public function handle()
    {

        try{

            $ret = $this->call('start');
            if($ret != 1){
                throw new Exception('start Error');
            }

            $ret = $this->call('end');
            if($ret != 1){
                throw new Exception('end Error');
            }

        } catch (Exception $e) {
            Log::debug("error_code : ". $e->getCode());
            Log::error("error_message : " . $e->getMessage());
        }
    }

}
~~~


##補足
・戻り値を1と0としているのは、boolean型だとtrue/false問わず0で返ってきてしまったため。上手くいくならtrue/falseなどの判定で良いと思います。
使っているモジュールリスト（AWS）

# はじめに

この記事は[terraform Advent Calendar 2019](https://qiita.com/advent-calendar/2019/terraform)の11日目の記事です。
穴埋めのやっつけです。穴が空いているとランキングに乗らずに、参加者のがんばりが無駄になってしまうので。。。
とはいえ、これまでも散々扱われてきた terraform 界隈でこれといって穴埋めに足りる記事などそうそう思いつくはずもなく、、、
誰にでもすぐ書けるけど、きっと同じにはならないもの、と考えて、現在使っているモジュールを紹介することにしました。

# リスト

って、前職の時はもうちょっと広範囲に使っていたので、結構な数あったんだけど、現職ではそうでもなかった（＆自作した）ので、期待外れになったらごめんね。

- terraform-aws-modules/vpc/aws
- terraform-aws-modules/rds-aurora/aws
- terraform-aws-modules/eks/aws
- terraform-aws-modules/autoscaling/aws
- terraform-aws-modules/security-group/aws/
- terraform-aws-modules/autoscaling/aws

# 説明

## terraform-aws-modules/vpc/aws

- VPC まわりを一括管理
- 新規でVPCを作るなら迷わずこれを使ってください
- むしろ手でVPCを作るとかいう資料は破り捨ててしまえ
- 一般的なNW構成とAWSのVPCであるべき構成についてきちんと考える機会になります

## terraform-aws-modules/rds-aurora/aws

- Aurora for RDS を作る
- Aurora を使うなら迷わずこれを使ってください
- むしろ手で（ｒｙ
- RDSについて理解していないと少しだけわかりにくいけどそこを乗り越えれば最高のモジュールの1つです

## terraform-aws-modules/eks/aws

- EKS を作る
- eksctl とかなにそれおいしいの？
- 2019年にもなって EKS 使う時にワーカーノードを手で作って管理とか小学（ｒｙ
- 先のVPCモジュールと合わせて上手に管理しましょう

## terraform-aws-modules/autoscaling/aws

- オートスケーリンググループを作る
- bastion を用意する時に便利
- スケジュールアクションで、定時の間だけ起動させるとか
- 別途 packer で Ansible 使って AMI を作るのと組み合わせる

## terraform-aws-modules/security-group/aws/

- セキュリティグループを作る
- Web系サービスや bastion 用 ssh などの SG を用意するのに活用
- 個人的に地味だけど縁の下の力持ちなモジュール

# おまけ

## モジュール化しないほうが幸せになれるもの

- CloudFront は構造上リソースの中に全部つっこむ必要があるので、モジュール化しないほうが自由度が高い
- 自作ではないワンオフモジュールは、帯に短し襷に長しになりかねないので注意
- iam モジュールは慣れてないと辛くなるので、AWS IAM のあるべき姿、ベストプラクティスをよくよく理解した上で、それを適用する自信がつくまでは敬遠してもいい（ｒｙ

## 研究中

- https://github.com/eerkunt/terraform-compliance （これはモジュールじゃないけど）

## terraform の勉強に役立つ github

- https://github.com/skyscrapers
- https://github.com/cloudposse
- https://github.com/brikis98/terraform-up-and-running-code
- https://github.com/shuaibiyy/awesome-terraform

# 最後に

他のクラウドプロバイダー向けのモジュールとか、もっとAWSでも便利なモジュールあるよとか、そもそもモジュールはこう使うんだぜ、とかそういう記事がもっと読みたいなー。チラッチラッ
Google Analytics(gtag.js)でクライアントIDを取得する裏ワザ

#概要

Google Analytics(gtag.js)でクライアントIDを取得する方法は公式ドキュメントには記載されていない。
ググってもCookieから直接リードしたり、analytics.jsから取得する方法ですっきりしない。
今回は賢者の深い理解からくる裏ワザを紹介する。

なお、analytics.jsでクライアントIDを取得する方法は公式ドキュメントにある。
https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id?hl=ja#getting_the_client_id_from_the_cookie

プログラムでクライアントIDを必要とはせず、AnalyticsにクライアントIDを送信するだけでいい場合はこちら。
https://qiita.com/qrusadorz/items/b609d1b37b116806fcae


#裏ワザ公開

mbaerschさんが公開しているコードを引用する。
https://gist.github.com/mbaersch/677cfad72592631eea4d385116c91a63

>```html:gacode-example-gtag-js.html
>      var tracker_id = GA_TRACKING_ID.replace(/-/g, '_');
>      var tracker = window.ga.getByName('gtag_'+tracker_id);
>      var _lsc_clientId = tracker.get('clientId');
>```

エレガントすぎて言葉を失いそうだけど、少しだけコード解説しておく。
Analyticsを使っていれば説明不要だろう、各個に割り当てられるGA_TRACKING_IDが含んでいる-を_に置き換える。
次にgtag.jsをロードしたらwindow.gaにオブジェクトがセットされるので、これに対して前述で加工したIDに'gtag_'のプレフィクスを付けて検索する。
そうするとなんと、analytics.jsで利用していたtrackerが取得できる！

mbaerschのお言葉をGoogle翻訳先生に日本語にしてもらうとこういうことだ。

>gtag.jsは-2019年3月現在-ユニバーサルアナリティクスの単なる「シェル」です。内部的には、有名なトラッカーはまだ機能しています。


後は概要でリンクをしている公式ドキュメントにあるよう、'clientId'を引数としてget()をコールすればクライアントIDが取得できる。

#Conclusion

mbaerschさんによってtrackerを引っ張り出すという裏ワザを手に入れた。
しかし、mbaerschさん曰く

>これは不安定なソリューションであるだけでなく、内部のユニバーサルアナリティクストラッカーがあるという事実にも依存しています。gtag.jsの開発が続けば、将来的には常にそうなるとは限りません。したがって、このバージョンのコードは暫定的なソリューションにすぎません。一般に、gtag.jsで直接サポートされていないcustomTaskまたはその他の関数を使用する場合、このような一時的な配置を使用することはお勧めしません。このような場合、ユニバーサル構文を使用し続けるか、すぐにGoogleタグマネージャーに切り替えることをお勧めします。

つまり、将来的に実装が変更されて動作しなくなるリスクがあるためお勧めできないということだ。
あくまで現状の実装に依存したテクニックであり、変更リスクが伴う内部実装に依存してはいけない。
お手軽に取得できる裏ワザとして覚えておき、適用する場合には突然つかえなくなったときのことも想定した上でご使用ください。
nodistでNode.jsとnpmをアップデートする

「[npmで脆弱性見つかった](https://blog.npmjs.org/post/189618601100/binary-planting-with-the-npm-cli)から、使っている人はバージョン上げてください！」
と言われ、Windows／nodistの環境で対応しようとしたら色々ハマったので手順まとめました。
自分の備忘録兼ねています。

# 私とNode.js
- Node.jsを使った開発経験はない…
- kintoneカスタマイズでJavaScript開発していて、「ESLint使うといいよ」と言われてNode.jsのインストールから始める
- 今では、kintone関係のツール（customize-uploaderとか、プラグイン関連のツール）を活用
- というわけで、Node.jsやnpmの知識は浅め

# 環境
- Windows10
- Powershell
- nodist

# 事前準備
## nodistのバージョンアップ
nodistのバージョンが古いと、npmのアップデートするとエラーでnpmコマンドが使えなくなります。
（私はまずここでハマった）

少なくとも0.9.1では解消したバグのようです。
0.9.1より古い物を使っている人は一度nodistをアンインストールして、再インストールしてください。

```powershell:nodistのバージョン確認
nodist -v
```

1. nodistのインストール先フォルダを開く（例：C:\Program Files (x86)\nodist）
2. uninstall.exeを実行
![uninstall.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197668/a4f6bb4e-cc46-a211-3c43-aa23278d9c40.png)
3. nodistの最新版をダウンロード、exeを実行してインストールする
https://github.com/nullivex/nodist/releases
![nodist.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197668/985d1eae-0e11-723e-ca67-3779c5060f2f.png)

4. nodistのバージョンを再確認（0.9.1に上がっていることを確認してください。）

```powershell
nodist -v
```


# Node.jsのバージョンアップ
※推奨版より古いバージョン使っている方はnpmだけではなくNode.jsもバージョンアップしたほうがいいかも

現在のバージョンを確認

```powershell:Node.jsバージョンの確認
node -v
```

推奨版のバージョンをインストール（2019/12/17現在：12.13.1）

```powershell:Node.jsバージョンの確認
nodist global 12.13.1
```

推奨版のバージョンは下記から確認する。
https://nodejs.org/ja/

※ちなみに、npmとnode.jsの対応バージョンは「[リリース一覧](https://nodejs.org/ja/download/releases/)」で確認できる。
たぶんずれすぎないほうがいいんだろう…
（私の使い方だと、ツールに怒られた時くらいしかNode.jsのバージョン上げていない）

Node.jsバージョンが上がっているか確認

```powershell
node -v
```

# npm のバージョンアップ

```powershell:npmのバージョン確認
npm -v
```

npmのバージョンを上げる。
今回は「6.13.4に上げてね」ということなので、6.13.4を指定。

```powershell:npmのアップデート
nodist npm global 6.13.4
```

npmのバージョンが上がっているか確認

```powershell
npm -v
```
Qiita 初回時 画像投稿難しい件

Qiitaで画像投稿しようとすると、

```
![uploading-0]()
```
と表示されます。

調べたところ一件も投稿していないと 1MBまでしかできないようです。
(初心者殺し!!)

ちなみに ``` ですが、　Shift + @ で表示できます。
特定の文字だけフォントが変えたい? @font-faceを定義しよう！

#「※」のみフォントを変更したい
タイトルの通り、「※」のフォントのみを他のものに変えたい問題を@font-faceで解決します。
## 前提
CSSで以下のようなコードを記述すると、基本的に始めに記述してあるフォントから読み込まれ、文字そのフォントに無いorそのフォントが端末で利用不可の場合のみ、次のフォントが読み込まれます。

```css:main.css
* {
font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','ＭＳ ゴシック',sans-serif;
}
```
この状態で「※」を記述すると、YuGothicに「※」が存在するため、YuGothicが表示可能な環境ではYuGothicの「※」が表示されます。
**しかしこのご時世、この文字だけこのFontで表示してほしいみたいな不思議な要望が来ることがあります**

そんなとき、まず思いつくのは以下のようなコードです。

```html:index.html
<html>
  <style>
  * {
    font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','ＭＳ ゴシック',sans-serif;
  }
  .kome {
    font-family: 'Roboto', sans-serif;
  }
  </style>
  <body>
    <p><span class="kome">※</span>こんなことあるんか</p>
  </body>
</html>
```
このコード、ココだけなら問題なさそうです。しかし、「※」の回数が増えたり、動的なコンテンツに対応したりすると辛いものがあります。

## [@font-face](https://developer.mozilla.org/ja/docs/Web/CSS/@font-face)を定義しよう
そんなときに役に立つのが[@font-face](https://developer.mozilla.org/ja/docs/Web/CSS/@font-face)規則というCSSの規則です。
これは独自fontを規定するための規則で、オンライン上やデバイス上のフォントを読み込み、font-familyプロパティで呼び出せる形式の名前を定義します。（GoogleFontsなどでimportをした際も@font-faceの塊がインポートされている）


[@font-face](https://developer.mozilla.org/ja/docs/Web/CSS/@font-face)について詳しくは上に記載のMDNのページを見てくれといった感じなのですが、実はこの規則、unicode-rangeで対象のフォントを読み込む範囲を限定できます。

```scss:main.css
@font-face {
  //ここでのfont-familyは、名前の定義なので自分で名前をつける
  font-family: 'kome'; 

  //対象のFontを指定する、もちろんformatを指定してオンライン上やローカルのwoffファイルなどを参照することもできる。今回は面倒なのでRoboto
  src: local("Roboto");

  //unicodeの範囲指定により、フォントをロードする範囲を限定できる。今回は「※」一文字なので単一の指定(203Bは※のunicode)
  unicode-range: U+203B;

  //この定義により、※印だけロードされたRobotoのフォントを、「kome」という名前で利用可能になる。
}
* {
//komeフォントを最上位に設定。「※」以外の文字はkomeに存在しないため、下のfontがロードされる。
font-family: 'kome', 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','ＭＳ ゴシック',sans-serif;
}
```

これでこのhtmlのすべての要素の「※」は「kome」というフォント名の元Robotoで表示される事になりました。そこからさらに出し分けたいみたいなことがあれば最初の例ようなspanタグ作戦をしましょう。
.htaccessでよく使う記述

# 初めに
よく使う記述で、毎度調べたりするのが面倒なので、ここに書き溜めていきます。

## URLの書き換え
### index.html無しのURL
```
RewriteEngine on
RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ http://hogemoge.com/$1 [R=301,L]
```
### 拡張子htmlのファイルでPHPを実行
```
# 基本的な書き方
<FilesMatch "\.html$">
  AddType application/x-httpd-php .html
</FilesMatch>

# 上記が動かない場合は下記を試す（phpのバージョンは自身の環境に合わせる）
<FilesMatch "\.html$">
  AddHandler php5-script .html
</FilesMatch>
```
## リダイレクト
### 引っ越しなどのリダイレクト（ページ単位）
```
RewriteEngine on
RewriteRule ^aaa.html$ https://hogehoge.com/bbb.html [L,R=301]
```
.htaccessを使うことで、転送前のページの評価を引き継ぐことが可能なので、リダイレクトをする際は、この方法を使用することをお勧めします。
### 引っ越しなどのリダイレクト（ディレクトリ単位）
「/dirA/~」から「/dirB/~」にリダイレクトする

```
RewriteEngine on
RewriteRule ^dirA(.*)$ /dirB$1 [L,R=301]
```
「^dirA(.*)$」こう言った記述は正規表現を勉強すると詳しく理解できると思います

以上
Mac活用術

この記事では、Macで覚えておくと便利な内容を備忘録として纏めていきます。
随時追加予定です。


#Macで隠しファイルの表示・非表示を切り替えたい
例）.bashrc、.bash_profile などのファイルを触りたいが見当たらないとき

⑴ defaultsコマンド実行

```rb
$ defaults write com.apple.finder AppleShowAllFiles TRUE
```

⑵ Finder」プロセスを終了

```rb
$ killall Finder
```

#MacでDocがサブディスプレイに移動してしまったときの対処法
例）メインディスプレイからDocが消えた...
メインディスプレイの方で、カーソルを画面の一番下に押し下げれば復活します

#Macで不可視ゴミファイルを削除したい
例）データ納品する際にWindowsPCで.DS_Store などのゴミファイルが表示されて困っちゃう...
カレントディレクトリ配下で下記コマンド

```rb
$ find . -name ".DS_Store" -exec rm -r {} ;
```
Clipyが急に起動しなくなった場合の対処法 (スニペットを維持)

## 問題
mac用のクリップボード拡張アプリ[Clipy](https://clipy-app.com/)が急に起動しなくなった。
macOSのアップデート直後は起動していたし，アクセシビリティの許可も行っている..。

再インストールすれば直ると思われるがこれまで登録したスニペットは絶対に維持したい。

## 環境
Mac OS X 10.14.5 (Mojave)

## 対処法
**スニペットを維持したまま**他のアプリケーションデータを削除する。(クリップボード履歴は消えます)

1.
`~/Library/Application Support/com.clipy-app.Clipy/default.realm`にスニペット・クリップボード履歴等を含めたClipyのデータが保存されているので適宜バックアップを取る。

2.
Realmのデータをリアルタイムに表示・編集できるツールである[Realm Browser](https://realm.io/jp/docs/get-started/installation/mac/#realm-browser)をダウンロードする。

3.
Realm Browserで`~/Library/Application Support/com.clipy-app.Clipy/default.realm`を開き，3つあるClassの内のスニペットに関わりそうな`CPYFolder`と`CPYSnippet`をそのままに，クリップボード履歴が入っていた`CPYClip`の中身を削除する。

4.
Clipyが無事に起動するようになりました！
windowsでpython　基本②

#演算

###変数への値の代入
　変数名＝値
　ex)sum=10　、　animal='dog'

　変数に格納されている値を確認するにはprint(変数名)で確認できる！

###演算子
　＋：足し算
　－：引き算
　＊：掛け算
　/：割り算
　//：小数点以下切り捨ての割り算
　％：余剰(余りを出す)
　**：べき乗

###複合代入演算子
　+=：足し算　　ex)a+=2　→　a=a+2
　-=：引き算
　*=：掛け算
　/=：割り算
　//=：小数点以下切り捨ての割り算
　%=：余剰
　**=：べき乗

###文字列の連結

#####文字列の連結
　'文字列A'＋'文字列B'
　　ex)>>>'とも'+'だち'
　　　　ともだち

#####文字列の繰り返し連結
　'文字列'*正の整数
　　ex)>>>'ab'*4
　　　　abababab

###文字列の長さの取得
　len('文字列')
　　ex)>>>len('2222222')
　　　　7
バグバウンティにチャレンジしてみた！


シーエー・アドバンス技術統括本部の @inahuku_shingo です。
普段は業務で脆弱性診断をしています。


さっそくですが…
バグバウンティとは、バグバウンティ（脆弱性報奨金制度）を行っているサービスやアプリケーションの脆弱性を探し出して報告することで、報奨金を獲得できる制度のことです。

## 主なバグバウンティ
HackerOne 
[https://hackerone.com/](https://hackerone.com/)

Bugcrowd
[https://www.bugcrowd.com/](https://www.bugcrowd.com/)

BugBounty.jp
[https://bugbounty.jp/](https://bugbounty.jp/)

サイボウズ脆弱性報奨金制度
[https://cybozu.co.jp/products/bug-bounty/](https://cybozu.co.jp/products/bug-bounty/)

他にもGoogleやFacebookもやっています。

クリティカルな脆弱性を見つけることができれば、多額の賞金を稼ぐことができる可能性もあります！（夢がありますね…！）


## HackerOneでチャレンジしてみた！
今回は登録されているプロジェクトが多そうなHackerOneを選びました！

アカウントを登録して、バグバウンティ対象のサービスを見ていきます。
https://hackerone.com/directory/programs

私は英語が（とても）苦手なのでGoogle翻訳でガイドラインを読みつつ、
色々なプロジェクトにアクセスしながら脆弱性を探して数週間…

……

…

…

__とあるサービスで脆弱性を見つけることができました！__

当然報告書も（とても苦手な）英語なので、
Google翻訳を使いつつ、HackerOneで公開されている過去の報告内容を参考にしつつ、なんとか報告することができました…！

見つけた脆弱性はまだサービス側で対応中とのことなので詳細は省きますが、
ざっくり下記のような内容で報告しました。

・脆弱性を確認した環境（ブラウザのバージョン等）を記載
・脆弱性が発生するために必要な各種設定の詳細
・脆弱性を確認するための手順をできるだけわかりやすく記載
・文章で伝わりにくいと思われる箇所は、スクリーンショットにして報告書に添付
・リクエストとレスポンスの内容

数日後、報告した脆弱性は無事受理されて、HackerOneによる脆弱性のトリアージ（危険度の確認と設定）完了後、サービス側に報告されたようです。
あとは、報奨金がもらえるまで待つだけです！やったー！

※サービスによっては結構時間がかかるようです。ちなみに今時点でまだもらえていません…！

## 注意したこと
今回はじめてバグバウンティにチャレンジしてみたのですが、
脆弱性を探すにあたって下記のことに注意しました。

__サービスのガイドラインをちゃんと守る__
HackerOneに登録されているプロジェクトによって、設定されているガイドラインが違うため、事前にしっかりと把握するようにしました。
ガイドラインを違反した状態で見つけた脆弱性は、受理されないこともあるので要注意です。


__脆弱性を探す用のアカウントを使用する__
もし、脆弱性があってアカウントが正常に使用できなくなってしまった場合、自分だけではなく、他のユーザーにも影響がでてしまいます。
また、他ユーザーの重要情報を取得できないかなどの観点で脆弱性を探す場合に、
脆弱性を突いて関係のないユーザーの情報を得てしまわないように、自分が作成したアカウントのみで確認することも大事です。
HackerOneに登録されているプロジェクトに、普段使っているサービスがありましたが、
その場合も専用のアカウントを作って確認しました。

__発見した脆弱性を他言しない__
悪用される恐れがあるので、修正されて脆弱性がしっかりと塞がれたと確認できるまでは他言しないようにしています。


## 最後に
今年は結局1つしか報告できなかったのですが、来年はもっと見つけていきたいですね！
ということで、ここまで読んでいただき、ありがとうございました。


## 補足！
もし、バグバウンティをやってみたい方がいらっしゃったら、下記を参考にされるといいかもしれません！

・脆弱性の見つけ方について
脆弱性の発見・報告に関する勉強会～初めての脆弱性調査～
https://www.ipa.go.jp/security/vuln/report/notice/handling_20190926.html
※勉強会は終了していますが、講演資料のpdfが参考になりました！

気軽に脆弱性を見つけてみよう！
https://qiita.com/ihahajime/items/0146ce5515b7a1bbb454
※弊社伊波のアドベントカレンダー17日目の記事です！

Hacker Activity
https://hackerone.com/hacktivity
※HackerOneで公開されている過去のレポートです！脆弱性の詳細や、報告の仕方などが参考になります！


・プロキシツールの使い方について
Windows 10 + Burp Suite で Android 8.0 のアプリの通信を取得する方法
https://qiita.com/toubaru/items/a3427bc4b4e9da33c12f
※弊社桃原のアドベントカレンダー1日目の記事です！

OWASP ZAPを使って通信を取得する設定をサクサク書いてみた（Chrome）
https://qiita.com/inahukus/items/9e82801965c9c3e73e13
※手前味噌ですみません自分の記事です…！
昨日、Gmailに何通メールが届いたか教えてくれるやつ

( ﾟдﾟ)ﾊｯ! Advent Calendarのネタが付きかけている！！

というわけで、クソアプリ系のネタです。
Gmailに何通メールが届いたか知るのにいちいちクエリ書いて... っていうのも面倒なので、集計してメール送ってもらうようにしました。

```js
function sumally() 
{
  var n = new Date();
  var y = (function(){this.setDate(this.getDate()-1); return this}).call(new Date);
  var today = n.getFullYear() + "-" + (n.getMonth() + 1) + "-" + n.getDate()
  var yesterday = y.getFullYear() + "-" + (y.getMonth() + 1) + "-" + y.getDate()
  var sentCount = 0, receivedCount = 0;

  //Received count
  var receivedSearchQuery = "before:"+today+" after:"+yesterday+" -is:sent";
  var threads = GmailApp.search(receivedSearchQuery, 0, 500);


  for(var i=0; i<threads.length; i++)
  {
    receivedCount = receivedCount + threads[i].getMessageCount();
  }
  GmailApp.sendEmail(getEmailAddress(), "summary: " + yesterday, receivedCount+" received");
  Logger.log(yesterday +" : "+receivedCount+" received");
}

function getEmailAddress() {
  return YOUR_EMAIL_ADDRESS;
}
```
ES６まとめ

#はじめに
const,let,アロー関数,class構文,分割代入について書きます。

##ES６のメリット

ES6を学ぶメリットは従来より簡単で明瞭な構文で記述出来ること

##const

```js
const wanko = 'toypoo';
console.log(wanko);

wanko = 'pome'; //error
```

constは再代入と再宣言が不可能な宣言です。
wankoはtoypooのままなのです。

##let

```js
let wanko = 'toypoo';
console.log(wanko);

wanko = 'pome';
console.log(wanko);

let wanko = 'pome';  //error
```

##let,const まとめ

let,const共に再宣言は出来ません。
letだけは再代入が可能となります。constは再代入も再宣言も出来ない頑固なやつです。

letとconstは場合によって使い分けていく必要があります。


##アロー関数

```js
//従来の無名関数
var wanko = function(toypoo,pome){
    return toypoo+pome;
};
//こっからはアロー関数
const wanko = (toypoo,pome) => {
    return toypoo + pome;
};

const wanko = (toypoo,pome) => toypoo+pome;

const wanko = (toypoo,pome) => ({ sum:toypoo+pome});
```

従来のものより簡単に書くことが出来ていますね。
functionがなくなり、returnもなくなり、どんどん見やすくなっていってます。


```js
const Counter = function(){
  this.coiunt = 0;
};

Counter.prototype.increment = function(){
   setTimeout(() => {
      this.count++;
      console.log(this.counte);
   },1000);

const counter = new Counter().increment();
```

アロー関数は関数が定義されたスコープ内のthisを参照することが出来ます。

グローバル関数を参照していたためにおこるエラーを回避できますし、別の変数にthisを参照させる必要がなくなります。

ここで言うスコープとは作った変数や関数が使える範囲のことです。
グローバル変数のスコープは変数宣言位置以降からファイル終端までです。
グローバル変数とは複数の関数から使用することの出来る変数のことを言います。
かなり強いイメージです。
これに対し一つの関数内のみで使用できる変数のことをローカル変数といいます。
弱い感じしますね＞＜

prototypeはReactでバリデーションする時にも出てきたものですが、prototypeはオブジェクト同士の繋がりを保持し、継承させるために使われています。

##class構文

```js
class wanko {
    constructor(name){
        this.name = name;
    }
    sayHello(){
        console.log('Hello,I'm' + this.getName());
    }
    getName(){
        return this.name;
    }
}
```

class構文はprototypeベースのクラス定義構文の糖衣構文です。
ざっくりいうとクラブ構文を簡単に書けるようになる便利なものってことです。
Javascriptはprototypeベースのプログラミング言語なのでアロー関数のコード内で書いたようにprototypeを使ってオブジェクト同士を繋げるのですが、class構文を使えばいちいちprototypeなんて書かずにclassを定義できます。

##分割代入

分割代入は、配列とオブジェクトを分解して、要素とプロパティを一つ一つの変数に
分解するための構文です。

###配列の分割代入

```js
let list = [10,20,30,40,50];
let [item0,item1,...other] = list;

alert(other); //[30,40,50]
```

変数の値を入れかえることも可能です。


###オブジェクトの分割代入

```js
let toypoo ={
    name: 'toypo',
    age:2,
    hair: {
       type: 'mokomoko',
       color: ' brown'
    }
}

let {hair,hair:{color}}= toypoo;

console.log(color);

```



```js
let toypoo ={
    name: 'toypo',
    age:2,
    hair: {
       type: 'mokomoko',
       color: ' brown'
    }
}

let {age: wankoage, name: wankoname} = toypoo;

console.log(wankoname); //toypo
```

key: newkeyで別の名前の変数に値を割り当てられます。
pythonの基本①

#WindowsでPythonを動かしてみる

###プロンプトとは？
　　ソフトウェアなどが「ユーザーが入力を待っている」ことを示すために表示されている決まった記号。もともとプロンプトは相手の発言を促す行動に指す言葉。

###pythonインタプリタとは？
　　小規模なプログラムをその場で作って動かしたり,pythonがもついろいろな機能を試すことができる


#####実行してみよう！！！
　①コマンドプロンプトが起動したら[python]と入力しenterキーを押す。
　　　　　　画面上に「>>>」が出たら設定完了！！！

　ex)1+2と入力し、enterキーを押すと
　　　　→3　　と表示

　②pythonインタプリタを終了する。
　　　CTRL＋Zキーを押し、画面に^Zと表示されたらenterキーを押し終了。


###文字・数値を入力する
　→print(”文字列”)　またはprint('文字列')
　　""、''はどちらでもよい
　→print(数値)

#####もしSyntaxError：invalid character in identifierが出たら
　プログラムを全角文字で入力したことが原因かもしれない
　→日本語入力機能をオフにして、半角文字で入力しなおす

###ファイルに保存したプログラムを実行する方法
　①メモ帳を開き、プログラムを入力する。
　②名前を付けて保存＞ファイル名は拡張子に.pyを指定し、ファイルを保存(今回はtest.pyを使用)
　③コマンドプロンプトを起動する
　④python test.py　を入力し、enterキーを押す
　
　もしtest.pyをコマンドプロンプトの画面に表示されているディレクトリではないところのfileを実行したいときはファイルがある場所を明確にする。

#####「python ファイル名」を入力すると、ファイルに保存されているpythonプログラムを実行できる。
　
###プログラム中にコメントを記入
　＃　コメント
　

###スタイルガイド　PEP8とは？
　読みやすいpythonプログラムを書くために考えられたガイド
　
#####作成したプログラムが準拠しているかチェックする
　①pycodestyleをインストール
　　コマンドプロンプトに　pip install pycodestyle
    　　 →Successfully installed pycodestyle~とでたらインストール成功

　②pycodestyleの使い方
　　pycodestyle ファイル名

　③修正すべき点が見つかった場合、表示される
draw.ioで出力される画像の画質を上げる


# はじめに

[draw.io](https://www.draw.io/)便利ですよね．

draw.ioは

- フローチャート
- UML図
- かんたんなプログラム動作説明

など，プログラマにとって嬉しい無料かつ使いやすいダイヤグラムツールです．

最近はDesktop版も存在します．（いわゆるWebをネイティブ化したものですが）


# 問題点

draw.ioで，フローチャートや図を作成して

「pngでエクスポート」をすると，出来上がった画像が予想以上に画質が悪いことがあります．

できれば，メモリ容量やデータ容量が許される今日，きれいな画像をレポートで使用したいです．


# 対策法

「pngでエクスポート」の画面で

<img width="427" alt="スクリーンショット 2019-12-17 13.51.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211482/a813a0b3-d990-d8c2-040a-0cc2f634c7b6.png">

上記のような画面が出力されます．

このとき

**Zoomを本来の設定の100%から400%などに大きく変更**してあげてください．

Zoomの値を大きくすると，画質が向上します．
（おそらくZoomしてその分詳細にスライドなどを行っています．）


# 参考サイト

[How to export higher resolution (higher DPI) images?](https://desk.draw.io/support/solutions/articles/16000059691-how-to-export-higher-resolution-higher-dpi-images-
)
情報セキュリティ対策の二歩目（脆弱性対応-導入編）

## 前回の振り返り
* [情報セキュリティ対策の第一歩](https://qiita.com/yuta_k0911/items/c0f12c8a09ebad88b7e6)はこちらをご参照ください。

## 今回のお話
* 私が現職で検討した**脆弱性対応**の取り組み（導入編）について、共有します。

## 脆弱性対応（導入編）
### 目的		
* 現在、担当しているプロダクトでは脆弱性に関する運用をしていないことで、セキュリティリスクがあると考える。	
* 脆弱性に関する運用をを整備する必要がある。	
				
### やりたいこと		
* 担当しているプロダクトの脆弱性対応運用の公式化。	
    * 「情報収集」と「情報分析」にフォーカスして対応を検討する	
* 脆弱性対応運用実施によるセキュリティリスクの低減。	
* 開発者と協力した脆弱性対応イテレーションの実現。	
		
### 手段		
* 脆弱性情報収集スキームを確立し、世の中の脆弱性トレンドを把握する。	
* 脆弱性情報分析スキームを確立し、担当しているプロダクトへの影響分析を行い、対応要否を確定する。	
* 対応要となった場合、開発者と連携して対応を行う。	
			
### 脆弱性対応における役割		
* 推進担当者	
    * CSIRT
* 実行担当者	
    * バックエンド開発チーム
    * 画面開発チーム
		
### 脆弱性対応運用フロー		
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320001/2acd26a9-1fc9-2f52-3429-4bd7ec603b68.png)
pythonistaのsceneモジュールでタッチ関係のメソッドを触ってみた

#動機
pythonistaでuiを使い、簡単なアプリ等を作っていたました。
普段、ワンフリックでアプリを切り替えるランチャーを愛用していたのでそれを再現しようと考えたところ、タッチに関しても日本語の情報が少なかったため苦労したので、備忘録的に残しておこうと考えました。

#環境
pythonista 3 ver. 3.2
iphone 11 iOS13.2.3

#プログラム
フリックの方向を取得して起動するアプリを選択するようなアプリを制作しようと考えています。
その為、フリックの方向を取得するようなプログラムになっています。
実際の動作としては単にメソッドの呼び出されるタイミングを学習するような感じです。

```touchTest.py
import scene
import numpy as np

class MyScene(scene.Scene):
    def setup(self):
        self.backgroud_color = '#3a3aff'

        # フリックのベクトルの始点と終点
        self.startpoint = np.array([0, 0])
        self.endpoint = np.array([0, 0])
    
    def touch_began(self, touch):
        ''' タッチを開始したときに呼び出されるメソッド '''
        # ベクトルの始点を記憶
        self.startpoint = np.array([touch.location.x, touch.loctaion.y])
        # タッチの確認のため、タッチした場所に応じてprintする。
        if touch.location.x > self.size[0] / 2:     #タッチが画面の右半分の時
            print('Right')
        else:
            print('Left')
    
    def touch_moved(self, touch):
        ''' タッチしている最中に繰り返し呼ばれるメソッド '''
        print('Moving !')
    
    def touch_ended(self, touch):
        ''' タッチ最中で、指を話したときに呼び出されるメソッド '''
        # ベクトルの終点を取得して、フリックしたベクトルを求める
        self.endpoint = np.array([touch.location.x, touch.loctaion.y])
        vec = self.endpoint - self.startpoint
        # そのベクトルの始点を原点に持っていった時、終点がどの象限にあるかで表示を変える。
        if vec[0] >= 0 and vec[1] > 0:
            print('Up right !')
        elif vec[0] < 0 and vec[1] >= 0:
            print('Up left')
        elif vec[0] <= 0 and vec[1] < 0:
            print('Down left')
        elif vec[0] > 0 and vec[1] <= 0:
            print('Down right')
        
if __name__ == '__main__':
    scene.run(MyScene())

```
##補足等
実行すると青色の画面が出てきます。タッチやフリックをして、コンソールの表示を見ると何となく動作がわかると思います。
ランチャーアプリが実現できたらQiitaに上げるかも。。。

自分のような趣味でpythonistaを楽しむ人が増えるように願います。