OmniAICreator/Qiita-1.07M huggingface dataset:
[CSS] フレキシブルボックスレイアウトを使って中央に子要素を配置する

親要素に対して子要素を中央に配置したいとき、 **CSS フレキシブルボックスレイアウト** という仕様が便利だ。
本記事ではこの仕様を利用した「子要素の中央配置」の方法について触れる。

## 子要素の中央配置を実現するには

親要素に対して次の表に示す CSS プロパティと値を設定すれば良い。

| CSS プロパティ　　     | 役割                  | 値    |説明                       |
|:-----------------|:----------------------|:-----|:--------------------------|
| [display](https://developer.mozilla.org/ja/docs/Web/CSS/display)          |要素の表示方法を定義する    |flex |親要素をフレキシブルなコンテナにする|
| [justify-content](https://developer.mozilla.org/ja/docs/Web/CSS/justify-content)  |水平方向の配置方法を定義する|center|子要素を横中央位置を基準に配置する|
| [align-items](https://developer.mozilla.org/ja/docs/Web/CSS/align-items)      |垂直方向の配置方法を定義する|center|子要素を縦中央位置を基準に配置する|

## サンプルコード

以下に示すのは上記のプロパティを使用したサンプルコード。
画面全体に配置した ```div``` 要素に対して、子要素となる ```div``` 要素を中央に配置するだけの単純な例だが効果は確認できる。

* index.html

```html:index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS フレキシブルレイアウトを使って中央に子要素を配置する</title>
    <link rel="stylesheet" href="./index.css">
  </head>

  <body>
    <div class="parent">
      <div class="child">
        <label class="text">中央に配置する div 要素</label>
      </div>
    </div>
  </body>
</html>
```

* index.css

```css:index.css
html {
  /* 子孫の要素で height: 100%; でウィンドウの高さを表現するためにココで 100% を指定する */
  height: 100%;
  width: 100%;
}

body {
  /* 子孫の要素で height: 100%; でウィンドウの高さを表現するためにココで 100% を指定する */
  height: 100%;
  width: 100%;

  /* ウィンドウ外周のマージンをなくす */
  margin: 0;
}

.parent {
  height: 100%;
  width: 100%;
  background: rgba(200, 230, 240, 1.0);

  /* 子要素を中央に配置する */
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  overflow: hidden;
  height: 250px;
  width: 250px;
  background-color: rgb(229, 241, 247);
  border-radius: 15px;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
  border: solid 1px rgb(0, 0, 0);

  /* 子要素を中央に配置する */
  display: flex;
  justify-content: center;
  align-items: center;
}
```

## ブラウザで表示を確認

<img width="709" alt="スクリーンショット 2018-09-15 22.05.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/193342/47f09566-0562-c064-5a43-62c2c1ab2ceb.png">

このとおり、親要素である ```<div class="parent">``` に対して、子要素の ```<div class="child">``` が中央に配置されているのが確認できた。


## 参考

* [[MDN] CSS flexible box の利用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)
* [[MDN] display](https://developer.mozilla.org/ja/docs/Web/CSS/display)
* [[MDN] justify-content](https://developer.mozilla.org/ja/docs/Web/CSS/justify-content)
* [[MDN] align-items](https://developer.mozilla.org/ja/docs/Web/CSS/align-items)
leafletを鍛える。その9

#概要
leafletを鍛えてみた。
threeで、東京ドーム1個分、書いてみた。


#写真

![image](https://qiita-image-store.s3.amazonaws.com/0/18104/79e4cf7b-e54c-1b9e-013d-b4814ab62090.png)


#サンプルコード

```
var map = L.map('map').setView([37.9, 140.1], 15);
var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18,
}).addTo(map);

var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var glLayer = L.canvasOverlay().drawing(drawingOnCanvas).addTo(map);
var canvas = glLayer.canvas();
glLayer.canvas.width = canvas.clientWidth;
glLayer.canvas.height = canvas.clientHeight;
renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    alpha: true
});
renderer.setSize(450, 450);

var camera0 = new THREE.PerspectiveCamera(45, 1, 1, 1000);
camera0.position.set(100, 100, 100);
camera0.lookAt(new THREE.Vector3(0.0, 0.0, 0.0));
scene.add(camera0);

var light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 0, 1);
scene.add(light);

var geometry = new THREE.SphereGeometry(23, 16, 16, 0, Math.PI * 2, 0, Math.PI / 2);
var material = new THREE.MeshBasicMaterial({
    color: 0xff0000
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);   

renderer.render(scene, camera0);
function drawingOnCanvas(canvasOverlay, params) {    
    var camera0;
    if (params.zoom == 16) camera0 = new THREE.PerspectiveCamera(25, 1, 1, 1000);    
    if (params.zoom == 15) camera0 = new THREE.PerspectiveCamera(45, 1, 1, 1000);
    if (params.zoom == 14) camera0 = new THREE.PerspectiveCamera(75, 1, 1, 1000);    
    if (params.zoom == 13) camera0 = new THREE.PerspectiveCamera(105, 1, 1, 1000);    
    camera0.position.set(100, 100, 100);
    camera0.lookAt(new THREE.Vector3(0.0, 0.0, 0.0));

    renderer.render(scene, camera0);
}




```


#成果物

https://embed.plnkr.co/qgxRklmD2XDVZaWt4qug/


以上。
Bindenvを公開しました

# Bindenv

[Bindenv](https://loasnir.github.io/bindenv/)は環境変数を任意の文字列にバインドするだけのアプリケーションです。
https://loasnir.github.io/bindenv/

## 使い方

```bash
$ export HOGE=hoge
$ echo '${HOGE}' | bindenv
hoge
```

## なんで作ったの?

`Docker` を弄ってると、こういうコードに出会うことがままあるのです。
[mattermost/mattermost-docker -> app/entrypoint.sh](https://gist.github.com/loasnir/4234bf6d5aaf4640e5ff50e4bc6aa47a)

```bash:抜粋
# Substitue some parameters with jq
jq '.ServiceSettings.ListenAddress = ":8000"' $MM_CONFIG > $MM_CONFIG.tmp && mv $MM_CONFIG.tmp $MM_CONFIG
jq '.LogSettings.EnableConsole = false' $MM_CONFIG > $MM_CONFIG.tmp && mv $MM_CONFIG.tmp $MM_CONFIG
jq '.LogSettings.ConsoleLevel = "INFO"' $MM_CONFIG > $MM_CONFIG.tmp && mv $MM_CONFIG.tmp $MM_CONFIG
jq '.FileSettings.Directory = "/mattermost/data/"' $MM_CONFIG > $MM_CONFIG.tmp && mv $MM_CONFIG.tmp $MM_CONFIG
jq '.FileSettings.EnablePublicLink = true' $MM_CONFIG > $MM_CONFIG.tmp && mv $MM_CONFIG.tmp $MM_CONFIG
jq '.FileSettings.PublicLinkSalt = "'$(generate_salt)'"' $MM_CONFIG > $MM_CONFIG.tmp && mv $MM_CONFIG.tmp $MM_CONFIG
jq '.EmailSettings.SendEmailNotifications = false' $MM_CONFIG > $MM_CONFIG.tmp && mv $MM_CONFIG.tmp $MM_CONFIG
...
```

やってることはシンプルで、これだけ。
1. 設定ファイルに環境変数をバインド
2. 上書き保存

これだけのために、リーダビリティの低いコードを書く羽目になっているのです。
`dotenv` とか `direnv` とかあるけど、そんな感じで環境変数をいい感じに埋め込めたら良いな、というのが動機です。
いや、車輪の再発明かもだけど。。。
SPBasePermissions列挙型について

#はじめに
今更ですが、SharePointの【SPBasePermissions列挙型】についてまとめます。権限マスクを設定する事で、PowerShellやC#などで書いたコード上で権限制御をすることが出来ます。
#権限一覧
以下の表は、SharePoint Onlineで使用されている日本語名に対応しております。
(SharePointServer 2010と比較したら少し変わっていました...）

|権限(英語)|権限(日本語)|マスク値|
|:-----------------|:--------------------|:----------------------|
|EmptyMask|ー|0|
|ViewListItems|アイテムの表示|1|
|AddListItems|アイテムの追加|2|
|EditListItems|アイテムの編集|4|
|DeleteListItems|アイテムの削除|8|
|ApproveItems|アイテムの承認|16|
|OpenItems|アイテムを開く|32|
|ViewVersions|バージョンの表示|64|
|DeleteVersions|バージョンの削除|128|
|CancelCheckout|リストの動作を無視|256|
|ManagePersonalViews|個人ビューの管理|512|
|ManageLists|リストの管理|2048|
|ViewFormPages|アプリケーションページの表示|4096|
|Anonymous<br/>SearchAccessList|ー|8192|
|Open|開く権限|65536|
|ViewPages|ページの表示|131072|
|AddAndCustomize<br/>Pages|ページの追加とカスタマイズ|262144|
|ApplyThemeAnd<br/>Border|テーマと枠線の適用|524288|
|ApplyStyleSheets|スタイル シートの適用|1048576|
|ViewUsageData|Web Analytics データの表示|2097152|
|CreateSSCSite|セルフサービス サイト作成の使用|4194304|
|ManageSubwebs|サブサイトの作成|8388608|
|CreateGroups|グループの作成|16777216|
|ManagePermissions|ー|33554432|
|BrowseDirectories|ディレクトリの参照|67108864|
|BrowseUserInfo|ユーザー情報の閲覧|134217728|
|AddDelPrivate<br/>WebParts|個人用 Web パーツの<br/>追加/削除|268435456|
|UpdatePersonal<br/>WebParts|個人用 Web パーツの<br/>更新|536870912|
|ManageWeb|Web サイトの管理|1073741824|
|AnonymousSearchAccessWebLists|ー|2147483648|
|UseClientIntegration|クライアント統合機能<br/>の使用|68719476736|
|UseRemoteAPIs|リモート インターフェイスの使用|137438953472|
|ManageAlerts|通知の管理|274877906944|
|CreateAlerts|通知の作成|549755813888|
|EditMyUserInfo|個人のユーザー情報の編集|1099511627776|
|EnumeratePermissions|ー|4611686018427380000|
|Full Mask|ー|9223372036854775807|

#使用例
SharePointのツールバーをカスタマイズする時に使用する[CustomAction要素]の[Rights属性]などで使用することができます。
例えば、【フルコントロール】権限のユーザーのみにツールバー上にボタンが表示されるようにしたい場合は、
\<CustomAction　Rights = "ManagePermissions">\</CustomAction>
または、
\<CustomAction　Rights = "33554432">\</CustomAction>
にします。

【アイテムの表示】、【アイテムを開く】、【開く権限】の3つを指定したい場合は、Mask列の数字をそれぞれ足した数字を指定します。
1＋32＋65536=65569
\<CustomAction　Rights = "65569">\</CustomAction>

#参考
SPBasePermissions Enum：
https://docs.microsoft.com/en-us/dotnet/api/microsoft.sharepoint.spbasepermissions
CustomAction Element：
https://docs.microsoft.com/en-us/sharepoint/dev/schema/customaction-element
初心者でもこわくない Git — バックアップを取る「悪い子」のやり方

reflog とか rebase とかよく分からない間は、単純にバックアップをとってみても良い。


## Gitのデータを丸ごとバックアップ

自分のパソコンのGit用のディレクトリを丸ごとコピーしてしまう。

この方法だと、間違ってgitのディレクトリ自体を削除してしまっても、バックアップに戻すことが出来る。

### コピーして

![image](https://user-images.githubusercontent.com/13635059/45585704-cd0d6080-b923-11e8-9c8b-cb8bee3a587c.png)

### ペーストする

![image](https://user-images.githubusercontent.com/13635059/45585714-1e1d5480-b924-11e8-958f-844ea7a629f5.png)

### それがバックアップだ！

![image](https://user-images.githubusercontent.com/13635059/45585715-207fae80-b924-11e8-9218-ba1e047f3e04.png)

### コマンドでやる場合はこんな感じ

```
$ cp -r /path/to/repository /path/to/backup-repository
```

### 戻す時

元のディレクトリの名前にコピーしなおせば良い。

## リモートにバックアップする

ネットにバックアップをとっておくのが、一番安心かもしれない。

てきとうなブランチ名を作っておいて `git push` でネットにアップロードすれば良い。

`git push` コマンドも別にバックアップ用じゃないけれど、バックアップ用としても使うことだってできる。

例

てきとうな名前でブランチを作っておく

```
$ git branch バックアップ用のブランチの名前
```

バックアップ用のブランチに移動する

```
$ git checkout バックアップ用のブランチの名前
```

リモートにプッシュする

```
$ git push origin バックアップ用のブランチの名前
```

もとのブランチに戻る

```
$ git checkout 元のブランチの名前
```

## ブランチだけをバックアップする

今いるブランチをバックアップする場合

例

```
$ git branch バックアップ用のブランチの名前
```

`git branch` コマンドは今のブランチのコピーを、別の名前で作ってくれる。(だいたいそんな感じ)

本当はバックアップのためのコマンドじゃないけど、バックアップのために使うことも出来る。

バックアップに戻る時はこう。

```
$ git checkout バックアップ用のブランチの名前
```

ただこのやり方だと、自分のパソコンでgitのディレクトリ自体を削除してしまった場合は、もとに戻せないので注意だ。

## Links

- [Gist](https://gist.github.com/YumaInaura/3cd6c9708ac4a30d4cc004158c24d6bb)
- [Medium—imported](https://medium.com/supersonic-generation/git-for-beginners-the-bad-way-to-backup-git-branch-or-whole-directory-data-803121468fa5)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
最良のモデルを保存する（ModelCheckpointの使い方）

　Epoch数が少ないと学習が足りず、多すぎると過学習になりますが
　なんか自動で止める方法はないものだろうか・・・と調べると
　灯台下暗し[**本家**](https://keras.io/ja/callbacks/)にありました

#何ができるのか
 

　Epoch終了後の各数値（acc,loss,val_acc,val_loss)を監視して条件が揃った場合モデルを保存します

　例えば下記の使い方の設定方法を設定し学習を行うと「Val_loss」を監視します
　1Epoch終了後に「**保存されている重みの「Val_loss」＞学習後の「Val_loss」**」
　の場合の時だけモデル全体を保存します

　これにより適当にEpochを決めて過学習となってしまった場合でも
　モデルファイルはそれ以前の「Val_loss」が最小の時のモデルファイルが
　保存されるのでやり直しがなくて便利です

#確認環境
　python3.6.6
　Tensorflow:1.10.0
　Keras：2.2.2


#使い方

　直接model.fitやmodel.fit_generatorに書いても良いですが
　見づらいので、設定をしたものを利用します

#1)設定

```python:インポート
from keras.callbacks import ModelCheckpoint
```

```python:設定

modelCheckpoint = ModelCheckpoint(filepath = 'XXX.h5',
                                  monitor='val_loss',
                                  verbose=1,
                                  save_best_only=True,
                                  save_weights_only=False,
                                  mode='min',
                                  period=1)
```
引数説明
**filepath:** 重みのファイル名そのものを指示(ex. XXX.h5)
**monitor:** 監視する値（acc,loss,val_acc,val_loss)
**verbose:** 0=結果非表示　1=結果表示

**save_best_only:** True=判定結果から保存を決定。False=後述の'period'の間隔で保存
**mode:** 判定条件（auto、max、min）max=「acc、val_acc」、min=「loss、val_loss」
**save_weights_only:** True=モデルの重みが保存。False=モデル全体を保存 
**period:** 何エポックごとに保存するか

#2)model.fit、model.fit_generatorの設定例
　callbacks=[modelCheckpoint]を記述します

```python:
model.fit_generator(train_generator,
                    steps_per_epoch = steps_per_epoch,
                    validation_steps = validation_steps,
                    epochs=100,
                    verbose=1,
                    validation_data=validation_generator,
                    callbacks=[modelCheckpoint])
```
WordPressの固定ページと同じディレクトリに静的HTMLを共存させる


ググって参考サイトを見つけるのが大変だった課題。
参考サイトを見ていただければ解決できます。少し詰まったところをメモしておきます。

#内容
固定ページ /hoge/の子階層に静的HTMLを共存させる。
普通に設置すると固定ページが表示されないです。


/hoge/（固定ページ）
/hoge/fuga/index.html（静的ページ）

このようなディレクトリにしたい場合、固定ページ/hoge/は表示されず、
/hoge/にindex.htmlがありませんという解釈になります。

WordPressファイルディレクトリのindex.phpを/hoge/にコピーし、以下を書き換えます。

##変更前
```index.php
/** Loads the WordPress Environment and Template */
require( '/wp/wp-blog-header.php' );
```

##変更後
ディレクトリを指定します。

```index.php
/** Loads the WordPress Environment and Template */
require( '/../wp/wp-blog-header.php' );
```

##詰まったところ
index.phpの指定をしても…動作が変わらないーーーー！！！汗
それはWordPressのキャッシュが強かったからでした。
ブラウザの履歴・キャッシュを確実にクリアの上、動作確認をしてくださいね！


#検索ワード

ググったキーワードを忘れてしまうのでメモ

```:Google検索キーワード
WordPress 固定ページ 同じディレクトリ HTML
```


#参考サイト
静的HTMLをWordPressと同じ階層に共存させる方法
https://sole-color-blog.com/blog/1064/

固定ページのスラッグと同名のディレクトリを配置したい場合の対処法 | DO WP
http://do-wp.com/how-to-place-a-directory-with-the-same-name-as-the-page-slug/
Deviseの初期設定

この記事はRailsでdeviseを導入した時に詰まったとこや、学んだことを備忘録的に書き連ねてゆきます。

#deviseとは
>DeviseとはRailsで作成したアプリケーションへ簡単に認証機能を実装することができるgem（ライブラリ）の一つ。
>https://diveintocode.jp/tips/devise

要するにログイン、ユーザー登録などに必要な機能を全て備えているライブラリの一つ。テーブルも作ってくれる、便利なgem。

#devise導入手順
Gemファイルに以下を追記

```
gem 'devise'
```
gemインストール

```
bundle install
```
deviseインストール

```
rails g devise:install
```
Userモデル作成（名前は何でも良い）

```
rails g devise User
```
マイグレーション

```
rake db:migrate
```

以上をすると、dbにUserテーブルが出来る。
「http://localhost:3000/users/sign_up」にアクセスするとログイン画面が出てくる。

#ビュー作成

```
rails generate devise:views users
```
以上を実行するとviews/usersが出来る。
ログイン画面はsessions/new.html.erb

#コントローラ作成
```
rails g devise:controllers users
```
以上を実行するとcontrollers/usersにコントローラが出来る。

#ルーティング変更
http://localhost:3000/users/sign_up
は少々冗長。
http://localhost:3000/login
などに変更したい。

そんな場合routes.rbを変更。

```routes.rb
  devise_scope :user do
    get 'login', to: 'devise/sessions#new'
  end
```

#リダイレクト先を指定する

ログイン先や、ログアウト先のリダイレクト先を指定する。
sessions_controllerに追記。
protectedにしておいた方がよいかも。

```app/controllers/sessions_controller.rb
protected
def after_sign_in_path_for(resource)
  root_path
end

def after_sign_out_path_for(resource)
  root_path
end
```
【Game a Week】６週間目

# Game A Week
1. 一週間（月曜日から日曜日）に一本ゲームをリリースする。
2. 日曜日（まで）に制作したゲームを何らかの手段で公開する。
3. 制作したゲームはGame A Weekが終わるまで改変しては行けない。

# 前置き
先週の作品：[【Game a Week】5週間目](https://qiita.com/hota1024/items/bdd2634092a34ddb017f)

# 今回作ったゲーム
みなさんは[Hour of Code](https://hourofcode.com/jp/learn)をご存知ですか？
パズル感覚でプログラミングを体験できるサイトです。
今回は`scratch-blocks`というものを使ってHour of Codeっぽいゲームを作ってみました。

# 使った技術
| 名前 | 説明 |
|:-:|:-:|
| [scratch-blocks](https://github.com/LLK/scratch-blocks)  |  Scratch3.0のブロックを描画したり、ドラッグアンドドッロップするためのライブラリ。  |
|[LaravelMix](https://readouble.com/laravel/5.4/ja/mix.html)  |  前回もお世話になったWebpackのラッパー。  |

# ゲームの詳細
名前は「coding-it」。
[こちら](http://game-a-week.hota1024.com/projects/CodingIt/#0)から遊べるので是非遊んでみてください。

開くとこんなかんじの画面が出てきます。
![スクリーンショット 2018-09-15 19.39.02.png](https://qiita-image-store.s3.amazonaws.com/0/154299/3c9c7a1f-7586-d155-fa34-078375f23f64.png)

画面を大きく分けるとこのようなかんじです。
![スクリーンショット_2018-09-15_19_39_02.png](https://qiita-image-store.s3.amazonaws.com/0/154299/78e8c6bd-1df7-8b47-cf8b-7ae7f71b6599.png)
1. ブロックパレット
2. ワークスペース
3. ステージ
4. ステージ情報
5. 実行、リセット、次へボタン

ステージエリアは
![スクリーンショット 2018-09-15 19.47.44.png](https://qiita-image-store.s3.amazonaws.com/0/154299/1d1d99b6-1277-cc53-b5ee-16d98ea8d048.png)
このように猫と「G」と書かれた黄色いゴールのマスがあります。
この猫をゴールのマスへ行かせるとクリアです。

ブロックは
![スクリーンショット 2018-09-15 19.49.08.png](https://qiita-image-store.s3.amazonaws.com/0/154299/131c73d6-196a-a0a7-6a7f-0231c131ac7f.png)
このように6種類あります。
詳しい情報は「ステージ情報」のヒントに書いてあります。
![スクリーンショット_2018-09-15_19_49_47.png](https://qiita-image-store.s3.amazonaws.com/0/154299/cc313de6-45f3-8738-9de1-ef936148c5ea.png)

ステージを進めていくと「繰り返し」や「壁」や「溶岩」や「スイッチ」といった要素がでてきます。
ステージは全8ステージあります。

# 6週間目の感想
今週はアイディアを考えるのに2,3日つかってしまったので、製作期間が短くなってしまいました。

一番詰まったのは`scratch-blocks`にコード生成機能がなかったこどです。
今回は`scratch-blocks`を`JavaScript`に変換するプログラムを自作しました。
そのためブロックを組む順番でエラーが出てしまったり致命的なバグが多々あります。

以下は繰り返しのコードを生成するプログラムです。
![スクリーンショット 2018-09-15 19.54.45.png](https://qiita-image-store.s3.amazonaws.com/0/154299/508fb6b0-745e-a8b9-cdf7-423d0a0ec736.png)

ソースコードはGithubで公開しているのでよければ見てください。
<https://github.com/hota1024/coding-it>

# 最後に
ここまで読んでいただきありがとうございます。
良ければアドバイスや質問よろしくおねがいします。
【メモ】Go言語でptyを使ってみる

# 使用するライブラリ
[github.com/kr/pty](https://github.com/kr/pty)

# Hello World
```go
package main

import (
    "fmt"
    "github.com/kr/pty"
)

func main() {
    // 仮想端末をオープン
    ptmx, tty, err := pty.Open()
    if err != nil {
        panic(err)
    }
    defer ptmx.Close()
    defer tty.Close()

    // 仮想端末に対して書き込み
    buf := make([]byte, 1024)
    ptmx.Write([]byte("Hello World!"))

    // 読み込んで表示
    n, err := ptmx.Read(buf)
    fmt.Println(string(buf[:n]))
    if err != nil {
        panic(err)
    }
}
```

### 結果
```sh
Hello World!
```
ARM系の端末にOpenCVを入れる（Jetson、RaspberryPi）

ユーザーの多いRaspberryPiでは
パッケージを公開してくださっている[**神**](https://qiita.com/mt08/items/e8e8e728cf106ac83218)がいらしゃるので
使うのが近道です。

ただ、Jetsonはパッケージを見つけたことがないので
**あきらめてビルド**します

ちなみにRaspberryPiでも下記手順でビルドしてインストール可能です。

**※20180915にJetsonTX2+jetpack3.3とOpenCV3.4.3で作業して動きました**
　**文章中のフォルダ名等はOpenCV3.4.3前提で書いてあります**

#動作確認済ハード
1)Raspberry Pi 2B+
1)Raspberry Pi 3B
3)Jetson TX2(+jetpack3.3)

※Raspberry Pi 3B+　準備中

#手順
細かいセットアップは終了している前提で話を進めます
順番は下記の通り

(1)ダウンロード
(2)ライブラリのインストール
(3)cmake-gui
(4)make
(5)インストール

#(1)ダウンロード

[**ここ**](https://opencv.org/releases.html)にソースファイルがあるので
希望のバージョンの「**Sources**」をクリックしZipをダウンロードして

「**/home/*******」とかに解凍します


#(2)ライブラリのインストール

色々なサイトを参考にラズパイ２B＋のころから切った張ったしたキメラのようなリストなので
もう何が何だかわかりませんがとりあえず全部入れます（笑

```
$ sudo apt install -y build-essential cmake cmake-qt-gui
$ sudo apt install -y libgtk2.0-dev libjpeg-dev libtiff5-dev libjasper-dev libopenexr-dev
$ sudo apt install -y libpng++-dev libtiff-dev libwebp-dev
$ sudo apt install -y python-dev python-numpy python-tk libeigen3-dev yasm 
$ sudo apt install -y libopencore-amrnb-dev libopencore-amrwb-dev libtheora-dev libvorbis-dev
$ sudo apt install -y libxvidcore-dev libx264-dev libqt4-dev libqt4-opengl-dev sphinx-common 
$ sudo apt install -y libv4l-dev libdc1394-22-dev libavcodec-dev libavformat-dev libswscale-dev default-jdk ant 
```

#(3)cmake-gui
先ほど解凍した、opencv-3.4.3のフォルダにbuildフォルダを作成してフォルダ移動します

```
$ cd /home/*****/opencv-3.4.3/build
```

あまり使っている人のいない(?)cmake-guiを起動します

```
$ sudo cmake-gui
```

GUIが起動するので

1:「**Where is the source code**」に解凍したフォルダのルートを設定（ex.　opencv-3.4.3）
2:「**Where to build the binaries**」に先ほど作った「**build**」フォルダを設定
2:「**Configure**」を押す
3:「**Unix Makefile**」と「**Use Dfault native compilers**」を選択して「**Finish**」
4:「**ENABLE_PRECOMPILED_HEADER**」のチェックを外す 
5:「**Configure**」を押す
6:「**Genarate**」を押す
7:ソフトを終了させます

#(4)make
「**build**」のフォルダにいると思うので、そこで下記を実行
「-j*」が何個CPUのコアを使ってmakeするかのオプションです
全コア使うと早いですが、ラズパイは熱のせいなのかたまに死ぬので
1，2個コアを使わない方がいいような気がします

結構時間がかかるので気長に待ちます

#
```
$ sudo make -j3
```

(5)インストール
説明するほどでもないですが

```
$ sudo make install
```

入っているか確認

```
$ sudo ldconfig
```

以上で終了です。
初心者でもこわくない Git  — レポジトリって何？ ただのディレクトリとの違いは？

## レポジトリってなんだろう？

「gitの魔法がかかったディレクトリ」という言い方で、半分ぐらいは合っている感じがする。

## たとえば、これがふつうのディレクトリ

![image](https://user-images.githubusercontent.com/13635059/45585216-d7c3f780-b91b-11e8-8d76-0f7120115c96.png)

## これにGitが魔法をかけると

![image](https://user-images.githubusercontent.com/13635059/45585218-da265180-b91b-11e8-91d6-b02f4a48f6ab.png)

## 「レポジトリ」というヤツが生まれる

![image](https://user-images.githubusercontent.com/13635059/45585417-cb8d6980-b91e-11e8-9725-8792f499aecb.png)

不思議と、どこからか生まれてくる。

## レポジトリとディレクトリは友だち

レポジトリはディレクトリと、とても仲が良い。

だから何だか、同じもののような感じがする。

![image](https://user-images.githubusercontent.com/13635059/45584921-bf051300-b916-11e8-93a8-aee3bc8b0fe7.png)


## じゃあレポジトリってディレクトリなんだろうか？

ちょっと違う。いくら仲が良くても、同一人物というわけじゃない。

たとえば、ひとつのレポジトリは、いくつものディレクトリと友だちになることも出来る。

たとえばAさんのパソコンのディレクトリにもレポジトリがあるし、Bさんのパソコンにも同じレポジトリがあるし、Cさんのパソコンにも同じレポジトリある…ということもある。

![image](https://user-images.githubusercontent.com/13635059/45584773-a4ca3580-b914-11e8-8a7c-7294808b77eb.png)

というか、それがGitのふつうのやり方だ。レポジトリには友だちが多い。

それに、自分ひとりのパソコンの中の、別のディレクトリに、同じ「レポジトリ」がいることだってできる。

## それに「リモートレポジトリ」というのもある

ネットにレポジトリを置くことも出来る。

![image](https://user-images.githubusercontent.com/13635059/45584803-fc68a100-b914-11e8-89a0-679a378a38c5.png)

## たとえば最初のディレクトリが消されても、レポジトリは残り続ける

![image](https://user-images.githubusercontent.com/13635059/45584823-3f2a7900-b915-11e8-8459-4ba54d5360ac.png)


## 結局レポジトリって何なの？

どこにでもいるようで、いないような、形があって、ないような、だけどちょっとある、なんだかそんな不思議なもの。

「映画のタイトル」とか「架空のヒーロー」みたいなものかもしれない。

どちらかというと、現実世界ではなく、パソコンの中にですらなく、僕らの頭の中に存在するもの。

(だけど本当に存在しているかのように、ふるまっているもの)

## その他

- たとえばGithubとかでレポジトリを公開している有名サービスだと、本当にたくさんの人が同じレポジトリを、それぞれのパソコンのディレクトリに持つことになる。
- たとえばいつかの未来、もしパソコンから「ディレクトリ」という仕組み自体がなくなったとしても、gitのレポジトリは、形を変えて残り続けるかもしれない。
  - Gitのレポジトリは、より抽象的な、形のないもので、ディレクトリの方が具体的な機能だから。

## Links

- [Gist](https://gist.github.com/YumaInaura/cb77ff9ff7bf3dcdabca0932ffe97fd2)
- [Medium—imported](https://medium.com/supersonic-generation/git-for-beginners-what-is-repository-a-repository-is-a-directory-9509f3369f0e)









<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
WordPress投稿カテゴリーリスト、年別アーカイブリストを表示する


#内容
WordPress投稿のカテゴリ、年別アーカイブのリスト表示のコードです。
毎回、ググっているのでメモしておきます。


#解決コード

##カテゴリリスト

```archive.php

<ul class="p-archives__list">
<?php
$args = array(
'orderby' => 'name'
);
$categories = get_categories( $args );
foreach ( $categories as $category ) {
echo '<li class="p-archives__item"><a href="/news/'. $category->slug . '">' . $category->name . '</a></li>';
}
?>
</ul>

```

##年アーカイブリスト

```archive.php

<?php // 年別アーカイブリストを表示
$year=NULL; // 年の初期化
$args = array( // クエリの作成
'orderby' => 'date', // 日付順で表示
'order'   => 'DESC',
'posts_per_page' => -1 // すべての投稿を表示
);
$the_query = new WP_Query($args); if($the_query->have_posts()){ // 投稿があれば表示
echo '<ul class="p-archives__list">';
while ($the_query->have_posts()): $the_query->the_post(); // ループの開始
if ($year != get_the_date('Y')){ // 同じ年でなければ表示
$year = get_the_date('Y'); // 年の取得
echo '<li class="p-archives__item"><a href="'.home_url( '/', 'http' ).'news/'.$year.'">'.$year.'年</a></li>'; // 年別アーカイブリストの表示
}
endwhile; // ループの終了
echo '</ul>';
wp_reset_postdata(); // クエリのリセット
}
?>

```

##参考サイト
【WordPress】自由なHTMLでカテゴリーリストを作りたいときの方法 | 福岡のホームページ制作・SEO対策ならアイドットデザイン
https://idotdesign.net/blog/web/wordpress/howtomake-categorylist/

WordPress 年別アーカイブリストを表示する方法 - by Takumi Hirashima
https://hirashimatakumi.com/blog/3962.html
立ち上がるすべを失ってしまったManjaro Linuxのためにchrootで押し入った

1. ISOイメージを予め入れてあるUSBメモリから立ち上げる。
2. 初期設定的なことをする。
3. ターミナルを立ち上げる。
4. パーテーションを確認しながら作業を行いたいので、GPartedを起動する。

# マウントとChrootのコマンドを打つ

```
sudo mount /dev/sdb4 /mnt
sudo mount /dev/sdb1 /mnt/boot/efi
sudo mount /dev/sda4 /mnt/home
manjaro-chroot /mnt
```
[Day4] TypeScript × Node.jsで簡単なRESTAPI作ってみる(Class編)

## 進捗状況
* [Day1](https://qiita.com/okkun_includer/items/5b7a916cd7008f3c7a1c)
* [Day2](https://qiita.com/okkun_includer/items/c68331ca4e07ac3159ea)
* [Day3](https://qiita.com/okkun_includer/items/c68331ca4e07ac3159ea)

## TypeScriptでClassを書く
やってることはDay1と同じ

### server.ts

```
import * as express     from "express";     // require("express")
import * as helmet      from "helmet";      // require("helmet")
import * as bodyParser  from "body-parser"; // require("body-parser")

export class MyServer {
  private server: any;    // expressのインスタンス
  private port:   number; // port保管

  constructor() {
    this.server = express();   // インスタンス生成
    this.server.use(helmet()); // セキュリティをhelmetで管理
    this.server.use(bodyParser.urlencoded({ extended: true})); // URLエンコードしてくれる
    this.server.use(bodyParser.json()); // JSON.parse()してくれる
  }

  addRouter(route: any) {
    this.server.use(route); // express.Router()を追加
  }

  start(port: number) {
    this.port = port;
    this.server.listen(this.port); // listen開始
  }
}
```

### router/test.ts

```
import * as express from "express";

export class TestRouter {
  private router: any;
  constructor() {
    this.router = express.Router();
    this.router.get('/', this.callback);
  }

  callback(request, response, error) {
    response.end('Hello World');
  }

  getRouter() {
    return this.router;
  }
}
```

### app.ts

```
import {MyServer} from './server';
import {TestRouter} from './router/test';

var server: MyServer = new MyServer();
var test: TestRouter = new TestRouter();
server.addRouter(test.getRouter());
server.start(3000);
```

## 感想
てっきりES6のclassと同じものだと思ってたけど、
変換後はprototypeになってて笑った。

export修飾子書くだけで、
module.exportsしてくれるの強い。
WordPressでbodyに任意のid名を指定する


#内容
各ページのCSS指定やグローバルナビゲーションでbodyのidを利用したり、
WordPressでbodyに任意のid名を指定したい。


##解決コード1 各ページに任意のid名を指定

条件分岐で各テンプレートごとに任意のid名を指定する方法。
投稿カテゴリはスラッグ名を自動で取得しつつ任意のカスタマイズが可能です。

```header.php
<?php
  // 親スラッグ取得
  function get_parent_slug() {
    global $post;
    if (is_page() && $post->post_parent) {
      $post_data = get_post($post->post_parent);
      return $post_data->post_name;
    }
  }
  if ( is_front_page() ) {
  //top
    $body_id = 'topPage';
  } else if ( is_single()) {
  //投稿ページ
    $body_id = 'singlePage';
  } else if ( is_page( array('hoge1', 'hoge2', 'hoge3') ) ) {
  //固定ページ複数
    $body_id = 'hogePage';
  } else if ( is_page('cat1') ) {
  //固定ページ
    $body_id = 'cat1Page';
  } else if ( is_page('fuga') || get_parent_slug() === 'fuga' ) { 
  //固定ページの親子
    $body_id = 'fuga Page';
  } else if ( is_page() ) {
    $body_id = ''.$post->post_name.'Page';
  } else if ( is_category() ) {
    $category = get_the_category();
    $body_id = 'category_'.$category[0]->category_nicename.'Page';
  }
?>
```

##解決コード2 スラッグやカテゴリ名をid名で利用する

こちらはスラッグやカテゴリ名を使用するカスタマイズ
固定ページやカテゴリ名が多くてもスラッグやカテゴリ名を利用して、
任意のカスタマイズが可能です。

```function.php
$body_id ="";
if ( is_single() || is_page() ) {
  $body_id = ' id="'.$post->post_name.'Page" ';
} else if ( is_category() ) {
  $category = get_the_category(); 
  $body_id = ' id="cat_'.$category[0]->category_nicename.'Page" ';
}
```

```header.php
<body <?php echo $body_id; ?>>
```


#参考サイト
WordPressでページ毎にbodyタグのidを振る | かちびと.net
http://kachibito.net/wordpress/body-id-width-post-name.html
Install Docker on Windows 10 Home 

# I installed docker toolbox in 'Windows 10 Home'.

## About installed PC
![os.PNG](https://qiita-image-store.s3.amazonaws.com/0/215035/511d3e9a-5ad4-04de-bed5-a2860458e9c3.png)
Note: 64bit

![cpu.PNG](https://qiita-image-store.s3.amazonaws.com/0/215035/d0e084d9-acec-8883-e7d1-6fc21be12c00.png)

Note: Set Virtualization enabled with bios.

## Download Docker Toolbox for Windows

https://docs.docker.com/toolbox/overview/

![image.png](https://qiita-image-store.s3.amazonaws.com/0/215035/7598792a-e06b-a6b2-aecd-4b6f81fde45f.png)

## Install Docker Toolbox for Windows as administrator.

*** Run Installer as administrator. ***
![image.png](https://qiita-image-store.s3.amazonaws.com/0/215035/089451cd-5396-0102-3eb8-b5a7c60240a6.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/215035/5378eda1-ac1b-1143-136b-b13344206c1a.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/215035/2a1b7930-63fa-a9c1-3298-eeb59d9806e2.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/215035/d0199e1e-70cf-f58e-9224-ce766a495a7c.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/215035/f217ce0e-6cc3-4a96-d606-bc703a1e1a18.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/215035/4290efcd-f432-45b8-79e2-81e96297eeeb.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/215035/e03b0231-6a7b-60cc-157e-d5495535f3df.png)

## Run Docker Quickstart Terminal.

If you didn't run Docker Toolbox Installer as administrator, maybe get error. (E_FAIL(0x80004005))
In my case, uninstall docker and virtual box, and delete below folder.
`Users/{your_user_name}/.docker`

And I restarted Windows before reinstall Docker Toolbox.

![image.png](https://qiita-image-store.s3.amazonaws.com/0/215035/4cdeaf9c-9ab2-45fc-b223-72b1b800d571.png)

Docker Quick Start Terminal ends normal, and picture of ship showed.

## Check
Execute the following command.

```
docker run hello-world
```
![hello.png](https://qiita-image-store.s3.amazonaws.com/0/215035/455907c2-6ccf-2607-c9ce-3cf4b8db38de.png)

Setup is now complete.
Laravelでphp artisan vendor:publishの公開先ディレクトリを変更する

ServiceProviderのbootメソッドが呼び出しているpublishesメソッドの第１引数に指定した配列のvalueで指定しているパスを公開したいディレクトリに変更する

```php
public function boot()
    {
        if ($this->app->runningInConsole()) {

            // 変更前
            $this->publishes([
                __DIR__.'/../resources/assets/js/components' => base_path('resources/assets/js/components/passport'),
            ], 'passport-components');

            // 変更後
            $this->publishes([
                __DIR__.'/../resources/assets/js/components' => base_path('js-src/components/passport'),
            ], 'passport-components');

        }
    }
```
gnu-sedで特定文字列行の上にテキストを挿入する

# 動機

設定ファイルを自動スクリプトで弄りたい時に困ったのでメモ
sedのeコマンドの情報ってほとんど見つからなかったし、意外と便利そうなので
eコマンドがgnu拡張らしいので、Macだと普通は動かない？かも

# やり方

置換対象のファイル

``` bash
$ cat << EOF > hoge.txt
1
2
specific text
3
4
EOF
```

挿入したいテキスト

``` bash
$ cat << EOF > add.txt
text1
text2
EOF
```

sedでspecific textの上にadd.txtを挿入する。
ここでeコマンドを使うのがミソ

``` bash
$ sed -i '/specific text/e cat add.txt' hoge.txt
```

specific textの上にadd.txtの内容が入る

``` bash
$ cat hoge.txt
1
2
text1
text2
specific text
3
4

```

# その他
 - 上じゃなくて下に挿入したいときはrコマンドを使う。そっちの情報はググればいっぱい出てくる
 - sedのeコマンドて知名度低い気がする。   
   https://www.gnu.org/software/sed/manual/sed.html#Extended-Commands
 - もっといいやり方があれば誰かおしえて
at coder beginner 010

B
高橋君の秘書のなぎさちゃんは、高橋君が大好きです。つまり、高橋君もなぎさちゃんの事が大好きであるに違いありません。 そのことを確認するために、庭に咲いている花で、花占いをすることにしました。
「好き」、「嫌い」、「好き」、「嫌い」、「好き」、「嫌い」……。
おかしいです。高橋君はなぎさちゃんの事が好きであるはずなのに、花占いの結果は「嫌い」でした。 これは、花が悪いに違いありません。
なぎさちゃんは、使用人達に、花占いの結果が「嫌い」にならないように、花びらを毟るよう命じました。
なぎさちゃんの花占いは、2つのパターンがあります。 一つは、「好き」「嫌い」を交互に言いながら、花びらを 1 枚ずつ毟っていくパターンです。 もう一つは、「好き」「嫌い」「大好き」の 3 つを繰り返しながら、花びらを1枚ずつ毟っていくパターンです。
どちらのパターンにおいても、最後に言った言葉が、花占いの結果となります。
なぎさちゃんの使用人であるあなたは、なぎさちゃんがどちらのパターンで花占いをしたときも、「嫌い」にならないように、 花びらを事前に毟ってあげる必要があります。
庭に咲いている花の数と、その花びらの枚数が与えられるので、花びらを毟る必要のある枚数を出力してください。

なんだこのなぎさとかいうガイジは。

```
#include<iostream>
using namespace std;
int main() {
	int n;
	cin >> n;
	int ans = 0;
	for (int i = 0; i < n; ++i) {
		int k;
		cin >> k;
		if (k % 6==0)ans += 3;
		else if (k % 6 == 2)ans += 1;
		else if (k % 6 == 4)ans += 1;
		else if (k % 6 == 5)ans += 2;
	}
	cout << ans << endl;
	return 0;
}
```
mod6で考える。中学受験チックだな

C

```
#include <iostream>
#include<vector>
#include<algorithm>
#include<string>
#include<map>
#include<math.h>
using namespace std;
using ll = long long;
using pii = pair<int, int>;
const int INF = 1e9 + 7;
int main() {
	int a, b, A, B, T, V;
	int n;
	cin >> a >> b >> A >> B >> T >> V;
	cin >> n;
	double large_L = T * V;
	bool can = true;
	for (int i = 0; i < n; ++i) {
		int x, y;
		cin >> x >> y;
		double L1 = sqrt(pow((a - x),2) + pow((b - y),2));
		double L2 = sqrt(pow((A - x),2) + pow((B - y),2));
		if (L1 + L2 <= large_L) {
			can = false;
		}
	}
	if (can) cout << "NO" << endl;
	else cout << "YES" << endl;
	return 0;
}
```
pow(a,b)でaのb乗
ONIONサイトの調査結果

#初めに
新鮮な玉ねぎ約8000個をコツコツ精査した、統計情報の調査結果を示します。
基本、GETとOPTIONによるサーバの応答で判断してます。

#調査結果(Serverヘッダ編)
Serverヘッダを確認したところ、nginxとApacheが9割近くであることがわかりました。
![キャプチャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/254131/fd84556d-91aa-9030-16ef-6164e7755757.jpeg)
[News Netcraft](https://news.netcraft.com/archives/2018/06/13/june-2018-web-server-survey.html)の調査結果(サーフェスウェブ上のドメイン名ベースで)は、Apache、Microsoft IIS、nginxの順位です。
個人的には、IISが多くて意外でした。

話をダークウェブに戻すと、Apacheを使っていても、バージョン情報を記載しない「Server: Apache」のみを返すサイトは2/3、 続いて、Apache/2.4.10、 Apache/2.4.18 、 Apache/2.4.7となっておりました。
2.4系が圧倒的ですが、1系の方もおられました。
![キャプチャ2.JPG](https://qiita-image-store.s3.amazonaws.com/0/254131/60a6c68e-9eb7-40f0-b43b-789a06f8213c.jpeg)
「Server: nginx」のみを返すサイトも2/3あり、続いて、nginx/1.6.2、nginx/1.10.3、
nginx/1.12.2となりました。
Nginx 1.15.3（リリース日：2018/08/28）
![キャプチャ3.JPG](https://qiita-image-store.s3.amazonaws.com/0/254131/a9584852-3248-0075-6867-13710ea29d59.jpeg)

Serverヘッダにサーバ情報があるのは1/10程で、ubuntu、Debian、CentOSが多いです。
まぁそうですよね。
珍しいのですと、YellowDog、Raspbian等でしょうか。

全体の5%ほどがそもそもServerヘッダを返さず、70%近くがバージョン情報を隠し、残りはバージョン情報も含めて返す感じでした。
こちらはサーフェスウェブ上とどれほど違うのでしょうね。

中には、Serverヘッダに「FUCKYOU」、「Rate Limiting May Cause Temporary Outages, We Apologize For The Inconvenience.」などあって笑いました。

#調査結果(HTTPメソッド編)
OPTIONSメソッドで各サーバにお邪魔しました。
OPTIONSメソッドで、可能な通信オプションを返してくれるのは882サイトあり、
PUTメソッドは35サイト。DELETEメソッドも大体同じ32サイトございました。
PUTもDELETEも許可してるのに、「100% Safe and Secure!」とか言ってるのは自虐か？と思いました。
サーフェスウェブよりアクセスや攻撃は全然ないと思いますので、改ざんなどの攻撃はないのでしょう。
ちなみに、TRACEメソッドは多く、206サイトでしたね。

##調査結果(CMS編)
WordPressは230サイト近くあり、30サイトはバージョン情報が隠されていました。
![キャプチャ4.JPG](https://qiita-image-store.s3.amazonaws.com/0/254131/1403fd3f-f6bf-7344-791a-5d840f2cfbed.jpeg)
Drupalは20サイトで、Joomla!が8サイトでした。
[CMSのシェア](https://w3techs.com/technologies/history_overview/content_management)では、WordPressが6割で、DrupalとJoomla!が3-6%なので、ダークウェブもサーフェスウェブも同じ感じでしょうかね。

##おまけ
Basic認証をかけてるサイトもチラホラあるのですが、レスポンスヘッダに「ユーザー名」と「パスワード」を教えて返してくれるサイトがあったのは笑いが止まりませんでした。
あーそういうパターンもあるのかとｗ
phpinfo をきれいに表示してくれているサイトも在ったりと色々笑わせていただきました。
WordPress固定ページに投稿一覧を表示して、ページングを表示する


固定ページに投稿一覧を表示して、プラグインWP-PageNaviでページングを表示したい。
固定ページでは通常のコードで表示できないのです…汗

#NGコード
```
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
```

#解決コード

通常のコードに `'query' => $myposts` という因数を渡すと解決できます。

```page.php

<?php $paged = get_query_var('paged')? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => get_option('posts_per_page'),
'paged' => $paged,
);
$myposts = new WP_Query($args);
if($myposts->have_posts()): while($myposts->have_posts()): $myposts->the_post();
?>
// 記事ループ
<p><?php the_title(); ?></p>

<?php endwhile; endif; wp_reset_postdata(); ?>

<?php
  if(function_exists('wp_pagenavi')) {
    wp_pagenavi(array('query' => $myposts));
  }
?>
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
pagenavi ここまで

```


# 参考サイト
固定ページに特定カテゴリーの投稿一覧を表示させる方法 | ワードプレステーマTCD
http://design-plus1.com/tcd-w/2015/12/custom01.html

WordPress小技集 – PageNaviを固定ページで使う –
http://program-designer.xyz/wordpress%E5%B0%8F%E6%8A%80%E9%9B%86-pagenavi%E3%82%92%E5%9B%BA%E5%AE%9A%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%A7%E4%BD%BF%E3%81%86/
【Windows10】Laravel導入まとめ

## PHPのインストール
[ここ](https://www.apachefriends.org/jp/index.html)から各OSに合わせてダウンロード、インストールする

## Composerのインストール
1. [ここ](https://getcomposer.org/)にアクセスする
2. Downloadを選択
3. Composer-Setup.exeをクリックしてダウンロード、実行

###### モードの選択
Developer mode(開発者モード)にチェックを入れると、アンインストーラが含まれません。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/199895/b6ae6760-23c5-f813-4e1a-4ce2d9c5ad7a.png)

###### パスの変更
インストールしたPHPのパスが表示されます。
基本的にデフォのままでokです。
![2.png](https://qiita-image-store.s3.amazonaws.com/0/199895/e731a807-f9e1-568e-eb6e-23e3212ea3e9.png)

###### プロキシの利用設定
プロキシを利用する場合は設定を行います。
利用しない場合はそのままNextをクリック。
![3.png](https://qiita-image-store.s3.amazonaws.com/0/199895/f374bf19-3f44-2681-f02a-1c7af1a3f7f7.png)

###### Installをクリック
![4.png](https://qiita-image-store.s3.amazonaws.com/0/199895/7b3a7cc6-44dc-03aa-63f1-be42dd79241a.png)

インストールが終わるとこのような画面が表示されます。
![5.png](https://qiita-image-store.s3.amazonaws.com/0/199895/bedc8180-66c0-ccd5-2419-7ad3272cd061.png)

Google翻訳にかけるとこうなりました。
> **情報**
続行する前に、以下の情報をお読みください。

> **重要**
セットアップによって環境が変更されましたが、実行中のプログラムのすべてがこのことに気づくわけではありません。 Composerをはじめて使用するには、次のいずれかを実行する必要があります。

>- 新しいコマンドウィンドウを開きます。
- すべてのファイルエクスプローラウィンドウを閉じてから、新しいコマンドウィンドウを開きます。
- もう一度ログオフしてログオンし、新しいコマンドウィンドウを開きます。

## Laravelのインストール
###### コマンドプロンプトから以下のスクリプトを実行
HOGEというプロジェクトを試しに作ってみます。

```bash:
composer create-project laravel/laravel --prefer-dist HOGE
```

###### プロジェクトディレクトリに移動
先程プロジェクトを作成した時にできたディレクトリへ移動します。

```bash:
cd HOGE
```

###### 以下のスクリプトを実行
```bash:
php -S localhost:8000 -t public
```

###### アクセスしてみる
ブラウザを起動し、[localhost:8000](localhost:8000)にアクセスします。

Laravelのスタート画面が表示されればokです。
![6.png](https://qiita-image-store.s3.amazonaws.com/0/199895/20856fab-ba3b-2761-39c9-ed4b190e0a0c.png)
ExpresssでSalesforceと連携するWebアプリをサクッと作成する　その２　ユーザ情報取得編



## 前提条件

[前回の記事](https://qiita.com/hikaruright/items/29d9a23ce9c463025480)まで終わらせていること。

同じプロジェクトをそのまま使用して改造します。


## OAuth認証で取得した情報を読み解く

さて、OAuthで取得したJSONは以下のようになっています。

```
{
	access_token: 'xxxxxxxxxxxxx',
	refresh_token: 'yyyyyyyyyyyyyyy',
	scope: 'full',
	id_token: 'zzzzzzzzzzzzzzzzz',
	instance_url: 'https://ap4.salesforce.com',
	id: 'https://login.salesforce.com/id/0000000000000/XXXXXXXXXX',
	token_type: 'Bearer',
	issued_at: '1536900000000'
}
```

さて、重要な部分をかいつまんで説明します

|キー|説明|
|---|---|
|access_token|アクセスするために必要なキー。最重要|
|instance_url| ログインユーザがどのインスタンスにアクセスしているのか|
|id|基本情報を取得するためのURL|
|token_type| 認証のタイプ。おそらくBearerになっていると思います。|

本当はreflesh_tokenも重要ですが、今回は割愛します。

## 基本情報(ユーザ名)を取得してみよう

ユーザIDやユーザ名といった情報は、"id"で取得したURLをコールすることで取得できます。

というわけで、このURLを使用してデータを取得してみましょう。
route/force.jsのコールバック用メソッドを修正します。


``` route/force.js
router.get('/oauth/callback', (req, res, next) => {

    var authorizationCode = req.param('code');
 
    oauth2.authenticate({
        redirect_uri: callbackUrl,
        client_id: consumerKey,
        client_secret: consumerSecret,
        code: authorizationCode,
    }, function(error, payload) {

        console.log(payload);
        
        // ここから変更

        http.get({
            url: payload.id, 
            headers: {
                "Authorization": payload.token_type + " " + payload.access_token
            }
        }, (error, response, body) => {

            // BodyをJSONパース
            var obj = JSON.parse(body);

            res.render('force', {
                username: obj.display_name, //ユーザ名
                payload: body //本文
            });
        });

        // ここまで変更
        
    });
});

```

ポイントは、ヘッダ情報に以下のように情報を加えることです。

```
"Authorization": payload.token_type + " " + payload.access_token
```

次に、force.pugを修正します。

```views/force.pug
extends layout

block content
  h1 Payload
  p こんにちは、#{username} さん
  p #{payload}
```

さて、ここまで変更したら、改めて http://localhost:3000/force にアクセスします。

ログインしたユーザの名前は表示されましたでしょうか。

![username.png](https://qiita-image-store.s3.amazonaws.com/0/97156/713aafee-8e98-4f30-6f7a-0df994de39ac.png "username.png")

ユーザ名が表示されればデータの取得は成功です。
また、ここで取得した情報を紐解くことで、各種データを取得することができます。

実際にコールできるAPIや取得できる情報は、公式サイトである[REST API 開発者ガイド](https://developer.salesforce.com/docs/atlas.ja-jp.api_rest.meta/api_rest/intro_what_is_rest_api.htm)を参考にしてみてください。
getElementsByClassNameの結果に対してforEachやmapを使う方法

まずgetElementsByClassNameでHTMLCollectionを取得します

```js
var elements = document.getElementsByClassName( "sample" );
```

HTMLCollectionに対してforEachを使うと

```js
elements.forEach(x => console.log(x)); // Uncaught TypeError
```
`Uncaught TypeError: elements.forEach is not a function` というエラーが発生します。

HTMLCollectionは配列ではないので、forEachやmapは利用できないらしいです。

forEachやmapを使いたかったので配列に変換します。

```js
elements = Array.from( elements ) ;
```

これで配列に変換できたのでforEachやmapなどが使えるようになりました。

```js
elements.forEach(x => console.log(x));
```
ActionController::ParametersをHashにする

# 環境
rails v5

# どうした
railsのformでviewから取得した値をHash型にしたい。
paramsの型は`ActionController::Parameters`という型でした。


```terminal
pry(#<WelcomeController>)> @data
=> <ActionController::Parameters {"utf8"=>"✓", "authenticity_token"=>"xxx", "data"=>{"version"=>"1"}, "commit"=>"submit", "controller"=>"welcome", "action"=>"index"} permitted: false>
```

これをHashにしたい。
`to_hash`メソッドを使えばいいようだが、許可された項目しかhashにできないもよう。
`params.permit!.to_hash`のようにすればHashに変換できる。

# 他のメソッド
`ActionController::Parameters`には他にもハッシュ関連のメソッドがありました。コメントをいただき調べてみました。
## [to_h](https://api.rubyonrails.org/classes/ActionController/Parameters.html#method-i-to_h)
`to_h`メソッドはpermitされていない項目を除いたsafeな`ActiveSupport::HashWithIndifferentAccess`クラスのデータを戻します。
参考先には`Returns a safe ActiveSupport::HashWithIndifferentAccess`とありました。
safeというのは、permitしたものだけを戻すからsafeと形容されているようです。

## [to_hash](https://api.rubyonrails.org/classes/ActionController/Parameters.html#method-i-to_hash)
permitされていない項目を除いたsafeなHashクラスのデータを戻します。

## [to_unsafe_h](https://api.rubyonrails.org/classes/ActionController/Parameters.html#method-i-to_unsafe_h)
`ActiveSupport::HashWithIndifferentAccess`クラスのデータを戻します。メソッド名にあるとおり、unsefeすなわち、permitされていないデータも戻ります。

## to_unsafe_hash
こちらがポイントなのですが、`to_unsafe_h`メソッドへのエイリアスです。
したがって、`ActiveSupport::HashWithIndifferentAccess`クラスを戻します。
今回はHash型がほしかったため、こちらはつかえないようです。

## まとめる
対応関係が成り立っていないので紛らわしいです。

`to_h` => `ActiveSupport::HashWithIndifferentAccess`
`to_hash` => `Hash`
`to_unsafe_h` => `ActiveSupport::HashWithIndifferentAccess`
`to_unsafe_hash` => `ActiveSupport::HashWithIndifferentAccess`

# もっとくわしく！
[ActionController::Parameters.to_hash](https://api.rubyonrails.org/classes/ActionController/Parameters.html#method-i-to_hash)
Ingressを使ってみよう

devopsに入門した肉体派エンジニアです(・∀・)
今はGKEのingressを使っていろいろやってみようということで勉強中です！
今回はここまでわかったことをまとめていこうと思います

## ingressってなんぞ？
ざっくりL7ロードバランサーって理解でOKかなと。
k8sではインターネットとサービスの間に置かれてアクセスを捌いてくれます

```
          internet
              |
   [       Ingress        ]
   ------|-----------|--
   [ Service ]　[ Service ]
     |     |      |     |
   [Pod] [Pod]  [Pod] [Pod]
```

## 早速書いてみよう！
```yaml
apiVersion: extensions/v1beta1
kind: Ingress # Ingressであるとわかるようにする
metadata:
  name: ingress-experimental
  # annotations:
  #  kubernetes.io/ingress.global-static-ip-name: 詳しくはここを参照のこと [https://github.com/kubernetes/ingress-gce/tree/master/examples/static-ip](https://github.com/kubernetes/ingress-gce/tree/master/examples/static-ip)
spec:
  rules:
  - http:
      paths:
      - path: /* # ここにルールを追加する。下にいくつも追加できるが上限は50らしい
        backend:
          serviceName: nginx　# ここにサービス名
          servicePort: 80 # ここはtargetPort
```
この記述だとNginxというmetadata.nameのサービスに転送してくれる。
転送のルールは `/*`としたのでとりあえずIPアドレスにアクセスしてきたらNginx側のルートにどんどん転送される。階層構造にも正しく転送されるので `IP_ADDRESS/path/to/file`でもきちんと表示される。

## よくありそうな設定パターン
```yaml
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: ingress-experimental
spec:
  rules:
  - http:
      paths:
      - path: /v-1/* # ここにルールを追加する。下にいくつも追加できるが上限は50らしい
        backend:
          serviceName: nginx-v1
          servicePort: 80 # ここはtargetPort
      - path: /v-2/* # ここにルールを追加する。下にいくつも追加できるが上限は50らしい
        backend:
          serviceName: nginx-v2
          servicePort: 80 # ここはtargetPort
```
この場合は `IP_ADDRES/v1/`と　`IP_ADDRES/v2/`以下に転送される。
このとき気をつけないといけないのは転送先のPodでも `Pod/v1/`以下に転送されること。これはNginxなんかだとrewriteなどで適切なパスに飛べるようにして上げる必要がある。
私はここでかなりハマった(´・ω・｀)



### 参考にしたやつ
[kubernetes.io](https://kubernetes.io/docs/concepts/services-networking/ingress/)
[https://qiita.com/ryodocx/items/008fdaf5c68678656749](https://qiita.com/ryodocx/items/008fdaf5c68678656749)
nysol(python) vs pandas  pandas より、遅いけどメモリは食わない

### nysolがそれほど速くなかった事例。

- 使用データ
[kaggle においてある国連データ](https://www.kaggle.com/zanjibar/world2014hs07 )
から、[2014年](https://www.kaggle.com/zanjibar/world2014hs07/downloads/year_origin_destination_hs96_6_2014.csv/7)のデータ year_origin_destination_hs96_6_2014.csv をダウンロードしてください。

- jupyter notebook で、軽く検証してみました。メモリ消費は圧倒的にnysol が少ないです。

```python
#!/usr/bin/env python
# -*- encoding:utf-8 -*-
import pandas as pd
import nysol.mcmd as nm
#
```
- pandas

```python
%%time
columns={"year":"int","origin":"str","dest":"str","hs96":"str","export_val":"float","import_val":"float"}
tg = 'year_origin_destination_hs96_6_2014.csv'
df = pd.read_csv(tg,dtype = columns)
df.groupby('origin')[['export_val','import_val']].sum()
```

- pandas 結果

```
CPU times: user 8.98 s, sys: 740 ms, total: 9.72 s
Wall time: 9.72 s
```

- nysol

```python
%%time
tg = 'year_origin_destination_hs96_6_2014.csv'
xxx1 = nm.msum({"i":tg,"k":"origin","f":"export_val,import_val"})
xxx1.run()
```
- nysol 結果

```
CPU times: user 14.4 s, sys: 1.66 s, total: 16.1 s
Wall time: 14.2 s
```

# 次にもっと重いデータでやってみました。メモリ消費は、圧倒的にnysol が少ないです。

[国連の貿易データ全部](https://toukeibiz-my.sharepoint.com/:u:/g/personal/tadashi_toukei_biz/EdYDxAJS3glEnP1iU4VtGy0Bz39dnIDLk9bK1rOQk0EvrA?e=9OMLyr)

- pandas 結果

```
CPU times: user 1min 58s, sys: 13.6 s, total: 2min 11s
Wall time: 2min 38s
16G メモリ消費
```
- nysol 結果

```
CPU times: user 3min 52s, sys: 26.6 s, total: 4min 19s
Wall time: 4min 44s
1.6G メモリ消費
```
AWS RDSを起動してみる

#Amazon RDSとは？
Amazon RDSとは、Amazon Web Servicesのクラウドサービスの1つで、クラウド上でリレーショナルデータベースを使用できます。使用可能なリレーショナルデータベースは、商用利用で有名なOracleからオープンソースのPostgreSQLなど数種類から選択可能です。本記事では、「Amazon RDSを立ち上げてみること」を記載してみたいと思います。
※ここではAWSアカウントは取得済みであること、無料トライアルであることを前提で記事を記載していきます

##Amazon RDSインスタンスを立ち上げる
まずは、Amazon RDSのページへ移動します。AWSアカウントのTOPページから"RDS"と記載すると、
Amazon RDSがサジェストされるので押下して、ページを移動します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/148996/8f983643-7c98-c853-72fc-d334804354e6.png)

以下のようなページに遷移すると思います。左の枠にある"インスタンス"をクリックして、AWS RDSインスタンスの管理ページへ遷移します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148996/82d2b0b9-3c56-316a-07df-cdaf3c8553ae.png)

今はインスタンス作成していないので何も表示されません。"データベースの作成"ボタンを押下します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148996/bd827f66-341b-5dfe-6c4d-5f7fb428a1cb.png)

データベースのエンジンの選択です。下のほうに、「RDS 無料利用枠の対象オプションのみを有効化」のチェックボックスがあるのでチェックすると、Amazon Auroraはどうやら対象外のようです。今回は、PostgreSQLを作成してみます。次へを押下。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148996/3834f9e1-e2e6-0ecd-6723-cf8a9b742f14.png)

※「RDS 無料利用枠の対象オプションのみを有効化」のチェックボックスをチェックしたキャプチャです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148996/1f28839c-25ff-008f-c557-d2d79c09248f.png)

データベースの詳細内容を指定するページのようです。以下はデフォルト値のままにします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148996/2fb7e7db-4a7e-dbba-0e8f-bbaf96a0bc04.png)

データベースの詳細内容を指定するページの続きです。
DBインスタンス識別子、マスタユーザの名前、マスターパスワードを記載します。次へを押下。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148996/7a525f54-b73d-d3ab-95e4-d9c821726968.png)

またまた、データベースの詳細設定のページです。設定内容は基本的にデフォルト値のままにします。
最後に画面下部にある「データベースの作成」ボタンを押下。
![スクリーンショット 2018-09-15 18.23.29.png](https://qiita-image-store.s3.amazonaws.com/0/148996/05e47c52-b008-209b-96ed-086056304eba.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148996/c8ca1daa-267a-1013-7f7e-ab6bd496fbfc.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148996/0a00540e-2ede-4a60-9a55-d30cf948ecfa.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148996/0a8dcb4f-5d69-9ce7-cb99-f18038dc736b.png)
たったこれだけで、データベースが作成できたようです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148996/09c55969-ea3a-968b-09d5-f56585a4753f.png)

#最後に
記事を記載しながらで30分ほどでしたので、実際の作業量としては5分程度だったと思います。実際には、詳細設定内容のところなどは、ネットワーク構成なども考慮しなければならないので、時間はかかるかと思いますが、GUI上でこんなに簡単に作成できてしまうこと自体がとても便利に感じました。