OmniAICreator/Qiita-1.07M huggingface dataset:
How to use associated object is swift 



How to create a loading view in UIView using extension 


```swift4
import UIKit
import ObjectiveC

extension UIView {
    
    private struct AssociatedKeys {
        static var LoadingDescriptiveName = "loading_nsh_DescriptiveName"
        static var LoadingViewDescriptiveName = "loading_view_nsh_DescriptiveName"
    }
    
    private func updateLoadingView(shouldShow: Bool) {
        if shouldShow {
            loadingView.startAnimating()
            addSubview(loadingView)
            loadingView.isHidden = false
            
            if let superview = loadingView.superview {
                loadingView.backgroundColor = superview.backgroundColor
                loadingView.centerXAnchor.constraint(equalTo: superview.centerXAnchor).isActive = true
                loadingView.centerYAnchor.constraint(equalTo: superview.centerYAnchor).isActive = true
                
            }
        } else {
            UIView.transition(with: self,
                              duration: 0.35,
                              options: .transitionCrossDissolve,
                              animations: { [weak self] in
                                self?.loadingView.removeFromSuperview()
            }, completion: nil)
        }
    }
    
    @objc var loading: Bool {
        get {
            guard let isLoading = objc_getAssociatedObject(self, &AssociatedKeys.LoadingDescriptiveName) as? Bool else { return false }
            return isLoading
        }
        set {
            objc_setAssociatedObject(self,
                                     &AssociatedKeys.LoadingDescriptiveName,
                                     newValue,
                                     .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
            updateLoadingView(shouldShow: newValue)
        }
    }
    
    
    private var loadingView: UIActivityIndicatorView {
        
        if let view = objc_getAssociatedObject(self, &AssociatedKeys.LoadingViewDescriptiveName) as? UIActivityIndicatorView {
            return view
        } else {
            let loadingView = UIActivityIndicatorView(activityIndicatorStyle: .gray)
            loadingView.hidesWhenStopped = true
            loadingView.clipsToBounds = true
            loadingView.stopAnimating()
            loadingView.translatesAutoresizingMaskIntoConstraints = false
            objc_setAssociatedObject(self,
                                     &AssociatedKeys.LoadingViewDescriptiveName,
                                     loadingView,
                                     .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
            return loadingView
        }
    }
} 

```

source:


https://nshipster.com/swift-objc-runtime/

https://marcosantadev.com/stored-properties-swift-extensions/

https://medium.com/@abhimuralidharan/method-swizzling-in-ios-swift-1f38edaf984f


d
ベクトルタイルの必然性について

