OmniAICreator/Qiita-1.07M huggingface dataset:
letsencryptを利用して無料でSSLを実装 

## letsencrypt をインストール


```sh
sudo apt-get install letsencrypt
```

## nginxを停止
letsencrypt が一時的に使用するポート(80番）が競合するので、nginxを停止しておきます。

```sh
sudo systemctl stop nginx
```

次に letsencrypt コマンドを利用して証明書を発行します。

それぞれオプションの意味は下記になります。

certonly: 証明書の生成のみ実行。（サーバ設定は行わない）
standalone： WEBサーバとして letsencrypt に内包されるサーバを使用。（nginx や apacheを利用しない)
-d <https化するドメイン>: https化したいドメインを任意に指定してください。
コマンド入力後、メールアドレスの入力を促されるので入力してください。

```sh
sudo letsencrypt certonly --standalone -d 〇〇〇〇〇.com
```

完了後下記のメッセージが表示され、太字下線部分に証明書のパスが確認できます。

```sh
IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/〇〇〇〇〇〇.com/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/〇〇〇〇〇〇.com/privkey.pem
   Your cert will expire on 2019-06-21. To obtain a new or tweaked
   version of this certificate in the future, simply run letsencrypt
   again. To non-interactively renew *all* of your certificates, run
   "letsencrypt renew"
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le
```

## Nginxの設定

上記で確認した 証明書のパスを nginxの設定に反映させます。

```php:\etc\nginx\sites-enabled\default

server {
	listen 80 ;
	listen [::]:80 ;

# ・・・・・・・・

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/〇〇〇〇〇〇.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/〇〇〇〇〇〇.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

```
## Nginxの再起動

この後、nginxを再起動すれば設定は完了です。

```sh
sudo systemctl restart nginx
```

https://〇〇〇〇〇〇.com にアクセスし、動作を確認してみましょう。
エラー画面が表示される場合は /var/log/nginx/error.log などを確認し、表記通りに修正していくと良いでしょう。

# 参考
[letsencryptを利用して無料でSSLを実装 【Ubuntu16.04 + Nginx】](https://www.walker.co.jp/letsencrypt%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E7%84%A1%E6%96%99%E3%81%A7ssl%E3%82%92%E5%AE%9F%E8%A3%85-%E3%80%90ubuntu16-04-nginx%E3%80%91/)
[letsencryptをUbuntu16.04 + Nginxで使ってみた](https://qiita.com/k-yamada-github/items/7314003de7bdcbb2d39b)
Apacheでリバースプロキシ

[Github](https://github.com/dyoshikawa/apache-proxy-example)

下記のようなdocker-compose.ymlを組む。

```yaml:docker-compose.yml
version: "3"
services:
  apache:
    image: httpd:alpine
    ports:
      - 8000:80
  nginx:
    image: nginx:alpine
```

```
docker-compose up -d
```

で環境を立ち上げる。

```yaml
  apache:
    image: httpd:alpine
    ports:
      - 8000:80
```

としているのでブラウザで `localhost:8000` を見ると `It works!` が表示されている。
これをリバースプロキシしてnginxのwelcomeページを出すようにしたい。

[Apache 2.4 で リバースプロキシの設定](https://qiita.com/gingi99/items/83c1fb07644cd232d91e)

こちらを参考に `httpd.conf` に以下の変更を加える。

```httpd.conf
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
```

上記のコメントアウトを外す。
ファイルの末尾に下記を追加。

```httpd.conf
ProxyRequests Off
ProxyPass / http://nginx/
ProxyPassReverse / http://nginx/
```

この状態でapachemを再起動する。

```bash
docker-compose exec apache bin/apache restart
```

`localhost:8000` を見るとnginxのwelcomeページが表示されることが確認でき、リバースプロキシが成功していることが分かる。
MySQLの操作方法

# MySQLでデータベース名からテーブルを表示させる方法

データベースの名前を```DB_name```とした場合、

##DB名の表示
~~~mysql
SHOW DATABASES;
~~~

##DB内にあるテーブルの表示
~~~mysql
SHOW TABLES from DB_name;
~~~

## テーブルの中身を確認
先ほど同様、データベースの名前を```DB_name```、テーブルの名前を```TABLE_name```とした場合、

~~~mysql
SELECT * from DB_name.TABLE_name;
~~~


「*」：全部
「.」〜の
という意味になる。

最後は```exit;```で退出しましょう！
【Rails】サーバ起動+αの手順

##開発環境
windows wsl(Debian GNU/Linux 9) 

##DB構築(Ubuntu)

``sudo apt install mysql-server mysql-client -y
sudo apt install default-libmysqlclient-dev -y
sudo mysql_secure_installation
``

sudoつけないと権限エラーになる問題を解決する方法
`
drop user 'root'@'localhost';
create user 'root'@'%' identified by 'root';
grant all privileges on *.* to 'root'@'%' with grant option;
flush privileges;`

##プロジェクト構築

プロジェクト作成
`rails new todoapp -d mysql`

初回のみbundleのインストールは--pathオプションを付ける
次回以降は.bundleが作成されるため--pathオプションは不要である。
`bundle install --path vendor/bundle`

以下のエラーが出たので
``An error occurred while installing mysql2 (0.5.2), and Bundler cannot
continue.
Make sure that `gem install mysql2 -v '0.5.2' --source 'https://rubygems.org/'`
succeeds before bundling.``

エラーログに従う。
``gem install mysql2 -v '0.5.2' --source 'https://rubygems.org/``


HTMLテンプレートエンジンをEBRからSLIMへ変更
Genfileに以下を追記する。
``gem 'slim-rails'
gem 'html2slim'``

gemを更新したのでbandleを更新する。
`bundle install`

ERBをslimへ変換後、ERBを削除。
`bundle exec erb2slim app/views/layouts/ --delete`

SCSSを用いる設定に変更
(cssフレームワークを使う必要ない方は無視してください)
`.\app\assets\stylesheets\`配下の
`application.css`を削除し`application.scss`を作成。

DBを作成
`bin/rails db:create`

サーバ起動動作確認
`bin/rail s`


##model作成
`bin/rails g model [モデル名] [属性名:データ型 ...]`
`bin/rails g model Task name:String description:text`

**モデルの自動生成での成果物表**

|成果物|パス|説明|
|:---:|:---:|:---:|
|モデルクラス|app/models/task.rb|タスククラス|
|マイグレーションファイル|db/migration/現在日時_create_tasks.rb|DBへの変更を行う|
|自動テスト|test/models/task_test.rb|自動テストを行う|
|自動テストを行うfixture|test/fixture/task.yml|自動テストに使用するテストデータの投入定義|

[mysqlとrailsのデータ型mapping参考サイト](https://qiita.com/vermilionfog/items/816fa7de1d0213979929)

##controller/view作成
`bin/rails g controller コントローラー名 [アクション名　...][オプション]`
`bin/rails g controller task index show new edit`
　
アクション一覧
`index`、`show`、`new`、`edit`、`create`、`update`、`destroy`

すべてのアクションに対してルーティングを行うことができる記述。
taskに関するルーティング記述を削除し、以下を記述する。
記載場所：`config/routes.rb`
`resources :task`

ルートパス([http://localhost:3000](http://localhost:3000))にアクセスしたした時のルーティング設定
記載場所：`config/routes.rb`
`root to: 'task#index'`

[詳しく記載しているサイト](https://railsguides.jp/routing.html)

サーバ起動動作してindexが表示されれば成功。
`bin/rail s`

##追記
ルーティングのパスがバージョンによって違う？
エラーが出るときは以下で確認して設定する。
`/bin/rails routes`
【npm】エラー解決：We noticed you're using the useBuiltIns option without declaring a core-js version. Currently, we assume version 2.x when no version is 


`npm update` して gulp のタスクを走らせたところ、以下のメッセージが。
超意訳「core-js のバージョン指定なしで useBuiltIns オプションを使ってるよ(略)」


```
$ npx gulp watch

Requiring external module @babel/register

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3
```

[gatsbyjs の Issues](https://github.com/gatsbyjs/gatsby/issues/12744) にあった解決法で解決できた。

core-js@2 と core-js@3 どっちを指定すべきかわからなかったので、@babel/preset-env (7.3.4 → 7.4.2) と @babel/register (7.0.0 → 7.4.0) が 依存している core-js が共に v3 であることを確認。.babelrc に下記の通りバージョンを追加した。以上。

```
// 変更前
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3 // ← バージョンを追加
      }
    ]
  ]
}
```

なお、警告文にある通り、指定なしだとバージョン2が指定されるようになっており、放置したとしても当面は問題ないみたい。
VSCode+Vim拡張でスマートデリート

# 環境

- Ubuntu 18.04 LTS
- VSCode 1.32.3
- VSCode Vim 1.2.0


# インデント消去できない問題

VSCode+Vim拡張を使ってると`Backspace` or `Ctrl+h`でインデント1つ分を消そうとしてもスペース1つ分しか消去されないという問題がある（Vim拡張入れなければ起こらない）。
文で説明するより見てもらったほうが早い。
![before.gif](https://qiita-image-store.s3.amazonaws.com/0/371453/7ef53e9e-67af-d539-d04c-76e54f972eee.gif)


# 解決法

keybindings.jsonに以下を書き込んでVSCodeのdeleteLeftコマンドを割り当てれば良い。

```json:keybindings.json
[
    // インサートモードBackspace,Ctrl+hでカーソル左の文字を消去
    // 明示しなくても使えるがSmartDeleteが効くようになる
    {"key": "ctrl+h",    "command": "deleteLeft",
                            "when": "vim.mode == 'Insert'"},
    {"key": "backspace", "command":  "deleteLeft",
                            "when": "vim.mode == 'Insert'"},
]
```

# 結果

![after.gif](https://qiita-image-store.s3.amazonaws.com/0/371453/6be291a5-22e4-9d3d-9b74-1b8f99f8840f.gif)

にっこり😊

# P.S.

[VS Code 1.31 の気になった変更点](https://qiita.com/12345/items/4ba59be50c6ee9407131) 
こちらの記事で知ったのですが`Ctrl+H`とか押したキーを画面に表示してるのはVSCode本体のスクリーンキャストモードという機能です。
やっぱしVSCode強いですね。
とっても便利なのでみなさんもぜひ使って見てください。
【PHP】ディレクトリの容量を確認する方法

`disk_total_space`と`disk_free_space`関数が使える場合は簡単に計算できます。

```bytes_check.php
<?php
$si_prefix = array('B', 'KB', 'MB', 'GB', 'TB', 'EB', 'ZB', 'YB');
$base = 1024;
$path = '/';

