OmniAICreator/Qiita-1.07M huggingface dataset:
[JAWS-UG CLI] JAWS-UG CLIハンズオン環境を整備する (当日に実施する作業)

JAWS-UG CLIハンズオンに参加する前に、必ず以下の手順に従って、必要な環境を準備しておいてください。


前日までに実施する作業については、以下を参照してください。
* http://prototype-handson-cli.s3-website-ap-northeast-1.amazonaws.com/handson-aws_prepare/handson-aws_prepare_before-create-expand-cloud9/index.html

コストのかかるリソースの構築と強い権限の付与はなるべくハンズオン当日に実施するのがお勧めです。

継続的に環境を利用する場合は、ハンズオン当日以前に実施しても問題ありません。


# 1. ハンズオンに必要な権限の追加

handson-cloud9-environment-roleロールに、ハンズオンで必要となる権限を付与します。

* この作業を実施するには、IAM管理権限(IAMFullAccess)が必要です。
* handson-cloud9-environment-roleロールに以下のポリシを追加します。
  * IAMを含むフル権限を付与するポリシ: AdministratorAccess
* ポリシは、ハンズオン直前に付与し、終了後すぐに剥奪することをオススメします。


# 2. Cloud9環境の構築

ブラウザ上でCLIを実行する環境を構築します。

* 作業は、handson-cloud9-userユーザで行います。

* ハンズオン開始前に構築し、ハンズオン完了後に破棄すると、低コストです。
* Cloud9の稼動コストは各自ご確認をお願いいたします。主にEC2とEBSのコストが発生します。


1. 環境の構築
    * 東京リージョン版: http://prototype-handson-cli.s3-website-ap-northeast-1.amazonaws.com/handson-aws_prepare/handson-aws_prepare_today-create-expand-cloud9/index.html