ベクトルタイルの必然性について
===
このエントリは、tmcw の　[How we got here](https://tmcw.github.io/presentations/jsgeo/) をヒントに、ベクトルタイルの必然性について論理的な解説を行うことを目的としたものです。

## ウェブ地図の本質は選別
ウェブ地図はなぜ難しいのでしょうか。難しさの核心はファイルフォーマット（例えば、[vector-tile-spec](https://github.com/mapbox/vector-tile-spec)）だとかスタイル言語の文法（例えば[Mapbox Style](https://www.mapbox.com/mapbox-gl-js/style-spec/)）にある訳でないのです。ウェブ地図の本質は**選別**(culling)にあります。ここで、選別とは、膨大な量のデータの中から選び出したり、さまざまな情報源から情報を入手したりすることです。検索、キャッシュ、ビン分別といったキーワードも参考にしてください。

ウェブ地図のパフォーマンスを最も向上するには、**何を描画しないか**を確定することです。不要な地物、不要な詳細、今注目していない世界中のあらゆる場所、そういったものを描画しないことが重要です。

この観点から、ウェブ地図の歴史的な段階をみてみましょう。

## 第1段: タイル化前の WMS
WMSでは、描画範囲での選択はしているのです。他方、全てが0から生成され、何も再利用されません。

## 第2段: Google 式のタイル
この段階では、地理的座標ではなくて、タイル座標で選択をしています。地理的座標と異なり、タイル座標は先が読めます。

フィラデルフィアを見る2人のユーザは同じタイルを見ます。**タイルは再利用され、キャッシュされている**のです。これは大きな進歩でした。タイルがなければ、ウェブ地図の進展はありませんでした。

## 第2.5段: タイルと重ね合わせ情報(Leaflet の時代)
この段階では、内容が複雑な基本図は画像タイルにし、重ね合わせ情報をベクトルデータで SVG, HTML または Canvas を使って重ね合わせます。

この段階が利便性を提供してくれた時期は長かったですが、基本図提供のための技術と重ね合わせ情報のための技術が乖離したのは、不幸なことでした。どちらにも使えるスケーラブルな技術があれば、基本図を高度に使え、重たい重ね合わせ情報も容易に使うことができ、重ね合わせ情報の高度な可視化も可能になります。その技術というのが、ベクトルタイルなのです。

## 整理: ベクトルタイルとは
この先、ベクトルタイルが出てくる訳ですが、そもそもベクトルタイルとは何でしょうか。ここで整理してみましょう。

ベクトルタイルとは、**非視覚的で、非地理的で、効率的な、タイル化されたデータ**です。

SVG と違って、ベクトルタイルにはスタイルがなく、ただ点・線・面だけがあります。その意味で、ベクトルタイルは**非視覚的**です。

GeoJSON と違って、ベクトルタイルには**地理的座標が含まれていません**。経緯度ではなく、タイル内のピクセルオフセットを使っています。

また、ベクトルタイルは、重ね合わせ情報だけではなく、基本図を含めたあらゆる地図のために使えるよう、**効率的**に符号化されるように設計されています。

ベクトルタイルは、非視覚的で非地理的でありながら、今日みられるようなあらゆる種類のベクトル地理空間情報のユースケースに対応します。なぜなら、ベクトルタイルを逆投影すれば、（量子化はされているものの）**地理空間情報を復元することができる**からです。

### ベクトルタイルはデータベースへの小窓
**画像タイルは巨大な画像の小片ですが、ベクトルタイルはデータベースへの小窓です。**ちなみに、データベースとは、ブランド名がついたデータ構造です。

## 第2.75段: ベクトルタイルに支援された画像タイル
ブラウザサイドのライブラリが十分に進化した現在では、この第2.75段はスキップすることができますが、歴史的な説明を行います。

この段階では、ブラウザには普通の画像タイルが見えますが、その画像タイルはベクトルタイルからオンザフライで描画されています。Mapbox は1年間これをやりましたし、Googleもこれをやっていました。つまり、WebGLを使わないのにベクトルタイルを内部的に使っていたのです。これはなぜでしょうか。その理由は、やはり**選別**です。

画像タイルは**出力**をキャッシュします。ベクトルタイルは前処理後の**入力**をキャッシュします。これは大きな進歩でした。

地図のレンダリングに使われる時間の多くは、PostGISへの問い合わせや、ネットワークレイテンシや、地物単純化といった**選別**に使われているのです。描画は十分に高速であり、そのために要する時間は非常に少ないです。

なお、**選別**は圧縮ではありません。データを**捨てる**ことです。OpenStreetMap id や座標のようなものは圧縮が効くものではありません。**圧縮するのではなく、捨てることが重要**なのです。

ベクトルタイルは、選別と描画を分離します。選別をキャッシュ可能にし、結果として描画を選別から独立させ、ゆえに高速にします。

## 第3段: ベクトル
この段階では、ベクトルタイルがブラウザで直接可視化されます。実際上、この段階では視覚的出力がキャッシュされることがありません。なぜなら、視覚的出力が非常に高速に再生成される状態が確保されているからです。

## まとめ
確かにベクトルタイルは効率的に符号化されており、等価な GeoJSON よりも劇的に小さいですが、重要なのは**選別**です。OSM Planet は 29GB ありますが、可視化のために選別すれば 0.00172% になります。

ベクトルタイルは、**ウェブ地図のアーキテクチャを真に変革する**ものです。
CentOS 6.9 > X11 connection rejected because of wrong authentication. | Error: Can't open display: localhost:10.0 > サーバー再起動後にX11転送可能

```txt:動作環境
Xeon E5-2620 v4 (8コア) x 2
32GB RAM
GeForce GT 730 1GB GDDR5
CentOS 6.9 (64bit)
NCAR Command Language Version 6.3.0
for WRF3.7.1, WPS3.7.1
  openmpi-1.8.x86_64 とその-devel
  mpich.x86_64 3.1-5.el6とその-devel
  gcc version 4.4.7 (とgfortran)
for WRF3.9, WPS3.9
  Open MPI v2.1.1
  gcc version 4.9.2 (とgfortran; devtoolset-3使用)
　NetCDF v4.4.1.1, NetCDF (Fortran API) v4.4.4
Python 2.6.6 (r266:84292, Aug 18 2016, 15:13:37) 
Python 3.6.0 on virtualenv
GNU bash, version 4.1.2(2)-release (x86_64-redhat-linux-gnu)
date (GNU coreutils) 8.4 
tmux 1.6-3.el6
```

数値計算を走らせているサーバー(上記環境)にCentOS6.9のクライアントから接続。X11転送しようとしたら以下のエラーとなった。

```
X11 connection rejected because of wrong authentication.
Error: Can't open display: localhost:10.0
```

調べるとXAUTHORITYのエラーとかなんとか。

試したが回復せず。

ふと思い立ってサーバーを再起動した。
IPはDHCP割当で別のIPアドレスとなった。
再起動後に接続するとX11転送はできるようになった。

ここ数週間、ネットワーク関連のトラブルが発生していたが、関係があるのかどうか。
Ubuntu（WSL）でDockerが使えなかった問題への対処

# 問題点
Windows上のUbuntu 18.04（WSL）上でDockerが使えない。
`$ sudo service docker start`
しても、直ぐにdocker daemonが終了してしまう。
# 具体的なエラーメッセージ
/var/log/docker.logを見てみると

```
Error starting daemon: Error initializing network controller: error obtaining controller instance: failed to create NAT chain DOCKER: iptables failed: iptables -t nat -N DOCKER: iptables v1.6.1: can't initialize iptables table `nat': Table does not exist (do you need to insmod?)
Perhaps iptables or your kernel needs to be upgraded.
(exit status 3)
```
iptablesもしくはカーネルのバージョンを上げろと？
# 試してダメだったこと
```
$ sudo apt update
$ sudo apt upgrade iptables
```
言われるままにiptablesのバージョンを上げてみたが、エラーメッセージは変わらず。
# 解決策
結論としては、Ubuntuの18.04を使うのをあきらめて、16.04を入れ直したところ、使えるようになった。
http://www.nuits.jp/entry/docker-on-wsl
↑　こちらに大変お世話になった。

```
$ sudo apt update
$ sudo apt upgrade -y
$ sudo apt install -y docker.io
$ sudo cgroupfs-mount
```
ここまでやり直して、
`$ su - (ローカルユーザー名)`
してから

```
$ sudo usermod -aG docker $USER
$ sudo service docker start
```
再起動。
管理者で！WSL起動で、ようやく行けた。
`$ sudo cgroupfs-mount && sudo service docker start`
管理者起動 & cgroupfs-mountが要るらしい。

Nakamuraさん、ありがとうございます！
Chromebookのターミナルで、かわいい猫画像を見る

#概要
Chromebookの標準ターミナルであるSecureShellAppは、[OSC-1337](https://chromium.googlesource.com/apps/libapps/+/master/hterm/doc/ControlSequences.md#OSC-1337)をサポートしています。
OSC-1337を使うとターミナル上に画像が表示できます。
OSC-1337の詳細は理解しなくても大丈夫です。ヘルパースクリプトが用意されています。

#手順
下記のスクリプトをダウンロードして、実行権を与えます。

https://chromium.googlesource.com/apps/libapps/+/master/hterm/etc/hterm-show-file.sh

あとは、

```
$ hterm-show-file.sh <画像ファイル名>
```
とすればターミナル上に画像が表示されます。

アニメGIFもいけます。

![output.gif](https://qiita-image-store.s3.amazonaws.com/0/164821/e89657b3-765b-a330-b2ff-a578dee3e993.gif)
【Swift】firstResponderを取得する

# １．はじめに

　ビュー上に`UITextField` や`UITextView` が複数ある場合に、キーボードを閉じるために`firstResponder` を取得します。
一つづつ全てアウトレット接続したりするのは面倒なので、汎用的に使えるメソッドにまとめました。

# ２．コード

```swift
func getFirstResponder(view: UIView) -> UIView? {
    if view.isFirstResponder {
        return view
    }
    for subview in view.subviews {
        if let _ = getFirstResponder(view: subview) {
            return subview
        }
    }
    return nil
}
```

# ３．ポイント
　メソッド内で`getFirstResponder()` を再帰的に呼んで、`firstResponder` を探します。
　`firstResponder` がないと、最終的に`nil` が返ってきます。

# ４．使い方

　表示されているキーボードを閉じるコードです。

```swift
getFirstResponder(view: view)?.resignFirstResponder()
```
Puppeteerを使ってThe EconomistのWebスクレイプを試した

## スクレイプ対象
英語の学習にも役立てたいのでスクレイプ対象は購読しているThe Economist。
The EconomistのPuppeteerによるスクレイピングなので、作ったライブラリの名前はPuppenomist。良いもじりだと思っている。

## 学び
- ログイン処理
ログイン処理を行なっているPuppeteerの例は少ないので実例として参考になるのでは。

- マナーを守ったスクレイピング
The Economistのrobots.txtに「5秒ごとのアクセス」とあるので、割りに時間がかかる。1冊分で5,6分、一年分だと数時間になる。数時間だと１回では無理なので、ログを残して途中から再開できるようにした。
- RECAPTCHA
サイト側ではgoogleのRECAPTCHAが設置されている。
詳しくは書かないけど、RECAPTCHAに引っかかりやすいページや挙動というものがある。
挙動に関しては、ランダムな秒数かかるようにしてみたけどそこまで効果は出ず。クライアントやIPアドレス偽装は宜しくないので特に何もせず。

## キャプチャ
こんな感じで動く。
![captcha.png](https://qiita-image-store.s3.amazonaws.com/0/93677/ed6f6f1b-78fe-4d67-edf8-f2447f24e3ce.png)

The Economistのアカウントを持ってない人でも適当なアカウントとパスワードを打てば、ログイン試行までは試せます。もちろんログイン失敗してそれ以上進まないけど。
-vオプションでHeadlessでなくChromiumが立ち上がるので動きが分かり易いと思います。
![captcha2.png](https://qiita-image-store.s3.amazonaws.com/0/93677/6796412d-b3e0-b83a-ff28-6a9364231133.png)
<img width="1149" alt="Screen Shot 2018-09-16 at 2.47.26 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/93677/e3750512-599c-86d1-ce46-496a8321c198.png">


## TODO
- ランダムで出てくるポップアップの検知  
何度かやっているとランダムでポップアップが出てきてログイン処理が動かない時がある。検知して再ロードとかエラー処理が必要。
- OSSに自分のアカウント情報を教えたくない  
このライブラリでスクレイプするにはThe Economistの実際のアカウント情報が必要になる。自分で作って自分で使う分には良いけど、誰か別の人が使う時には自分のアカウント情報を信頼できないOSSには教えたくないハズ。
ログイン処理だけは信頼できる別のライブラリに任せる、とか外だしに出来ると嬉しいけど、何か方法があるのかな？
- スクレイプしたデータで遊ぶ  
2017年の全冊をスクレイプしたのでそのデータで遊びたい。とりあえずBag of Wordsで各記事の特徴語検索を出来るようにした。  
http://economistsearch.herokuapp.com  
別のQiita記事を書く。

## ソース
https://github.com/ya9do/puppenomist
実際にスクレイプするにはThe Economistのサブスクリプションアカウントが必要です。
hamlを使うための覚え書き on RubyMine2018.3

Ruby-mineはhamlの補完機能とかあって、快適です。
何故かテンプレートが用意されていないのは気持ち悪いけど。。

とりあえず、設定としてはこんな感じで今のところはストレスレス

![image.png](https://qiita-image-store.s3.amazonaws.com/0/42407/370a6a3a-d6b2-6bc6-9b57-a009b6f8b4e7.png)




## ドキュメント

* 手っ取り早し参照先
	* https://github.com/haml/haml 
* 詳細なドキュメント
	* http://haml.info/docs/yardoc/file.REFERENCE.html  

## 迷ったところ

### indentってスペース？タブ？

```
Indentation

Haml's indentation can be made up of one or more tabs or spaces. However, 
indentation must be consistent within a given document. 
Hard tabs and spaces can't be mixed, and the same number 
of tabs or spaces must be used throughout.
```

インデントはハードタブでもソフトタブ（space)でもいいけど、混在は許されないとのこと。
ドキュメントのなかで自動で判断されるとのこと

### classに二つ以上したいしたいときは？

* %div{:class => ['y-3', 'p-3']}
* %div.y-3.p-3
* .y-3.p-3

### ifの分岐ってどう書くの?

```
	- if @engineer.engineer_hiring.nil?
		.sl-row-rightAlign
			.col-3
				= button_tag '派遣元追加', type: 'button', onclick: 'addHiring'
	-else
		= f.fields_for :engineer_hiring do |e_hiring|
			= render "engineer_hiring_form", hiring:e_hiring, office:@engineer.engineer_hiring.office
```

### コメントってどうすればいい？

* HTMLでのコメント
    *  / を行頭につける
    *  / の後にインデントをつけると、その段落をまとめてコメントアウト
*  Rubyのコメント
    *  -# を頭につける

```
-# = hidden_field "career-count", @engineer.careers.count + 1
```

これだとだめ

```
#= hidden_field "career-count", @engineer.careers.count + 1
```

これは大丈夫

```
=# hidden_field "career-count", @engineer.careers.count + 1
```

### rubyのコード部分で改行はできるの？

rubyの仕様に準じるっぽい、以下はOK

```
	= career.label :career_at,
		Career.human_attribute_name("career_at")
	= career.text_field :career_at
JSON Schema から Flow の型定義を生成する npm package を作った

## モチベーション

REST API からのレスポンスに [Flow](https://flow.org) の型が欲しい。別途 [JSON Schema](https://json-schema.org/) は定義するので、それを使って生成したい。

[json-schema-to-flow-type](https://github.com/PassFort/json-schema-to-flow-type) という既存のパッケージはあるもののあまりメンテされておらず、 Babel v7 で動かなくて困ったりした。修正して [Pull request](https://github.com/PassFort/json-schema-to-flow-type/pull/28) してみたけど残念ながら反応が無さそう。

課題として面白そうだからちょっと作ってみようと思った。

## 作ったもの

**Igata**
https://github.com/sakai-akinobu/igata
https://www.npmjs.com/package/igata

鋳造における **鋳型** をイメージして igata というネーミングにしたが、深い意味は無い。

## 使い方

```
npm install igata
```

```javascript
import {convert} from 'igata';

convert({$id: 'String', type: 'string'});
// => export type String = string;

convert({$id: 'Enum', enum: [1, 2]});
// => export type Enum = 1 | 2;

convert({$id: 'Object', type: 'object', properties: {foo: {type: 'string'}}});
// => export type Object = {\n  foo?: string\n};

convert({$id: 'Array', type: 'array', items: {type: 'string'}});
// => export type Array = string[];

convert({$id: 'Tuple', type: 'array', items: [{type: 'string'}, {type: 'number'}]});
// => export type Tuple = [string, number];

convert({$id: 'Union', type: ['string', 'number']});
// => export type Union = string | number;

convert({$id: 'ComplexUnion', anyOf: [{type: 'number'}, {type: 'object', properties: {foo: {type: 'string'}}}]});
// => export type ComplexUnion = number | {\n  foo?: string\n};
```

Nullable な型を表現するには `type` に `null` を含めるといい。

```javascript
const jsonSchema = {
  $id: 'Nullable',
  type: ['string', 'null'],
};
convert(jsonSchema);
// => export type Nullable = string | null;
```

[Exact object types](https://flow.org/en/docs/types/objects/#toc-exact-object-types) は `additionalProperties` を使って表現できる。

```javascript
const jsonSchema = {
  $id: 'ExactObject',
  type: 'object',
  additionalProperties: false,
  properties: {
    name: {
      type: 'string',
    },
  },
};
convert(jsonSchema);
// => export type ExactObject = {|\n  name?: string\n|};
```

## 作ってみた感想

Flow の型としては表現できない物が多々あって、例えば JSON Schema における [oneOf](https://json-schema.org/latest/json-schema-validation.html#rfc.section.6.7.3) は Flow の型としては正確に表現できない。なので、Flow の型として落とし込める物とそうでないものを取捨選択する必要が出てくるので、その判断がちょっと難しいなぁという感じ。
複数アカウントの複数リージョンでGuardDuty有効化（大量アカウント）

#背景
業務で扱っているAWSアカウントが複数あります。下記エントリに記載した通り、CloudFormationのStackStesで10アカウントの検証環境でのGuardDuty有効化に成功したので、100アカウントの本番環境アカウントでGuardDuty有効化をトライしました。が、結果失敗。
[複数アカウントの複数リージョンでGuardDuty有効化（少量アカウント）](https://qiita.com/chocolin/items/608a7f9c577ff3a10d60)


![WS000003.JPG](https://qiita-image-store.s3.amazonaws.com/0/275502/4e23728c-97d0-8d8e-9dfc-79efb1cc577e.jpeg)

CloudFormationインスタンスには上限がありました。
（やろうとしたのは　100アカウント ×　15リージョン　＝　1500）
https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/cloudformation-limits.html
![WS000002.JPG](https://qiita-image-store.s3.amazonaws.com/0/275502/9d51c7d8-f6d9-34ee-a8dd-29b5ded8c3ab.jpeg)

うーむ。。。大量生産向けではなさそうです。
ということで、pythonで一括有効化スクリプトを作成しました。

#前提
Windows 10
AWS CLI, Python, boto3 をインストール済み
CLIで複数アカウントのプロファイル（クレデンシャル）を設定済み

#手順
①プロファイルの一覧ファイルを準備する。
　ファイル名：profiles.csv
　内容：1行に　[任意の数字], [任意のprofile名]　を記載。行数は処理が必要な分だけ。
②下記スクリプトを実行する。
　※GuardDuty有効化がまだされていない前提です。有効化済みのアカウントに実行するとエラーになります。

```create_guardduty_detectors.py
import csv
import boto3
from boto3.session import Session

#　プロファイルを読み込み、ひとつづつ処理する
profiles = open('profiles.csv')
profiles_reader = csv.reader(profiles)
for row in profiles_reader:
    id = row[0]
    profile = row[1]
    print(row)

    session = Session(profile_name=profile)
    ec2 = session.client('ec2')
    regions = map(lambda x: x['RegionName'], ec2.describe_regions()['Regions'])

    #全リージョンでGuardDuty有効化
    for region in regions:
        print(region)        
        guardduty = session.client('guardduty', region_name=region)        
        response = guardduty.create_detector(
            Enable = True
        )
        print(response)
        
profiles.close()
```
CloudFormation StackSetsを使用しなくても、PythonでとってもシンプルにGuardDuty有効化することができました。
プロファイル一覧を読み込んで、リージョンを指定して処理を回すのは、他の用途でも大活躍しそうです。

#参考
[awscliの設定切り替え](https://qiita.com/ryuzee/items/e3ce493f132f1981f57a)
[Pythonでboto3を使って全リージョンで処理を回すコード書いてみた](https://dev.classmethod.jp/cloud/aws/iterate-all-region-with-python-boto3/)
Windows操作の基礎（ショートカット）

元リンク
[パソコン未経験者の中級者への道筋](https://qiita.com/strong_suzuki/items/e70ccd7253fa32428ca1)

# Windows操作について
多くのパソコンユーザーで、初心者・未経験者で仕事や学校で使うことになるパソコンはWindowsとなる。Windowsのシェアは長年80-90%を維持しており、現在も88%くらいがWindowsパソコンだ。

Windowsは 2018年時点だと Windows7 / Windows8 / Windows10 が普及・利用されているが、どれも基本的な操作は同じだ。
Windowsとは何か、何ができるのかを全てを把握しようとすると、膨大な情報量になってしまう。ここでは、パソコンに慣れた人達が頻繁に使う、便利なキーボード・マウス操作を説明する。

## キーボード操作～ショートカット
キーボードでは、文字入力・数値入力・半角全角変換・エンターキーを使っていろいろと操作をするが、それ以外にも便利なキーがある。

- 移動系のキー（Home / End / PgUp / PgDn ）
- ファンクションキー(Fnキー）
- 操作補助系のキー（Ctrl / Alt / Windows / Shift）

これらのキーのうち、操作補助系の各キーとショートカット、Fnキーについて紹介していく。


## Ctrlキー（コントロールキー）
キーボードにたいてい左右二か所にあり、どちらかだけを押せばよい。
このキーだけ押しても操作にはならず、基本的にはこのキーを押しっぱなしにした状態で別のキーを押す事で組み合わせてショートカットキーとして使う。
インターネットをするのに開いているWebブラウザ（Chrome/IE等）上でCtrlキーを押しながら、Hキーを押すと、自分の端末の過去の閲覧履歴が表示される。

そのほかにも便利なものは多数あるが、頻繁に使うものだけ記載する。
Ctrlキーを押しながら、別のキーを押下する際の表記を Ctrl + H などとして、以下に列挙する。


  
|ショートカット|操作|
|:---|:---|:---|
Ctrl + C  | 選択した範囲をコピー 
|Ctrl + V | 選択した範囲を貼付（ペースト） |
|Ctrl + X | 選択した範囲を切り取り（カット） |
|Ctrl + A | 選択したウィンドウの全範囲を選択 |
|Ctrl + F | 選択したウィンドウ内の検索 |
|Ctrl + S | 上書き保存 |
|Ctrl + Z | 直前の操作の取り消し |
|Ctrl + H | ウェブページ閲覧履歴（ヒストリー画面）を表示 |
|Ctrl + W | ウィンドウを閉じる |

上記くらいは繰り返し操作して覚えて、身体で直観的に意図した操作ができるようになっているとパソコン操作がとても捗る。

また、キーボードだけでなくマウス操作との組み合わせでも便利な使い方がある。

Ctrlキーを押しながら、ファイルを選択すると、ひとつ、ふたつ、みっつと同時に複数選択していくことができる。
ファイル移動やファイル削除などをまとめて実施する際にとても便利だ。

ファイルをフォルダからフォルダへドラッグ＆ドロップする際に、Ctrlキーを押しながら行えば、ファイル・フォルダーの移動ではなくコピーになる。

Ctrlキーを用いた便利なショートカットは、Windowsの機能以外にも Excel や 各種ソフトにも設定されており、まずは上記の Windowsの操作を覚えておくことで、他のソフトのショートカットもいろいろと覚えやすくなる。

##Altキー（オルトキー）
Windowsでは Ctrlキーと並んで、覚えておくと便利なキーだが、その操作で覚える量はあまり多くない。以下のものだけ覚えておけば充分。

|ショートカット|操作|
|:---|:---|:---|
|Alt + Tabキー | ウィンドウを切替 |
|Alt + F4 | ウィンドウを閉じる |

キーで覚える事は少ないが、Windowsでは Excel 操作の際に Altキーで出来る事を覚えて把握しておくと、圧倒的に早く操作できることがある。Alt + Tabキーだけでも覚えて頻繁に使っておくとよい。

## Windowsキー（ウィンドウズキー）
キーボードにウィンドウズのロゴのマークのキーがあるが、これが Windowsキー。
単独で押すとスタートメニューが表示されるが、組合せて使う事で多数の便利なショートカットが用意されている。

|ショートカット|操作|
|:---|:---|:---|
|Windows + E | エクスプローラーウィンドウを新規起動 |
|Windows + Tab | ウィンドウを切替 |
|Windows + D | 全てのウィンドウを最小化 | 
|Windows + L | ログオフ | 
|Windows + → | アクティブなウィンドウを右寄せにする |
|Windows + ← | アクティブなウィンドウを左寄せにする |
|Windows + ↑ | アクティブなウィンドウを最大化する |
|Windows + ↓ | アクティブなウィンドウを縮小する |

Windowsキーは上記のものはパソコンに慣れた人は多く使う。方向キーとの組み合わせで、２つのウィンドウでファイルを見比べたい時に素早く表示できるなどの用途に便利な使い方ができる。


## Fnキー（ファンクションキー）
Fnキーは、キーボードの数値のもう一つ上の列に並んでいる事が多い。単独で押す場合と、Fnキーを押しながらF8などを押す場合で操作が異なる。
このキーはPCメーカーにより音量や照明、プロジェクターとの切替にも使うが、それらは配置がメーカー毎に違ったりするので、ここではWindows操作についてのみ記載する。

|ショートカット|操作|
|:---|:---|:---|
| F2 | 選択したファイルやフォルダ―の名前の変更 |
| F7 | 全角カタカナに変換 |
| F8 | 半角カタカナに変換 |
| F9 | 全角英数字に変換 |
| F10 | 半角英数字に変換 |

このうち、F10はよく使う。使い方として、日本語を入力する際には全角モードで入力しているが、英単語「Google」を書きたいときに「ごおｇぇ」となってしまった時、
変換モードの確定の前に F10 を押せば、「ごおｇぇ」⇒「Google」と半角英数字に変換される。これは結構頻繁に使う。

 　　
  
さて、上記まで各種のキー毎のショートカットを列挙したが、本ページに記載したものはショートカットとして用意された機能のうちの一部である。
ただ、全部を覚える必要はないし、重要なものはショートカットとして使った方が便利、というものだけ列挙したつもりだ。長期的にWindowsパソコンの操作をする人は、本ページの操作には習熟しておくことをオススメする。

元リンク
[パソコン未経験者の中級者への道筋](https://qiita.com/strong_suzuki/items/e70ccd7253fa32428ca1)
複数アカウントの複数リージョンでGuardDuty有効化（少量アカウント）

#背景
業務で扱っているAWSアカウントが複数あり、こいつらをポチポチ設定せずに一括で全リージョンでGuardDutyを有効化すべく、下記ブログを参考に検証用の10アカウントくらいでCloudFormationのStackSetsで有効化してみました。本記事では追加で必要になった手順をメモ。

[[新機能] CloudFormation StackSetsを試してみた](https://dev.classmethod.jp/cloud/aws/introducing-cloudformation-stacksets/)
[一発でGuardDutyを全リージョン有効化して通知設定するテンプレート作った](https://dev.classmethod.jp/cloud/aws/set-guardduty-all-region/)


#手順
① 管理用ロール（AdministrationRole）作成
② 実行用ロール（StackSetsExecutionRole）作成
③ GuardDuty有効化テンプレート用意
④ StackSets作成

##① 管理用ロール（AdministrationRole）作成
管理用アカウントにAdministrationRoleを作成します。
[[新機能] CloudFormation StackSetsを試してみた](https://dev.classmethod.jp/cloud/aws/introducing-cloudformation-stacksets/)　に記載の通り実行。

##② 実行用ロール（StackSetsExecutionRole）作成
複数のアカウントに実行用のロールを作成します。
[[新機能] CloudFormation StackSetsを試してみた](https://dev.classmethod.jp/cloud/aws/introducing-cloudformation-stacksets/)　に記載の通り実行できますが、10アカウント分の管理コンソールでこれをやるのは辛い。
CLIを用いて、CloudFormationでAWSCloudFormationStackSetExecutionRoleを作成します。

```
$ aws cloudformation create-stack --profile XXXXX --stack-name Create-AWSCloudFormationStackSetExecutionRole --template-body file://AWSCloudFormationStackSetExecutionRole.yml --parameters ParameterKey=AdministratorAccountId,ParameterValue=XXXXXXXXXXXX --capabilities CAPABILITY_NAMED_IAM
```
```ParameterKey=AdministratorAccountId,ParameterValue=XXXXXXXXXXXX```で管理用アカウントのIDを指定します。なお、実行ロールのテンプレートはAWSドキュメントの[前提条件: スタックセットオペレーションのアクセス権限の付与](https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/stacksets-prereqs.html)からダウンロードしたものを使用したので、```ParameterKey=AdministratorAccountId```となっています。参考ブログのテンプレートを使用する場合には ```ParameterKey=MasterAccountId```にする必要があります。
また、私のハマりポイントでしたが、IAMを作成する時には```--capabilities CAPABILITY_NAMED_IAM```がないとエラーになります。作成成功すると下記結果が返ってきます。
![WS000004.JPG](https://qiita-image-store.s3.amazonaws.com/0/275502/fb6c4435-f1e9-0a3f-4d70-a05787cf8bc6.jpeg)

##③ GuardDuty有効化テンプレート用意
snsの通知まで設定する必要がなかった、というかslack通知するlambdaを後で作成しようと思っていたので、シンプルにGuardDuty有効化のテンプレートだけ用意しました。デザイナーからボンとアイコンをおいて作成したので、メタデータとか入っていますが、いらなそうです。そのままにしていますが。。。

```guardduty_enable_yaml.template
AWSTemplateFormatVersion: 2010-09-09
Metadata:
  'AWS::CloudFormation::Designer':
    ca7cdb3f-c4ca-4b22-b78a-ff95d239eb92:
      size:
        width: 60
        height: 60
      position:
        x: 216
        'y': 110
      z: 0
Resources:
  GDDZ0EQ:
    Type: 'AWS::GuardDuty::Detector'
    Properties:
      Enable: true
    Metadata:
      'AWS::CloudFormation::Designer':
        id: ca7cdb3f-c4ca-4b22-b78a-ff95d239eb92
```
##④ StackSets作成
[[新機能] CloudFormation StackSetsを試してみた](https://dev.classmethod.jp/cloud/aws/introducing-cloudformation-stacksets/)　に記載の通り実行するのですが、複数アカウントなので、デプロイオプションの設定で「スタックがデプロイされている有効なアカウントのカンマ区切り値（CSV）のファイルをアップロード」を選択します。
スタックはまだデプロイされてないのですが、実行ロールさえ作成されてあれば問題なしでした。
![WS000005.JPG](https://qiita-image-store.s3.amazonaws.com/0/275502/18518a66-deee-b67d-4f78-81971b835699.jpeg)
CREATE_COMPLETEが出てくるまで時間がかかりますが、気長に待ちます。

以上。
AACのViewModelをKoinでInjectする

Kotlinを利用したプロジェクトで利用できるDIライブラリであるKoin(https://github.com/InsertKoinIO/koin)
ですが、Android開発用の拡張ライブラリであるkoin-androidを使ってAndroid Architecture ComponentsのViewModelを生成する方法についてまとめます。

基本的には下記のサイトに記載されている内容です。
https://beta.insert-koin.io/docs/1.0/quick-references/koin-android/#android-architecture-viewmodel

Koinの基本的な使い方については上記githubのREADME等をご参照ください。

# Koinを用いない場合のViewModelの生成
Koinを用いない場合のAndroid Architecture ComponentsのViewModelクラスの生成方法は次のように`ViewModelProviders`を使用します。

```kotlin
public class MyActivity extends AppCompatActivity {
    public fun onCreate(savedInstanceState: Bundle) {
        val model = ViewModelProviders.of(this).get(MyViewModel::class.java);
    }
}
```
参考：https://developer.android.com/topic/libraries/architecture/viewmodel

# Koinを用いる場合のViewModelの生成

Koinを用いる場合は以下のように`by viewModel()`によりインスタンス生成を行います。
通常のクラスの場合は`by inject()`としますが、`ViewModel`の場合は`by viewModel()`を指定してください。

```kotlin
class LoginActivity : AppCompatActivity() {
    private val viewModel: MyViewModel by viewModel()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

```

また、プロパティなどにインジェクションしない場合は`getViewModel()`関数を使用することも可能です。

```kotlin
override fun onCreate() {
    super.onCreate()

    val model : MyViewModel = getViewModel()
}
```

# ViewModelの為のモジュール定義
この場合のViewModel生成の為のモジュール定義は通常の場合の`single`や`factory`ではなく次のように`viewModel`を指定します。

```kotlin
val viewModelModule = module {
    viewModel<MyViewModel>()
    viewModel { ParameterNeedViewModel(get()) } // パラメータが必要な場合
}
```
Amazonのウィッシュリストに入っているKindle本のポイントを表示させるWebExtensionsを作った

# きっかけ
AmazonのWishlistにKindle本を登録しているのですが、入れたときからどのくらい値引きされているのかは見ることができてもKindleでよく行われるAmazonポイント還元が見れないのが不便だと思い、ポイント還元が見られるようなWebExtensionsを作ろうと思いました。

# 作ったもの
https://github.com/sytkm/PointsintheWishlist
インストール方法もgithubに載せています。

# 仕組み
実際にポイントの取得を行っているのは`content.js`。
このなかの`wishpoints()`でポイントを取得しています。
FetchAPIを用いているものだけ解説。(シンプルに見せるため、コメントなどを排除しています。)

```javascript:content.js
function wishpoints(enablefetch){
	const dom_parser = new DOMParser();
	const itemList = document.getElementsByClassName("price-section");
	const olditemnum = sessionStorage.getItem("storageItemNum")||0;
	for(let item of Array.from(itemList).slice(olditemnum)){
		const asin = JSON.parse(item.attributes["data-item-prime-info"].value).asin;
		if(enablefetch){
			fetch('https://www.amazon.co.jp/dp/'+asin)
			.then(res=>res.text())
			.then(text=>{
				const lopoints = dom_parser.parseFromString(text, "text/html").getElementsByClassName("loyalty-points");
				let points = "";
				if(lopoints.length!=0){
					points = lopoints[0].children[1].innerText.trim();			
					item.firstElementChild.insertAdjacentHTML("beforeend", " " + points);
				}
			}).catch(err=>console.error(err));
		}
	}
}
```
この関数では、`price-section`というクラス名を持つエレメントをアイテムリストとしています。
このアイテムリストに含まれるエレメントの商品ページを1つずつFetchし、そのページの中で`loyalty-points`というクラス名を持つエレメントからポイントを取り出しています。
取り出したポイントはWishlistのページの金額が書いてあるエレメントの最後につけています。

また、`MutationObserver`を用いてDOMの変更を監視し、無限スクロールに対応しています。

```javascript:content.js
const obtarget = document.getElementById("g-items");
const observer = new MutationObserver(records =>{
	if(localStorage["fetchType"]=="fetchapi"){
		wishpoints(true);
	}else if(localStorage["fetchType"]=="jqueryajax"){
		wishpoints(false);
	}
});
observer.observe(obtarget,{childList:true});
```

スクロールなどを行いDOMが変更されたときには、過去読み込んだ数と今読み込まれているアイテムリストの数を比較し、増えている場合には増えた分をFetchしポイントを調べています。

# 聞かれそうなこと

### なぜバージョンが0.2.1なの？
もともと昨年の2月頃に0.1.0を作っていました。
しかし、そのときから今年4月までの間にAmazonのWishlistのデザインなどが変わりページャから無限スクロールに変更されていました。
使っていたのでそのことは確認していましたが、忙しかったこともあり直すのが少し面倒で放置していました。
先日、Githubにissueが来ており、見てみると便利なので直してほしいといった内容でした。
他人に使われていると思うとやる気が出てきたので修正を加えた次第です。人からの期待ってすごい。

### なんでFetchAPIとjQueryのajaxがあるの？
昨年の2月に作ったときはFetchAPIがあまりうまく動かず、仕方なくjQueryのajaxを用いて実装を行っていました。
今年直すときに改めて確認してみたところ、FetchAPIがなんか普通に動いたのでそちらも使えるようにしました。
現在はどちらも動くようにはなっています。
できるだけ外部ライブラリなどは使わないようにしたいので削除したいですが、いきなり削除すると使えなくなるものもあるかもしれないので残しています。

### delayTimeとか無駄じゃない？
はい、今は使っていないので無駄です。これは以前ページャ方式だったときに使っていた名残です。
現在自分では困ってないのでそのままにしています。
ポイントが高くついてるものをピックアップして拡張機能のアイコンを押したら一覧で見られるようにしたいなどの要望がissueに来たりなど必要に迫られればついでに直すかもしれないです。

### Product Advertising APIは使わないの？
PAAPIではkindle本の値段やポイント還元を取得することができないため、fetchする形をとっています。AmazonのページからAmazonをfetchするため、クロスドメイン通信を行わなくて済んでるところがハッピーでした。

# 参考文献
#### 2017/2のとき
https://blog.fenrir-inc.com/jp/2012/09/jquery-chrome-extension.html
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch
http://d.hatena.ne.jp/yk5656/20141011/1414984933
https://easyramble.com/chrome-extension-message-passing.html

#### 2018/9のとき
https://qiita.com/MysticDoll/items/7b2654b7a8b58d773286
Aidemy2回目　メモ　「9/17」

Aidemy | 10秒で始めるAIプログラミング学習サービスAidemy［アイデミー」
https://aidemy.net/

本日2回目メモ。
ある程度いったら纏めなおす。と思います。

#Aidemy2回目メモ

##if文構文
if、elif、elseの末尾には「:」を付ける。

```py
if n == 1:
    print("ほげほげ")
elif n == 2:
    print("ふがふが")
else:
    print("ひげひげ")
```

##ブール演算子

条件式の記載に使用する。

|型名|内容|
|:--|:--|
|条件式A and 条件式B |A、B両方の条件式が`True`の場合、処理を行う|
|条件式A or 条件式B|A、Bどちらかの条件式が`True`の場合、処理を行う|
|not 条件式|条件式が`True`の時`False`を、`False`の時`True`を返す|

##リスト型
配列に相当。
変数に格納された値の一つひとつを 要素 、または オブジェクト と呼ぶ。

```py
a=["サル", "パンダ", "犬"] 
b=[1, 5, 2, 4]
```

リストには数値と文字列の混在も可能。

```py
c=["猫",7,"キジ"]
```
リストには変数値を入れ込む事も可能。

```py
n = 5
["みかん", n, "ラッパ"]
```
リストにリストを入れる事も可能。

```py
[[1, 2], [3, 4], [5, 6]]
```
参考サイトまとめ

# Shader
[GLSL で暖を取るための準備をしよう！ GLSL お役立ちマニュアル](https://qiita.com/doxas/items/5a7b6dedff4bc2ce1586)
下記リンクはdoxasさんの記事で紹介されてます。
(サイトを忘れないようにするためにリンクをまとめてます。)

**fragment shader editor**
[GLSL Snadbox](http://glslsandbox.com/)
[Shadertoy](https://www.shadertoy.com/)
[GLSLFan](https://glslfan.com/)

**vertex shader editor**
[vertex shader art](https://www.vertexshaderart.com/)

**vertex fragment editor**
[Shdr Editor](http://shdr.bkcore.com/)

**理解**
[The Book of Shaders](https://thebookofshaders.com/?lan=jp)
[editor](http://editor.thebookofshaders.com/)
[Shader Library - Geeks3D](http://www.geeks3d.com/shader-library/)

**距離関数**
[2次元ディスタンスフィールドまとめ](https://qiita.com/7CIT/items/fe33b9b341b9918b6c3d)

# GLSL -> Cg/HLSL
[GLSL SandboxをUnityに移植](http://www.shibuya24.info/entry/2016/12/15/090000)

# Graph
[Graph Toy](http://www.iquilezles.org/apps/graphtoy/)

# Easing
[easing](https://thebookofshaders.com/edit.php#06/easing.frag)

# Shaping function
[Shaping](https://www.flickr.com/photos/kynd/9546075099/)

# Webデザイン・アワード
[The FWA - Awards](https://thefwa.com/)
[Awwwards](https://www.awwwards.com/)
[Chrome Experiments](https://experiments.withgoogle.com/collection/chrome)
[CSS Design Awards](https://www.cssdesignawards.com/)
[CSS WINNER](https://www.csswinner.com/)
[Design Awards Asia](https://www.designawards.asia/ja/)
zshのプロンプトを自作した

zshのミニマルなプロンプトを自作した。

# 参照
Zshのプロンプト展開のマニュアル(http://zsh.sourceforge.net/Doc/Release/Prompt-Expansion.html)
色表示を司るANSIエスケープシーケンスの記事(https://en.wikipedia.org/wiki/ANSI_escape_code)

# できたもの
![term.png](https://qiita-image-store.s3.amazonaws.com/0/71548/584eec94-0b08-25e1-e85a-ffbdd5eebfbe.png)

- 構成は「空行・情報・プロンプト」
- カレントディレクトリ、直前コマンドの戻り値、(あれば)バックグラウンドのジョブ数を表示
- 戻り値が0の時は緑、それ以外では赤で表示
- ジョブが1より多い時には複数形で

# 解説
```zsh
PS1=$'
\e[7m[ %~ : \e[3%(?.2.1)mStatus %?\e[39m%1(j. : Job%2(j.s.) %j.) ]\e[m
%# '
```

- `$'`  
[マニュアル](http://zsh.sourceforge.net/Doc/Release/Shell-Grammar.html#Quoting)によると組み込みコマンド`print`で処理するのと同じ(?)になるらしい。よくわからないが`'`や`"`ではできなかった。
- `\e[7m`  
前景色と背景色を逆にする。
- `%~`  
カレントディレクトリ。ただしホームディレクトリまでのパスに相当する部分は`~`で置き換えられる。  
- `\e[3%(?.2.1)m`  
直前コマンドの戻り値が0ならば`\e[32m`(前景色を緑にする)に、それ以外なら`\e[31m`(前景色を赤にする)になる。
- `%?`  
直前コマンドの戻り値。
- `\e[39m`  
前景色をデフォルトに戻す。
- `%1(j. : Job%2(j.s.) %j.)`  
バックグラウンドジョブ数が2以上なら` : Jobs `+ジョブ数、1なら` : Job 1`を表示し、それ以下なら何も表示しない。
- `\e[m`  
前景・背景色等を全てデフォルトに戻す。
- `%#`  
特権ユーザなら`#`、それ以外なら`%`。
Flutter (Dart) で Singleton が何故か複数作られて意図通りのSingletonな動作をしてくれなかった悲しみ

## 症状

Dart で Singleton なクラスを作るときは以下のようにするといける、といろいろなところで解説されている。


```dart:Singleton.dart
class Singleton {
  static final Singleton _singleton = new Singleton._internal();

  factory Singleton() {
    return _singleton;
  }

  Singleton._internal();
}
```

この `Singleton` ２つのdartファイルにて参照しようとすると、なぜかインスタンスが２つ作られてしまう現象になやまされた。 (それじゃぁ、Singletonじゃない！！)


## 原因
`import` の書き方が `package:....` に統一されていなかったため、Singletonが違うものとして認識されていた。(謎挙動。。。)

例えば以下のような感じ。このように、importの形式が違うとDartは別物として扱っちゃうらしい。。(なんでだろう・・・？)

```dart:main.dart
import 'singleton.dart'
```

```dart:some.dart
import 'package:mypj/singleton.dart'
```

## 解決策
`package:...` な書き方に統一する。


## おわり
この謎の挙動、原因が全然つかめなくてものすごいハマった(T_T)。数時間使っちゃったよ。。。悲しみ。。。。。

もし同じ様な問題に悩まされている人がいたら、この投稿が役に立つといいな。。。。数時間使う前に。。。

検索しまくって出てきた以下に助けられました。感謝です。

http://cogitas.net/flutter-tips/
VORTEX CORE47キーの挙動

偶然VORTEXでの数奇なる巡り合わせが発生したため、投稿することにした。
レイヤーを変更すれば、各キーをある程度マッピング変更出来る。
そのとき、意図しない挙動が起こり、驚きを隠せずに、レイヤー0で試したことを記載する。

#レイヤー0での確認
レイヤーは全部で4種類ある。
一つはさんざん呟いている0レイヤーだ。
これは、キーマッピング変更不可能レイヤーになっている。
そして、これが購入時のデフォルトレイヤーになる。
そのため、このレイヤーでの挙動は販売(開発?)会社に決定権があり、揺るぎない動作になる。

他は、レイヤー1から3まであり、これはある程度の自由なマッピングが可能だ。

##アプリケーションキーの存在
キーボードの右下に、Ctrlキーがあり、その1つ左側には、`Menu`と刻印されたキーがある。
これは、いわゆるアプリケーションキーと言われ、早い話右クリックしたような挙動がある。
もちろん、マウスで右クリックしているわけではないため、アクティブカーソルが存在している場所で右クリックが発生する。

デスクトップ上でキーを押せば、多分デスクトップの左上に右クリックのメニューが出現するはず。

##Fnキーとの組みあわせ
このキーボードは、キーの数が一般のキーボードに比べて少ない。
かなり少ない。
そのため、他のキーボードで打てる移動関係は、Fnキーとの組みあわせで打つ必要がある。
また、記号関係は、Fn1キーとの組合せが必要になる。

###Fnキー+Zキー
ここが本題。

なぜか、Fn+Zの組合せで、アプリケーションキーとして動く。
レイヤー0で、だ。

#感想
右下にアプリケーションキーが存在するのに、なぜに隠しコマンド的にアプリケーションキーを忍ばせているのだろうか不思議でならない。
販売会社のプログラムミスだろうか!?

以上だ。
韓国のインスタ映えする忍者マスク

FBでシェアされてたものですが、ものすごく感動しました。
これの写真とるためだけに、女の子が集まるんじゃないかと思うほど、
ものすごい衝撃を受けました。。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203473/6cdd58d8-ca7f-de45-e2b4-c4fa2f4e941a.png)

https://scontent-nrt1-1.xx.fbcdn.net/v/t1.0-9/41801495_10212967690969138_4029923021622870016_n.jpg?_nc_cat=0&oh=f91977ce1f5551afd09d31e8dd456747&oe=5C1FABC4
VMware PlayerでNested Virtualization（入れ子仮想化）の設定

# やりたいこと
Windows上のUbuntuでvirtualboxを使って
Nested Virtualization（入れ子仮想化）をやりたい。

# 起こった問題
docker-machineを使用しようとした際に以下のエラーが発生。

```
$ docker-machine create --driver virtualbox default
Running pre-create checks...
Error with pre-create check: "This computer doesn't have VT-X/AMD-v enabled. 
Enabling it in the BIOS is mandatory"
```

`This computer doesn't have VT-X/AMD-v enabled. `
ぐぐると、ふむふむ、仮想化支援機能を"enabled"ね。

と思って
Ubuntu起動中に`F2`でBIOSの設定画面を起動。
見てみると設定すべき`Intel Virtualication Technology`の項目がそもそも無い。。

# 解決
VMware Playerの設定を以下のように変更
1. 「仮想マシン設定の編集」を選択
2. 「ハードウェア」タブの「プロセッサ」を選択
3. 仮想化エンジンの優先モードを「Intel VT-x/EPT または AMD-V/RVI」に設定 
4. 「Intel VT-x/EPT または AMD-V/RVIを仮想化」にチェック 

実際にはBIOSの設定画面からは依然設定できるようにならなかった。
`docker-machine`コマンドが`virtualbox`使って出来るようになったのでよし。

# 参考
[公式ドキュメント](https://communities.vmware.com/docs/DOC-8970)
[上記の翻訳](https://qiita.com/tsukamoto/items/ad0d34894dd55761478b)

# ありがとうございます
[stack overflow](https://ja.stackoverflow.com/questions/48459/bios%E3%81%AE%E8%A8%AD%E5%AE%9A%E7%94%BB%E9%9D%A2%E3%81%A7%E4%BB%AE%E6%83%B3%E5%8C%96%E6%94%AF%E6%8F%B4%E6%A9%9F%E8%83%BD%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%81%8C%E5%87%BA%E6%9D%A5%E3%81%AA%E3%81%84?noredirect=1#comment50196_48459)
[teratail](https://teratail.com/questions/146938?whotofollow=)
my.cnf についてまとめた

# これまで
DBAになるため勉強中...

1. [MySQL について](https://qiita.com/at_1016/items/33186523cfc20fb58675)
2. MySQL のインストール（編集中）
3.  **my.cnf について**　　　◀ これ

# my.cnf とは
- MySQL の設定ファイル
- さまざまなパラメータの設定をする                                
   ⇒ 設定がMySQLの性能を左右する 🌟
- etc ディレクトリ配下にある （ `/etc/my.cnf` ）


# my.cnf を確認してみる

``` terminal
$ vagrant up
$ vagrant ssh

[vagrant@localhost ~]$ cd /etc/
[vagrant@localhost ~]$ vi my.cnf
```
▼ デフォルトの my.cnf :baby:

```
# For advice on how to change settings please see
# http://dev.mysql.com/doc/refman/5.7/en/server-configuration-defaults.html

[mysqld]
#
# Remove leading # and set to the amount of RAM for the most important data
# cache in MySQL. Start at 70% of total RAM for dedicated server, else 10%.
# innodb_buffer_pool_size = 128M
#
# Remove leading # to turn on a very important data integrity option: logging
# changes to the binary log between backups.
# log_bin
#
# Remove leading # to set options mainly useful for reporting servers.
# The server defaults are faster for transactions and fast SELECTs.
# Adjust sizes as needed, experiment to find the optimal values.
# join_buffer_size = 128M
# sort_buffer_size = 2M
# read_rnd_buffer_size = 2M
datadir=/var/lib/mysql
socket=/var/lib/mysql/mysql.sock

# Disabling symbolic-links is recommended to prevent assorted security risks
symbolic-links=0

log-error=/var/log/mysqld.log
pid-file=/var/run/mysqld/mysqld.pid
```
# パラメータのご紹介
## デフォルトで設定されている
#### datadir
データベースのデータ（テーブルなど）を作成したディレクトリ

#### socket
UNIXソケットファイルによる接続のためのファイル名

#### symbolic-links
シンボリックリンクをつかうか （つかう : 1 , つかわない : 0）

#### log-error
サーバーから出力されるエラーメッセージを記録するファイル名

#### pid-file
PIDファイルが作成されているディレクトリ

## デフォルトで設定されていないけどよく必要とされる
#### default-storage-engine
- テーブルの作成時にデフォルトで選択されるストレージエンジンを指定する
- 未設定のときは `MyISAM` がデフォルトのストレージエンジン
- `CREATE TABLE`文の最後に`ENGINE = エンジン名` と指定することで、テーブルひとつひとつにデフォルト以外のストレージエンジンを設定できる

#### log-bin
- バイナリログを有効にするためのパラメータ
- 未設定のときはバイナリログを取得しない
- バイナリログはリカバリでも重要なので指定するべき 👮

#### slow-query-log
- 実行に一定時間（秒数）以上を要したSQL文をログファイルに出力する「スロークエリログ」を有効にするためのパラメータ
- 未設定ではスロークエリログは取得されない
- 性能解析のために重要な機能なので指定すべき 👮

#### long-query-time
- 実行に何秒以上かかったSQL文をスロークエリログに記録するかを指定
- 未設定のときは 10秒

#### max-connections
- MySQLに接続できる上限数を指定
- 未設定のときは 100 
- 複数台のWebサーバから一斉に大量の接続が行われる場合は 1,000 など指定するときもある
AWS勉強 -ネットワークやサーバーを構築する-

# なぜ始めたのか

自分が務めている会社ではAWSが多くの場面で使用されています.
そこで理解を深めることで多くの業務に関わるチャンスを増やそうと考えたところが始まりです.

下記の本で勉強を進めていき,自分なりにアウトプットしていこうと思います...

https://www.amazon.co.jp/Amazon-Web-Services-基礎からのネットワーク-サーバー構築/dp/4822237443

## ネットワークやサーバーを構築する

### サーバーについて

#### サーバーとは

サーバー用のOS(LinuxやWindows Serverなどの)をインストールしたコンピュータのこと.

[参考になる記事](https://www.marketingbank.jp/special/cat02/21.php)

#### サーバーの種類

* Webサーバー
* データベースサーバー
* メールサーバー

など...

#### サーバーの役割

どんなソフトウェアをインストールするのかで役割が決まる.
メールの受信機能を提供するソフトウェアをインストール→メールサーバー

#### サーバー構築に必要な知識

①サーバーOSのインストールと各種の設定


②ソフトウェアのインストール方法と設定の方法
ex.
Webサーバー→Apache, nginx
データベースサーバー→MySQL, PostgreSQL
メールサーバー→SendMail, Postfix

### ネットワークについて

サーバを構築してもネットワークに繋がないと通信ができない.
通信するためには各サーバーの構成をルーターにデータが流れるように設定する必要がある.
また,ドメイン名を使用するためには「DNSサーバー」の設定も必要

[ルーターについて](https://www.netage.ne.jp/wifi-rental/column/router.html)
[TCP/IPについて](https://eng-entrance.com/network-tcpip)

#### ネットワークを構築するために必要な知識

①IPアドレスに関する知識

[参考になる記事](http://www.asahi-net.or.jp/~gx4s-kmgi/lan01.html)

②DNSサーバーに関する知識


[参考になる記事](https://www.kagoya.jp/howto/rentalserver/dns-server/)

### 問題を解決する様々なツール

ネットワーク,サーバーを構築する際に,
設定を確認したり,流れているデーターの確認をしたりする必要がある.
そのために,各種ネットワーク関連のコマンドやデータを覗き見るツールを使う.

#### ネットワーク関連のコマンド

* [ping](http://www.atmarkit.co.jp/ait/articles/0108/30/news002.html)
* [traceroute](http://www.atmarkit.co.jp/ait/articles/0108/30/news003.html)
* [telnet](http://www.atmarkit.co.jp/ait/articles/0207/06/news002.html) -macだとインストール必要ですね.
* [nslookup](http://www.atmarkit.co.jp/ait/articles/0307/19/news003.html)
* [dig](http://www.atmarkit.co.jp/ait/articles/1711/09/news020.html)

など

#### 流れるデータを見るツール

生のデータを見たい→[Wireshark](https://qiita.com/To_BB/items/9079de8f2dfc86a261fa)など
HTTPプロトコルに限ったデバッグ→Webブラウザに付属のデバッグツール

などがある

### 感想

コマンドの使い方は実際に使用して覚えていく必要があると感じた.
大学でやったはずの内容も忘れていることに気づけたので,頑張って覚えていきます...
JuliaImagesの備忘録その２

今回はJuliaImagesの[Quickstart](http://juliaimages.github.io/latest/quickstart.html)から配列と画像の関係を見てみます。結果をすぐに確認するために、前回みたうちの[IJulia](https://qiita.com/Dsuke-K/items/c7d998911006a9bfc7c3#ijuliajupyter
)を前提にします。

# 画像データの型

`JuliaImages`では、(元の配列の型によらず)画像データを0(黒)-1(白)の範囲で扱うための特別な型を用意しています。例えば、`N0f8`は8-bit整数値を1/255でスケーリングしたかのように振る舞います。

ちなみに`N0f8`は**N**omalized, with **0** integer bits and **8** **f**ractional bitsを意味しており、`N0f16`だと16-bit depthの画像用になります。

はじめのうちはUInt8での256の階調を0-1で扱うのには違和感があるかもしれませんが、慣れると実際のデータ型によらずに統一的に数値処理できるようになるので便利なんだと思います。

# 配列 -> 画像

`colorview`を使います。必要に応じて`normedview`も使います。

## グレー画像化

JuliaImagesでは画像はあくまで配列なので、次のように配列を定義しておきます。

```Julia
img = [0.0 0.1 0.2
       0.3 0.4 0.5]
```

### colorviewを使った場合

この配列からグレー画像をするには`Gray`と`colorview`を使うと便利です。`colorview`を使うと、元の配列への参照(view)を保持します。

```Julia
imgg = colorview(Gray, img)
```
試しに参照元の配列を操作して画像が変わるかを見てみたのが次のスクリーンショットです。`img`を操作すると`imgg`の左上の色が変わったのが分かるでしょうか。
<img width="286" alt="Screen Shot 2018-09-16 at 11.12.20 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/171142/99d3ec32-a1cf-ea75-458c-8e0a2f9a11d3.png">

### colorviewを使わない場合

色情報似たような結果は`colorview`を使わずに作ることもできますが、次の方法は配列のコピーが発生するためimgを操作してもimgcは変化しません。

```Julia
imgc = Gray.(img)
```

<img width="237" alt="Screen Shot 2018-09-16 at 11.13.51 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/171142/374934e6-a6a9-3b52-5bb1-a3377ba78f69.png">

### UInt8の配列から画像作成

画像データは0-1に収まっていなければならないので、`normedview`を使います。これは`rawview`(後述)の逆ですね。

```Julia
imgUInt8 = rand(UInt8, 2, 3)
Nimg = normedview(imgUInt8)
img = colorview(Gray, Nimg)
```


##  カラー画像化

次にカラー画像を見ていきます。RGBに変換する際、元の配列の1次元のサイズは3である必要があります。

```Julia
img = rand(3, 2, 3)
@assert isequal(size(img, 1), 3)

imgc = colorview(RGB, img)
@assert size(imgc) == (2, 3)  # viewのサイズを確認
```

あとはグレー画像のときと同様です。

<img width="321" alt="Screen Shot 2018-09-16 at 11.35.58 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/171142/c6535701-2de5-7b50-c8dc-a5acb0a307a0.png">

### RGB値へのアクセス

各ピクセルのRGB値には、それぞれr, g, bのメンバーとして取得できます。C++でOpenCVを使うときの感じですね。

```Julia
p = imgc[1, 1]
r, g, b = p.r, p.g, p.b
```

# 画像 -> 配列

channleviewを使います。

## グレー画像から配列へ

```Julia
imgg = rand(Gray, 2, 3)
img = channelview(imgg)
```

`channelview`は`colorview`のちょうど逆ですね。`img`は元の画像データへの参照なので、`img`を操作すれば`imgg`も変化します。

### 元の型での参照

`channelview`は0-1にスケーリングした(かのような)配列を返しますが、元の画像データがUInt8の場合、直接その型でデータを見たくなるかもしれません。そんな時は、`channelview`に加えてさらに`rawview`を使います。`rawview`の作用は前述のnormedviewの逆ですね。

```Julia
img = rand(Gray{N0f8}, 2, 3)
imgv = rawview(channelview(img))
```

## カラー画像から配列へ

チャネル数の分だけ1次元目の要素が大きくなる点にさえ気をつければグレー画像とほぼ同じ。

```Julia
img = rand(RGB{N0f8}, 2, 3)
imgv = channelview(img)
@assert size(imgv) == (3, 2, 3)
```


# まとめ

配列の画像化、もしくはその逆への変換で使ったものは下記の通りです。

* 配列 -> 画像
  * colorview (画像化)
  * normedview (正規化)
* 画像 -> 配列
  *  channelview (配列化)
  *  rawview (元のデータ型での参照、正規化の逆)

次はFilteringでに行こうかな。
Hugoで日本語URLが404になってしまう / 濁音ファイル名を扱う際のGitの設定

ブログをGitHub Pagesに構築する際に、URLに日本語の濁音が入っているページが表示できないという問題が発生しました。

https://kamykn.github.io/
![スクリーンショット 2018-09-17 0.07.01.png](https://qiita-image-store.s3.amazonaws.com/0/73446/5c518525-598d-ab19-e453-e1b0e66d99a0.png)

↓↓↓ gorm『で』実行されているクエリ(SQL文)を確認する　というページを確認すると…
![スクリーンショット 2018-09-17 0.06.53.png](https://qiita-image-store.s3.amazonaws.com/0/73446/8b9d4ba7-1a86-cfd9-cede-cfcbc745ed0f.png)


ファイル名に日本語の濁音などが入る場合に、濁音の処理がMacのファイルシステムであるNFDは他と異なるため、この場合例えばMac上では問題なくても、Linuxにファイルを移したときに問題があったりします。

今回はHugoが生成したファイル名と参照しようとしているファイル名がこれらを原因として結果として異なってしまうことが原因のようです。

今回のような濁音の問題は、『Macあるある』ですね。


# 対応策
**Gitでコミットpushされるファイル名がNFDじゃなくても正しく参照できるように設定を追加します**
Gitのコマンドでまずは下記の設定を確認します

```bash
$ git config --list | grep precomposeunicode                 
core.precomposeunicode=false
```

ここがfalseになっている場合、下記のように設定を変更してしまいましょう。

```bash
$ git config --local core.precomposeunicode true
```

この設定ができれば早速git statusで変更点が確認することができます。

```bash
$ git status 
```

↓↓↓画像は見やすいようにtigで差分を表示したもの。
『で』とか『デ』とかの濁音が一網打尽。
![スクリーンショット 2018-09-17 0.23.09.png](https://qiita-image-store.s3.amazonaws.com/0/73446/5425669c-432b-43e6-216b-31f615b9ddb2.png)

また、Hugoのconfig.tomlでは下記のような設定にしています

```toml
[permalinks]               
  post = "/:section/:title"
```

# 得られた~~サポート~~結果
無事にリンクがちゃんと参照できるようになりました！

確認ページ: [gormで実行されているクエリ(SQL文)を確認する](https://kamykn.github.io/post/gorm%E3%81%A7%E5%AE%9F%E8%A1%8C%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%82%AF%E3%82%A8%E3%83%AAsql%E6%96%87%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B/)
<img src="https://qiita-image-store.s3.amazonaws.com/0/73446/3e6e1b77-deb4-b402-47fe-6521aa8db192.png" width="500px">

ちゃんと見れましたね！

## 備考など
- 今回構築したサイト
 - https://kamykn.github.io/
- Hugoで日本語URLが404になってしまう問題のとりあえずの解決方法
 - https://qiita.com/karadaharu/items/b7621d3eac1ecddbf7fa
- 得られたサポート　元ネタ
  - [顧客が本当に必要だったもの](http://dic.nicovideo.jp/a/%E9%A1%A7%E5%AE%A2%E3%81%8C%E6%9C%AC%E5%BD%93%E3%81%AB%E5%BF%85%E8%A6%81%E3%81%A0%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE)
ASP.NET CoreのGDPR対応とSessionとAuthentication

ASP.NET Core2.1にはGDPR対応の仕組みがある。

https://docs.microsoft.com/ja-jp/aspnet/core/security/gdpr?view=aspnetcore-2.1

これは、リクエストに指定されたCookieが埋め込まれていなかった場合には(defaultではkey:.AspNet.Consent, value:yes)Cookieをレスポンスしない、というものになる。

GDPR対応を有効にした上で設定を上記に示したURLのサンプルや、現在のASP.NET Core2.1の初期テンプレートのままにした場合、Sessionが利用できない。

デフォルトのSessionはCookieにSessionIDを埋め込むことで、そのKeyをもとにStateを維持する仕組みなので、Cookieがレスポンスされない状態では毎回SessionIDが変わってしまうためである。

ではAuthrnticationでCookie認証を使用する場合のCookieはGDPRではどうなるだろうか？

AuthenticationのCookieは認証を行なった場合にはGDPR関係なくレスポンスされる。
逆にCookieBuilderoptionsなどでcookieのIsEssentialプロパティをfalseに変更してもクッキーはレスポンスされた。

この３つが同時に働くと奇妙な状況が発生したりする。

認証はしているがGDPRのOKCookieが埋め込まれていない場合、認証してUser.Identityなどが取得できるのにセッションが利用できない、みたいな状況になる。

この変な状態を起こさないようにするためには、

```csharp

services.Configure<CookiePolicyOptions>(options =>
{
　　// This lambda determines whether user consent for non-essential cookies 
　　// is needed for a given request.
　　　　options.CheckConsentNeeded = context => true;
  options.MinimumSameSitePolicy = SameSiteMode.None;
});
```

CookiePolicyOptionsでのCheckConsentNeededの設定を修正してあげればよい。

CheckConsentNeededは、そのリクエストがユーザが同意しているかチェックし、クッキー制御を行う必要があるかを判定するFuncを設定する。

例えば、サインインしている場合にはGDPRの個人情報追跡に同意したとみなして、クッキーチェックの必要がないという風に設定してあげれば、認証していれば必ずセッションが正常に使えるという状況を作れる。

```csharp
services.Configure<CookiePolicyOptions>(options =>
{
  // This lambda determines whether user consent for non-essential cookies is needed for a given request.
  options.CheckConsentNeeded = context => context?.User?.Identity?.IsAuthenticated != true;
  options.MinimumSameSitePolicy = SameSiteMode.None;
});
```
静的サイトジェネレータHugoをはじめる

下記サイトを参考に、ローカルでサイトがプレビューできるところまでを確認する。

- [公式Quick Start](
https://gohugo.io/getting-started/quick-start/)
- [静的サイトジェネレーター Hugo をとりあえず試してみた](
https://qiita.com/tamanugi/items/049dfa5149f5c03bf48d)

## 環境
macOS 10.13.6

## 手順

ターミナルで下記を実行

```sh
brew install hugo
hugo version # バージョン情報が表示されればインストール成功
hugo new site bookshelf #サイトの作成
hugo new post/good-to-great.md # コンテンツの新規作成　ここを編集してコンテンツを作る
hugo server -D # プレビューする　ただしここではまだテーマがないので画面は真っ白
cd themes # テーマを入れていく
git clone https://github.com/dim0627/hugo_theme_robust.git robust
```

config.tomlへ下記を追記

```toml
theme = "robust"
```

ターミナルで下記を実行

```sh
hugo server -D
```

## 結果

サイトが表示された。

<img width="1186" alt="スクリーンショット 2018-09-17 0.36.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/198108/a92e7874-ac13-b969-a47c-b1f8ea851dfd.png">

画面を縮めると、スマホ向けのレイアウトになってくれる。

<img width="594" alt="スクリーンショット 2018-09-17 0.36.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/198108/4a327561-3ce9-339d-ab67-0898749d143d.png">
flaskでhello world的なことを

## はじめに
「Pythonでシフト作成ツールの作成」の連載の第１項です。

シフト作成ツールを作りつつ、pythonでのツール作成を学んでいきます。

１：flaskでhello world的なことを
２：[pytestでflaskのテストを実施](https://qiita.com/epire/items/b5ed1729d20c251d5544)

flaskのチュートリアルを参考にユーザ情報をポストして擬似ログインするところまでを実装してhello world的な学習を。
flaskの基本的な使い方などを学ぶことを目的としています。

## 工程
### ディレクトリ構成

まずプロジェクトのディレクトリを以下の様に作成。

```
├ test
├ work scheduler
 ├ __init__.py
 ├ login.py
 ├ static
   ├ css
   └ js
 └ templates
   ├ layout.html
   └ login.html
├ README.md
├ requirements.txt
├ runserver.py
├ setup.cfg
└ setup.py
```

flaskではhtml関連をroot配下のtemplatesディレクトリに収納しておくことで`render_template`を呼び出した際に自動で探してくれる。
`url_for`でstaticを指定した際も同様にstaticディレクトリから読み込みを行ってくれる。

上記はあくまでデフォルトでの仕様なので、変更もできます。

### view

``` login.html
{% extends "layout.html" %}
{% block body %}
<form method="post">
    <input type="text" name="login_id" required />
    <input type="password" name="password" required />
    <button type="submit">Login</button>
</form>
{% endblock %}
```

`{% %}`は式を記載でき、controllerから受け取った情報を処理したりできます。

上記はlayout.htmlとして定義しているhtmlを大枠として呼び出し、blockで埋め込みする箇所として確保されている領域にソースをインジェクションしている。今回はblockの箇所としてbodyを指定している。

layoutには基本的に常に表示しておくものを出しておけばいいと思います。バナーとかメニューとか...
あと私はscriptをbody内に入れたくなかったのでcssとかscriptを定義したりもしてます。

layout.htmlの方は以下の様にしてます。

``` layout.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        ...
    </head>
    <body>
        <nav>
            ...
        </nav>
        <div>
            {% for message in get_flashed_messages() %}
                <div class="flash">{{ message }}</div>
            {% endfor %}
            {% block body %}{% endblock %}
        </div>
    </body>
</html>
```

また、`{{ }}`で変数の表示も行えます。

layout.html内の`{{ message }}`はflaskの機能のflashにて吐き出したメッセージを`get_flashed_messages()`にて取得して表示してます。

変数を渡すには`render_template`の際に変数を名前付き引数として渡せばその名称で辞書化されますので使用できます。

`return render_template('hogehoge.html', variable1=variable, variable2='this is variable')`といった感じです。
あとはこのポスト結果を受け取って判定処理を行えば取りあえず擬似ログインはできます。

### controller

ここでアプリの設定や擬似ログイン処理を書いています。

```__init__.py

from flask import Flask, render_template, request, url_for, redirect, session


app = Flask(__name__)
app.secret_key = 'hogehoge secrete key'


@app.route('/', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        if request.form['login_id'] != 'admin' and request.form['password'] != 'pass':
            flash('Not logged in')
            return render_template('login.html')
        session['logged_in'] = True
        flash('You were logged in')
        return redirect(url_for('menu.html'))
    return render_template('login.html')

app.run(debug=True)

```

`Flask(__name__)`にてflaskのinstanceを作成しています。引数にmoduleのパッケージ名を指定するのでここでは`__name__`を渡しています。

`app.secret_key`は`session`を使うために必要な値です。`flash`の際にも必要となります。
キーは適当に変更してください。

`route`にてこの処理のトリガーになるurlを指定します。
今回は画面が他にないので / でログイン画面表示とログイン処理のトリガーを兼ねてます。

`form`で画面入力を取得して、ログインに失敗したらエラーメッセージを表示してます。

ログインに成功すると`session`にlogged_inキーをTrueにしてます。
ただ、menu.htmlが存在しないのでnot foundのエラーが出ますが。

取りあえずはこれでflaskのhello worldっぽいことができる様になります。

## 次項
今回のソースのテストを作ります。
パソコン未経験者の中級者への道筋

# 概要
- ITに関する広く展開される内容をまとめる記事を記載
  - [パソコンの基礎](https://qiita.com/strong_suzuki/items/a40adec0be1d5d729e35)
  - [Windows操作の基本（ショートカット操作）](https://qiita.com/strong_suzuki/items/ad67a19718249d33aa82)
  - [Windows操作の基本（ファイル・ソフト）](https://qiita.com/strong_suzuki/items/f7e1c5bda72100ff183b)
  - Macintosh操作の基本
  - Excel操作の基本
  - IT知識の基礎
  - プログラミング言語の基礎
  - インターネットの基礎
  - ネットワークの基礎
  - 各種Webサービス

記載のレベルはいずれも、社会人でデスクワークをする際に把握しておいた方がよいと筆者が勝手に思った内容を記載している。


また、IT企業の新入社員や未経験中途の方々が多く遭遇する基礎的な知識も以下にまとめる。こちらは、非IT業務の場合はあまり参考にならない。

- IT企業新人研修講師業務において、よく質問にあがる内容。
  - Web制作の基礎
  - Linux操作の基本
  - システムエンジニア(SE)とプログラマ(PG)
  - IT業界について
  - HTML,CSS,JavaScriptについて

ある程度基本的な記述が増えてきたら、専門的な記述も随時更新する。