$total_bytes = disk_total_space($path);//全体サイズ
$free_bytes = disk_free_space($path);//空き容量

$used_bytes = $total_bytes - $free_bytes;
$class = min((int)log($used_bytes, $base), count($si_prefix) - 1);
echo '使用容量:'.sprintf('%1.2f', $used_bytes / pow($base,$class)).$si_prefix[$class];
```

##レンタルサーバーの場合
サーバーがレンタルサーバーなどの場合は`disk_total_space`で正しい数値がでないため
下記のように直接ファイルサイズを足していきます。

```bytes_check.php
<?php
//使用容量の数値（バイト）
function dir_size($dir) {
  $handle = opendir($dir);
  while ($file = readdir($handle)) {
    if ($file != '..' && $file != '.' && !is_dir($dir.'/'.$file)) {
      $mas += filesize($dir.'/'.$file);
    } else if (is_dir($dir.'/'.$file) && $file != '..' && $file != '.') {
      $mas += dir_size($dir.'/'.$file);
    }
  }
  return $mas;
}

//数値の単位を変更
function used_bytes($dir){
  $si_prefix = array('B', 'KB', 'MB', 'GB', 'TB', 'EB', 'ZB', 'YB');
  $base = 1024;
  $dir_size = dir_size($dir);
  $class = min((int)log($dir_size, $base), count($si_prefix) - 1);
  $used_bytes = sprintf('%1.2f', $dir_size / pow($base,$class)).$si_prefix[$class];
  return $used_bytes;
}
echo "使用容量:".used_bytes(dirname(__FILE__));

```
`used_bytes($dir)`で出力します。
`$dir`には絶対パスを指定してください。
PyQt5.12でWebEngineWidgetsが分離された

# PyQt5
PyQtはアプレット等GUIを作るのに便利なモジュールである。これの良いところは依存関係が少ないところ（現状2019年3月現在、```PyQt5-sip```だけ）で、クローズドな環境でも導入しやすい。
また、PyQt5さえ入れておけば、かなりのmoduleを呼び出せたのでお気に入りだった。

# PyQt5からmoduleの分離

バージョンを5.12にあげたころから、下記のエラーが出るようになった。

```text
>>> import PyQt5.WebEngineWidgets
ModuleNotFoundError: No module named 'PyQt5.QtWebEngineWidgets'
```

5.11までで通っていたので、何やら変更があった模様である。
結論から述べると、WebEngineWidgetsが別のmoduleとして扱われるようになった。
なので、以下のlibraryをインストールすれば良い。

```text
$ pip install PyQtWebEngine
Successfully installed PyQtWebEngine-5.12.1
$ pip show PyQtWebEngine
Name: PyQtWebEngine
Version: 5.12.1
Summary: Python bindings for the Qt WebEngine framework
Home-page: https://www.riverbankcomputing.com/software/pyqtwebengine/
Author: Riverbank Computing Limited
Author-email: info@riverbankcomputing.com
License: GPL v3
Location: /Users/hikaru/.pyenv/versions/3.6.1/lib/python3.6/site-packages
Requires: PyQt5
Required-by: 
```

２つ目のコマンドは、パッケージ情報の確認である。
確かに、これでWebEngineWidgetsが使えるようになった。

この変更について[ask ubuntuでも質問されている](https://askubuntu.com/questions/763612/importerror-no-module-named-pyqt5-qtwebenginewidgets)。

# PyQt5.12の仕様変更について

[公式](https://www.riverbankcomputing.com/news/pyqt-512)を見ると、PyQt5.12リリースに合わせて、PyQtWebEngine以外にも複数のlibraryがリリースされたことがわかる。
PyQtWebEngineに移されたmoduleについては、パッケージが変わっただけで、アプリ側の実装には影響しないとのこと。
しかし、この変更の理由自体はよくわからず。
確かにPyQt5パッケージ自体は軽量化されたが、公式見解について記載があると嬉しい。
Railsで使える環境変数を管理できるgem(dotenv-rails)や.envの導入方法

# はじめに

DBのパスワードなどの設定は、PCというか開発環境ごとに異なることが多いです。ですが、Railsを利用して共同開発する場合、database.ymlなどに、DBに関する設定をそのまま定数に記入すると、ある特定の環境でしか動かなくなるでしょう。また、そういうデータは、GitHubのようなオンラインのホスティングサービスに公開したくないものです。

そこで、環境に依存する設定値を環境変数として扱って、どんな開発環境のDB設定値でも柔軟に対応できる[gem（dotenv-rails）](https://github.com/bkeepers/dotenv/)を使って管理して見ましょう。

# 環境

- macOS HighSierra　10.13.6
- Rails 5.2.0
- Ruby 2.5.1
- mysql 5.7.22
  - mysqlはdockerに作成
- Docker version 18.03.1-ce

# 導入方法

Gemfileに以下を記述

```Gemfile
gem 'dotenv-rails'
```

そして、書きを実行することで、gemを　インストール

```bash
$ bundle install
```

# 環境変数を設定

top of your application に、`.env`ファイルを作成。

例えばこんな感じ。

```txt:.env
RAILS_MAX_THREADS = 5
DATABASE_HOST = 127.0.0.1
DATABASE_USER = test
DATABASE_PASSWORD = test
DATABASE_NAME = my_project
```

すると、`rails c`で確認できるようになります。

```bash
irb(main):002:0> ENV['RAILS_MAX_THREADS']
=> "5"
irb(main):003:0> ENV['DATABASE_HOST']
=> "127.0.0.1"
irb(main):004:0> ENV['DATABASE_USER']
=> "test"
```

# 環境変数の利用法

```rb:database.yml

・・・

default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  host: <%= ENV.fetch("DATABASE_HOST") { "127.0.0.1" } %>
  username: <%= ENV.fetch("DATABASE_USER") { "test" } %>
  password: <%= ENV.fetch("DATABASE_PASSWORD") { "test" } %>
  database: <%= ENV.fetch("DATABASE_NAME") { "my_project" } %>

・・・

```

これで使えるようになります。

こうすれば、環境ごとに異なる設定値でも`.env`に記述すれば、実行環境が異なっても使えるようになります。

# 参考

- [bkeepers/dotenv: A Ruby gem to load environment variables from \`\.env\`\.](https://github.com/bkeepers/dotenv/)
- https://qiita.com/noraworld/items/bfa80811c9e30b4474af
- https://qiita.com/ueokande/items/80048f886082fea5b776
- https://qiita.com/closer/items/f8d8ba00ae86d7051764
- https://qiita.com/NeXTSTEP2OSX/items/2c0849e15e95d309ca15
- http://vdeep.net/rubyonrails-dotenv
Vue.Draggable を使ってリストをアニメーションでスムーズな動きで並び替える

### これは何
Vue.Draggable というライブラリを使って、リストを並び替えをする実装をしてみた。
そこで、アニメーションのオプションをつけると、見た目もそれっぽく動いてくれるのでその方法を記録しておく。
公式： https://github.com/SortableJS/Vue.Draggable

### 動作こんな感じ
![ezgif-1-dc8645e192ba.gif](https://qiita-image-store.s3.amazonaws.com/0/144064/b97764a7-8515-595c-699c-991ff7281282.gif)


### インストール
```
npm i -S vuedraggable
```
yarn とか CDN での導入方法などは公式ドキュメントを参考にしてください。

### コード

```vuejs

            <draggable v-model="keywordList" class="keyword-list"
                       :animation="200">

                <div class="keyword" v-for="(keyword, index) in keywordList">
                    <span class="keyword-name">
                       {{ keyword }}</span><span class="icon-remove"
                </div>
            </draggable>