2. Cloud9環境用ロールのアタッチ
    - EC2ダッシュボード( https://console.aws.amazon.com/ec2/v2/home )にアクセスします。
        - 右上のメニューから'東京'を選択します。
        - 左ペインから'インスタンス'を選択します。
        - 'Name'が'aws-cloud9-handson-cloud9'で始まるインスタンス行(チェックボックス)をOnにします。
        - "アクション"(プルダウンメニュ)をクリックします。
        - "インスタンスの設定" > "IAMロールの割り当て/置換"をクリックします。
    - IAMロールの割り当て/置換 (画面)
        - "IAMロール"(プルダウンメニュー)をクリックします。
        - "handson-cloud9-environment-role"を選択します。
        - "適用"(ボタン)をクリックします。
        - "閉じる"(ボタン)をクリックします。


# 参考: ハンズオン終了後に実施する作業

http://prototype-handson-cli.s3-website-ap-northeast-1.amazonaws.com/handson-aws_prepare/handson-aws_prepare-today-delete-expand-cloud9/index.html
Unity : AssetDatabase.LoadMainAssetAtPathでSpriteを取得する


AssetDatabase.LoadMainAssetAtPath("Assets/textures/hoge.png");
で取得できるのはどうやらTextureで、直接Spriteとしては使用できないみたい。
（Resources.Loadでは直接Spriteとして使えるのに...）
なので、Spriteに変換する処理を入れる。


```C#
Texture2D texture = (Texture2D)AssetDatabase.LoadMainAssetAtPath("Assets/textures/hoge.png");
Sprite sprite = Sprite.Create(texture, new Rect(0,0,texture.width,texture.height), Vector2.zero);
```
LaravelでPaizaCloudからHerokuに公開する

初めましてです。えすです。
今、普段はシステム開発者でも運用者でもない仕事しています。
時々プログラムを書いてたりしています。

昔プログラマーしていた程度で現在現役バリバリのインターネット老人会末席な自分がQiita投稿していいか迷いましたが、実装中に困った時のメモは独りモノにしておくのももったいないことなのかと思い始め、引っかかったことと参考にしたリンクなどツレツレ書き出してみることにしました。

何かの足しになれば幸いです。

# 困ってたこと
Laravelで構築したアプリケーションをHerokuにうまくアップできない。Laravelのアプリケーション内でのエラーがでる。heroku log では 500エラーが出ていた。

+ 開発環境
    - paiza.cloud
    - PHP 7.2.7
    - mysql  Ver 14.14 Distrib 5.7.23,
    - heroku/7.9.3

# ここに至るまでやったこと
1. 兎にも角にもLaravelの開発環境が欲しかったので[Paiza Cloud](https://paiza.cloud/ja/ "Paiza cloud") に登録。無料プランで行けると思った・・・この時は。
1. [Laravel入門: 初心者でも10分でWebサービスを作れる！PHPフレームワークLaravelとPaizaCloudの使い方](https://paiza.hatenablog.com/entry/2018/02/16/paizacloud_laravel "Laravel入門: 初心者でも10分でWebサービスを作れる！PHPフレームワークLaravelとPaizaCloudの使い方")の通りに進めて開発環境でLaravelのページが出るようにする。これは手順通りでした。
1. なにはともあれHerokuにデプロイ
1. heroku open でエラー画面になる:fearful:
    + 画面のデザインからして、Laravelで用意されたエラーっぽい
1. heroku log コマンドでherokuログを覗いてみる。 `` "GET / HTTP/1.1" 500 1458 "https://paiza.cloud/containers `` とか出ている

# それから
1. 原因はともかく、さっきから Paizaで叩いているHerokuCLIのバージョンが古いとか言われている気がするので[Ubuntuでheroku toolbeltをアップデートする](https://blog.bgbgbg.net/archives/3365 "Ubuntuでheroku toolbeltをアップデートする")を見ながらアップデート。 結局 `` sudo apt-get install heroku-toolbelt ``を叩くことで解決した。
    + 多分ここは関係なかったけど、Herokuの扱いを少し覚えられた。
    + アラートメッセージが出なくなったのは気分的に楽:musical_note:
1. Herokuは基本がpostgrSQLだった気がするので、それに合わせる形でローカル環境も設定する
    + 今の時点ではDBへの問い合わせが発生しない（ハズ）なので、多分まだこれが原因ではない
        + とは言えそのうち腹をくくる日がくるので、本番はpostgreSQLで動かすイメトレと思っておくことにする
1. それでもエラーが消えない。多分Laravelの設定のどこかに問題があるので[HerokuでLaravel](https://qiita.com/niiyz/items/07c07ebd7cd8993dc28e "HerokuでLaravel")さまを参考にAPP_KEYをまずは設定してみる
1. 動いた。ヤッター:raised_hands::two_hearts:

動いた先はここです:point_right:https://lrvltest.herokuapp.com/
＊ただ、いつ消すかわかったもんじゃないです。すみません・・・

# 諸々感想
+ Paiza無料でとりあえず構築するには非常に精神的に楽:relaxed:
+ 少しPaizaCloudのターミナル画面が固まりやすい気がします
    + 贅沢は言えませんが、ターミナルからVimで書くことが多い自分にとっては、途中固まるのはちょっと怖いです
+ クラウド型開発環境サービス素敵:notes:

# お世話になった記事
こちらを大変参考にしました。ありがとうございます。
+ [Laravel入門: 初心者でも10分でWebサービスを作れる！PHPフレームワークLaravelとPaizaCloudの使い方（paiza開発日誌）](https://paiza.hatenablog.com/entry/2018/02/16/paizacloud_laravel "Laravel入門: 初心者でも10分でWebサービスを作れる！PHPフレームワークLaravelとPaizaCloudの使い方（paiza開発日誌）")
+ [Laravel5をpostgresqlでHerokuにデプロイ](http://kayakuguri.github.io/blog/2015/04/21/laravel5-on-heroku/ "Laravel5をpostgresqlでHerokuにデプロイ")
+ [HerokuでLaravel](https://qiita.com/niiyz/items/07c07ebd7cd8993dc28e "HerokuでLaravel")
コントローラーとFXMLの紐づけと初期化方法

## はじめに
Kotlin + JavaFXでGUIアプリ開発に挑戦したので、コントローラーとFXMLを紐づける方法をメモ代わりに残します。

## 実装方法
コントローラーのクラスを作成してfxml側で指定すると紐付けできます。

```kotlin:MainController.kt
class MainController : Application() {
    override fun start(primaryStage: Stage?) {
        ....
    }
}
```

```xml:main.fxml
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>
<AnchorPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            prefHeight="400.0"
            prefWidth="600.0"
            fx:Controller="MainController">
</AnchorPane>
```

## 紐づけたコントローラーを初期化する
コントローラーの初期化方法は[こちら](https://www.nakamuri.info/mw/index.php/%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9%E3%82%92%E5%88%9D%E6%9C%9F%E5%8C%96%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF)を参考にしました。

最近のバージョンではinitialize()メソッドをコントローラー内に記述することで初期化できるみたいです。

```kotlin
fun initialize() { .... }

// または

@FXML private fun initialize() { .... }
```

ちなみにコントローラーが初期化されると、fxml内で`fx:id`で指定したノードと同じ変数名を持つフィールド変数が初期化されます。
ただし、`start()`より後に呼ばれるため、`lateinit var`で宣言している状態で`start()`の中で変数を使用すると初期化されていないので失敗します。

また、`initialize()`は継承する親クラスで宣言していても紐づけたコントローラーが初期化されるので、
BaseControllerクラスを用意して継承させるとかでもいいのかなと思いました。
JavaScript AJAX 教學 - JS 與伺服器的互動 By 彭彭 23


	9. Ajax 教學
		電腦中的路徑:桌面\www\網頁檔案
		對應的網址:http://127.0.0.1:1127/網頁檔案

		主頁 http://127.0.0.1:1127/page.htm
		資料頁 http://127.0.0.1:1127/popular.htm
		資料頁 http://127.0.0.1:1127/latest.htm

![WS000022.JPG](https://qiita-image-store.s3.amazonaws.com/0/280122/6ef36625-48b1-d8b0-5e29-82328f6e49db.jpeg) ![005Chtbngy1fuetlqow3yj30dz08gt93.jpg](https://qiita-image-store.s3.amazonaws.com/0/280122/46993c41-89af-c879-a287-03912ef0349e.jpeg)


![WS000021.JPG](https://qiita-image-store.s3.amazonaws.com/0/280122/dfe38bad-6c16-cc5f-4157-96f022c95246.jpeg)


```ruby
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"></meta>
	<title>Ajax 教學</title>
	<script type="text/javascript">
	//alert("hello");
	function getData(pageName){
		// Ajax:XMLHttpRequest 物件專門用來和伺服器做連綫
		var req = new XMLHttpRequest();
		// 連綫的方法get,連綫的網址
		req.open("get","http://127.0.0.1:1127/" + pageName);
		// 利用load事件,偵測連綫的狀態結束
		req.onload = function(){
			var content = document.getElementById("content");
			// 連綫完成 做連綫後的處理 (取得伺服器的回應responseText)
			content.innerHTML = this.responseText;
		}
		req.send(); // 送出連綫
	}
	</script>
</head>
<!-- 網頁初始化 首頁的顯示 -->
<body  onload="getData('popular.htm');">

	<div>
		<button onclick="getData('popular.htm');">florencekwok1</button>
		<button onclick="getData('latest.htm');">florencekwok2</button>
	</div>
	<hr />
	<div id = "content"></div>
	</body>

</html>
```
styled-componentsでいい感じにresponsive用のmedia queryを扱いたいときのちょっとしたHoCs

styled-componentsを使う上でなかなかresponsive用のmedia queryがしっくり来てなかったのを解決出来そうだったのでメモ

# コンポーネントから別な場合
この場合はreact-mediaがおすすめ。

https://github.com/ReactTraining/react-media

そのままでも使えるが、もしbreakpointが決まっているならこんな関数を用意すると良いだろう

```jsx

export const withMediaComponent = (DesktopComponent, MobileComponent) => {
  return props => {
    return (
      <Media query="(max-width: 768px)">
        {matches =>
          matches ? (
            <MobileComponent {...props} />
          ) : (
            <DesktopComponent {...props} />
          )
        }
      </Media>
    );
  };
};
```

使い方はこんな具合

```js
const SpItem = () => {
  return <div>sp</div>;
};
const PcItem = () => {
  return <div>pc</div>;
};
const Item = withMediaComponent(PcItem, SpItem);

export const MediaComponent = () => {
  return (
    <div>
      <Item />
    </div>
  );
};
```

# コンポーネントは一緒でstyleだけ変えたい場合
本当にやりたかった方。
styled-media-queryというのがある

https://github.com/morajabi/styled-media-query

だいたいこんな感じになる。

```js
import mediaQuery from "styled-media-query";

const mediaMobile = mediaQuery.lessThan("medium");

const Item = styled.div`
  color: red
  ${mediaMobile`
    color: blue;
  }
`
```
が、syntax highlightがなかったりちょっと書き方をもうちょっとしたい

そこでこんな関数を用意してみる。

```js
import mediaQuery from "styled-media-query";
export const mediaMobile = mediaQuery.lessThan("medium");

export const withMediaStyle = (Component, extend) => {
  return styled(Component)`
    ${mediaMobile`
      ${extend}
    `};
  `;
};
```

するとこんな具合に書ける。

```jsx
const BaseItem = styled.div`
  color: red;
`;

const spExtend = css`
  color: blue;
`;

const SomeItem = withMediaStyle(BaseItem, spExtend);

const SpSomeItem = styled.div`
  ${spExtend};
`;

export const MediaStyle = () => {
  return (
    <div>
      <SomeItem>aaa</SomeItem>
    </div>
  );
};
```

`withMediaStyle(もとのコンポーネント, メディアクエリで拡張するCSS)`と言った感じで書ける。

[CSS](https://www.styled-components.com/docs/api#css)関数はコンポーネント化せずにCSS部分を扱うものになる。
vue-pwa-plugin で Service Worker をカスタマイズする

# はじめに
vue-cliにはPWAのプラグインがあってデフォルトでキャッシュなどの処理を行ってくれるServiceWorkerを作成するようになっています。しかし、WebPushなどの別の機能も利用したい、というときがありますよね。そうしたときに、ServiceWorkerをカスタマイズする方法を紹介します。

Vue.jsやvue-cli自体について詳しく知りたい方は、こちらの記事をおすすめします。
- [Vue.js を vue-cli を使ってシンプルにはじめてみる](https://qiita.com/567000/items/dde495d6a8ad1c25fa43)

# 環境
vue: 2.5.16
vue/cli: 3.0.1
vue/cli-plugin-pwa: 3.0.1

# インストール

プロジェクトを作成したい場所で以下のコマンドを実行します。

```bash
$ npm install -g vue-cli
$ vue create my-project
? Please pick a preset:
> Manually select features
? Check the features needed for your project:
 (*) Babel
 (*) Progressive Web App (PWA) Support
 (*) Router
 (他にも好きなのを選んでください)
$ cd my-project
$ npm run build
```

# 設定の変更

ここでは、WorkboxのInjectManifestモードを使います。InjectManifestモードについて詳しくは[ドキュメント](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#configuration)をどうぞ。

まずは、プロジェクトのルートディレクトリに`vue.config.js`がなければ作成して、次のようにpwaのオプションを追加してください。

```vue.config.js
module.exports = {
  pwa: {
    // configure the workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: 'src/service-worker.js',
      swDest: 'service-worker.js'

      // other options here...
    }
  }
}
```

次に、`src/service-worker.js`を作成します。
そして、`dist/service-worker.js`の内容を、冒頭に書いてあるimportScripts文を除いて、コピペします。

`src/service-worker.js`は次のようになると思います。

```src/service-worker.js
/**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 * See https://goo.gl/nhQhGp
 */
 
workbox.core.setCacheNameDetails({prefix: "my-project"});

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 * See https://goo.gl/S9QRab
 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
```

この部分ですが、Workboxのキャッシュを処理する部分になっています。ここを変更することでキャッシュの処理を変更することもできます。

また、この`src/service-worker.js`ですが、この後の部分に独自の内容を追記できます。(たとえばWebPushの処理など)

`src/service-worker.js`に変更を加えて、もう一度`npm run build`すると、`dist/service-worker.js`に独自の内容を含んだServiceWorkerが作成されていることが確認できると思います。


# 関連リンク

https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#configuration
https://github.com/vuejs/vue-cli/issues/1481
GameMaker でタイルセットを使ってマップを作る

HambleBundleの爆安セールで買った GameMaker Professional を使ってタイルマップを作ります。
勉強しながらまとめていますので、何か間違いやベターな方法があればコメントをいただけると助かります。

# タイルセットの準備
タイルセットは BackGround として作成します。
![2016-09-08_213753.png](https://qiita-image-store.s3.amazonaws.com/0/46088/50905607-4306-b230-68f6-4cd18e2a9b83.png)

BackGround オブジェクトをダブルクリックしたりして出てくる BackGround Properties ダイアログの 「Use as Tile set」チェックボックスを ON にすることで、この背景画像をタイルセットとして使えます。

タイルの幅やオフセットや間隔も「Tile Properties」パネルで設定できます。
あとは、画像を編集します。

# タイルマップの編集
マップは Room として作成します。
![2016-09-08_214456.png](https://qiita-image-store.s3.amazonaws.com/0/46088/030105b5-2c96-6c37-5dcc-a41130809867.png)


Room Properties ダイアログの、左上のタブから tile を選択します。
その後、上の画像の赤い丸で囲んだ場所（最初は Undefined になっている黒いテキストボックス）をクリックすると、タイルセットを選択できます。
さきほど作成した Background のタイルセットを選択すると、その画像が表示されます。

配置したいタイルをタイルセットから選択してから、マップに配置します。
タイルセットは初期タイル幅が16だったので32に直しました。

![2016-09-08_215329.png](https://qiita-image-store.s3.amazonaws.com/0/46088/3898ff38-2eed-9d95-5a97-0415e8b7370e.png)

# 実行してみる
最初に何を表示するかというと、 Room オブジェクトの中で、リストの一番上にある Room オブジェクトです。
今回はさきほど作成した Room0 だけなので、実行するとこれが表示されます。

実行ボタンはツールバーの三角の再生マークです。左の緑が通常実行、右の赤がデバッグ実行です。
![2016-09-08_215928.png](https://qiita-image-store.s3.amazonaws.com/0/46088/16ee1c68-a0eb-edc7-1fa8-9f774471af2c.png)

今回は Target を Windows にして実行しました。

![2016-09-08_215827.png](https://qiita-image-store.s3.amazonaws.com/0/46088/e4eaa6c0-0c14-7223-302f-4dd9d94d702b.png)

アプリケーションファイルを作るときは、メニューバーの File > Create Application で選択しているターゲットの実行ファイルが作成されます。

# 参照サイト
1. [Tiles](https://docs.yoyogames.com/source/dadiospice/001_advanced%20use/more%20about%20rooms/tiles.html)
rails + mysql でherokuデプロイ時にはまったポイント

rails初心者です。
自作のアプリケーションをDockerで開発、Herokuにデプロイした際にMySQLの設定ではまったのでメモしておきます。

## 環境
Windows10 -> docker-compose 上で開発
Rails 5.0.6

gem 'mysql2', '>= 0.3.18', '< 0.5'


## 陥った状況
ネットにある情報を頼りにHerokuにアカウント登録→デプロイまでは何とかできるようになる。  (ここにたどり着くまでにそもそもGitの使い方ではまった）

無事アプリケーションが立ち上がるが、DBに接続するページでエラーが出てしまう。

ログを追うと、

```
#<Mysql2::Error: Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)>
Couldn't create database for {"adapter"=>"mysql2", "encoding"=>"utf8", "pool"=>5, "username"=>"user", "password"=>"PassWord", "socket"=>"/var/run/mysqld/mysqld.sock", "database"=>"app_production"}, {:charset=>"utf8"}
(If you set the charset manually, make sure you have a matching collation)
```

というエラーが！
調べたところ、これは何らかの理由でRailsがMySQLに接続できなかったということらしい。


## 解決法
自分の場合は、herokuの環境設定に以下が設定されていないことが原因でした。

```
CLEARDB_DATABASE_URL:     mysql2://~~~~~
DATABASE_URL:             mysql2://~~~~~
```

特に、**DATABASE_URL** についてはデフォルトで項目自体が存在しなかったため、これが足りてないということに気づくのに随分かかりました。
(気づけば、「そりゃそうだよね」となるのですが）

追加するときは、`heroku config:set ~~` とコマンドからでも良いのですが、個人的にはブラウザから触ったほうがミスりにくいかなと思います。

![heroku1.png](https://qiita-image-store.s3.amazonaws.com/0/254731/7c266405-4515-9a37-3839-2b0a6df700fe.png)

![heroku2.png](https://qiita-image-store.s3.amazonaws.com/0/254731/a2dfd34e-bda6-9d9c-ada6-a229294f62a5.png)


## 余談
ここに気付くまでに色々はまりすぎて、もういっそherokuやめてVPSにデプロイしよう！となったのですが、そっちはそっちではまっています。笑
できてしまえばherokuのほうが全然ラクですね。
Vim—現在開いているカレントファイルを直接実行する

## やりたいこと

Vimの中から現在開いているスクリプトを直接実行したい。

## Vimの例

Vimで実行権限のあるファイルを開いてから

```
vim ./example.sh
```

コマンド入力

```
:! %:p
```

でOK

## Vim じゃない例

こんな感じ。

```sh
echo '#/bin/sh' > ./example.sh
echo 'echo ok' >> ./example.sh
```

```
chmod +x ./example.sh
```

```
./example.sh
ok
```

### 結果

```
$ vim ./example.sh
ok
```

## コマンドの意味

- `:` - `コマンドモードの開始`
- `!` - `外部コマンドを実行する`
- `%:p` - `カレントファイルのフルパス`

## ショートカットをマッピングする例

`~/.vimrc` を編集する

F5キーにマップする場合

```
map <F5> :! %:p
```

Enterも打ちたくない場合

```
map <F5> :! %:p<Cr>
```



## Links


- [Vim: execute current file? - Stack Overflow](https://stackoverflow.com/questions/15449591/vim-execute-current-file)
- [Gist](https://gist.github.com/YumaInaura/7304089ac48b12e3a75224deb08da2c3)
- [Medium—imported](https://medium.com/supersonic-generation/vim-execute-current-script-file-in-vim-with-keymap-if-you-want-1666445b902)








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Laravel + Homestead(Vagrant) + PhpStormでPHPUnit実行時に"Cannot find PHPUnit in include path (.:/usr/share/php)"が出る問題

# 環境
* Laravel 5.4
* Homestead 6.1.0 (Vagrant経由で起動)
* Windows10(Homesteadとの共有フォルダを作成してWindows上でソースを編集している)
* PhpStorm 182.3911.43

# やろうとした事
PhpStormからPHPUnitを実行したい
ただし、phpはローカルにはなく、リモート（Homestead）上のphpを実行する必要がある

# 現象
上記の環境で、PhpStormからPHPUnitを実行すると
`Cannot find PHPUnit in include path (.:/usr/share/php)` というエラーが発生する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/71575/646d5639-d66a-972d-bf6b-e72ca7a1627b.png)

# 解決方法

1. Homesteadに接続し以下を実行する

```bash
composer install --dev
composer dumpautoload
```

2. PhpStormの設定画面からテスト実行用のインタプリタを設定する

`Ctrl + Alt + S` で設定画面を開き、`Test Frameworks` を開く
`＋`ボタンを押下して設定を追加し、`CLI Interpriter`の右部の`・・・`を押下して
vagrant経由でリモート(Homestead)上のphpを実行する様に設定します

![image.png](https://qiita-image-store.s3.amazonaws.com/0/71575/694b36f8-fd3c-8678-0671-f4e5b5380645.png)

# 確認
PhpStormからPHPUnitを実行し、以下の様にテストが実行されればOKです

```
Testing started at 10:16 ...
vagrant://C:/Users/。。。
/home/vagrant/。。。
PHPUnit 5.7.20 by Sebastian Bergmann and contributors.

Time: 868 ms, Memory: 10.00MB

OK (1 test, 1 assertion)

Process finished with exit code 0
```
form_forのフォームヘルパーのpatch機能を活用　



イベント管理システムを作成
rails view ファイルでデータへ編集画面を　edit.html.erb で作成

```ruby:event.html.erb
<%= form_for @event, url: "/events/#{@event.id}" do |f| %>
<%= f.label :タイトル %><br>
<%= f.text_field :title %>
・
・
<% end %>
<%= f.submit value:"登録" %>
```
※f.text_field :titleの中にはデータは入ってます。

登録を押したら　　　
routeのpatch機能を利用して
events_controller のupdateアクションに移るよう作成を試みる

試行錯誤の結果
config/route.rbファイルに下記を追加したら
どうにか動くようになりました。

```ruby:config/route.rb
resources :events, :only => :update
```
なぜ、　formヘルパーにこだわるかと言えば、
チェック機能等便利な仕組みがあるからです。

参考にしたサイト

https://www.rubylife.jp/rails/routing/index7.html

マイブログ
https://blooming-reef-85835.herokuapp.com/posts/index
自分用WORDメモ

#設定

#Q&A
##描画キャンパスの作成位置がおかしい
###問題
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/ffee306e-29cc-0b97-e302-8a32110c5af4.png)
上の「あ」と「い」の間に描画キャンパスを作成する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/09aabf6a-856b-fd24-c826-850b6cf73253.png)

###解決方法
段落設定の行間が固定値になっているのが原因。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/f292a4db-83a6-6d15-df2c-ab9578fbd6b2.png)
一行に変更して再度描画キャンパスを作成すれば、想定通りになる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187121/b031f41e-b916-6420-14d1-6f3455131041.png)
BitbucketのAWS CodeDeployアドオンエラー”unable to remove top level folder”を解決する方法

BitbucketでAWS CodeDeployアドオンを設定中に「unable to remove top level folder」というエラーに遭遇し、解決したので方法を載せておきます。

###原因
BitbucketにPushしたファイル名の中に、AWSにデプロイできないキャラクターが含まれていたこと。
私の場合、imageファイルの中に＠マークを使ったファイル名があったことが原因でした。

###解決策
ファイル数が多くないのなら一つずつファイル名を確認すればいいですが、私の場合は数千のファイルがあったのでとてもじゃないけど手作業で確認はできませんでした。

そこでCLIで下記のコマンドを、検索したいアプリのルートディレクトリで実行しました。

```
find . -type f | awk -F / '{print $NF}' | awk '!/^[a-zA-Z0-9._-]+$/‘
```

こうすることで、上記の正規表現に含まれないキャラクターを含むファイル名を一気に検索してくれます。
あとは見つかったファイル名を正規表現のみのものに変更するだけです。

###参考

このコマンドは下記のサイト様を参考にさせていただきました。
大変感謝いたします。

http://shinya131-note.hatenablog.jp/entry/2015/06/10/113041
claspでローカルに落とした GAS プロジェクトを PUSH するとリソースのライブラリがクリアされてしまう 

Twitter に投稿するスクリプトで遊んでいます。
小さなプロジェクトではありますが、もうちょっとエレガントに書きたいしテストもしたいということでclaspでローカルに落として作業できないかなと目論んでおります。

ところでTwitter に投稿する処理については[apps-script-oauth1](https://github.com/gsuitedevs/apps-script-oauth1)をメニューのリソース > ライブラリから読み込んで楽させてもらってます。
このライブラリなんですが、クラスプからプッシュすると依存関係が切れてしまいます。この問題はmanifestファイルを修正することで解決します。

マニフェストファイルはローカルの作業フォルダにはappsscript.json として存在しています。[リファレンス](https://developers.google.com/apps-script/concepts/manifests)の指示通りに dependencies.libraries[]を次のように修正すればライブラリを含めてpushできます。
。

```json:appsscript.json
  "dependencies": {
    "libraries": [
      {
        "userSymbol": "OAuth1",
        "libraryId": "1CXDCY5sqT9ph64fFwSzVtXnbjpSfWdRymafDrtIZ7Z_hwysTY7IIhi7s",
        "version": "15",
        "developmentMode": false
      }
    ]
```
gcloudのprojectをShellScript内でのみ切り替える

`gcloud config configurations activate`を使うと、全てのShellで切り替わるため、複数の仕事を同時にしている場合に事故る。（prodとdevで異なるProjectを使うなど）

そのShellScriptだけで有効化したい場合、以下のようにする。

```shell
#!/bin/bash

gcloud() {
    `which gcloud` --project=myproject $*
}

gcloud dns managed-zones list
```

### note

* alias はShellScriptでは使えない。使えるようにする方法があるが、事故りそう。
* `gcloud(){ gcloud ...}`とすると、無限ループするので、`which gcloud`で回避。
* zoneとregionも指定したいけど、そこはconfigで。--projectの代わりに、--configurationもできる。
Xcode10でUIパーツを使えず焦った

# Xcode9まで
<img width="261" alt="スクリーンショット 2018-08-19 7.36.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/102145/76b8707a-9798-74ac-2c3d-527766f6454c.png">
このLibraryからUIパーツを選んでました
# Xcode10から
**消えた**
# 解決法
デフォルトで command + shift + L
でUIパーツの選択画面が出てきます(spotlight検索みたいなやつ)
押しづらいんで変更した方がいい感　自分はcommand + L に変更しました
# 最後に
こんなの言われてましたっけ？
MemoryHandler,BufferingHandlerのcapacityは何を指しているのか

Pythonの`logging.handler`に含まれる`MemoryHandler`はログをメモリにバッファリングできるモジュールです。

下記のように使用するとファイルのへの出力がメモリにバッファされます。

```Python
import logging.handlers
logger = logging.getLogger()
file_handler = logging.FileHandler("/tmp/root.log")
mem_handler = logging.handlers.MemoryHandler(capacity=100, target=file_handler)
logger.addHandler(mem_handler)
```

定義は下記のようになっているのですが`capacity`の単位が不明でした。
バイトなのかメガバイトなのか文字数なのか行数なのか・・・。
ドキュメントにもThe instance is initialized with a buffer size of capacityと書いてあるだけでした。

```Python
class logging.handlers.MemoryHandler(capacity, flushLevel=ERROR, target=None, flushOnClose=True)
```

仕方ないのでソースコードを読んでみることにしました。
`capacity`は継承されている`BufferingHandler`由来なのでそっちを読んでみます。
https://github.com/python/cpython/blob/master/Lib/logging/handlers.py#L1202

どうやらMemoryHandler,BufferingHandlerのcapacityはメモリ容量でも文字数でもなく__ログ行数__を指しているようです。
C++で、実行時にstd::vectorの各要素を可変長引数関数の引数に、それぞれ入れられるか

#結論
できなさそうだ。一応、完全ではないがマクロでやればできる。
（18/08/21 1:48 追記） 　コメントで、マクロを使わない実装を頂きました！
#理由
可変長引数関数をカリー化して一つずつ引数を入れるというアプローチをとった。しかし、カリー化の際に使用する`std::bind`(または`sprout::bind`←可変長プレースホルダーが使える[ここに詳細](http://boleros.hateblo.jp/entry/20130720/1374322843))は、引数を適用するたびに型が変わるようだ。そのため、`std::vector`の、実行時にはわからないの要素数用の`std::bind`はコンパイル時に作ることができないだろう。なので、実行時に可変長引数関数をカリー化し、`std::vector`の要素一つ一つに引数を適用することはできなかった。（コンパイル時でも、要素数がわからなそう（`std::vector::size()`は定数式ではない）なのでできなそうだ）
#コード例
```cpp
#include <iostream>
#include <vector>
#include <utility>
#include <boost/any.hpp>
#include <sprout/functional.hpp>

int main()
{
    std::vector<int> v{10, 20, 30};  // 実行時に任意の要素数で構築したとする
    using sprout::placeholders::_va;  // 可変長引数プレースホルダー
    
    constexpr auto lambda = [](auto&&... args)  // 任意の可変長引数関数
    {
        (std::cout << ... << std::forward<decltype(args)>(args)) << '\n';
    };

    // forループの際に、型が変化するのでenyに入れた
    boost::any fn = sprout::bind(lambda, _va); 

    for (auto&& it : v)
    {
        // このfnの型を、コンパイル時には知ることができない
        // fn = sprout::bind(boost::any_cast<不明>(fn), it, _va);  
    }
                                          
    // boost::any_cast<不明>(fn)();

}
```
#マクロを使った解決策
マクロを使って、可変長引数の引数の数それぞれのパターンを自動生成している。これは、それぞれの引数の数に対して、switch構文のcase一つ一つが対応するようにしている。これは一応動くが、生成されるコードの量は多くなっており、引数の数も制限されている。

```cpp
#include <iostream>
#include <vector>
#include <utility>
#include <boost/preprocessor/enum.hpp>
#include <boost/preprocessor/repetition/repeat.hpp>

int main()
{
    std::vector<int> v{10, 20, 30};  // 実行時に任意の要素数で構築したとする
    
    constexpr auto lambda = [](auto&&... args)  // 任意の可変長引数関数
    {
        (std::cout << ... << std::forward<decltype(args)>(args)) << '\n';
    };

// caseの数(0からBOOST_PP_LIMIT_REPEAT(256に展開)までの値)    
#define CASE_NUM 15
    
#define ARG(z, n, unused) v[n]
#define CASE(z, n, unused) \
	case n: \
		lambda(BOOST_PP_ENUM(n, ARG, unused)); \
        break;   
    
    switch (v.size())
    {
        BOOST_PP_REPEAT(CASE_NUM, CASE, unused)
    default:
		std::cout << "引数が多すぎます。 " 
            << CASE_NUM - 1 << "個までの引数にしてください。\n";
		break;    
	}
    
#undef CASE
#undef ARG
#undef CASE_NUM
      
}
```
php-master-changes 2018-08-18

[元ネタ](http://d.hatena.ne.jp/nagachika/20180818/ruby_trunk_changes_64417_64448) の方と比べると、php-src て実はバグ修正の下位バージョンから上位バージョンへのマージコミットでコミットログ水増ししてるだけで、基本流速遅めなんじゃないか……？と一瞬思ったりする。
現在の PHP は少し大きめの修正だとわりと PR ブランチ で変更入ってく感じなのも大きいのかも。
[TPv2](https://github.com/php/php-src/pull/3313) とかがマージされるとコミットログ的にはエラいことになるような気がする……。

# 2018-08-18
## weltling: Add test for bug [#76738](https://bugs.php.net/bug.php?id=76738)
- https://github.com/php/php-src/commit/990a404c2d285b50ba487689e5d454c2ee778bcc
- ext/dom のバグにテストケースを追加


## SiebelsTim: Fix [#68175](https://bugs.php.net/bug.php?id=68175): RegexIterator pregFlags are NULL instead of 0
- https://github.com/php/php-src/commit/3257d22fea101453682941a9a74643e33c6f8ed5
- ext/spl で [RegexIterator](http://php.net/manual/ja/class.regexiterator.php) の [pregFlags](http://php.net/manual/ja/regexiterator.getpregflags.php) がデフォルト 0 を返しそうなところ、NULL を返す問題の修正


## cmb69: Add regression test for bug [#68175](https://bugs.php.net/bug.php?id=68175)
- https://github.com/php/php-src/commit/4c448334bdfe61c8c2a0b3c3d5797d5ff31d4ca0
- ↑の RegexIterator の修正の NEWS エントリ追加とテストケース追加
$wpdb->prepare のプレースホルダの書き方

WordPresのDBに対して、PHPを使用してSQLを投げ、DBから値を引っ張ってきてごちゃごちゃしたかった。
ただ、PHPの変数値をSQLの中に埋め込む再に、直接以下のようにドット演算子で繋げて文字列を書くと見通しが悪くなる。

```php
$sql = "SELECT * FROM wp_posts WHERE ID = ". $ID . ";";
```

また、直接変数を埋め込むのはSQLインジェクションの危険性がある。

そのため以下のようにプレースホルダを使用して書く。

```php
    $prepared_fetch_category = $wpdb->prepare(
            "
              SELECT WPP.ID FROM wp_posts AS WPP
              INNER JOIN wp_term_relationships AS WPTR
              ON WPP.ID = WPTR.object_id
              INNER JOIN wp_term_taxonomy AS WPTT
              ON WPTR.term_taxonomy_id = WPTT.term_taxonomy_id
              INNER JOIN wp_terms AS WPT
              ON WPTT.term_id = WPT.term_id
              WHERE WPP.post_type = %s     //(='books')
	          AND WPP.post_status = %s     //(='publish')
	          AND WPT.slug = %s            //(= $KEY)
              ORDER BY ". $SORT_KEY. " ". $SORT_VALUE.
              "
              LIMIT %d , %d;              //(=$start_page_num, $max_page_num)
              ",
        'books', 'publish', $KEY, $start_page_num, $max_page_num
    );
// %d -> 整数
// $s -> 文字列
// $f -> 小数
// ただし%sが文字列に置換される再に値がクオートで囲まれるため、WHERE句の値では使用できるが
// 'DESC'のようにORDER句などのクオートで囲む必要の内部分で使用するとSQLが正しく処理されない。
// そのため、クオートで囲う必要のない部分はドット演算子でPHP変数を繋ぐ必要がありそう。
```

上記のようにプリペアードステートメントを用意してから、下記のようにget_resultsで値を取得するのが望ましいようです。

```php
$rows = $wpdb -> get_results($prepared_fetch_category);
```

もっとよい記載の方法などありましたら、是非ご教授ください。

##参考
[関数リファレンス/wpdb Class](https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wpdb_Class)
timeコマンドで詳細情報を見る

# 概要

一般的なLinuxでは、`time`は２種類インストールされている。Linuxコマンドの`time`と、シェル組み込み関数の`time`だ。

Linuxコマンドの`time`は通常`/usr/bin/time`にあり、呼び出すときはフルパスで指定する。こちらの`/usr/bin/time`は、`-v`での詳細表示に対応している。



# 確認
環境は、Ubuntu 17.10。

テスト用スクリプト

```bash:foo.py
#!/bin/bash

# てきとうにループしてCPUを使わせたい
for (( i=0; $i < 1000000; i++ )); do
    :
done
```

普通はこう。（組み込み関数を使用）

```
$ time ./foo.sh

real	0m3.751s
user	0m3.745s
sys	0m0.001s
```

Linuxコマンドを使う。

```
$ /usr/bin/time ./foo.sh
3.74user 0.00system 0:03.74elapsed 99%CPU (0avgtext+0avgdata 3352maxresident)k
0inputs+0outputs (0major+139minor)pagefaults 0swaps
```

詳細表示。

```
$ /usr/bin/time -v ./foo.sh
	Command being timed: "./foo.sh"
	User time (seconds): 3.75
	System time (seconds): 0.00
	Percent of CPU this job got: 99%
	Elapsed (wall clock) time (h:mm:ss or m:ss): 0:03.75
	Average shared text size (kbytes): 0
	Average unshared data size (kbytes): 0
	Average stack size (kbytes): 0
	Average total size (kbytes): 0
	Maximum resident set size (kbytes): 3348
	Average resident set size (kbytes): 0
	Major (requiring I/O) page faults: 0
	Minor (reclaiming a frame) page faults: 138
	Voluntary context switches: 1
	Involuntary context switches: 205
	Swaps: 0
	File system inputs: 0
	File system outputs: 0
	Socket messages sent: 0
	Socket messages received: 0
	Signals delivered: 0
	Page size (bytes): 4096
	Exit status: 0
```

こちらからは以上です。
Node-REDをVagrant上で立ち上げて、ブラウザで確認する


## 使用するvagrant box

+ debian-9.4
    + https://app.vagrantup.com/bento/boxes/debian-9.5

```
# cat /etc/debian_version
9.5
```

## 構築

### vagrantの起動

割愛

### Debianの基本設定

+ ROOT化

```
sudo su -
```

+ aptの更新

```
apt-get update
apt-get upgrade -y
```

+ (今回使う)最低限のアプリのインストール
    + vim

```
apt-get install -y vim
curl https://gist.githubusercontent.com/iganari/a2baec1af976425cc8e21ccd68cf5585/raw/b6fce2cc91e1c77da759af1d2ea7b771b597787f/_vimrc -o /root/.vimrc
```

+ デフォルトのテキストエディタをvimに変更
    + ついでに `nano` は削除

```
ls -la /usr/bin/vim.basic 
unlink /etc/alternatives/editor
ln -s  /usr/bin/vim.basic /etc/alternatives/editor
apt --purge remove -y nano
```

+ サーバの時刻を日本にする

```
rm -rfv /etc/localtime &&\
ln -s /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
echo 'LANG="en_US.UTF-8"' > /etc/default/locale
```

### nodejs version8 をインストールする

+ 既存のnodejsを削除して、公式からインストールスクリプトを用いてインストール
    + 意図したnodejsをインストールした後にNode-REDもインストール

```
apt remove --purge -y nodejs
curl -sL https://deb.nodesource.com/setup_8.x | /bin/bash
apt-get install -y nodejs
npm install -g --unsafe-perm node-red
```

+ なぜ、nodejsはv8なのか :thinking_face:
    + Node-RED 日本ユーザ会にて、Node.js LTS 8.xを使用することをお勧めされています
    + https://nodered.jp/docs/getting-started/installation.html


### 作業ユーザ作成

+ 作業ユーザは `node-red`
    + ~~raspberry piを意識している~~

```
username='node-red'
useradd -m -s /bin/bash ${username}
echo "${username} ALL=(ALL) NOPASSWD:ALL" > /etc/sudoers.d/${username}
chmod 0440                                  /etc/sudoers.d/${username}
cp    /root/.vimrc            /home/${username}/.vimrc
chown ${username}:${username} /home/${username}/.vimrc
```

### Node-RED をnpmからインストールする

+ 作業ユーザ `node-red` になる

```
su - node-red
```

+ 専用のディスクトリを作成し、node-redをインストール

```
sudo mkdir         /usr/local/node-red
sudo chmod 0777 -R /usr/local/node-red
cd            /usr/local/node-red
npm install node-red
```

### 起動・終了スクリプトを設置

+ 再び、ROOT化

```
sudo su -
```

+ ダウンロード

```
wget "https://raw.githubusercontent.com/iganari/nodered-vagrant/master/bin/usr/bin/node-red-start" -O /usr/bin/node-red-start
wget "https://raw.githubusercontent.com/iganari/nodered-vagrant/master/bin/usr/bin/node-red-stop"  -O /usr/bin/node-red-stop
```

+ 権限変更

```
chmod 0755                /usr/bin/node-red-st* 
chown root:root           /usr/bin/node-red-st*
```

+ サーバ起動時の自動起動設定を入れる

```
wget "https://raw.githubusercontent.com/iganari/nodered-vagrant/master/bin/etc/systemd/system/node-red.service" -O /etc/systemd/system/node-red.service
```

+ 権限変更

```
chmod 0755      /etc/systemd/system/node-red.service
chown root:root /etc/systemd/system/node-red.service
```

+ 起動

```
systemctl start node-red
```

+ 自動起動化

```
systemctl enable node-red
```

## ブラウザで確認

http://192.168.33.131:1880/

![top.png](https://qiita-image-store.s3.amazonaws.com/0/25582/ed438b30-c5e8-f397-db0e-b5b644dc044f.png)

## ソース全体

簡単な構築方法含め、以下のレポジトリにまとめたので確認してみて下さい :blush:

https://github.com/iganari/nodered-vagrant
Windows 10 のバージョン履歴（開発者寄り）

Windows 10 のリリース情報
https://www.microsoft.com/ja-jp/itpro/windows-10/release-information

| バージョン       | 通称 |    リリース日    |
|:----------------:|:-----------------:|:------------------:|
| 1809             | October 2018 Update | 2018-11-13 |
| 1803             | April 2018 Update | 2018-04-30 |
| 1709           | Fall Creators Update | 2017-10-17 |
| 1703             | Creators Update | 2017-04-11 |
| 1607             | Anniversary Update | 2016-08-02 |
| 1511             | November Update | 2015-11-12 |
|          |         | 2015-07-29 |

# 1809 October 2018 Update

ファイルが削除される不具合があり公開が延期された

Windows 10 の更新履歴 - Windows Help
https://support.microsoft.com/ja-jp/help/4464619

- ファイルが削除される不具合　⇒　解消
- iCloud for Windows が正常に動作しない不具合　⇒　iCloud for Windows 7.8.1にて修正

# 1803 April 2018 Update

- Progressive Web Apps（PWA）対応

# 1709 Fall Creators Update

- Windows Subsystem for Linux 正式版

Windows 10 1709（Fall Creators Update）における Hyper-V の仮想スイッチ
https://qiita.com/kumakamikoubou/items/544f1ed053876d69d68c
AWS無料枠での失敗談

AdventCalendar　8日目
大学の研究会仲間とAdventCalendarをすることなり、自分の馬鹿さを見せつけていく投稿をしていこうと思います(-ω-`)ｳﾑ

# 初めに
webアプリケーションを作ろうと考え、そのために比較的簡単にサーバーやネットワークを構築できるクラウドサービスのAWSを使うことにしました。また、AWSには無料枠があり、アカウント作成から12ヶ月間は無料で使えるとのこと。もちろん、上限([ここに記載](https://aws.amazon.com/jp/free/))はありますが、勉強がてら簡単なwebアプリケーションを作るには無料枠で十分に開発できそう。しかし、念のため作成した請求アラートから一通のメールがきました。開発途中でお金が発生していました......。

# 請求内容
請求内容を確認してみます。
![aws3.png](https://qiita-image-store.s3.amazonaws.com/0/227026/ac5097c4-a7c9-4846-4a0f-3115fc8579d2.png)


　∑(ﾟДﾟ)ｱｧ!?
どうやら原因はElastic IP Addressとわかりました。
＊Elastic IP Addressとは何か？
→インスタンスに割り当てられるパブリックIPアドレスは、最初、起動/停止するたびに別のIPアドレスが振り当てられる「動的アドレス」です。なので、サーバーを運用するためにIPアドレスを固定化したい！そのために「Elastic IP」の機能を使います。

# 原因を詳しく調べる
[ここに](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/elastic-ip-addresses-eip.html)詳しく載っていたので、読んで見ると.......
![aws2.png](https://qiita-image-store.s3.amazonaws.com/0/227026/c8c29d32-bf7e-9081-cfaa-09813009592c.png)

つまり原因は、停止していたインスタンスにElastic IPを**関連付け**たままにしていたことで料金が発生していた。インスタンスを停止するだけではダメとのこと。

# 解決策
結構ハマっている人が多く、[AWSの質問サイト](https://aws.amazon.com/jp/premiumsupport/knowledge-center/elastic-ip-charges/)に以下の記載がありました。

![aws1.png](https://qiita-image-store.s3.amazonaws.com/0/227026/1f94273a-29b7-0c51-5208-b9e3fd12e530.png)
これに加え、「EIastic IPの付け外しが100回を超えると1回あたりに$0.10発生する(1ヶ月あたり)」。
上の四点に注意すれば良い。

# 終わりに
今回は、Amazon CloudWatchという機能を使用して請求アラームを作成し、6時間間隔で料金0.01$が発生したらメールが来るように設定したので、早くに料金発生を確認することができました。皆さんも無料枠だからと安心せずに請求アラートを作成することを推奨します。今回は発生した料金は勉強代という事にしておきます(- -)

# 参考文献
[Amazon Web Services 基礎からのネットワーク&サーバー構築 改訂版](https://www.amazon.co.jp/Amazon-Web-Services-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AE%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF-%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E6%A7%8B%E7%AF%89/dp/4822237443/ref=lp_3517238051_1_3?s=books&ie=UTF8&qid=1534156096&sr=1-3)
[Elastic IPアドレスを理解する - Amazon AWS](https://aws.amazon.com/jp/premiumsupport/knowledge-center/elastic-ip-charges/)
[Elastic IP アドレス - Amazon Elastic Compute Cloud - Amazon.com](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/elastic-ip-addresses-eip.html)
Amazon Linux2 を Hyper-V で起動させる

# 追記予定

Amazon Linux 2 について
https://aws.amazon.com/jp/amazon-linux-2/

本家のガイド「Amazon Linux 2 を仮想マシンとしてオンプレミスで実行する」
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/amazon-linux-2-virtual-machine.html

# イメージのダウンロード

Amazon Linux 2 仮想マシンイメージ（Hyper-V）
https://cdn.amazonlinux.com/os-images/2.0.20180622.1/hyperv/

- ファイル（amzn2-hyperv-2.0.20180622.1-x86_64.xfs.gpt.vhdx.zip）をダウンロードし解凍します。

- ファイルサイズが 22GB と大きいので小さく（22GB ⇒ 1.5GB程度）します。
PowerShell で実行します。（やらなくてもOK）

```powershell:
$vhd = "ファイルのパス\amzn2-hyperv-2.0.20180622.1-x86_64.xfs.gpt.vhdx"
Mount-VHD $vhd -Readonly
Optimize-VHD $vhd -Mode Full
Dismount-VHD $vhd
```

# seed.iso の作成

イメージだけではパスワードも何も設定されておらずログインすることができません。設定ファイルをISOにまとめ、マウントさせて起動させる必要があります。必要最小限の設定のみにしています。

- 2つの設定ファイルを作成します
  - meta-data - ホスト名、ネットワーク設定
  - user-data - ユーザアカウント、パスワード

```yaml:meta-data
local-hostname: ami.domain
```

ec2-user のパスワードは個別に変更してください

```yaml:user-data
#cloud-config
users:
  - default
chpasswd:
  list: |
    ec2-user:password
```

- ISOを作成します。

Windowsの場合にISOを何で作成するか迷いますが、本家のガイドに合わせて genisoimage を利用します。WSL（Windows Subsystem for Linux）を入れ、Ubuntuなどを入れておくと便利です。（別途記載予定）

```bash:seed.iso
$ genisoimage -output seed.iso -volid cidata -joliet -rock user-data meta-data
```

# Hyper-Vで起動

- イメージとして amzn2-hyperv-2.0.20180622.1-x86_64.xfs.gpt.vhdx を指定します
- 既定のネットワークを選択します
- seed.iso をマウントします
- 起動します

起動したら ec2-user のユーザでログインできます。
既定のネットワークを選択した場合、現 Windows10 のバージョンではIPが自動的に割り振られます。/28 で振られますが、アドレスは特定できません。
Kanon(Trac0.12)コンテナの使い方

# はじめに
[この](https://qiita.com/drafts/951845f9f37b967210f9)記事の内容を分割しました。こちらの記事では使い方をまとめました。二回みられた方お許しください。

# 実行
基本の手順は次のようになります

 - フォルダを作成し、docker-compose.yml (下に載せてます) ファイルを置く
 - docker-compose.yml を編集
 - ```docker-compose up -d```で起動
 - kanonを利用　プロジェクトの作成、mavenの実行など
 - 確認後は```docker-compose down ```で終了させます


## 動作の確認
実行手順は上の通りですが、確認用にdocker-compose.ymlを変更してください
 - proxyの中の場合はenvironmentのhttp_proxy,https_proxyを変更しコメントを外す
 - ポートを適切に変更

### ブラウザで確認
次の場所に接続してみてください
 - trac：http://Docker実行ホスト名:8888/trac
<img width="462" alt="Trac01.png" src="https://qiita-image-store.s3.amazonaws.com/0/223941/4d4075c4-6589-f8ff-8d1b-8877e001042c.png">
 - Jenkins：http://Docker実行ホスト名:8888/jenkins
<img width="467" alt="Jenkins.png" src="https://qiita-image-store.s3.amazonaws.com/0/223941/5d3a728f-f6ba-ca85-ed4b-a4f359e0afd7.png">

### mavenの確認
コンテナの起動後に```docker-compose exec kanon /tmp/test.sh ```とすると、mavenでSampleProjectのdeployとsite-deployが実行されます。

```
$ docker-compose exec kanon /tmp/test.sh
A    SampleProject/WebProject
A    SampleProject/WebProject/trunk
A    SampleProject/WebProject/trunk/.classpath
A    SampleProject/WebProject/trunk/.project
A    SampleProject/WebProject/trunk/src
A    SampleProject/WebProject/trunk/src/main
A    SampleProject/WebProject/trunk/src/main/java
...
省略
...
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 54:06.207s
[INFO] Finished at: Sat Aug 18 12:10:52 UTC 2018
[INFO] Final Memory: 29M/133M
[INFO] ------------------------------------------------------------------------
$
```
結果の確認は次のアドレスに接続してください
http://Docker実行ホスト名:8888/report/project-reports.html
http://Docker実行ホスト名:8888/maven/com/example/library/0.1/

## プロジェクトの作成
コンテナが起動している状態で```docker-compose exec kanon /opt/kanon/bin/kanon-c
reate-project プロジェクト名 ```とし、質問に答えていくとプロジェクトが作成されます。接続確認はSampleProjectのURLを指定したプロジェクト名に変更してください。

# 運用について
下にのせてあるdocker-compose.ymlをベースにしてください。

# docker-compose.ymlファイル

## 確認時用
実行確認の場合は次のdocker-compose.ymlをベースにして、portやproxyを変更してください。

```docker-compose.yml
version: '2'
services:
  kanon:
    image: okazakiyuji/kanon:latest
    hostname: kanon
    environment:
      - KANON_HOST=kanon
#      - https_proxy=http://proxy_host:proxy_port
#      - http_proxy=http://proxy_host:proxy_port
    ports:
      - "8888:80"
```

## 運用時用
次のdocker-compose.ymlをベースにして、portやproxyを変更してください。そのほか永続化と自動で再起動できるようにしてあります。これをベースに変更して使ってみてください。
何があっても責任取れないので、バックアップを取ったり、よく確認してから運用に使ってください。

```docker-compose.yml
version: '2'
services:
  kanon:
    image: okazakiyuji/kanon:latest
    hostname: kanon
    environment:
      - KANON_HOST=kanon
#      - https_proxy=http://proxy_host:proxy_port
#      - http_proxy=http://proxy_host:proxy_port
    volumes:
      - kanon-opt:/opt/kanon
      - kanon-etc:/etc/opt/kanon
      - kanon-var:/var/opt/kanon
      - kanon-jenkins:/var/lib/jenkins
    ports:
      - "8888:80"
  restart: always
volumes:
  kanon-opt:
    driver: local
  kanon-var:
    driver: local
  kanon-etc:
    driver: local
  kanon-jenkins:
    driver: local
```
ChocolateyでWindowsの環境構築

新しくWindows PCを手に入れたので綺麗な状態から環境構築を行う．
入れれるものは全部Chocolateyで入れるポリシーで進める．

ChocolateyはWindowsのパッケージマネージャ(Ubuntuで言うapt-getや，CentOSで言うrpmコマンド的なもの)．

### Chocolateyインストール

[公式サイト](https://chocolatey.org/install#installing-chocolatey)の手順通り，コマンドプロンプトを開いて以下を張り付け．
コマンドプロンプトは管理者権限で実行することを忘れずに．

```
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
```

### 諸々必要なものをインストール

インストール可能なパッケージはchoco listで表示できる．
一度見てみると，え，これのWindows版あったの？みたいな発見があるかも．

```
C:\> choco install -y googlechrome cmder teraterm winscp python sakuraeditor git 7zip vscode gimp pandoc 
```

取り急ぎ以下のものを入れた．

| パッケージ | 概要
| :------ | :---
| googlechrome | メインで使うwebブラウザ
| cmder | タブで複数表示できるコンソール
| teraterm | リモートサーバにssh/scpしたりシリアル接続したり，ポートフォワードしてチョメチョメしたり
| winscp | リモートサーバのファイルをいじるのにローカルのソフト(vscodeとか)を使いたい場合や，ローカルとリモートでファイルのミラーリングをしながら作業したい場合など
| python | 蛇つかいなので
| sakuraeditor | メモ帳がしんどいので
| git | 要るだろ…
| 7zip | 暗号化zipとか作るときに
| vscode | SublimeからのAtomからのVSCode
| gimp | ちょっと画像いじりたいときに
| pandoc | ちょこちょこ書いてるmarkdownを人に渡したりするときに
Node.js って何？

と聞かれたので答えたことをまとめておく。

# サーバサイドJavaScript
ものすごく大雑把で、しかも一部分でしかないが、とりあえず**サーバサイドでやることをJavaScriptで書かせてくれる**というのは事実。
JavaScriptのエンジンは山ほどあるが、NodeはV8 (Chromeのやつ) を使っている。[^1]

なお、サーバサイドJavaScriptそれ自体はNodeの専売特許ではないし、**Node.js最大の特徴はここではない**。

## 利点
**とりあえずJavaScriptだけやってれば書ける**。
JavaScriptは簡便で、とりわけWeb屋であればやっていないほうがおかしい代物である。学習コストは非常に低い。
……もっとも、これはフロントエンドを十分やっている人間の理屈だ。

## 欠点
**JavaScriptである**。
JavaScriptは型が緩く、仕様がいろいろとガバガバで、ツール山盛りで書くものである……という先入観から地味に避けられやすい (ある程度事実だからこそタチが悪い) 。

## "フロントエンドを十分やっている人間の理屈"って？
「Babel」「yarn」「CommonJS」などなどの "Modern JavaScript" を知らない、旧世代の骨董品のようなJavaScriptしか触っていないような(そう、普段はろくでもないJavaあたりのバックエンドをかいているような！)人間からすれば、Node.jsは完全に異次元である。
というか、「Node.jsってどういう言語なのか知ってる？」と大真面目に聞かれたことがある。引っ叩かずに済んだのは奇跡だろう。~~顔に呆れが出たのは流石に勘弁してほしい~~
そういった、「JavaScript？ ああ、jQueryでしょ？」などと宣うような連中が割と珍しくない実情を鑑みると、「JavaScriptだから学習コストは低い」というのはかなり疑問である。
逆にそういった "Modern JavaScript" がわかるならなるほど低コストにもなろう、というわけで、まともにやってれば自然とそういったものに触れるだろう "フロントエンドを十分やっている人間" の理屈、という表現になる。

# 非同期I/Oとイベント・ドリブン
Node.jsの重要な特性。実際のところ、Node.jsがJavaScriptを選んだのはたまたまイベント・ドリブンでシングルスレッドだったからだろう。

## イベント・ドリブン？
「ボタンが押された時音を鳴らす」という処理を書くとする……という話**ではない**。大抵「イベント・ドリブン」というとそっちなのだが、Nodeの話をする場合は少々事情が違う。サーバプログラムに関する話だからだ。

イベント・ドリブンである、と**されない**もの、つまりプロセス・ドリブンなんて呼ばれる――Apacheとか――ものは、お高いデパートの接客担当のようなものだ。客がやってくると生まれ、くっついて案内し、商品を探し、なんなら勘定までやって、そして死んで消えるか、再利用に備えて待機する。
このモデルは(プログラム上は)シンプルでわかりやすいが、客が増えると接客担当も増やさねばならないという欠陥がある。つまり**クライアントが増えるとサーバのリソースが死ぬ**のだ。
この場合、店員とはコンピュータのプロセスないしスレッドであり、つまりは計算資源である。困ったことに必要な店員は接客担当だけではない。これが世にいうC10K問題[^2]だ。

ではイベント・ドリブンなサーバプログラムはどうか。
イベント・ドリブンなサーバプログラムにおいて、接客担当は一人である。これは客が何十、何百、何千何万何億と詰めかけようとも変わらない。接客担当は一人で、延々と客をさばき続ける。
なんだそりゃ、ワンオペかなにかか？と思うかもしれない。恐ろしいことだがそのとおりである。イベント・ドリブン世界において接客担当はワンオペだ。プロセス・ドリブンと異なりいちいち生み出されたり殺されたりしない。全部同じ一人が延々繰り返す。
明らかに人手が足りない。遅くなるだけではないか？ そう思うだろう。実際、そうなってしまっている実装も珍しくはない。問い合わせをかけてそのまま待つ時間は何もかもを止めねばならないのだから。

## 非同期I/O？
ここで非同期I/Oという概念が登場する。何も難しいことはない。先程ワンオペとは言ったがその実ワンオペでもなんでもないだけのことである。
昼飯時の牛丼屋に行ったことはあるだろうか。一人がレジ係で、注文を受ける。注文は厨房に伝えられる。厨房では逐次牛丼を作っている。レジ係は注文を伝えると牛丼を待たずに勘定を済ませ、なんなら「少々お待ちください」とだけ伝えて次の客の相手をする。

そう。**誰かに任せて、できるだけ待たない**のだ。「担当者に頼む」こと自体は非同期I/Oでなくともやるのだが、非同期I/Oの場合は更に「やれることはやれるところまで全部やる」のである。できることが無くなって初めて待つ。こうなると、接客担当すなわちプロセス/スレッドが1つでも大量の客すなわちリクエストを捌くことができる。**一定量のリソースで大量のリクエストを捌けるのである**。
Node.jsではこの非同期I/Oが強制されており、このため接客担当は一人でもフル稼働し、延々と新たな客の注文を聞き続けることができる。

# つまりどういうこと？
1. Node.js とはサーバプログラムである。サーバプログラムとは例えばApache, nginx, あるいはTomcatのような、「サーバ上で動いてWebアプリ乗っけたりするアレ」のことを意味している。
2. Node.js はサーバプログラムだが、珍しい(唯一ではない)ことに処理内容をJavaScriptで記述する。これは特にフロントエンド民の参入障壁を下げる効果がある。ただしこれはオマケ程度だろう。
3. Node.js はイベント・ドリブンで、非同期I/Oが強制されている。この形式は「一定量のリソースで大量のリクエストを捌く」ことに適合した形式である。

[^1]: 別エンジンバージョンがないわけではない
[^2]: いわば「お前クライアント1万件捌くのにどんだけリソースつぎ込めばいいんだよ！？」問題
画像から任意の矩形を切り取る



`RMagick` を利用して、画像から任意の矩形を切り取り、その画像を新たな画像として保存できる。

```ruby
require 'RMagick'

original = Magick::Image.read('original.jpg').first
image = original.crop(0, 0, 10, 10)
image.write('cropped.jpg')
```
VSCodeとGraphvizでテキストからグラフ生成

# はじめに
VisualStudioCode（以下VSCode）とGraphvizでプレーンテキストからグラフ画像生成が便利だったのでやり方をまとめました。
（なお、UML図の作成にはVSCodeでPlantUMLを利用するほうが便利かも）

<!--

便利な点

- グラフをプレーンテキストから生成できるのでGit管理がしやすい
- ノードの配置も自動でやってくれるので調整の手間がない

-->

下図のようにVSCode上で、Dot言語のシンタックスハイライト、グラフ生成ができます。


![image.png](https://qiita-image-store.s3.amazonaws.com/0/186338/8ec084a1-84e9-5c27-c887-4580685007f8.png)


# 環境作成概要
※事前にVSCodeはインストールのこと

- OSへGraphvizをインストール
- VSCodeへGraphvizエクステンションを追加
 - 名称：「Graphviz (dot) language support for Visual Studio Code」（長い...）
 - Dot言語のシンタックスハイライトとプレビュー機能


# 環境作成
## Graphvizをインストール


1. 公式サイトからインストールパッケージをダウンロード・インストールする。
 - Graphviz公式サイト　https://graphviz.org/download/
 - （筆者はWindowsユーザなので「Stable 2.38 Windows install packages」をダウンロードしました[2018/8/19]）
1. パスを通す
 - 環境変数pathに、「（インストールディレクトリ）\bin」（dot.exeのあるフォルダ）を追加
1. 動作確認
 - コマンドプロンプトで以下のコマンドを実行

```cmd
dot -V

: 実行結果例
: dot - graphviz version 2.38.0 (20140413.2041)
```


## VSCodeへGraphvizエクステンションを追加
以下サイトへアクセスして「Install」ボタンをクリック。VSCodeが起動して、右下の方にポップアップが出てエクステンションを追加するか聞かれるのでInstallを選択。VSCodeを再起動するとエクステンションが有効になる。

Graphviz (dot) language support for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=joaompinto.vscode-graphviz

# 使い方

1. VSCodeでdotファイルを開く
1. Command Pallete（Ctrl+Shift+p)から「Graphviz:Open Preview To The Side」を実行
2. 右ペインにプレビューが表示される。dotファイルを編集するとグラフ画像が更新される。


# おまけ

## Graphviz Online
WebアプリでGraphvizのプレビューができる。ちょっと確認したいとき便利。
https://dreampuf.github.io/GraphvizOnline/

##Graphviz Preview（VSCodeエクステンション）
GraphvizのPreview機能のみのエクステンションだが、UIが少し高機能。
「Graphviz (dot) language support for Visual Studio Code」と共存できる。

Graphviz Preview
https://marketplace.visualstudio.com/items?itemName=EFanZh.graphviz-preview
AtCoder Beginner Contest 098

```A.py
A,B = map(int, input().split())
print(max(A + B, A - B, A * B))
```

```B.py
N = int(input())
S = input()
max = 0
for i in range (1,N-1):
    X = set(S[0:i])
    Y = set(S[i:N])
    if max < len(X & Y):
        max = len(X & Y)
print(max)
```
文字列に対してセットかけると、１文字ずつのセットができる。


```C.py
N = int(input())
S = input()
min = S[1:N].count("E")
now = S[1:N].count("E")

for i in range (1,N):
    if S[i-1] == "E" and S[i] == "E":
        now -= 1
    if S[i-1] == "W" and S[i] == "W":
        now += 1
    if now < min:
        min = now
print(min)
```
VBAでJSONを読み込んでみる

なんかふと気になったのでExcelでJSONを読み取る方法を探した。

JSONパース自体はこちらを参考にさせてもらった。
[ExcelでJSONを扱う場合のつまずきポイント](https://qiita.com/kiyc/items/c686a63756a3db37140a)

まず前提として、外部ファイルであるJSONファイルを開き読み込んでシートに一覧出力する、
という処理を行いたい。

##JSONの構造

JSONの構造は下記。

``` :

{"tweet":[
    {
        "id":"0001",
        "daytime":[
            {
                "year":"2019",
                "month":"01",
                "day":"01",
                "hour":"12",
                "minute":"00"
            }
        ],
        "contents":"テストテストテスト"
    },
    {
        "id":"0002",
        "daytime":[
            {
                "year":"2019",
                "month":"01",
                "day":"01",
                "hour":"12",
                "minute":"00"
            }
        ],
        "contents":"hogehoge"
    }
]}

```

##JSONファイルを読み込む

ということで、以下がファイル入力のコード。

```vb:
    Dim buf as String
    With CreateObject("ADODB.Stream")
        .Charset = "UTF-8"
        .Open
        .LoadFromFile "./tweet.json"
        buf = .ReadText
        .Close
    End With
```

JSONファイルには日本語も含まれているので、
文字コードを選択できるADODBを呼び出す方法を使った。

##読み込んだ内容をパースする
上のリンク先コードを活用させてもらった。

```vb:
    Dim obj as Object
    Dim json as Object

    Set obj = CreateObject("ScriptControl")
    obj.Language = "JScript"
    obj.addcode "function jsonParse(s){ return eval('('+s+')');}"
    
    Set json = obj.CodeObject.jsonParse(buf)

```
これで読み込んだJSONファイルを使う準備は整った。

##読み込んだJSONファイルを使う
まず先ほども参照させてもらった上のリンク先の方法。

```vb:

    Set json = obj.CodeObject.jsonParse("{id:5,name:'山田',age:20}")

    MsgBox CallByName(json, "name", VbGet)

```
値として「name」を渡してやることで、「name」の右辺である「山田」という値を取り出している。
「id」を渡すと「5」、
「age」を渡すと「20」が、
返ってくるのは想像できた。

何となく既視感あるなと思っていたが、やっと似たものを思い出す。
そう、連想配列だ。

ちなみに個人的にPHPでJSONを扱うときの連想配列を想像するのがとても理解しやすかった。

先ほどの例で行くと、PHPでは下記のようになる。

```php:
    echo $json["name"];
```

つまり、一個のCallByNameがPHPでの[]になるのだ。
それを踏まえて。

最初に前提として提示したJSONで、一つ目のcontentsの中身を取り出したい場合、
PHPでは下記のようになる。

```php:
    echo $json['tweet'][0]['contents'];
```

つまりマクロでは[]の個数分CallByNameを呼べばいいということになる。

```vb:
    contents = CallByName(CallByName(CallByName(json, "tweet", VbGet), 0, VbGet), "contents", VbGet)

```
「day」の値を取る場合は下記。

```vb:
    day = CallByName(CallByName(CallByName(CallByName(CallByName(json, "tweet", VbGet), i, VbGet), "daytime", VbGet), 0, VbGet), "day", VbGet)
```

##個数を取得したい場合
上記のJSONで配列値の個数を知りたい時。

```vb:
    splt = Split(CallByName(json, "tweet", VbGet), ",")
    For i = 0 To UBound(splt)
        MsgBox CallByName(CallByName(CallByName(json, "tweet", VbGet), 0, VbGet), "id", VbGet)
    Next i
```
配列値の上の階層？までをCallByNameして、その値を「,」でSplitで分割する。
そしてその分けられた配列数をUBound関数で調べて、その値を使ってfor文を回せばいい。
AtCoder Beginner Contest 097

```A.py
a, b, c, d = list(map(int,input().split()))

if abs(a - c) <= d:
    print("Yes")
elif abs(a - b) <= d and abs(b - c) <= d:
    print("Yes")
else:
    print("No")
```

```B.py
import math
X = int(input())
max = 0
x = math.floor(math.sqrt(X))
for b in range(x + 1):
    for p in range(x + 1):
        # print(b**p)
        if(max < b**p <= X):
            max = b**p
print(max)
```

```C.py
s = input()
K = int(input())
list = ["zzz" for i in range(K)]
for i in range(len(s)):
    for j in range(len(s)-i):
        if j > 5:
            continue
        if len(list) < K or s[i : i+j+1] < list[K-1]:
            if not s[i : i+j+1] in list:
                list[K-1] = s[i : i+j+1]
                list.sort()
print(list[K - 1])
```