```
classは見た目整えるだけなので無視してください。

draggableの動作のために重要なのは。v-forで回すリスト（ここではkeywordList）と、v-modelで指定する変数を合わせる、くらいで難しいことはありません。

### アニメーションについて
オプションはdraggableのタグに直接つければOK。

参考： https://github.com/SortableJS/Vue.Draggable#All-sortable-options

> Sortable options can be set directly as vue.draggable props since version 2.19.


古いバージョンだと以下のように:optionsで指定してようです（古いブログなどを参考にする場合には注意が必要）

```
:options="{handle:'.handle'}"
```
[Mysql][Error][Mac] テーブル一覧をShowできるが、Selectできない場合

理由はわからないが、(電源切れによる突然の再起動か)
特定のDatabase ファイルが壊れたようだ。


```
mysql> SHOW TABLES;
+-----------------------+
| Tables_in_database    |
+-----------------------+
| TABLE_ONE             |
| TABLE_TWO             |
| TABLE_THREE           |
+-----------------------+
mysql> SELECT * FROM TABLE_ONE;
ERROR 1146 (42S02): Table 'database.TABLE_ONE' doesn't exist
```



mysqlcheck --all-databases --auto-repair 
で原因を探ってみると

```
mysqlcheck -u root -p --all-databases --auto-repair 


mysql.user                                         OK
中略..
TABLE_ONE.table
Error    : Table 'teble_one.table' doesn't exist
status   : Operation failed
```
どうやら特定のデータベースのみ、壊れているようだ。

そこで、
今回はテスト環境で、データもたいしてなかったので
drop database して再度 Create しなおした。
Vagrantが古いと"The box 'laravel/homestead' could not be found"になる

# エラー発生

手持ちのMacに、Laravelの開発環境であるHomesteadをインストールする途中で、エラーが発生した。

```bash
$ vagrant box add laravel/homestead
The box 'laravel/homestead' could not be found or
could not be accessed in the remote catalog. If this is a private
box on HashiCorp's Atlas, please verify you're logged in via
`vagrant login`. Also, please double-check the name. The expanded
URL and error message are shown below:

URL: ["https://atlas.hashicorp.com/laravel/homestead"]
Error: The requested URL returned error: 404 Not Found
```

box名の綴りを見直したり、`vagrant login`のためのアカウントが必要なのか？と、ちょっと困ったが、理由はvagrantが古いことだった。（昔、インストールしたままMacを開発環境として使わなくなったていたので）

```bash
$ vagrant --version
Vagrant 1.8.1
```

# 解決

Vagrantをアップデートした。以下のサイトからdmgファイルをダウンロードし、インストール。
https://www.vagrantup.com/downloads.html

ちなみに`vagrant_2.2.4_x86_64.dmg`

```bash
$ vagrant --version
Vagrant 2.2.4
```

これでエラーがでなくなった

```bash
$ vagrant box add laravel/homestead
==> box: Loading metadata for box 'laravel/homestead'
...
```
【エクセル】全シートのカーソルを左上にそろえる　#ジョーク


【エクセル】全シートのカーソルを左上にそろえる


```vb:sample.xls

Sub 左上に揃える()

  Application.ScreenUpdating = False
  Application.Calculation = xlCalculationManual

  Dim sht As Variant

  For Each sht In ActiveWorkbook.Sheets
    If sht.Visible <> xlSheetHidden Then
      sht.Select
      ActiveWindow.ScrollColumn = 1
      ActiveWindow.ScrollRow = 1
      Range("A1").Select
      ActiveWindow.Zoom = 100
    End If
  Next
  ActiveWorkbook.Sheets(1).Select

  Application.ScreenUpdating = True
  Application.Calculation = xlCalculationAutomatic

End Sub

```


※参考

エクセル、空っぽのシートを見つける
https://qiita.com/santarou6/items/f0aa6b52703d5306051a
CSS基礎まとめ

<h3>0．背景</h3>
<p>
Webアプリが作るために、今更ながらCSSをおさらい。<br>
但し、最低限使うだろう部分に限定して記載します。
</p>
<h3>1．基本的なスタイル指定方法</h3>
index.html：スタイルを適用するHTML

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
  ~ 中略 ~
  <link rel="stylesheet" href="style.css">   ← StyleSheet(css)指定
  </head>

　<body>
    <h1> タイトル </h1>
    <p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
  </body>
</html>
```

style.css：スタイルの設定ファイル

```style.css
@charset "UTF-8";

/* "h1"タグのスタイル */
h1 {
  color: red;                   ← 文字色：赤
  border: 5px solid blue;       ← 枠指定(幅,線,色)
  text-align: center;           ← 文字位置 {left|center|right|etc..}
}

/* "p"タグのスタイル */
p {
  font-weight: bold;　　　　　　 ← 太文字
  text-decoration: underline;　 ← 下線
}
```

<h4>[結果 : スタイル適用前]</h4>
　<img width="331" alt="ccstest_before.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/374906/20d4cab8-b348-04c1-bbd7-657c1503a4ec.png">
<h4>[結果 : スタイル適用後]</h4>
　<img width="362" alt="ccstest.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/374906/b9a2e1e4-809e-dae8-4a9e-3dcc87ebf0b3.png">

<h3>2．指定範囲の設定方法</h3>
index.html：スタイルを適用するHTML

```index.html
<!DOCTYPE html>
<html lang="ja">
  ~ 中略 (css指定含む) ~
  <body>
    <section class="main">
      <h1> タイトル </h1>
      <p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
    </section>

　　<section class="sub">
      <h1 id="title2"> タイトル </h1>
      <p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
      <p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
      <p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
      <p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
    </section>

  </body>
</html>
```

style.css：スタイルの設定ファイル

```style.css
@charset "UTF-8";

/* 全ての"section"タグに適用 */
section {
  border: 1px solid silver;          ← 枠指定(幅,線,色)
  padding: 10px;                     ← 画面端からの幅
  margin-bottom: 10px;               ← section下の幅
}

/* class指定 */
.main h1 {                           ← class="main"の"h1"タグ
  border-left: 5px solid skyblue;    ← 左側だけの枠(幅,線,色)
}

/* id指定 */
#title2 {                            ← id="title2"
  border-left: 5px solid green;
}

/* 隣接結合子での指定 */
p + p {                              ← "p"タグが続いた時
  border-top: 1px dashed silver;     ← 下側だけの枠(幅,線,色)
}
```

<h4>[結果 : スタイル適用後]</h4>
<img width="367" alt="csstest2.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/374906/9183f1f9-c00a-cc89-019c-b90301b52559.png">


<h4>情報ソース</h4>
<ul>
 <li><a href="https://dotinstall.com/lessons/basic_css_styles">ドットインストール：CSS基礎文法入門</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS">MDN：CSS仕様</a></li>
</ul>
systemdとdockerを組み合わせるときに気をつけること

#topic

- dockerの標準出力の行方
- docker logging driverでfluentdを利用する場合

systemdとfluentdとdockerを利用した際に、標準出力の扱いに関して詰まったことがあったので下記に記載しておく。

##dockerの標準出力の行方
コンテナでアプリを立ち上げたときに大体の人はdocker logsコマンドでコンテナの標準出力を見ると思う。
(アプリの設定で固定ファイルにログをすべて出力する設定等をしている場合は別だが、log4j2などを使っている場合)

systemdからコンテナを立ち上げた際に、docker logsコマンドで表示される内容がすべてsyslogにも出力されているのをみて、えぇ！！と驚いたのでまとめておく。

###コンテナの標準出力=プロセスの標準出力
当たり前の話だが、コンテナの標準出力=プロセスの標準出力なのでコンテナをsystemdで起動した場合コンテナの標準出力はsystemdによって拾われる。
そのため、systemdの設定で標準出力関連の設定をデフォルトにしている場合systemdで管理しているプロセスの標準出力（エラー出力を含む）はsystemd→journalログに拾われるため、結果的に/var/log/messages等のログにも同時出力される。

勘違いした理由としては、docker logsコマンドの説明で、docker logging driverをデフォルトのjsonにしている場合は、コンテナIDごとに指定のファイルパスに標準出力のログファイルが蓄積してて、そこを見てるんだよ。
という旨の記載を見た気がして、じゃあプロセスとしての標準出力としては出なくてどっかで出力がうばわれてるんだなーと勝手に解釈してしまった（馬鹿）ためだ。


よって、ログをjournalに拾われたくない場合はsystemdで下記の設定を行う必要がある。
>StandardOutput=null

上記は標準出力のみで標準エラー出力に関しては、以前の通りjournalに出力されるので、必要であればエラー出力に関する設定も同様に存在するのでそちらもいじると良い。

そのまま、出力させるのであれば上記の設定は不要。

##logging driverでfluentdを指定した場合に標準出力の行方
dockerの公式ドキュメントにも書いてあるが、docker logging driverでjson以外を設定した場合は、docker logsコマンドを利用することができない。

このため、ほほぉjson以外を設定するとコンテナの標準出力は吸い取られるのか！！（馬鹿）と勘違いしていた。
実際、logging driverをfluentdにしたあとはdocker logsコマンドが使えないので標準出力なくなったのかなーとか考えてたときにjournalログにも同じログが出てる！と気がついて、なんでこっちにもでてるのか散々悩んだ。

結局、logging driverをどんな設定にしてもプロセスの標準出力自体はなくならないのでsystemd(upstart)等で管理する場合は通常と同じようにプロセスの標準出力の扱いに関する注意が必要と言うことである。（当たり前）
【SQL】データベースのサイズを確認

MysqlでGB単位、Mb単位の両方を表示するSQL文

```
select table_schema as db_name, sum(data_length+index_length) /1024 /1024/1024 as GB,sum(data_length+index_length) /1024 /1024 as MB from information_schema.tables group by table_schema;
```


##実行結果例

| db_name | GB | MB |
|:--|:--|:--|
| information_schema | 0.000009536743 | 0.00976563 |
| mysql | 0.000991821289 | 1.01562500 |
GitHub - 主な機能 #4

# GitHubの機能
### 用語や操作
- `Shift + /` ショートカット一覧の表示  
- `t + ファイル名` リポジトリの中から該当するファイルを検索できる。
- Gist  
ちょっとしたコードをメモしたりして、コードを管理、公開できる。  
- Issues  
バグ修正や機能の追加、方向性の確認などに使われ、それをIssueとして管理できる。
- Wiki  
共有すべき情報やそのリポジトリに対するドキュメントなどを記載できる。
- 差分の閲覧  
// ブランチ間の差分  
`https://github.com/{リポジトリURL}/compare/{ブランチA}...{ブランチB}`  
// 数日前の差分  
`https://github.com/{リポジトリのURL}/compare/{ブランチ名}@{4.day.ago(期間）}...{ブランチ名}`

## Issue (チケット）
バグや論議などをトラッキングして管理するために発行する。
そのIssueを管理する代表的なBTS(Bug Tracking System)に、Readmineがある。
`利用シーン`
- バグを発見して解決までの一連の流れをレポートする
- 質問等を行う
- 今後のタスクを書き出す
`できること`
- GFMで見やすい記述
- ラベルをつけて分類・整理
- マイルストーンをつけて進捗の把握
- タスクリスト記法
　例 # 今日のタスク
　- [ ] 投稿機能
　- [x] 画面表示
- コミットメッセージでのIssueの操作
　コミットメッセージに「#issue番号」でコミットとIssueを結びつけることが可能。
　IssueをCloseする時は、
　fix/fixes/fixed #Issue番号
　close/closes/closed #Issue番号
　resolve/resolves/resolved #Issue番号
　上記の９つのいずれかのようにコミットメッセージを記述すれば、自動的に
　Closeされる。

## Pull Request
自分で変更したコードを相手のリポジトリに取り込んでもらえるよう依頼するための機能。
コメント関連

- コメントを引用したいときは、引用したいコメントを選択して「R」をおす
- 「:」を入力して、文字を入力すると絵文字が補完される
Tab移動などに使えるフォーカスアニメーション(サイト制作)


![1.gif](https://qiita-image-store.s3.amazonaws.com/0/118906/4f34565b-b847-6b27-e5db-e9021aa1bc53.gif)




```css
button{
	outline: 1px solid transparent;
	outline-offset: 5px;
	transition: all 500ms;
}
button:focus{
	outline: 1px solid rgba(0, 0, 0, 0.5);
	outline-offset: 0;
}
```


outline-offsetプロパティでoutlineとボタンの距離（オフセット）を
指定・変更することで残像のような効果を表しています。
※IE非対応
fluentdのconfig(input/output)

とある機会でfluentdを触ることがあったので気を付けておくべきconfigに関しての備忘録
公式ドキュメントを読めばわかるけど、すべて英語なのと自分の気がついたことをまとめるために記載します。(随時更新)

#topic
主に下記の内容が対象。
filterプラグインに関しては、用途によりそれぞれなので記載しません。
また、tagなどの基本的なflunetdに対する知識が前提。
主に、input/outputで必要そうなものに絞って記載します

記載時の対象バージョンは

. fluentd (version 1.2.2)
. ruby (2.5)


- input
 - in_tailプラグイン
 - in_forwardプラグイン
- output
 - out_fileプラグイン


##INPUTプラグイン
主にflunetdに対してのデータ入力部分を受け持つ。
ここでデータを受け取り、input→filter→outputの順番でデータの受け渡しが行われる。(ざっくり説明）

###in_tailプラグイン
主にファイルの読み込みに利用されるプラグイン
Linuxのtail -Fとほとんど同じ動作となる。

指定したファイルをtail -Fした際に標準出力に表示される内容をfluentdが入力として受け取ることができる。
注意点としては、tail -Fと同じ動きなので、読み込みは改行単位で区切られて読み込まれる。
**読み込みファイルが壊れて最終行が改行コードで終わっていない場合、その内容はflunetdで読み込まれない。
(multiline設定でmultiline_flush_intervalを利用する場合を除く)**

####tag
tag設定。
対象ファイル読み込み時のtagを設定する。
後述する*path*に複数のファイルパスを記載した場合は、その全てに対して同じtagが付与される。(placeholderを利用しない場合)

####path
読み込み対象のファイルパス指定。
複数のファイルを指定できる。指定する際はカンマ区切り
また、ワイルドカード等の使用が可能。

####pos_file
in_tailプラグインを使う場合は殆ど必須の設定
読み込み対象のファイルのinodeと読み込み行の情報を保存するファイルパスを指定する。
この設定を指定することで、読み込み対象ファイルをどこまで読み込んでいたかの情報が保存されるため、fluentdが再開された場合に最後に読み込まれた行から再度取り込みを再開することができる。

ファイル名に対して1行で情報が保持されるため、*path*でワイルドカード等を利用して可変ファイル名のファイルを読み込んでいる場合、posファイルへの記載内容は徐々に増えていく。
読み込みが終了した（対象のファイルがなくなった）際のposファイルの情報の整理はfluentdの再開を契機に行われるため、fluentdが連続動作している限りposファイルの容量は増えていく(v1.2.2時)

####read_from_head
fluentd起動時に読み込み対象ファイルを先頭行から読み込む設定。
*pos_file*の設定で対象ファイルの情報がある場合は、最終読み込み行からの読み込みが優先される。
初回読み込み時にデータの取りこぼしを防ぐための設定。

####rotate_wait
読み込み対象ファイルがlogrotateなどによりローテートした際に、一つ古いファイルへの更新が同時発生している場合に、どのくらいそのファイルの読み込みを継続するかの設定。

例えば、/var/log/messagesがlogrotateにより/var/log/messages.1にローテートされた際に*rotate_wait*を3sに設定していると、ローテート後3秒間は/var/log/messages.1への書き込み内容も取り込むことができる。

####encode,from_encode
読み込み時のencode設定(encode)とin_tailプラグイン処理後のencode設定(from_encode)

####path_key
指定した文字列のフィールド名で読み込み対象ファイルパスの情報を保持することができる。
読み込み対象ファイルのフルパスをデータとして保持する際に設定する。


###in_forwardプラグイン
主に*fluent-catコマンド*からの入力や後述する*out_fowardプラグイン*からのデータ入力を受け取る際に利用する。
fluentd - fluentd間のデータ受け取りに使われることが多い。

####port
listenするport番号

####bind
bindするIPの設定
ここでデータ受け取りを行うIPの制限を行うことができる。


##OUTPUTプラグイン
主にfluentdからデータのOUTPUTを行う際に利用するプラグイン

###out_fileプラグイン
fluentdからファイル出力を行う際に使用する。

####path
出力ファイルパスの設定。
固定ファイル名での出力も可能だし、tag等のplaceholderを利用して可変ファイル名とすることも可能
placeholderに関しては下記を参照
https://docs.fluentd.org/v1.0/articles/buffer-section#sts=Placeholders

####append
false設定にすると出力ファイル名の末尾に_0,_1等の数字が付与され分割される。
分割単位はchunkごとに分割されるため、通常はtrueにして運用する。

####path_suffix
*path*で設定したファイル名の末尾に付与する文字列を設定する。
後述する*add_path_suffix*の設定により付与しないことも可能。
前述の*append*により付与される数字はこの文字列のあとに付与される。


####add_path_suffix
前述の*path_suffix*の末尾に付与するかどうかの設定。
*path*で設定した内容のままのファイル名で出力したい場合は、本設定をfalseにする必要あり。





参考ドキュメント
https://docs.fluentd.org/v1.0/articles/quickstart
仕事用のブラウザでFirefox Nightlyを使う理由

## 前書き
プライベートで使用するブラウザはChrome Canary、仕事で使用するブラウザはFirefox Nightlyを使用している。 
仕事でFirefoxを使用する理由としては拡張機能無しで利用できる便利な機能がいくつかあるためなので、その機能を書き連ねていく。

今後、使ってる中でこれいいな、と思ったものがあれば追記していく。

## Firefox Nightlyの便利な機能

### コンテナタブ
Firefox Nightlyはコンテナという概念でタブを管理することができる。
コンテナを使うとログインセッションなどがコンテナごとで別々になるため、同じサービスに一つのブラウザで複数アカウントでログインしたりすることができる。
これでTwitterなどの複数アカウントでログインできないものを、個人用のコンテナ、仕事用のコンテナでわけて管理をしている。

ぶっちゃけこれがあるからFirefox Nightlyを使っているが、一つ難点があるとしたらレスポンシブモードが使えないことか。

### スクリーンショット機能
Chromeとかだと拡張機能を入れる必要があるが、Firefox Nightlyでは標準で機能が実装されている。
ページ全体のスクリーンショット、見えてる範囲でのスクリーンショット、ノード単位でのスクリーンショットなどが標準でできるのでスクショする時はとても助かっている。
UIViewをaddSubViewしたあとにオートレイアウトをはる

## 環境

* Xcode10.1
* Swift4.2

## 余談

Swiftでコード書いてるとUIViewControllerのviewに画面いっぱいのUIViewサブクラスをaddSubviewしたり
UIViewのコンテナにxibから生成したインスタンスをコードからaddSubviewしたりすることがあるかと思います。

でも、addSubviewしただけでは親Viewに対してオートレイアウトが適応されていないのでレイアウト崩れすることがあります。

※UIViewControllerを想定して書いてるのでself.viewでもok
※hogeViewはUIViewのサブクラス

```swift
view.addSubview(hogeView)
```



## addSubViewしたあとに親Viewの上下左右にオートレイアウトをはる

以下のようなUIViewのExtensionを作成すればVCに大量のオートレイアウトコードを書かなくて良いと思います

```swift
extension UIView {
  /// addSubViewした親Viewと同じ大きさにオートレイアウトを作成
  ///
  /// - Parameter equalTo: addSubViewした親View
  func anchorAll(equalTo: UIView) {
    // AutoresizingMaskからAutoLayoutへの自動変換を無効化
    translatesAutoresizingMaskIntoConstraints = false
    // 対象のViewの四辺にアンカーを貼る
    topAnchor.constraint(equalTo: equalTo.topAnchor, constant: 0).isActive = true
    leftAnchor.constraint(equalTo: equalTo.leftAnchor, constant: 0).isActive = true
    bottomAnchor.constraint(equalTo: equalTo.bottomAnchor, constant: 0).isActive = true
    rightAnchor.constraint(equalTo: equalTo.rightAnchor, constant: 0).isActive = true
  }
}
```

### 使い方

```swift
view.addSubview(hogeView)
// viewの上下左右に合わせてオートレイアウトをはる
hogeView.anchorAll(view)
```

UIViewのaddSubViewメソッドごとラップしてしまってオートレイアウトを貼ってくれるaddSubView機能をextensionで書いてもいいかもしれないですね。

おしまい
FLASK 文法1 FLASKを呼び出す・ルーティン化

-FLASKの呼び出し
from Frask import **F**lask
app=Flask(**__**name__)

-Flask ルーティン化
@app.route("/")
def hello_world():
____return "Hello World!"


![alt](https://qiita-image-store.s3.amazonaws.com/0/355304/71acd378-ffe9-9306-f722-1b1fab9bf42f.png)
【JavaScript】条件分岐① if【自己学習】

# if命令でできること
if命令によって、「もし〇〇ならば✕✕を行う」というように、一定の条件を満たすか否かに応じて実行する処理を変える（分岐させる）ことができる。

## 条件を満たす場合の処理を指定する - if -
if命令の中に与えられた条件式の真偽値がtrue(真)の場合、指定した処理が実行される。

```if-1.js
let i = 14;
if (i >= 10) {
  console.log("iは10以上です"); // > iは10以上です
}
```

変数iの値は14であり、条件式「i >＝ 10」を満たす（真偽値がtrueである）ため、処理が実行され「iは10以上です」とコンソールに表示される。仮に変数iが10未満の場合、条件式を満たさないため処理は実行されず何も表示されない。

## 条件を満たさない場合の処理を指定する - else -

条件を満たす場合だけでなく、満たさない（真偽値がfalseである）場合の処理も指定したい場合は、**else**を使うことで処理を実行できる。

```else-1.js
let i = 8;
if (i >= 10) {
  console.log("iは10以上です"); //処理は実行されない
} else {
  console.log("iは10未満です"); // > iは10未満です
}
```

変数iの値は8であり、条件式「i >= 10」を満たさないため、「iは10以上です」は表示されない。しかしelseを使って指定した処理は実行され「iは10未満です」とコンソールに表示される。

## 分岐を追加する - else if -
ifとelseのみでは2つしか処理を分岐させるとこができないが、**else if**を使って分岐を追加することができる。

```elseif-1.js
let i = 8;
if (i >= 10) {
  console.log("iは10以上です");
} else if (i >= 5 ) {
  console.log("iは5以上です");  // > iは5以上です
} else {
  console.log("iは5未満です");
}
```

変数iの値は8であり、条件式「i >= 10」を満たさないため、「iは10以上です」は表示されない。しかしelse ifを使った条件式「i >= 5」は満たすため、指定した処理は実行され「iは５以上です」とコンソールに表示される。

####処理が実行される順番
複数の条件式を満たす場合、実行されるのは一番最初に条件を満たした処理のみとなる。そのためif命令は記述する条件式の順番にも注意が必要。

```elseif-2.js
let i = 8;
if (i >= 10) {
  console.log("iは10以上です");
} else if (i >= 3 ) {
  console.log("iは3以上です");  //iは3以上です
} else if (i >= 5 ) {         //以降の処理は条件式を満たしていても実行されない
  console.log("iは5以上です");
} else {
  console.log("iは5未満です");
}
```

複数の条件式のうち、2番目の「i >= 3」と３番目の「i >= 5」を満たすが、記述上最初に「i >= 3」を満たすため「iは3以上です」とコンソールに表示される。
Python FlaskでローカルWebサーバー構築

## はじめに

フロントエンドエンジニアが認証周りの学習のために、あまり手間をかけずにWebアプリケーション環境を構築したかった
どうやらPythonのFlaskというフレームワークが良いらしい

## 目標

- Flaskでローカルwebサーバ環境の構築
- 作成済みフロントエンド開発環境のbuild資材と連携
- Flask webサーバ起動時のルートでbuild資材をブラウザ表示する
- （※認証周りは次回）

## Flaskとは
http://flask.pocoo.org/

- Python用マイクロフレームワーク
- 非常に軽量
- カスタマイズ性が高い
- 利用用途としてはBotなどの簡単なアプリやAPIサーバなどに使用されることが多い
- Flaskは軽量 <=> Djangoは大規模サービス向き

## ローカル環境構築

Python実行環境の構築は省略
今回はpyenvでPython3.5.2をインストールし使用


### 資材階層

```
proj
├── app // Flask webサーバ用モジュール
├── front // フロントエンド開発資材
├── public // フロントエンドBuild資材
└── main.py // webサーバ起動タスク
```

### Flaskセットアップ

今回の目標到達までは、思っていたよりずっと簡単だった

#### 1. pip install Flask

Python3でも標準で使えるパッケージ管理ツール
まずはFlaskパッケージをインストール
カレントディレクトリは`proj`で

```
$ pip install Flask
```


#### 2. Flask実行タスクを記述

用意するタスク

- webサーバ立ち上げ
- フロントエンドbuild資材(public/index.html)をルート表示する

```main.py
# -*- coding: utf-8 -*-
import os
from app.index import app

if __name__ == '__main__':
  app.run(host=os.getenv('APP_ADDRESS', 'localhost'), port=8000)
```
main.pyではwebサーバの立ち上げのみ
そのほかの機能・設定は`app/index.py`に取りまとめてみる

```app/index.py
# -*- coding: utf-8 -*-
import os
from flask import Flask
from app import static

app = Flask(__name__)
app.register_blueprint(static.app)

@app.route('/')
def index():
  return static.app.send_static_file('index.html')
```
app/index.pyでは、HelloWorld程度最小限の設定を記述
@app.route('/')デコレータをつけて、ルート表示した際に何を返すかを実装している

```app/static.py
# -*- coding: utf-8 -*-
from flask import Blueprint

app = Blueprint('public', __name__, static_url_path='', static_folder='../public')
```
app/static.pyではpublic/配下をルート表示するための設定を記述
static.pyから見て相対パスでpublic/階層を記述してみた

#### 3. webサーバ起動

```
$ python main.py
 * Serving Flask app "app.index" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://localhost:8000/ (Press CTRL+C to quit)
```
（WARINING出てるけど後回し、、、）
起動したようなので http://localhost:8000/ で確認
期待通り、public/index.htmlがブラウザに表示された

## 余談: Dockerにのせてみた

Docker構築は[前記事](https://qiita.com/sbut_sug/items/b7c92ca5c7215d294355)の通り

```:Dockerfile
FROM python:3.5.2
RUN pip install Flask
COPY main.py .
COPY ./app/ ./app
COPY ./public/ ./public
CMD ["python", "main.py"]
```

## 今後の展開

ここまでは想定以上にスムーズにできた、
次回はflask環境にjwtやベーシック認証などを実装していこうと思う
GitPitchをローカルでプレビューできるdocker imageを作った

どうも、うじまるです
皆さんGitPitch使ってますか？ 僕はつい最近使い始めました。
Markdownで書くことができ、GitHub等のサービスにリモートリポジトリを作って `PITCHME.md` を置いておくとスライドにしてくれます。
詳しくは [GitHubだけで超高機能なスライド資料が作れる「GitPitch」の使い方を徹底解説！ - paiza開発日記](https://paiza.hatenablog.com/entry/2017/06/22/GitHubだけで超高機能なスライド資料が作れる「GitPitch」の)

# 作った経緯
ただこのサービス、GitHubにpushしないとスライドの状態にならないのです。
ちょっと編集してプレビューを見たい人間なのでそれだと面倒くさいなーっと思い

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">gitpitchをローカルでプレビューしたいんだけどいい感じのができなさそう</p>&mdash; うじまる🐔 (@uzimaru0000) <a href="https://twitter.com/uzimaru0000/status/1108234162996035584?ref_src=twsrc%5Etfw">2019年3月20日</a></blockquote>

というTweetをしたところ

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">To develop and preview your slide decks locally you need GitPitch Desktop - <a href="https://t.co/ftXUjSEZpR">https://t.co/ftXUjSEZpR</a></p>&mdash; David Russell (@gitpitch) <a href="https://twitter.com/gitpitch/status/1108250752097628160?ref_src=twsrc%5Etfw">2019年3月20日</a></blockquote>

っと来たので「おーあるやんけー」って思ってリンクを見に行ったら

![スクリーンショット 2019-03-23 0.47.08.png](https://qiita-image-store.s3.amazonaws.com/0/159238/e6bda410-a8d9-d841-d870-c2d5534444a9.png)

**有料やんけ！！**

っということで作りました。

## 構成

ローカルで実行するためにoffline版を使います。
![スクリーンショット 2019-03-23 0.49.33.png](https://qiita-image-store.s3.amazonaws.com/0/159238/bcee16a6-2efc-6295-0ea6-1ed8f7475f55.png)

このoffline版はcorsとかの問題でhttpサーバに乗っけて配信しないとダメっぽいです。
なので、dockerでnginxを起動させそれに乗っけます。

このoffline版はスライドの生成に `assets/md/PITCHME.md` を参照しているのでローカルの `PITCHME.md` と共有するようにしました。

しかし、 `docker run` でボリュームを設定するさいに `nginx`が配信するディレクトリ `/usr/share/nginx/html/assets/md/PITCHME.md` を設定するのは面倒なので、 `/usr/share/nginx/html/assets/md/PITCHME.md` を `/src/PITCHME.md` のシンボリックリンクにすることにしました。 これでボリュームを設定するときは `-v $(pwd):/src:ro` みたいな感じで設定できます。

どうしても別の場所に設定したいと言うときは、 `docker run` の `command` に `PITCHME.md` を絶対パスで指定してください。

## 使い方
上でゴチャゴチャ書いてあるものをまとめると

```sh
$ docker run -v $(pwd):/src -p 8080:80 -d uzimaru0000/gitpitch_local
```

でサーバが起動します。
あとは、手元の `PITCHME.md` を編集すれば反映されます。

## 課題
即席で作ったのでいろいろと課題があって

- `---?code=path` で指定したときの挙動がダメ
- スーパーリロードしないと更新されないときがある
- styleの適応が未実装

他にも本サイトで見るときと挙動が変わる部分が多々あると思います。
気がついた方は、[リポジトリ](https://github.com/uzimaru0000/gitpitch-local)にissueを立てたり、PRを出してくれるとありがたいです。

## 最後に
ライセンスとかよく分からないのでもしかしたらOUTかもしれないです。その時は言ってください。消します。
【備忘録】Unityでクイズゲームを作成するためにCSV取り込みを行ってみた

完全なる初心者の備忘録です。
またほぼこの方のページのコピペです。
http://ikedih.blog69.fc2.com/blog-entry-241.html

【事の経緯】
１．だいぶ前にAndroidStudioでクイズゲームを作成した。
　　その際参考にしたサイト→https://terakoya.site/course/android-quiz/
　　完成したゲーム→https://play.google.com/store/apps/details?id=shohei.yamamoto.quizcollege

２．今度はUnityでクイズゲームを作成したい。問題文はCSV管理したい。
３．UnityにCSV取り込むってどうやってやるのか、試行錯誤。
４．いろいろ当たった結果、初心者の自分は以下のやり方が一番うまくいったのでメモ。無事コンソールにCSVの行数、項数、データの中身が表示された。←いまここ
５．さて、いつになればクイズゲームは完成するのか…。


```
using UnityEngine;
using System.Collections;
using System.Collections.Generic;　　　　// 追記

public class CSVRerder: MonoBehaviour {
    public TextAsset csvFile;	　　　　　// GUIでcsvファイルを割当
　　　　List<string[]> csvDatas = new List<string[]>(); //ここは参考ブログとは違う

　　　　// Use this for initialization
　　　　void Start() {

　　　　　　　　// 格納
　　　　　　　　string[] lines = csvFile.text.Replace("\r\n", "\n").Split("\n"[0]);
        foreach (var line in lines) {
            if (line == "") { continue; }
            csvDatas.Add(line.Split(','));　　　　// string[]を追加している
　　　　　　　　}

　　　　　　　　// 書き出し
　　　　　　　　Debug.Log(csvDatas.Count);　　　　　　　　　// 行数
　　　　　　　　Debug.Log(csvDatas[0].Length);　　　　　　　// 項目数
　　　　　　　　Debug.Log(csvDatas[1][2]);　　　　　　　　// 2行目3列目
　　　　}
}
```
Swift から Objective-C, Objective-C++のメソッドを呼び出す

## 環境

Xcode 10.1


## 方法
1. Objective-Cのファイルを生成する
2. \<プロジェクト名\>-Bridging-Header.h ファイルを生成する
3. ヘッダーファイルを作る
4. Swiftからメソッドを呼び出す

## ソースコード
:warning: 参考にする場合、それぞれ書き換えて下さい :warning:
1. test-Bridging-Header.h は \<プロジェクト名\>-Bridging-Header.h
2. ObjCTest は クラス名
3. testMethod は メソッド名

### test-Bridging-Header.h
```objective_c:test-Bridging-Header.h
#import "ObjCTest.h"
```

### ObjCTest.m(Objctive-C++なら、拡張子を".mm"にする
```objective_c:ObjCTest.m
#import "ObjCTest.h"

@implementation ObjCTest

-(void) testMethod {
    // 処理
    NSLog(@"helloworld");
}

@end
```

### ObjCTest.h(ヘッダファイル)
```objective_c:ObjCTest.h
#import <Foundation/Foundation.h>
// クラス定義
@interface ObjCTest : NSObject
// メソッド定義
-(void) testMethod;

@end
```

### ViewController.swift(呼び出し元のswiftファイル)
```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        // メソッド呼び出し
        ObjCTest.init().testMethod()
    }
}
```
VeraCryptのビルド on Ubuntu

本記事は筆者個人の環境での[VeraCrypt](https://www.veracrypt.fr)ビルド事例を備忘録として記録しただけのものです。
公式ビルド/インストール手順が必要な場合は、必ず公式サイトの手順を参照してください。
また、本記事は自分でビルドしたバイナリを試走することだけが目的ですので、インストールはしません。

# 環境

| Software | Version |
|---|---|
| OS | Ubuntu 14.04.5 LTS |
| gcc | 4.8.4 |
| VeraCrypt | 1.23 |
| wxWidgets | 3.0.4 |

# ビルド事例

筆者環境では下記ライブラリが必要でした。
環境によっては`build-essential`をインストールする必要があるかもしれません。

```
sudo apt-get install yasm libfuse-dev libgtk2.0-dev
```

公式サイトから
`VeraCrypt_1.23_Source.tar.bz2`
を入手し、適当なディレクトリ(ここでは`VeraCrypt_1.23`)に展開しておきます。

```
mkdir VeraCrypt_1.23
mv VeraCrypt_1.23_Source.tar.bz2 VeraCrypt_1.23
cd VeraCrypt_1.23
tar jxvf VeraCrypt_1.23_Source.tar.bz2
cd ..
```

(この後、パーミッションの問題でなぜかエラーが出たので、 `chmod -R u+w src`などで各ディレクトリに書き込み権限を与える操作を行いました。筆者の環境固有の問題でしょうか？)

wxWidgets 3.0.4 のソースも同様に展開し、上記`VeraCrypt_1.23`に並べて配置しておきます。
ディレクトリレイアウトは下記のようになります。

```
$ ls wxWidgets-3.0.4 VeraCrypt_1.23
VeraCrypt_1.23:
doc  License.txt  README.md  src  Tests  Translations

wxWidgets-3.0.4:
acinclude.m4     build         demos        interface      regen        utils
aclocal.m4       BuildGit.txt  descrip.mms  lib            samples      version-script.in
appveyor.yml     config.guess  distrib      locale         setup.h.in   wx-config.in
art              config.sub    docs         Makefile.in    setup.h_vms  wx-config-inplace.in
autoconf_inc.m4  configure     include      misc           src          wxwin.m4
autogen.sh       configure.in  install-sh   mkinstalldirs  tests
```

ビルドを実行します。

```
cd VeraCrypt_1.23
cd src/
sudo make WXSTATIC=1 WX_ROOT=$(realpath ../../wxWidgets-3.0.4) wxbuild
sudo make WXSTATIC=1
```

成功すると、 `VeraCrypt_1.23/src/Main/veracrypt` ができます。

# References

- [VeraCrypt](https://www.veracrypt.fr)
- [wxWidgets](https://wxwidgets.org/)

----

以上。
VeraCryptのビルド on Mac(High Sierra 10.13)

本記事は筆者個人の環境での[VeraCrypt](https://www.veracrypt.fr)ビルド事例を備忘録として記録しただけのものです。
公式ビルド/インストール手順が必要な場合は、必ず公式サイトの手順を参照してください。
また、本記事は自分でビルドしたバイナリを試走することだけが目的ですので、インストールはしません。

# 環境

Xcode をインストールしておきます。筆者環境では9.4.1でした。
FUSE for macOS も必要です。

| Software | Version |
|---|---|
| OS | macOS High Sierra 10.13.6 |
| Xcode | 9.4.1 |
| VeraCrypt | 1.23 |
| wxWidgets | 3.0.4 |
| osxfuse | 3.8.2 |


# ビルド事例


公式サイトから
`VeraCrypt_1.23_Source.tar.bz2`
を入手し、適当なディレクトリ(ここでは`VeraCrypt_1.23`)に展開しておきます。

```bash
mkdir VeraCrypt_1.23
mv VeraCrypt_1.23_Source.tar.bz2 VeraCrypt_1.23
cd VeraCrypt_1.23
tar jxvf VeraCrypt_1.23_Source.tar.bz2
cd ..
```

(この後、パーミッションの問題でなぜかエラーが出たので、 `chmod -R u+w src`などで各ディレクトリに書き込み権限を与える操作を行いました。筆者の環境固有の問題でしょうか？)

wxWidgets 3.0.4 のソースも同様に展開し、上記`VeraCrypt_1.23`に並べて配置しておきます。
ディレクトリレイアウトは下記のようになります。

```bash
$ ls wxWidgets-3.0.4 VeraCrypt_1.23
VeraCrypt_1.23:
doc  License.txt  README.md  src  Tests  Translations

wxWidgets-3.0.4:
acinclude.m4     build         demos        interface      regen        utils
aclocal.m4       BuildGit.txt  descrip.mms  lib            samples      version-script.in
appveyor.yml     config.guess  distrib      locale         setup.h.in   wx-config.in
art              config.sub    docs         Makefile.in    setup.h_vms  wx-config-inplace.in
autoconf_inc.m4  configure     include      misc           src          wxwin.m4
autogen.sh       configure.in  install-sh   mkinstalldirs  tests
```

ビルドを実行する前に`VeraCrypt_1.23/src/Build/build_veracrypt_macosx.sh`の内容を確認し、必要に応じて修正します。デフォルトでは
`VC_OSX_TARGET=10.7`
となっています。筆者環境では
`VC_OSX_TARGET=10.13`
への修正が必要でした。

```bash
# define the SDK version to use. We use 10.7 by default
export VC_OSX_TARGET=10.13
echo "Using MacOSX SDK $VC_OSX_TARGET"
```

ビルドを実行します。

```bash
cd VeraCrypt_1.23
cd src/Build
./build_veracrypt_macosx.sh
```

`package`ターゲットには失敗しますが、コンパイル＆リンクができていれば実行はできます。
成功すると、 `VeraCrypt_1.23/src/Main/VeraCrypt` ができます。


# References

- [VeraCrypt](https://www.veracrypt.fr)
- [wxWidgets](https://wxwidgets.org/)
- [FUSE for macOS](https://osxfuse.github.io/)

----

以上。
Microsoft Remote DesktopでJISキーボードを有効にする方法

MacからMicrosoft純正のアプリである「Microsoft Remote Desktop」でリモートのWindowsに接続するとキーボードのマッピングが正しく行われないことがあります。

原因は以下に詳しく書かれています。
[Mac からのRDP 接続で日本語キーボードを設定する](https://qiita.com/hidecha/items/33624f6ae57d41f3cd86)

アプリがアップデートされない限り無理かと思いましたが、リモート側の設定でクライアントの設定（誤ったキーボード情報）を無視するように出来ました。

色々な記事を参考にして解決できましたので、参照したサイトと作業手順を纏めてみました。

## 対処方法

レジストリエディタで修正を行います。（２箇所あります。）

※言語に「日本語」がインストールされていない場合は、先にインストールを済ませてください。
（Azureなどのクラウド上でOSを構築した場合は大抵初期状態はUSのみなので）
参考：[Windows10を日本語化する](https://qiita.com/o_study_o/items/764a635834911812d714)

### １つ目

```
キー : HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\KeyboardType Mapping\JPN
名前 : 00010002
```

の値を「kbd106.dll」に変更します。

参考：[MacからWindowsへリモートデスクトップ接続した際の使いづらいキーボードを改善する方法](https://qiita.com/tgoto63/items/a2326f1f3739f821c896)

### 2つ目

```
キー : HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\KeyboardType Mapping\JPN
名前 : 00000000
```

の値を「kbd106.dll」に変更します。

参考：[Windows 10ではIgnoreRemoteKeyboardLayoutが効かない？](https://teratail.com/questions/59254)

## "kbd106.dll" "kbd106n.dll"

以下の違いがあるようです。

|DLL名|違い|
|:--|:--|
| kbd106.dll | 「Shift」+「Ctrl」+「カタカナ ひらがな」でカナロック |
| kbd106n.dll | 「Ctrl」+「Caps Lock」でカナロック |

参考：http://www.geocities.jp/hts256/keyboard/
Apacheサーバーに関して少し勉強

WEBサーバー、Apacheサーバーに関して詳しくないため、下記サイトを参考に少し勉強

- http://httpd.apache.org/docs/2.4/getting-started.html

## リクエストとレスポンス

- クライアントのサーバーに対する情報要求を起点に、サーバーは情報を提供する。
- この情報要求をリクエスト、情報提供をレスポンスという。
- リクエストは、URLを通じて行われる。

## 名前解決

- ホスト名からIPアドレスを取得する方法を名前解決という。名前解決は下記のリソースに問い合わせ、対象ホスト名に紐づくIPアドレスが存在するかどうかを確認することで行われる。
  - DNSサーバー
  - /etc/hosts、もしくはC:\Windows\system32\drivers\etc\hosts

## バーチャルホスト

- １つのサーバーに対して、複数のウェブサイトを構築することが可能である。
この機能のことをバーチャルホストと呼ぶ。

- https://httpd.apache.org/docs/2.4/ja/vhosts/

## 設定方法
Apacheサーバーは設定ファイルを通じて設定を行う。設定ファイルの格納場所は下記のURLを参照。

- https://wiki.apache.org/httpd/DistrosDefaultLayout

###### CentOSにインストールした場合は下記のようになる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/301697/477dde4c-4fde-b500-282b-2f9ce001f005.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/301697/db968d39-b3cb-1f75-8d80-7ffe001a42de.png)


- 設定はディレクティブを設定ファイルに定義していくことで行われる。
- Includeディレクティブを利用すれば、設定ファイルは分割した形で管理することができる。
- グローバルな設定にしたい場合は、設定ファイル直下にディレクティブを記載する。
- 一方、特定のディレクトリに対してのみ設定を行いたい場合は、Directory、Location、VirtualHostディレクティブ内に対象ディレクティブを記載する。

## WEBコンテンツ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/301697/402246f0-d535-f846-3b4e-ae6476b70b6b.png)

- ApacheサーバーはURLパスに対応するリソースを提供する。
- サーバーはDocumentRootディレクティブに指定されたディレクトリ、あるいはAlias、ScriptAliasディレクティブにて指定されたディレクトリを基点にリソースを探す。
- 静的ファイルの提供やCGIの実行を行う。

## まとめ
ざっくり理解した。
今後は下記URLを参考に各設定ファイルの内容を理解していきたい。

- https://httpd.apache.org/docs/2.4/ja/mod/quickreference.html
raspi zero WをUSBケーブルからsshする（Windows10）

raspi zero WをUSBケーブルからsshできると便利なのでやってみました。

Qiitaに同様の記事があるが、windows10に対応していなかったり、ドライバのリンクが切れていたりして調べるのに時間がかかったのでここにまとめます。
qiita(.md)に慣れていないのでベタ打ちですがご容赦を^^)

手順：
①公式ページからraspbianのイメージをダウンロード。

②8GB以上のSDカードにrasbianを書き込む（windowsはwin32diskimager、macはapplepi等を使って）

③sdカードをPCにつなぎ、bootパーティションのファイル（config.txt、cmdline.txt）を変更

④PCとUSB接続してraspiを立ち上げ、デバイスマネージャーでCOMport等になっているraspiにUSB Ethernet/RNDIS Gadgetのドライバをインストールする。

ここまでは、
https://qiita.com/marron-akanishi/items/2ce4ae07c71dc8358093
を参考にしてください。

※記事のドライバのリンクは切れているので以下のドライバを入れる。
http://www.catalog.update.microsoft.com/Search.aspx?q=Acer%20Incorporated.%20-%20Other%20hardware%20-%20USB%20Ethernet%2FRNDIS%20Gadget
「Acer Incorporated. – Other hardware – USB Ethernet/RNDIS Gadget 」の「Windows 7,Windows 8,Windows 8.1 and later drivers」向けになっている物をダウンロードして試してみてください。
参考：https://www.raspi.jp/2016/07/pizero-usb-otg/

⑤ Bonjour Print Services をインストールする。
（ネットワークの名前解決するため）
https://support.apple.com/kb/DL999?locale=ja_JP&viewlocale=ja_JP

⑥mDNS用のポート（UDP5353）を開放します。
https://qiita.com/saitetu/items/8412cfb274a3d85997fc

⑦インターネット共有の設定を行う
mac：
https://www.raspi.jp/2016/07/pizero-usb-otg/

win：
http://srlt.blog.jp/archives/10000356.html

⑧sshで接続する
win：teraterm
mac：コンソール
でssh pi@raspberrypi.localを行う

⑨【参考】複数台のインストール
sshのホスト情報が違うので接続できなくなった場合は、以下のようにする

SSH接続エラー回避方法：.ssh/known_hostsから特定のホストを削除する/削除しないで対処する3つの方法
https://qiita.com/grgrjnjn/items/8ca33b64ea0406e12938



参考URL:
Raspberry Pi zero WをWindows10からUSBでssh接続する（iTunes不要）
https://qiita.com/saitetu/items/8412cfb274a3d85997fc

USB Ethernet/RNDIS Gadget
https://www.raspi.jp/2016/07/pizero-usb-otg/

① Bonjour Print Services をインストールする。
（ネットワークの名前解決するため）
https://support.apple.com/kb/DL999?locale=ja_JP&viewlocale=ja_JP
②windows10のドライバをダウンロード
「Acer Incorporated. – Other hardware – USB Ethernet/RNDIS Gadget 」の「Windows 7,Windows 8,Windows 8.1 and later drivers」向けになっている物をダウンロード
http://www.catalog.update.microsoft.com/Search.aspx?q=Acer%20Incorporated.%20-%20Other%20hardware%20-%20USB%20Ethernet%2FRNDIS%20Gadget

SSH接続エラー回避方法：.ssh/known_hostsから特定のホストを削除する/削除しないで対処する3つの方法
https://qiita.com/grgrjnjn/items/8ca33b64ea0406e12938
文字列の中にある全ての並んだパターンを作る

タイトルって難しいな...

#やりたいこと
```
abcabc
```
の中から

```plaintext
abcabc, abcab, bcabc, abca, bcab, cabc,...
```
といった感じにパターンを作りたい。

#結論
```javascript
var str = "abc".repeat(2);
var arr = []
for (var i = 0; i < str.length; i++) {
	for (var c = 0; c <= str.length - (str.length - i); c++) {
		if (str.length - i <= 1) {
			continue;
		}
		arr.push(str.substr(c, str.length - i));
	}
}
```
3行目の

```javascript
for (var i = 0; i < str.length; i++) {
```
のiの初期値を1にすると最初の`abcabc`というただの元の文字列が除外できる。
いつでもどこでもLambdaを呼ぼう(Web版DashボタンのLambda版を作りました)

無性にLambdaを呼びたいことありますよね？
そんなあなたに「Virtaul LambdashButton」

https://moritalous.github.io/VLambdashButtonTmp/

![image.png](https://qiita-image-store.s3.amazonaws.com/0/41574/ace39e98-cf9a-320b-e3a8-a106a5666819.png)


使い方の説明も必要ないと思いますが、

1. SettingからAWSのアクセスキー/シークレットアクセスキー/リージョンを入力します。
1. Addから使いたいLambdaを追加
1. Homeに戻りポチる

Lambdaにわたすパラメータは`{}`固定です。

JavaScriptのAWS SDKを使ってLambdaの一覧取得`lambda.listFunctions()`とLambdaの実行`lambda.invoke()`をしてるだけです。

設定情報はlocalStorageに保存してます。
テキストエディタのvi使用 【Tips】

#viとは

　UNIXのテキストエディタにはスクリーンエディタと呼ばれるviが存在する。スクリーンエディタとは画面上に編集するテキストを表示してスクロールや文字の挿入、削除、カーソルの移動などが行えるエディタのことである。そのため、viは紙上でのテキスト編集作業と似たような感覚で文章を記述することができる。また、複雑な操作を行う場合でもほんの２〜３度キーをタイプすれば行えてしまうところが魅力的であり、殆どの端末で実行できる為、今回viを使ってテキストの編集を初めることにした。
　
##viコマンドまとめ(コマンドモード)

<h6> ・viエディタのコマンド（カーソルの移動やコピー）を行うモード</h6>

```vim


#新規作成
vi

#ファイルの編集（対象のファイルがなければ新規作成となる）
vi [filename]

#ファイルの編集（N行目にカーソルを合わせて開く)
vi +4 [filename]

#~カーソルの移動~

#右に１文字分移動
l
#左に１文字分移動
h
#上に１行分移動
k
#下に１行分移動
j


#~ジャンプ~

#行頭へ
0
#行末へ
$


#~編集~

#現在位置に文字を挿入
i
#現在位置の後ろに文字を挿入
a

#直前の編集を取り消し
u

#行の復元
U

#直前の編集の繰り返し
.

#変更
#1語変更
c w
#1行変更
c c

#ヤンク

#1語ヤンク
y w
#1行ヤンク
y y

#ペースト
p

#削除

#1語削除
d w
#1行削除
d d

#ファイルの保存
ZZ


```


##viコマンドまとめ(入力モード)

<h6>・文字入力の状態にあるモード</h6>


```vim
#ファイルの保存
:w

#ファイルの保存と終了
:wp

#編集内容をすべて取り消して編集再開
:e!

#編集内容をすべて取り消して編集終了
:q!

#~スクロール~

#1画面分上にスクロール
ctrl F
#1画面 分下にスクロール
ctrl B
#1行分上にスクロール
ctrl D
#1行分下にスクロール
ctrl U


#上に検索
? [word]
#下に検索
/ [word]

#シェルコマンドの実行
! [シェルコマンド]


```


##viのモード変更

<h6>[Esc]キーで入力モードからコマンドモードへ切り替わる。</h6>
（※vi起動時はコマンドモード）

##viエディタの設定

viの設定（以下）を「~/.exrc」に記述する。

```vim

#行番号の表示
set number

#自動インデント
set autoindent

```


以上