OmniAICreator/Qiita-1.07M huggingface dataset:
webデザインするときに便利なツールとかサイトとか

自分用メモ

#開発お助けツール

お気に入りだからあんまり教えたくないけど、すごくいいやつたち。
使ったことないのもあるけど。

##いちいちHTMLタグ打つの面倒だわ
神的存在。すごい。らく。最高。これ使いこなせればHTMLマスターしたと言ってもいいと思う。
`div>dl>(dt+dd)*2`と入力すると、

```html
<div>
 <dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
 </dl>
</div>
```
が生成されます。もちろん、生成前にクラス名を書けば、クラスも同時に生成されます。
は〜〜〜〜最高。

https://emmet.io/

##ブラウザ別CSS対応非対応を確認したいけどググるのは面倒だぁ
CSSのプロパティを入力するだけで、どのブラウザが対応していてどのブラウザが対応していないのかがすぐに分かります！
プロパティごとに対応非対応をググる必要なし！
https://caniuse.com/

##この色いい！使いたい！
「スポイトツール」「カラーピッカー」でググってお好きなものをインストールしてください。
ブラウザ拡張系だと便利です。

##配色センスがないよぉ
そんなあなたに天下のAdobeが手を差し伸べています。
強く握り返しましょう。
メインカラーを選ぶだけで、補色や同系色など組み合わせを提示してきます。
https://color.adobe.com/ja/create/color-wheel/
あとはいい感じの配色がある色見本サイトやら書籍やらを見ればいい。

##いい感じのサイト真似していい感じに画面設計工程をラクしたいなぁ
パーツごとでいい感じが見たいとき
http://calltoidea.com/
http://collectui.com/

サイト全体でいい感じが見たいとき
http://www.gdweb.co.kr/
https://www.ikesai.com/

##アイコンを画像ファイルにしたくないんだよねぇ
そんなときはフォントを使いましょう。
アイコンフォントすごいです。
https://fontawesome.com/
http://materializecss.com/icons.html
https://zurb.com/playground/foundation-icon-fonts-3
http://linea.io/
http://themes-pixeden.com/font-demos/7-stroke/
http://evil-icons.io/
https://www.webhostinghub.com/glyphs/
自分好みのものを探してみてください。

##オシャレな英字のwebフォントを使いたいなぁ
ちなみにGoogleだと日本語も用意されてます。
https://fonts.google.com/
DLして使う系だともっと選択肢はあります。

##このフォント好きぃ！使いたいなぁ！
Adobeの女神が微笑んでいる！
スマホアプリですが、気になるフォントにカメラをかざすだけで、
同じようなフォントを教えてくれます。
https://www.adobe.com/jp/products/capture.html

##写真や画像を使って視覚的インパクトを強くしたいなぁ
フリー素材を使うとインパクト出ます。
https://pixabay.com/
http://alana.io/
http://stokpic.com/
https://stocksnap.io/
https://unsplash.com/

##スクショだと上から下まで画像として保存できない……
ブラウザの拡張機能だと、ページ全体のスクショが可能です。
探してみてください。

##ちゃちゃっと画像編集したいな
ソフトインストールするほどでもないけど、画像編集したい時には、webアプリがよい。
https://vectr.com/
https://pixlr.com/

##デザインツール欲しいなぁ
https://www.sketchapp.com/
https://studio.design/ja
https://www.figma.com/
https://www.adobe.com/jp/products/xd.html

##そういう情報系欲しいわぁ
WEB屋発信の情報がほしいなら
https://liginc.co.jp/
Qiitaも豊富
https://qiita.com/trend
あとは都度都度ググる。
ググりポイントは［webフォント まとめ］で検索するとまとめサイトがヒットするので、同じようなものが複数サービスで見つけられます。
自分好みのものが見つかりやすくなります。
あとは最近の情報だけに絞るとか。
あとはSNSでデザイナー系をフォローしまくる。
欲しい情報持っていそうな人を見つけてたかる。
あとは、このサイトおしゃれー！真似したーい！と思ったらソースコード読むとか。

UI/UXに特化した情報がほしいなら
http://uxmilk.jp/
デザイナー発信の情報がほしいなら
https://note.mu/notemag/m/m57787022cedc
最近のおすすめはnoteです。デザイナーさんがたくさん発信してます。
最近コードの入力に対応されたので、ソースコード売れます。
short codex on the apps.

```html
<!-- codex html: silence is golden -->
<div id="app"></div>
```

```css
/*codex css*/
.card{/*sysname:mejor*/}
.card.has-line{/*has-XXXXX: parts*/}
.card.type-small{/*type-XXXX: if multiple type */}
.card.type-big{}
.card.of-abc{/*of-XXXX:minor or yourself */}

```

```js
/*codex js*/
//common is fn. check is is.
var fn={},is={}/*var is lent*/
;
let a=0,b=0,c=0/*let is minor variable*/
,url='https://gnjo.github.io/'
;/*sequence mark the semicolon*/
let draw=()=>{ /*2nd let is minor varb*/}
,log=()=>{}
,f1=()=>{ /*short varb is f or f0 f1 f2 f3 ...*/ }
,cmd=function(ev){ /*event handler is full function*/}
,cmdEx=function(obj){return function(ev){ /*obj and event handler version*/
 // this.textContent =obj.str;
}}
,send=(url,opt)=>{return new Promise(sol=>{
 //promise
})}
,lex=(data)=>{
 /*sync*/
 return Promise.resolve(data).then(d=>{ /*async*/ })
}
;
fetch(url).then(d=>d.text())
 .then(log)
 .then(draw)
 .then(f1)
;/*chaining is cool*/
document.body.onkeydown=cmd;
document.body.oninput=cmdEx({'str':'xxxxx'});
;
```

```js
(function(root){/*objection*/
 /*lent*/
 var ls=root.localStorage,fn=root.fn||{},is=root.is||{}
 ;
 function entry(obj){
  let o={}
  o.calc=()=>{ ;return o}
  return o;
 }
 root.xyz =entry;
})(this)
;
//console.log(window.xyz);

```
最新Webpack（4.1.1）で普通にSassつかう

Webpackの設定はバージョンによって書き方が変わり、それはそれはうざいので、4.1.1の場合はこんなん動くよ、という意味もかねて書いてみた。

PCはあんまり関係ないけど一応Macで作ってubuntuでも動きました。バージョンは2018/03/21現在のlatestである4.1.1を使います。ライブラリなのでCSSを残すため、extract-text-webpack-pluginを利用しますが、エラーでるのでnext使えとコミュニティでだれかが言ってました（適当

# 下ごしらえ

まずは、webpackと依存パッケージをnpm installします。

```bash
# sassというフォルダ名で作ります
mkdir sass && cd sass

# 必要な依存を-D（開発環境のみ使用）でnpm install
npm i -D webpack webpack-cli node-sass css-loader sass-loader extract-text-webpack-plugin@next

#extract-text-webpack-pluginは修正済みの@next版を使わないとエラー出ます
```

必要なファイルを作ります。

```bash
# めんどいのでまとめて、srcフォルダ（開発用）に編集するindex.jsやscssファイルとdistフォルダ（出力用）にルートドキュメントのindex.htmlを作成、ここは自由
mkdir src && touch src/index.js && touch src/style.scss && mkdir dist && touch dist/index.html

# 設定ファイルを作成
touch webpack.config.js
```

これにWebpackに関する設定をかきます

```javascript:webpack.config.js
// 開発環境によって切り分ける際に使用するための定数を定義
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const ENV = 'development';
const userSourceMap = (ENV === 'development');

module.exports = {
  mode: ENV,
  module: {
    rules: [
      {
        test: /\.scss/, // 対象となるファイルの拡張子
        use: ExtractTextPlugin.extract({
          use:
            [
            {
              loader: 'css-loader',
              options: {
                url: false,
                sourceMap: userSourceMap,
                importLoaders: 2
              },
            },
            {
              loader: 'sass-loader',
              options: {
                // ソースマップの利用有無
                sourceMap: userSourceMap,
              }
            }
          ]
        }),
      },
    ],
  },

  plugins: [
    new ExtractTextPlugin('style.css'),
  ],
};
```

# Sassをためす
style.scssを以下のように編集します。

```sass:style.scss
div {
  h1 {
    display:none;
  }
}
```
これはつまり、divのなかに入っているh1は消えろ、という意味になります。
さらにindex.htmlを編集します。

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sassためす</title>
    <link rel="stylesheet" href="style.css" />
    <script src="main.js"></script>
  </head>
  <body>
    <h1>僕は存在します</h1>
    <div>
      <h1>僕は消されます</h1>
    </div>
  </body>
</html>
```

```javascript:index.js
import './style.scss'; //scssの読み込み
```




Scssが正常にコンパイルされれば、divの中のh1だけ消されます。
開発するときは以下のコマンドでwatchさせます

```bash
webpack --watch # --wacthをつけるとファイルの変更を読み取って自動でコンパイルしてくれる
open dist/index.html # Macしかできない芸当だけどubuntuとかは普通にブラウザでファイルひらけばok
```

エラーが出なければ、だいたいコンパイルできています。

<img width="657" alt="スクリーンショット 2018-03-21 13.06.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/114895/4ad9de8e-a3f1-ec93-58ba-0db40056887f.png">

↑うまくいったときのすくしょ

# まとめ
意外と面倒なので、コピペ用に近い。
config/locales/(model_name)/ja.yml に i18n の雛形ファイルを作成するRakeタスク



```rb:lib/tasks/locale.rake
namespace :locale do
  desc "create locale file"
  task :create, [:model_name] => :environment do |task, args|
    model_name = args['model_name']
    const = model_name.camelize.constantize
    path = Pathname("config/locales/#{model_name.underscore}/ja.yml")
    FileUtils.mkdir_p(path.dirname)
    yml = ERB.new(<<-YML
ja:
  activerecord:
    models:
      <%= model_name.underscore %>: <%= model_name.camelize %>
    attributes:
      <%= model_name.underscore %>:
        <% const.column_names.each do |col| %>
        <%= col %>: <%= col %>
        <% end %>
YML
    ).result(binding)
    File.write(path, yml.gsub(/\n\s*\n/, "\n"))
    puts "created: #{path}"
  end

  task create_all: :environment do
    model_names = Dir['app/models/*.rb'].map{|path| path.match(/app\/models\/(.*)\.rb/); $1 }.map(&:camelize)

    model_names.each do |model_name|
      next if model_name == 'ApplicationRecord'
      Rake::Task["locale:create"].execute(Rake::TaskArguments.new([:model_name], [model_name]))
    end
  end
end
```

```
$ bin/rake locale:create[User]
```

で

```yml:config/locales/user/ja.yml
ja:
  activerecord:
    models:
      user: User
    attributes:
      user:
        id: id
        created_at: created_at
        updated_at: updated_at
```

のように作ってくれる
JSの元から用意されているコンストラクタについて

JSにはシステムで元から用意されているコンストラクタもある。

例えば、、

- 文字列に対するコンストラクタ
- 配列に関するコンストラクタ
- 関数に関するコンストラクタ

などなど。

## 文字列に対するコンストラクタ
### Stirngコンストラクタについて
jsの文字列はStringコンストラクタから生成されたオブジェクトとして見なすことができる。
以下の二つは書き方は違うが、どちらも'こんにちは'という文字列情報を生成している。

```js
var data = new String('こんにちは');
```

```js
var data = 'こんにちは';
```

わざわざStringコンストラクタを実行して文字列を作ると、同じ文字列でも別々のオブジェクトとして生成される。
どうゆうことかと言うと…

```js
var data1 = 'こんにちは';
var data2 = 'こんにちは';

data1 == data2 // true
```
こちらは文字列情報が同じ場合、変数が違っても、同じオブジェクトを参照するが、

```js
var data1 = new String('こんにちは');
var data2 = new String('こんにちは');

data1 == data2 // false
```
こちらは同じ文字情報でも、異なるオブジェクトとして生成されている。
### Stirngコンストラクタのメソッド
全ての文字列はStirngコンストラクタに定義されたメソッドを実行することができる。
例えば、toUpperCaseメソッドは英語の小文字を大文字に変換してくれるメソッド。

```js
var data = "hoge";
data = data.toUpperCase();

console.log(data); //HOGE
```

## 配列に対するコンストラクタ
### Arrayコンストラクタについて
jsの配列はArrayコンストラクタから生成されたオブジェクトとみなすことができる
以下の二つは書き方は違うが、どちらも空の配列を生成している。

```js
var data = new Array();
```

```js
var data = [];
```
### Arrayコンストラクタのメソッド
Arrayコンストラクタに定義されたメソッドを実行できる。
例えば、sortメソッドは配列の要素を昇順にソートしてくれるメソッド。

```js
var data = [3,4,5,1,2];
data = data.sort();
console.log(data); //[1,2,3,4,5]
```
ちなみに、連想配列はArrayコンストラクタから生成していないので、これらのメソッドを使用することができない。

## 関数に対するコンストラクタ
### Functionコンストラクタについて
jsの関数はFunctionコンストラクタから生成されたオブジェクトと見なすことができる。
最後の引数には、生成する関数の実行コードを指定。
それ以外には生成する関数の引数名を指定。
以下の３つは書き方は違うが、どれも関数addを定義しており、実行方法、結果共に同じ。

```js
var add = new Function('num1','num2','return num1 + num2');
```
```js
function add(num1,num2){
  return num1 + num2;
};
```
```js
var add = function(num1,num2){
  return num1 + num2;
};
```
### Functionコンストラクタのメソッド
Functionコンストラクタに定義されたメソッドを実行できる。
例えば、callメソッドは関数内で使用するthisの参照先を変更することができます。

```js
var Sample = function(value){
  this.value = value;
};
Sample.prototype.show = function(){
  console.log(this.value)
}

var sample1 = new Sample(1);
var sample2 = new Sample(2);

sample1.show(); // 1を表示
sample2.show(); // 2を表示
sample1.show.call(sample2)　//　thisの参照先がsample2に代わり、2を表示

```
multiple rlib candidates for `iron` found とその解決策

# 始めに

あまりにしょうもないので、書く必要はあまりないですが...

コマンドを眺めてなんとなく察してください。
ちなみにIronはあまり関係ないです。

```sh:コンソール
$ cargo new iron # ironと言う名のプロジェクトを新規作成
$ cd iron/

# Cargo.tomlを記述
# main.rsを記述

$ cargo build
    Updating registry `https://github.com/rust-lang/crates.io-index`
 Downloading iron v0.6.0
             .
             .
             .
   Compiling iron v0.6.0
   Compiling iron v0.1.0 (file:///home/owner1/iron)
error[E0465]: multiple rlib candidates for `iron` found
 --> src/main.rs:1:1
  |
1 | extern crate iron;
  | ^^^^^^^^^^^^^^^^^^
  |
note: candidate #1: /home/owner1/iron/target/debug/deps/libiron-963e08b973c03147.rlib
 --> src/main.rs:1:1
  |
1 | extern crate iron;
  | ^^^^^^^^^^^^^^^^^^
note: candidate #2: /home/owner1/iron/target/debug/deps/libiron-0522d99389c4e8dc.rlib
 --> src/main.rs:1:1
  |
1 | extern crate iron;
  | ^^^^^^^^^^^^^^^^^^

error[E0463]: can't find crate for `iron`
 --> src/main.rs:1:1
  |
1 | extern crate iron;
  | ^^^^^^^^^^^^^^^^^^ can't find crate

error: aborting due to 2 previous errors

error: Could not compile `iron`.

To learn more, run the command again with --verbose.
```

この解決に1時間くらい頭を抱えていました。



# 原因と解決策

```sh:原因
$ cargo new iron
```

プロジェクト名にモジュール名と同じものを入れていたのが問題でした。

解決策を次に示します。
というかプロジェクト名を変えるだけです。

```toml:Cargo.toml
[package]
name = "iron_sample"
```



# 終わりに

プロジェクト名は被らないようにしよう！

もし何か気づいたこと、気になったことがあれば教えていただけると幸いです。
Rubyの変数についてのまとめ

#はじめに
Rubyを学んでいる中で、変数の種類と使える範囲（スコープ）についてなかなか理解するのが難しかったので、自分なりにまとめてみました。（現段階で学んだ範囲でまとめましたので使い方や言葉が限定的すぎるかもしれません。）

##変数の種類について

今回は下記4種類の変数についてまとめました。
下に行くほど使える範囲（スコープ）が広いです。

- ローカル変数
- インスタンス変数
- クラス変数
- グローバル変数



##全体像をつかむ

自分で理解したことをまとめて全体像として把握したのが下記の画像になります。
ここから1つずつ変数ごとに分けてまとめていきます。

![Rubyの変数まとめ.png](https://qiita-image-store.s3.amazonaws.com/0/242529/2b4d0679-6ec2-415b-25a4-d7e64e376d68.png)

##ローカル変数

書き方：英字（小文字）または_から始める
使える範囲：定義されたメソッド内

全体像では、infoというインスタンスメソッドの中で定義されているので、**このinfo内でしか使えません。**

```ruby:sample.rb
# インスタンスメソッド
def info
  # ローカル変数
  intro = "この猫ちゃんは"
  "#{intro}#{@@area}に住んでいて、名前は#{@name}、毛色は#{@color}です。"
end
```


##インスタンス変数

書き方：@から始める
使える範囲：インスタンスが生成されたクラス内のインスタンスメソッド

インスタンス変数は、initializeメソッドを使ってインスタンスが生成された際に自動で代入されるようにします。

```ruby:sample.rb
def initialize(name:, color:)
  # @インスタンス変数
  @name = name
  @color = color
end
```

インスタンス変数が使えるのは**インスタンスが生成されたクラス内（ここならCat_tokyoクラス）のインスタンスメソッド内**です。

```ruby:sample.rb
# インスタンスメソッド
def info
  # ローカル変数
  intro = "この猫ちゃんは"
  "#{intro}#{@@area}に住んでいて、名前は#{@name}、毛色は#{@color}です。"
end
````

また、インスタンス変数は**インスタンスごとに情報を保持**しています。

```ruby:sample.rb
# インスタンス生成
tama = Cat_tokyo.new(name:"タマ", color:"白")
tora = Cat_tokyo.new(name:"トラ", color:"茶トラ")
```

ですので、呼び出したインスタンスに応じて変数の中身は変わります。

```ruby:sample.rb
# インスタンスメソッド呼び出し
puts tama.info # => この猫ちゃんは東京に住んでいて、名前はタマ、毛色は白です。
puts tora.info # => この猫ちゃんは東京に住んでいて、名前はトラ、毛色は茶トラです。
```

##クラス変数

書き方：@@から始める
使える範囲：定義されたクラス内

クラス変数は**クラスで保持している情報**です。

```ruby:sample.rb
@@area = "東京"
```

クラス変数は、クラス内のインスタンスメソッドとクラスメソッド両方で使えます。

```ruby:sample.rb
# インスタンスメソッド
def info
# ローカル変数
  intro = "この猫ちゃんは"
  "#{intro}#{@@area}に住んでいて、名前は#{@name}、毛色は#{@color}です。"
end

# クラスメソッド
def self.question
  "#{@@area}に猫ちゃんが何匹住んでいるか知っていますか？"
end
```

##グローバル変数

書き方：$からはじめる
使える範囲：プログラム全体

プログラムのどこからでも呼び出せる変数だが、全体に作用するためうっかり他の変数に干渉し予期せぬエラーを引き起こすこともあり得るので使用には注意が必要。
今回は書き方と使える範囲（スコープ）だけの確認とします。

##まとめ

ひとつひとつの書き方はわかっても全体像を把握しないと理解するのは難しいのだなぁと感じました。
先にまとめた全体像からコードを引っ張ってきて説明を付けてみたのでわかりずらかったかな…という感じがしますが、また勉強を進めて理解が深まったら改めてまとめてみるかもしれません。
Oracleに愛着を持つため名前の由来について調べてみた

#1 はじめに
ここ最近、仕事でOracleのDBを使っているのだが、ドンづまっている。。。
今までDBはMySQLしか使用したことがなく、他のRDBMSといっても『基本、SQLの操作が出来れば楽勝でしょう！！』と完全になめていたため、シノニムやらヒント句やら表領域やら次々と繰り出される新概念の前になす術無しといった状態だ。（※MySQLでもあるものかもしれないが情弱のため俺は知らない）
完全に苦手意識を持ってしまっているので、取りあえずOracleに愛着を持つため難しい技術的なことは置いといて名前の由来について調べてみた。

#2 名前の由来
『教えて！goo』というお悩み相談サイトに回答がのっていたので、以下引用

[オラクル社の名前の由来って・・・](https://oshiete.goo.ne.jp/qa/179835.html)
>日本オラクルの社長の講演で、以下のように発言しています。
>「人間にとって、情報ネットワークの起源は“神の言葉（神託）”を第三者に語り部を通して伝えたことである。」
>「（わが社が）世界の情報ネットワーク社会をリードしていくことはうなずける話である。」
>“神託”を英語でoracle（オラクル）というので、そこから社名としたと思われます。

なるほど、俺は神の伝言を伝えるシャーマンだったのか
仕事中トランス状態に入るのもうなずける。。。

#3 CIA向けのプロジェクトコードネーム

もっと愛着を持つため創業者についても調べていると、以下の内容を発見。

[【波乱万丈】オラクル創業者、ラリー・エリソン氏のこれまでとこれから](https://kigyotv.jp/news/lawrence-j-ellison/)

>エリソン氏自ら“オラクル社製品を最初に買ったのはCIAであった”と後に述べているように、同社が初めて受注した仕事は、CIAからのデータベースの案件でした。

>CIA等の公的機関や民間企業向けのビジネスで順調に業務拡大した同社は、1983年に社名を現在のオラクル社に変更します。

>この“オラクル”という名称は、同社が初めて受注したCIA向けビジネスのプロジェクトコードネームでした。

設立当初は、Software Development Laboratories ( SDL) という名前だったらしい。

#4 結論
ちょっと愛着でた。
Vue.jsのdataオブジェクトを参照する際に Uncaught (in promise) TypeError: Cannot set property 'foo' of undefined

Promiseパターンで返ってくる値を、dataオブジェクトの`foo`にセットします。

```js
export default {
  name: 'foo',
  data() {
    return {
      foo: ''
    }
  }
...
```

```js:Promise-pattern(Before)
getData: function() {
  this.$firestore.collection('posts').where('categories.cat', '==', true)
    .get()
    .then(function(querySnapshot) {
      let data = []
      querySnapshot.forEach(function(doc) {
        data.push(doc.data())
      })
      this.foo = data
    })
```

## Uncaught (in promise) TypeError: Cannot set property 'foo' of undefined
「`undefined`の`foo`には何もセットできんぞ！！」と怒られてしまいます。

## 解決策: `this`へのreference用変数(self)をつくる
```js:Promise-pattern(After)
getData: function() {
  let self = this
  this.$firestore.collection('posts').where('categories.cat', '==', true)
    .get()
    .then(function(querySnapshot) {
      let data = []
      querySnapshot.forEach(function(doc) {
        data.push(doc.data())
      })
      self.foo = data
    })
```

無事、dataオブジェクトの`foo`に対して返り値をセットすることができました。:tada:
`this`や変数のscope範囲を理解していないとハマります...。

## 参考リンク
- javascript, promises, how to access variable this inside a then scope  
https://stackoverflow.com/questions/32547735/javascript-promises-how-to-access-variable-this-inside-a-then-scope
Server Sent Events の使い方

次のページを参考にしました。
[https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)

実行結果
![sse_mar2101.png](https://qiita-image-store.s3.amazonaws.com/0/179446/57c97c1a-59de-ae22-cdce-465a95e808f5.png)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Server Sent Event</title>
<link href="event01.css" rel="stylesheet">
<script src="event01.js"></script>
</head>
<body onload="initial();">
<header>
<h1>event01</h1>
</header>
<article>
        <ol id="msgs"></ol>
</article>
<hr />
Mar/21/2018 PM 12:16<p />
</body>
</html>
```

```css:event01.css
h1 { font-size: 14pt; padding: 1px 10px;
        border-style: solid; border-width: 0px 0px 2px 7px; border-color:green; }

body { background: #EEFFEE; }

article { background: white; margin: 10px 0px;  padding: 10px; }
```

```js:event01.js
// -------------------------------------------------------------------
/*
	event01.js

					Mar/21/2018
*/
// -------------------------------------------------------------------
var EventSource = window.EventSource || window.MozEventSource

function initial ()
{
        if (!EventSource){
            alert("EventSourceが利用できません。")
            return
        }
        
var source = new EventSource ('event01.php')

source.onmessage = function(event)
	{
	var ol = document.getElementById('msgs')
	ol.innerHTML = '<li>' + event.data + '</li>' + ol.innerHTML
	}
}

// -------------------------------------------------------------------
```

```php:event01.php
<?php
// ------------------------------------------------------------------
//	event01.php
//
//					Mar/21/2018
//
// ------------------------------------------------------------------
date_default_timezone_set('Asia/Tokyo');

header('Cache-Control: no-cache');
header("Content-Type: text/event-stream\n\n");

$counter = rand(1, 10);
while (1) {
  // Every second, send a "ping" event.
  
  echo "event: ping\n";
  $curDate = date(DATE_ISO8601);
  echo 'data: {"time": "' . $curDate . '"}';
  echo "\n\n";
  
  // Send a simple message at random intervals.
  
  $counter--;
  
  if (!$counter) {
    echo 'data: This is a message at time ' . $curDate . "\n\n";
    $counter = rand(1, 10);
  }
  
  ob_end_flush();
  flush();
  sleep(1);
}

// ------------------------------------------------------------------
?>
```

次のバージョンで動作を確認しました。

```text
$ php --version
PHP Warning:  PHP Startup: grpc: Unable to initialize module
Module compiled with module API=20190902
PHP    compiled with module API=20200930
These options need to match
 in Unknown on line 0
PHP 8.0.6 (cli) (built: May  5 2021 04:49:35) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.6, Copyright (c) Zend Technologies

```
特定IPのアクセスユーザの除外(スパムアクセスの除外）

微妙な間隔（1分に1回とか）でアクセスしては悪さするロボットがいたのでアクセス拒否した。

.htaccessのRewriteEngine Onの前に

```htaccess
SetEnvIf Remote_Addr "^(999\.999\.999\.999|999\.999\.999\.999)$" denyIPs

order allow,deny
allow from all
deny from env=denyBot
```

こんな感じでIPをパイプで繋いで複数あるときにも対応しておく。
PyMieScatt > Mie_SD() > equation of aSDn

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 16.04 LTS desktop amd64
TensorFlow v1.2.1
cuDNN v5.1 for Linux
CUDA v8.0
Python 3.5.2
IPython 6.0.0 -- An enhanced Interactive Python.
gcc (Ubuntu 5.4.0-6ubuntu1~16.04.4) 5.4.0 20160609
GNU bash, version 4.3.48(1)-release (x86_64-pc-linux-gnu)
scipy v0.19.1
geopandas v0.3.0
MATLAB R2017b (Home Edition)
ADDA v.1.3b6
gnustep-gui-runtime v0.24.0-3.1
```

### 関連

- [PyMieScatt > LowFrequencyMieQ() > for small size parameter](https://qiita.com/7of9/items/eef138257744e0442c2f)
- [PyMieScatt > LowFrequencyMieQ() > Equation of Qext | 新人応援 > １次情報と実装の乖離](https://qiita.com/7of9/items/c612d72bd5b17b426916)
- [PyMieScatt > LowFrequencyMieQ() > Equation of Qsca](https://qiita.com/7of9/items/141d3d92509af5027b0e)
- [PyMieScatt > LowFrequencyMieQ() > Equation of g](https://qiita.com/7of9/items/83dd60e6d7270b2f4c67)
- [PyMieScatt > LowFrequencyMieQ() > Equation of Qb](https://qiita.com/7of9/items/5878d4d17448657b9f7f)


### Reference

- Bohren C.F. and D. R. Huffman, "Absorption and Scattering of Light by Small Particles", John Wiley, New York, NY (1983)
- PDF: [MATLAB Functions for Mie Scattering and Absorption, Research Report No. 2002-08, June 2002](https://omlc.org/software/mie/maetzlermie/Maetzler2002.pdf) by Christian Mätzler

### Equation of aSDn

https://github.com/bsumlin/PyMieScatt/blob/master/PyMieScatt/Mie.py#L242

aSDnは以下のように実装されている。

```math
aSDn = \pi (\frac{dp}{2})^2 n(dp) 10^{-6}
```

上記の式と関係があるのはdocumentの以下の$\beta$の式。
http://pymiescatt.readthedocs.io/en/latest/forward.html#functions-for-polydisperse-size-distributions-of-homogeneous-spheres

この値と積分したい値(例: Qext, Qscaなど)をtrapz()で積分するのが、Mie_SD()での積分方法のようだ。
jenkinsから設定ファイルに日時を書き込む

# 背景
webサービスをメンテナンスモードに切り替えるのは、様々な方法があるかと思うが、
古来から特定のファイルの存在有無によって判定をする方法がある。

これでは、毎回その設定ファイルを編集（メンテナンス予定時間の変更）して、
サーバ台数分配置するのも面倒だったのでjenkinsで自動化してみた。


### シェルスクリプトあんまり書いたことなかったのでもっと良い方法があるかもしれません

# 作業内容
- jenkinsでjobを作成  
jobではまずパラメータのチェックを行う。

```
# 有効な日付ではない場合は終了する関数
function check_date() {
    check_empty $1
    check_empty $2

    if ${#1} -nq 8; then
         echo "年月日は8文字で入力してください"
         exit 1
    fi

    if ${#2} -nq 4; then
         echo "時刻は文字で入力してください"
         exit 1
    fi

    input_date="${1} ${2:0:2}:${2:2:2}"     
    echo $input_date

    if date -d "$input_date"; then
   	    :
    else
         echo "有効な日付ではありません"
         exit 1
    fi

    return 0
}

# 有効な入力でない場合は終了する関数
function check_empty(){
    echo "$1"
    if [ -z  "$1" ]; then
        echo "パラメータは空にはできません"
        exit 1
    fi
}

check_date ${start_date} ${start_time}
check_date ${end_date} ${end_time}
```

jenkinsでジョブに渡せるパラメータに”日付データ”といった形式が見当たらなかったので、
あんまりスマートではないが、取り急ぎ、日付と時間をそれぞれ文字列形式で渡した

- start_date　開始日付
- start_time　開始日付
- end_date  　終了日付
- end_time  　終了日付

パラメータで渡された日付を関数に渡して、有効な日付かどうかのチェックをする

- 設定ファイルを置換する

```
#別ファイルを作成
sudo cp maintenance.ini.sample maintenance.ini.edit

#開始日の置き換え
sudo sed -i -e "s/start_dt=.*/start_dt=${start_date:0:4}-${start_date:4:2}-${start_date:6:2} ${start_time:0:2}:${start_time:2:2}/g" maintenance.ini.edit

#終了日の置き換え
sudo sed -i -e "s/end_dt=.*/end_dt=${end_date:0:4}-${end_date:4:2}-${end_date:6:2} ${end_time:0:2}:${end_time:2:2}/g" maintenance.ini.edit

#ファイル名の変更
sudo mv maintenance.ini.edit maintenance.ini
```

- テンプレートファイルは不動のものを持っておきたいので、まず別ファイルでコピーする
- 渡したパラメータを用いて置換してsedコマンドでdateの設定を差し替える  
今回は```start_dt=yyyy-MM-dd HH:mm```と設定すれば良いものとしている
- ファイル名を正式なものに変更する

# 雑感

最初は正規表現を使ってパラメータをチェックしようとしたんですが、うまくいかんかったので、ちょっと助長になってしまった。

パラメーダを日付形式で受け取れればシンプルにできるのだが・・・
gitのユーザーセットしていなかったことに気づいた時

# そのせいで
過去のコミットが何個かプロジェクトのルートユーザーのコミットになってた。

rootになっているものだけ自身に変更するのはこうすればよいみたい。

```
$git filter-branch --commit-filter '
        if [ "$GIT_AUTHOR_EMAIL" = "root@example.co.jp" ];
        then
                GIT_AUTHOR_NAME="user";
                GIT_AUTHOR_EMAIL="user@example.co.jp";
                GIT_COMMITTER_NAME='user';
                GIT_COMMITTER_EMAIL='user@example.co.jp';
                git commit-tree "$@";
        else
                git commit-tree "$@";
        fi' HEAD
```

ただ、ホントにrootだったものも変わっちゃうので、そこは注意

その時は例えば直近３件のrootだけuserに変更したい場合

```
$git filter-branch --commit-filter '
        if [ "$GIT_AUTHOR_EMAIL" = "root@example.co.jp" ];
        then
                GIT_AUTHOR_NAME="user";
                GIT_AUTHOR_EMAIL="user@example.co.jp";
                GIT_COMMITTER_NAME='user';
                GIT_COMMITTER_EMAIL='user@example.co.jp';
                git commit-tree "$@";
        else
                git commit-tree "$@";
        fi' HEAD~3..HEAD
```

と、すれば良い
Thinkpad X1 (5th)のLinux環境でタッチパッドの2/3本指操作を有効にする

Thinkpad X1(5th)にLinuxを導入した後に、タッチパッドの基本操作、2本指スクロール、３本指スワイプ等を使えるようにするための設定メモです。

とりあえずタップ等のタッチパッド基本操作、2本指スクロール、3本指スワイプによる仮想デスクトップ切り替えなどを行えるようになります。たまにタップクリックだけが反応しなくなり、Enterキー押下で治るようなバグもオマケでついてきますが、タッチパッドがまともに反応しなかったり触れただけで左クリック反応する状況に比べれば劇的にタッチパッド生活が改善しました。

> NOTE: 色々と試行錯誤して設定したため、設定手順に漏れがあるかもしれません。もしうまくいかない場合はコメントで報告いただければ確認します。


## Manjaro Linuxを導入する

Mint Linux 18.3ではタッチパッドデバイスを正常に認識することができなかったため、Manjoro Linux 17.1(デスクトップ環境は別途Cinnamonをインストール)を導入しました。ハードウェア自動検出機能を備えてるというためか、同じLinuxカーネルバージョン(4.14/4.15)でも正常にタッチパッドデバイスを認識できるようになります。

下記URLによれば、Linux4.14以上であればタッチパッド問題を解決できるとありますが、当時は何故かLinux Mint 18.3ではLinuxカーネルを4.14や4.15にして後述する設定を行っても問題は解決しませんでした。必要なモジュールがロードされていないのかもしれませんが、詳しく調査せずにManjaro Linuxに切り替えました。

https://wiki.archlinux.jp/index.php/Lenovo_ThinkPad_X1_Carbon_(Gen_5)

## GRUBコンフィグにオプションを追加する

GRUBコンフィグ(/etc/default/grub)のGRUB_CMDLINE_LINUX_DEFAULTの設定値の末尾あたりに`psmouse.synaptics_intertouch=1`を追加します。

```bash
# 設定の末尾に追加
GRUB_CMDLINE_LINUX_DEFAULT="quiet resume=UUID=6ee7ddbe-027a-47c0-94f3-959400e04fc7 psmouse.synaptics_intertouch=1"
```

コンフィグ設定後は以下のようにGRUBコンフィグを反映して再起動します。

```bash
sudo update-grub
sudo reboot
```

ちなみにThinkpadをLinux上で使うための**他記事では`psmouse.proto=imps`の設定を追加していますが、この設定だと非常に原始的なタッチパッドとして動作するため注意してください**。高度なタッチパッド操作はできませんし、タッチパッドに備わってる細やかなセンサー制御ができないためか少し触れただけで左クリックとして反応してしまったり非常に不便です。おそらくMacbookやThinkpad X1等の高性能タッチパッドを備えてるノートパソコンに慣れている人は耐えられないです。

## GUIでタッチパッド設定を行う

GUI上の設定画面でタッチパッドの基本的な設定を行うことができます。設定は好みに合わせて設定すればOKです。ここまでの設定でタップ、2本指タップ、2本指スクロール等の基本的なタッチパッド操作は実現できます。


## libinput-gesturesを導入

3本指スワイプを実現するためにはジェスチャ対応する必要があります。これを実現するためにまずは`libinput-gestures`をインストールして自動起動するように設定します。

```bash
yaourt -S libinput-gestures
libinput-gestures-setup autostart
```

導入完了後は、下記のlibinput-gesturesのコンフィグファイルを設定を記述します。システム全体とユーザ毎にコンフィグは分かれています。

- /etc/libinput-gestures.conf -> (system wide default)
- $HOME/.config/libinput-gestures.conf -> (optional per user)

私の場合はMacOSのように3本指で仮想デスクトップを切り替えを行いたかったため、以下の設定をコンフィグファイルに記述しました。なお、私のManjaro Linux環境ではCinnamonをデスクトップ環境として使用しているため、他のデスクトップ環境などの場合は異なるジェスチャ設定が必要になるかもしれません。ちなみに`libinput-gestures`自体はピンチ操作等にも対応していますが、個人的には使用していないため設定は入れていません。

```
gesture swipe up	xdotool key ctrl+alt+Up
gesture swipe down	xdotool key ctrl+alt+Down
gesture swipe left	xdotool key ctrl+alt+Right
gesture swipe right	xdotool key ctrl+alt+Left
```

libinput-gesturesの情報については下記URLあたりが参考になります。

https://wiki.archlinux.jp/index.php/Libinput#libinput-gestures
https://github.com/bulletmark/libinput-gestures

## タップクリックだけたまに反応しなくなった時の対処方法

タップクリックが効かなくなったら、とりあえずEnterキーを押下しましょう。

どうやらカーソル移動時に稀にタッチパッドのイベントが正常に処理できず、その場合にタップクリックだけ効かなくなります。タッチパッドを押し込んでのクリックやその他の操作はできます。このような場合は、Enterキーを押下すると再びタップクリックが使えるようになります。ちなみにアルファベットのキーを押下しても治りません。
Windows10にdrupalをセットアップする

drupalのサブディレクトリの設定で少しはまったのでメモ

※サブディレクトリを指定しなければ、「5. サブディレクトリの設定」は必要なく正しく表示されます。


### 環境
-----------------
- xampp環境設定済み
- windows10
- DB名はdrupal
- PHP5.6.30

### 1. drupalのダウンロード
-----------------
https://www.drupal.org/ の 「Download & Extend」ページからダウンロードする(2018/3/21時点では8.5.0)

### 2. ダウンロードしたファイルの設置
-----------------
- 「http://localhost/cms/drupal/」 で動くようにしたいので xampp/htdocs/cms/ に解凍したdrupalを設置する


### 3. drupalの設定ファイルの作成
-----------------

以下のディレクトリのdefault.settings.phpをコピーし、settings.phpにファイル名を変更する

```
drupal\sites\default\settings.php
```

### 4. drupalのインストール
-----------------

http://localhost/cms/drupal にアクセスし画面の指示通りに進めていく

- 日本語を選択
- 標準を選択
- 見つかった警告　
  - →　いくつか警告がでたが今は無視して「とりあえず進むを選択」
- データベースの接続設定

→　インストールが開始される

### 5. サブディレクトリの設定
-----------------

インストールが完了したので http://localhost/cms/drupal を確認するとデザインが崩れていたり、リンクが機能していなかったりと以下のような画面になってしまった。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/184311/101bc813-650c-27c7-847d-55a8449883b5.png)

**▼ 以下の設定をするとサブディレクトリの設定が出来る**

RewriteBaseを有効にする。

```.htaccess:drupal/.htaccess
# RewriteBase /drupal
RewriteBase /cms/drupal
```

### 6.動作確認

これで以下のページが見れるようになった

http://localhost/cms/drupal

### 7.おまけ（見つかった警告について）

「4. インストール」で無視した警告内容について

- PHP


> 5.6.30
>  Drupal will drop support for this version on March 6, 2019. Upgrade to PHP version 7.1 or higher to ensure your site can receive updates and remain secure. See PHP's version support documentation and the Drupal 8 PHP requirements handbook page for more information.


→ 2019年3月6日にPHP5.6系のサポートが中止されるのでPHP7.1以上にアップグレードしてくださいとのこと

- PHP OPCODEのキャッシング

> 無効
>  PHP OPcode キャッシングはサイトのパフォーマンスを大幅に改善します。OPcache がサーバーにインストールされていることをお勧めします。

- LIMITED DATE RANGE

> Your PHP installation has a limited date range.
  You are running on a system where PHP is compiled or limited to using 32-bit integers. This will limit the range of dates and timestamps to the years 1901-2038. Read about the limitations of 32-bit PHP.

→　要するに2038年問題があるので64bitにすると解決しますとのこと

開発環境もどんどん最新化していかないとなぁ...
SlackとRaspberry PiでグローバルIPアドレスの変更を通知

# 前提条件

+ Raspberry Pi B+
+ Linux 4.9.16+
+ Python 2.7.9
+ Slack

# 背景

　実家のPCのメンテナンスを頼まれることが度々ある。PCを立ち上げてもらい、グローバルIPアドレスを探し出し、SSHログインを行いトンネルリングし遠隔サポートを行う。実家のグローバルIPを探すステップは面倒である。
　とはいえ、実家用に固定IPアドレスを払い出すというのもコスト的に難しい。

| 問題                           | 課題           |
|:-------------------------------|:---------------|
| 固定グローバルIPアドレス       | 運用コスト高い |
| 遠隔ログイン用のPCの24時間稼働 | 運用コスト高い |

## 1. グローバルIPアドレス
　固定されたグローバルIPアドレスは有れば便利であるが、IPアドレスが解ってさえすれば、変動でも構わない。IPアドレスが変わったタイミングで、手元に通知されれば良い。そうだ、Slackを使おう。

## 2. 遠隔ログイン用のPC
　一般的なPCを24時間稼働させるとコスト的厳しい。省電力PCであれば、電気台は節約できる。そうだ究極の省電力PCが販売されているのではないか。Raspberry PiをPCとして利用しよう。

# システム構成

<img width="819" alt="system.png" src="https://qiita-image-store.s3.amazonaws.com/0/147870/ba5ccfaa-29c6-686e-51e5-2a6f70d8f822.png">

## 構築手順

## 1. Slackアカウントの用意
Slackアカウントを取得し、Incoming Web-hookを取得する
https://api.slack.com/incoming-webhooks

## 2. プログラムの作成
Raspberry Pi用グローバルIPアドレスが変更されると、通知を飛ばすPythonプログラムを作成する。

### 開発のポイント

#### グローバルIPアドレスの取得

以下のサービスを利用するとグローバルIPを教えてくれる。
http://ipcheck.ieserver.net/

```python
import requests
res = requests.get('http://ipcheck.ieserver.net/')
```

### Slackへ通知

```python
import json
import requests
def sendSlackMsg(global_ipaddr):
    """ send message to Slack
    """
    msg = ''
    msg = '\\nglobal IP Addr : ' + global_ipaddr

    payload = json.loads('{"text": "%s"}' % msg)
    r = requests.post('<YOUR_SLACK_INCOMING_WEBHOOK>', data=json.dumps(payload))
    print r.status_code
    print r.text
```

　汎用的に利用できるため作成物をGitHubで公開した。
https://github.com/thesaitama/checkgip

### インストール

リポジトリのクローン

```bash
> git clone https://github.com/thesaitama/checkgip.git
```

　依存関係のインストールと設定ファイルテンプレートの作成する。

```bash
> cd checkgip
> pip install -r requirements.txt
> mv checkgip.sample.json checkgip.json
```

### 設定

　`checkgip.json`を編集し1.で取得したIncoming Web-hookを設定する。

```json:checkgip.json
{"slackWebhook": "<YOUR_SLACK_INCOMING_WEBHOOK>"}
```

　設定ファイルに次回比較用のIPアドレスが記録されるため、書き込み権限を付与する。

```bash
> chmod +w checkgip.json
```

## 3. 定期実行の設定
　作成したプログラムが定期的に実行されるよう`cron`を設定する。

```
# m h  dom mon dow   command
0 12 * * * python /<DEPLOY_DIR>/checkgip.py > /dev/null
```

## 4. セキュリティ対策
　Raspberry Piに各種セキュリティ対策を施す。

+ Brute force
+ iptables

等適切に設定する。（本稿では割愛する）

## 5. デプロイ
　構成した機材一式を、実家に物理的にデプロイする。

+ ケース（裸ではこころもとないため）
+ 電源（Micro USB 1.5A以上推薦）

## 6. 利用

+ グローバルIP変更があると、Slackに通知が飛ぶ。
+ 遠隔サポートが必要なタイミングで、Slackに記載されたアドレスにSSHログインを行う。

# 考察
　グローバルIPアドレスを探し出す苦労をしなくても良くなった。
　クラウド連携の遠隔サポートツールを導入すれば問題は解決するが、Raspberry Piは汎用性が高く、さらなる利用につなげることができそうだ。
PyMieScatt > LowFrequencyMieQ() > Equation of Qb

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 16.04 LTS desktop amd64
TensorFlow v1.2.1
cuDNN v5.1 for Linux
CUDA v8.0
Python 3.5.2
IPython 6.0.0 -- An enhanced Interactive Python.
gcc (Ubuntu 5.4.0-6ubuntu1~16.04.4) 5.4.0 20160609
GNU bash, version 4.3.48(1)-release (x86_64-pc-linux-gnu)
scipy v0.19.1
geopandas v0.3.0
MATLAB R2017b (Home Edition)
ADDA v.1.3b6
gnustep-gui-runtime v0.24.0-3.1
```

### 関連

- [PyMieScatt > LowFrequencyMieQ() > for small size parameter](https://qiita.com/7of9/items/eef138257744e0442c2f)
- [PyMieScatt > LowFrequencyMieQ() > Equation of Qext | 新人応援 > １次情報と実装の乖離](https://qiita.com/7of9/items/c612d72bd5b17b426916)
- [PyMieScatt > LowFrequencyMieQ() > Equation of Qsca](https://qiita.com/7of9/items/141d3d92509af5027b0e)
- [PyMieScatt > LowFrequencyMieQ() > Equation of g](https://qiita.com/7of9/items/83dd60e6d7270b2f4c67)


### Reference

- Bohren C.F. and D. R. Huffman, "Absorption and Scattering of Light by Small Particles", John Wiley, New York, NY (1983)
- PDF: [MATLAB Functions for Mie Scattering and Absorption, Research Report No. 2002-08, June 2002](https://omlc.org/software/mie/maetzlermie/Maetzler2002.pdf) by Christian Mätzler

### Equation of Qb

http://pymiescatt.readthedocs.io/en/latest/forward.html#LowFrequencyMieQ
https://github.com/bsumlin/PyMieScatt/blob/master/PyMieScatt/Mie.py#L175

Qb(or Qback}は以下のように実装されている。

```math
Q_{back} = \frac{1}{x^2}|\sum((2n+1)(-1)^n(a_n - b_n)|^2.
```

この式はBohren and Huffman (1983) p122にて定義されている。

式変形はなく１次情報そのままである。
TeXで表の中で改行する方法

#はじめに
この記事ではTeXにおいて表の中で任意の位置で改行する方法について書きたいと思います。先に結論を書いておくと列の要素にtabularを用います。

今回は例としてアジアの国の情報をまとめた表を作成します。

#ダメな例
まずは上手くいっていない例を示します。

```TeX:ng.tex
\documentclass[titlepage,a4paper]{jsarticle}

\begin{document}

\begin{table}[h]

\begin{center}
\caption{アジアの国々}

\begin{tabular}{|c|c|c|} \hline

国名&通貨&首都 \\ \hline


日本&円&東京\\ \hline

中国&元&北京\\ \hline

タイ&バーツ&クルンテープ・プラマハーナコーン・アモーンラッタナコーシン・マヒンタラーユッタヤー・マハーディロックポップ・ノッパラット・ラーチャタニーブリーロム・ウドムラーチャニウェートマハーサターン・アモーンピマーン・アワターンサティット・サッカタッティヤウィサヌカムプラシット\\ \hline
    
\end{tabular}

\end{center}

\end{table}

\end{document}
```

なにも意識せず普通に書いて出力すると以下のような表になります。
![example1.png](https://qiita-image-store.s3.amazonaws.com/0/239294/4e0922ba-7f21-5edd-8d4f-4597a820872b.png)
あえて極端な例を選んだこともありますが、長すぎて切れてしまっています。ここまでのことはなかなか起こりにくいかもしれませんが、他の列の要素の大きさとの兼ね合いで、改行してほしくないタイミングで改行されてしまったりということは十分に起こりえます。
#成功例
ではどうするかというと列の要素にtabularを用いて１行１列の表を作成することで、その中での改行が可能になります。具体的に書くと

```TeX:ok.tex

\begin{table}[h]

\begin{center}
\caption{アジアの国々改良版}

\begin{tabular}{|c|c|c|} \hline

国名&通貨&首都 \\ \hline


日本&円&東京\\ \hline

中国&元&北京\\ \hline

タイ&バーツ&
\begin{tabular}{c}
クルンテープ・プラマハーナコーン・アモーンラッタナコーシン・\\マヒンタラーユッタヤー・マハーディロックポップ・ノッパラット・\\ラーチャタニーブリーロム・ウドムラーチャニウェートマハーサターン・\\アモーンピマーン・アワターンサティット・サッカタッティヤウィサヌカムプラシット
\end{tabular}\\ \hline
    
\end{tabular}

\end{center}

\end{table}

\end{document}
```

となります。先程の例と変わった部分は行の要素に\begin{tabular}{c}\end{tabular}を書き、その間に文字をいれたところです。そして改行したい位置でバックスラッシュを二つ書くことで任意の位置で改行することができます。

出力結果はこのようになります。
![example2.png](https://qiita-image-store.s3.amazonaws.com/0/239294/d1ee63ca-59a7-a21f-f7dd-e65144fc3a11.png)

実際にバックスラッシュを二つ書いた位置で改行できていることが確認できるかと思います。

#まとめ
TeXにおいて表の中で任意の位置で改行するには列の要素にtabularを用いることで可能になります。

なお、表に関連する記事として[表の中に図を挿入する方法](https://qiita.com/rebi/items/f29d829f78b2226ffd14)についても書いていますので、合わせて参考になれば幸いです。

お読みいただきありがとうございました。
ESLint v4.19.0

前 [v4.18.0] | 次 [v5.0.0]

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">ESLint v4.19.0 has been released: <a href="https://t.co/SwEJAD0U83">https://t.co/SwEJAD0U83</a></p>&mdash; ESLint (@geteslint) <a href="https://twitter.com/geteslint/status/974752171030974470">2018年3月17日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ESLint 4.19.0 がリリースされました。
小さな機能追加とバグ修正が含まれています。

質問やバグ報告等ありましたら、お気軽にこちらまでお寄せください。

> 🏢 [日本語 Issue 管理リポジトリ](https://github.com/eslint/eslint-jp)
> 👫 [日本語サポート チャット](https://gitter.im/eslint/eslint-jp)
> 🏢 [本家リポジトリ](https://github.com/eslint/eslint)
> 👫 [本家サポート チャット](https://gitter.im/eslint/eslint)

# 🚀 本体への機能追加

ECMAScript 2018 言語仕様にて追加される構文をフルサポートしました。
新しい構文には次のものが含まれます。

- [Lifting Template Literal Restriction](https://github.com/tc39/proposal-template-literal-revision)
- [Rest/Spread Properties](https://github.com/tc39/proposal-object-rest-spread)
- [Async Iteration](https://github.com/tc39/proposal-async-iteration)
- [RegExp `s` (dotAll) Flag](https://github.com/tc39/proposal-regexp-dotall-flag)
- [RegExp Named Capture Groups](https://github.com/tc39/proposal-regexp-named-groups)
- [RegExp Lookbehind Assertions](https://github.com/tc39/proposal-regexp-lookbehind)
- [RegExp Unicode Property Escapes](https://github.com/tc39/proposal-regexp-unicode-property-escapes)
- [Promise.prototype.finally](https://github.com/tc39/proposal-promise-finally)

利用するには、設定ファイルに `ecmaVersion` を追加します。

```json:.eslintrc.json
{
    "parserOptions": {
        "ecmaVersion": 2018
    }
}
```

また、Rest/Spread Properties が正式な構文になったため `experimentalObjectRestSpread` オプションは非推奨になりました。
利用している場合は `ecmaVersion` に置き換えるようお願いします。

# 💡 新しいルール

特になし。

# 🔧 オプションが追加されたルール

## [#9994]: [one-var] consecutive

連続する変数宣言だけを1つにまとめるオプション`consecutive`が追加されました。

> ```js
> /*eslint one-var: [error, consecutive] */
> 
> //✘ BAD
> {
>   var a = 1
>   var b = 2
>   foo()
>   var c = 3
> }
> 
> //✓ GOOD
> {
>   var a = 1,
>       b = 2
>   foo()
>   var c = 3
> }
> ```
> [Open online demo](https://eslint.org/demo/#eyJ0ZXh0IjoiLyplc2xpbnQgb25lLXZhcjogW2Vycm9yLCBjb25zZWN1dGl2ZV0gKi9cclxuXHJcbi8v4pyYIEJBRFxyXG57XHJcbiAgdmFyIGEgPSAxXHJcbiAgdmFyIGIgPSAyXHJcbiAgZm9vKClcclxuICB2YXIgYyA9IDNcclxufVxyXG5cclxuLy/inJMgR09PRFxyXG57XHJcbiAgdmFyIGEgPSAxLFxyXG4gICAgICBiID0gMlxyXG4gIGZvbygpXHJcbiAgdmFyIGMgPSAzXHJcbn1cclxuIiwib3B0aW9ucyI6eyJwYXJzZXJPcHRpb25zIjp7ImVjbWFWZXJzaW9uIjo4LCJzb3VyY2VUeXBlIjoibW9kdWxlIiwiZWNtYUZlYXR1cmVzIjp7fX0sInJ1bGVzIjp7fSwiZW52Ijp7fX19)

# ✒️ `eslint --fix` をサポートしたルール

特になし。

[v4.18.0]: http://qiita.com/mysticatea/items/fddaa41416761eb84235
[v5.0.0]: http://qiita.com/mysticatea/items/f34097961bf2827b675d
[#9994]: https://github.com/eslint/eslint/issues/9994
[#9999]: https://github.com/eslint/eslint/issues/9999
[one-var]: http://eslint.org/docs/rules/one-var
[xxxx]: http://eslint.org/docs/rules/xxxx

<!-- 
![JSCS Icon](http://jscs.info/favicon.ico) JSCS 互換ルールです。
-->
マストドンバージョンアップメモ V2.2.0->V2.3.2rc2

- yum update する
- 以下ページを参考に、Ruby 2.5.0 をインストール

http://fnya.cocolog-nifty.com/blog/2018/01/mastodoncentos7.html

- bundler について調べる

https://qiita.com/io_fleming/items/14626a9cff44bc87e7db

難しい・・

- yarn について調べる

https://qiita.com/masterkey1009/items/50f95b1187646a7db385

難しい・・

- RAILS_ENV=production bundle exec rails mastodon:maintenance:remove_regeneration_markers

実行しておいた

- RAILS_ENV=production bundle exec rails mastodon:maintenance:add_static_avatars 

必要ないかも・・と思いつつ実行しておいた。

- elasticsearch をインストール
 
https://qiita.com/TakashiOshikawa/items/c698bfa28a5795a9facd

むずかしー！

- Mastodon の設定を実施

https://github.com/tootsuite/documentation/blob/master/Running-Mastodon/Elasticsearch-guide.md

全文検索有効にならないなぁ・・

念のため再起動・・状況変わらず・・

`RAILS_ENV=production bundle exec rails chewy:deploy`

このコマンドがエラーになってしまっているのが原因みたい？

```
Elasticsearch::Transport::Transport::Errors::BadRequest: [400] {"error":{"root_cause":[{"type":"mapper_parsing_exception","reason":"No handler for type [text] declared on field [text]"}],"type":"mapper_parsing_exception","reason":"Failed to parse mapping [status]: No handler for type [text] declared on field [text]","caused_by":{"type":"mapper_parsing_exception","reason":"No handler for type [text] declared on field [text]"}},"status":400}
```
Raspberry Pi にDockerを入れてmysqlコンテナを作成

#ハードウェア・OS
- Raspberry Pi 3 Model B Rev 1.2
- Raspbian GNU/Linux 9.4 (stretch)

#参考
- https://qiita.com/hisurga/items/7aca7484ac5bfd084294
- https://qiita.com/pugiemonn/items/b17288494e4b627f4475

#Raspberry PiにDockerをインストール
##dockerのインストール
```
$curl -sSL https://get.docker.com | sh
```

##非rootでもdockerを使用できるようにする
```
$sudo usermod -aG docker [username]
```

#MySQLコンテナの作成
##hypriotにある MySQL をダウンロードし、コンテナを作成する。
###この時、以下を指定しておく。
- 外部から接続できるように -p で 外部向けポート:コンテナ内ポート を指定
- タイムゾーンを -e TZ=Asia/Tokyo で環境変数に設定
- rootのパスワードを -e MYSQL_ROOT_PASSWORD=パスワード で環境変数に設定

```
docker run --name コンテナ名 -p 3306:3306 -e TZ=Asia/Tokyo -e MYSQL_ROOT_PASSWORD=MySQLのパスワード -d hypriot/rpi-mysql
```

##MySQLコンテナの開始
```
docker start mysql-sample
```

##実行中のコンテナの一覧
```
docker ps
```

##MySQLコンテナにログイン
```
docker exec -it mysql-sample bash
```

##MySQL に接続
```
mysql -u root -p
パスワードを聞いてくるので、MySQLのパスワードを入力
MySQLが使える
exit でMySQLから切り離し

exit でコンテナからログアウト
```

##コンテナの停止
```
docker stop mysql-sample
```
プログラムから見たメモリ


## はじめに

「コンピュータの動作にはメモリが大事」ということは、プログラマに限らず、多くの人が知ってることだろう。そしてメモリはプログラムとは切ってもきれない関係にある。ここでは、初心者向けに、メモリとはなんなのか、どういう役割があるのか、簡単に説明してみようと思う。（本来、専門書等で体系的に勉強することが望ましいのはいうまでもないが、ここでは"手っ取り早く理解したい＝つまみ食い”を想定している。)

## ２種類の記憶領域
コンピュータには大別して２種類の記憶場所がある。一つはストレージと呼ばる、データを保存しておく装置で、具体的にはハードディスクやSSDなどだ。音楽や写真、文章やエクセルなど、コンピュータのデータの保存場所といえば、直感的なのはこちらだろう。もう一つは、メモリと呼ばれる、一時記憶領域だ。一時、と名前が付いているように、ここは電源を落とすたびにリセットされる。メモリは、ストレージと違って、我々が直接操作して写真などのデータを保することはできない。では誰が何に使ってるのだろうか。

## メモリはプログラムにとって作業机
メモリは、「プログラム」が「作業領域として」使うための記憶領域だ。メモリ容量はプログラムから見れば、作業机の大きさに等しい。プログラムは、いろんな計算を実行する。途中で、計算結果を出すだろう。これらは”一時的に”、どこかに保存しておく必要がある。作業台に喩えれば、走り書きしたノートを机の橋に置いといて、それをみながらまた別の計算を進めるイメージだ。
作業机にものがたくさん溜まってきて、必要な走り書きをそれ以上置けなくなったら、プログラムは計算を継続できなくなる。「メモリ不足でプログラムを起動できません」なんてエラーメッセージを昔はよくみたものだが、これはそういうことだ。（厳密に言えば、データだけでなく、プログラムのコード自身もメモリに置かれる。）

## 作業机をみんなで使う方法
コンピュータに動いているプログラムが１つなら、話は単純だ。8Gのメモリを積んだコンピュータで動くプログラムは8Gのメモリがつかえる。しかし実際にはコンピュータでは、複数のプログラムが動いている。ワードで文章を書きながら、たまにブラウザでネットサーフィンして、かつiTunesで音楽を聴いている、、なんてことは普通だろう。（実際にはシステムを動かすための小さなプログラムが複数動いており、総数は１００を超える）では、この状況で作業机はどうなってるのだろうか。一つの作業机の上に様々なプログラムが計算結果を置いてるはずで、その場合、どうやって空いてる場所を見つけたり、他のプログラムが使ってる計算結果を上書きしてしまったり、逆に他のプログラムから読まれてしまったりしないのだろうか。

実は、１つのプログラムからは一枚のまっさらな作業机が見えている。机の大きさ（メモリ容量）は、どのプログラムからも一定の大きさだ。動いているプログラムの数で全体を分割してるのかな？と思うかもしれないが、そうではない。それだと、机を汚さなかったプログラムにも一定領域割り当てられてしまい、無駄になるし、逆に、机をたくさん使いたいプログラムは、実際には机がいっぱい空いているのに使えないという状態になる。ではどうしているかと言うと、どのプログラムからも、大きなまっさらな机が見えるようにしている。その大きさは、実際に積まれているメモリよりもはるかに大きいことが多い。他のプログラムがどれだけメモリを使っているかは、自分が使える領域には影響を及ぼさない。他人がどれだけ使おうが、自分はとても大きな机を使えるという夢のような状態なのだ。

##仮想メモリ
このような状態を作り出してるのは「仮想メモリ（Virtual memory)」という仕組みだ。
日本語訳である”仮想"は誤訳だという話もあるので、Virtualの語源に沿って説明する。Virtualの意味は、バーチャルリアリティといえば直感的にわかるだろう。実際にはありもしないものをまるでそこにあるかのように体験させることだ。仮想メモリは、まさに、ありもしないメモリをまるであるかのように見せる仕組みだ。プログラムから見えているまっさらで大きくてまだ誰も使っていない作業机は、実際には存在しない。そう、まさしく夢だったのだ。

実際に存在しているのは、様々なプログラムがすでに作業結果を積みまくっている、ごちゃごちゃした机だ。この汚い机をプログラムに渡したら、プログラムは、自分が使えるところをいちいち探しながら、なんとか計算結果をねじ込んで、時には分割したりして、計算をやらざるを得ない。これでは、プログラムが本来やるべき計算に集中できない。どのプログラムも、まず空いている場所を探して、計算結果をねじ込む、という作業を作り込むことが必要になってしまう。仮想メモリという仕組みは、この面倒な仕事を代わりにやってくれる。プログラムからは一枚のまっさらな机が見えるため、好きに使ってもらって構わない。使われた分だけ、仮想メモリの仕組みの方で、空いているところに分割したりしてねじ込んでいく。全てのプログラムが仮想メモリの上で動いているので、仕組みの方で使う場所の重複はさせないようにしているし、お互いに読むこともできないよう保護機能が働いている。

## 実際の限界
仮想メモリでとても大きな机が見えているとはいえ、実際には本物の机の大きさに制限されている。ではその大きさを超えたらどうなるのだろうか。答えは単純で、もうそれ以上計算ができなくなる。と、言いたいところだが、仮想メモリはもう少しだけ頑張ってくれる。喩えれば、机よりは少し使い勝手が悪いけど、、、地下室にある床を机がわりに使ってもいいわよ。という感じだろうか。これで、プログラムは計算途中で終了したりせずに動き続けることはできる。しかし、あくまでも地下室の床は目の前の作業机の代わりであって、とても行き来がめんどくさいのだ。具体的にはこの地下室の床は、`スワップ領域`と呼ばれ、ハードディスクなどが使われる。アクセス速度がメインメモリに比べて２桁以上違うハードディスクに計算結果を置くと、プログラム自体のスピードは劇的に下がるが、計算できなくなるよりは良い場合が多い。

したがって、プログラマはシステム全体のメモリ使用量に常に注意していなければならないし、自分の書いたプログラムがどの程度メモリを使っているか、机を汚しているかを意識してプログラムを書く必要がある。スワップ領域が使われているようであれば、危険信号で、本来使えるスペースに収めるのが良いだろう。

## まとめ
メモリはプログラムにとっての作業机。




TeXで表の中に図を挿入する方法

# はじめに
この記事ではTeXにおいて、表の中に図を入れる方法を書いていきます。結論としてはminipageを使うことになります。

今回は例として物理の数式に関する表を作成しますが、あえて数式の部分はTeXclipを用いて図にしています。

#実例
早速実例ですが、表の中に図を挿入するにはminipageを用いて以下のように書きます。

```latex:figInsertTable.tex
\documentclass[titlepage,a4paper]{jsarticle}

\usepackage[dvips]{graphicx}
\usepackage{float}

\begin{document}

\begin{table}[h]

\begin{center}
\caption{代表的な数式}

\begin{tabular}{|c|c|c|c|} \hline

数式&名前&関わった人&分野 \\ \hline


\begin{minipage}{4truecm}
      \centering
      \includegraphics[width=2truecm,clip]{newton.eps}
    \end{minipage}
&運動方程式&ニュートン&力学\\ \hline


\begin{minipage}{4truecm}
      \centering
      \includegraphics[width=4truecm,clip]{maxwell.eps}
    \end{minipage}
&マクスウェル・アンペールの法則&
マクスウェル・アンペール&電磁気学\\ \hline

    
\end{tabular}

\end{center}

\end{table}

\end{document}

```

こうしてminipageを用いると出力結果として以下のように図を表の中に挿入することができます。
![example1.png](https://qiita-image-store.s3.amazonaws.com/0/239294/d4ee96ee-4caf-38f6-c5e4-688058d931d8.png)

基本的な表を作成する分には

*数式&名前&関わった人&分野 \\ \hline*

といった具合にアンドとバックスラッシュを用いて書いていけばよいのですが、画像を挿入したい部分には先程の例ですと

\begin{minipage}{4truecm}
      \centering
      \includegraphics[width=4truecm,clip]{maxwell.eps}
    \end{minipage}
&マクスウェル・アンペールの法則&
マクスウェル・アンペール&電磁気学\\ \hline

とminipageを列の部分の要素に書く必要があります。なお、図の大きさは\includegraphicsのオプション内でwidthの値を変えることで調整可能です。

#まとめ
表の中に図を挿入するには列の要素にminipageを用います。

なお数式の中でベクトル表記として太字かつ斜体にしていますが、これを楽に行う方法は[こちらの記事](https://qiita.com/rebi/items/e4bf51eb94864c9e6cea)に書いてありますので、合わせて参考になれば幸いです。

お読みいただきありがとうございました。
ngrokをバックグラウンドで実行する

# 始めに

[ngrok](https://ngrok.com/)、便利ですよね。

ちょっとしたWebアプリを外部に出力する際など、ローカルで立ち上げているサービスを外部から見たい場合には有用なツールです。

その使い方で躓いたので、メモ程度に書いておきます。

というのも、僕はRaspberry Piをローカル環境におき、ssh接続でngrokを実行したのですが、バックグラウンドでの実行に少し手間取りました。

次のコマンドではうまくいかないのです。

```sh:ターミナル
$ ./ngrok http 8000 &
[1] 1024
```

一見うまくいっているようですが、その後`$ jobs -l`コマンドで確認しても、`STOP`状態になっており、正しく実行していませんでした。



# 解決策

```sh:ターミナル
$ ./ngrok http -log=stdout 8000
```

このコマンドで、標準出力へと実行結果を出力します。

もし、出力結果が欲しい場合は、次のようにするといいかもしれません。

```sh:ターミナル
$ ./ngrok http -log=stdout 8000 ｜ logger
```



# おわりに

~~URLはngrokサイトの[Statusページ](https://dashboard.ngrok.com/status)で確認しましょう。~~

よいラズパイライフをお楽しみください！

もし何か気づいたこと、気になったことがあれば教えていただけると幸いです。

参考: [ルーターを超えてリモートホストに接続できる ngrok（無料）を使って Raspberry Pi を IoT ハブにする方法](http://netbuffalo.doorblog.jp/archives/4974284.html)
PyMieScatt > LowFrequencyMieQ() > Equation of g

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 16.04 LTS desktop amd64
TensorFlow v1.2.1
cuDNN v5.1 for Linux
CUDA v8.0
Python 3.5.2
IPython 6.0.0 -- An enhanced Interactive Python.
gcc (Ubuntu 5.4.0-6ubuntu1~16.04.4) 5.4.0 20160609
GNU bash, version 4.3.48(1)-release (x86_64-pc-linux-gnu)
scipy v0.19.1
geopandas v0.3.0
MATLAB R2017b (Home Edition)
ADDA v.1.3b6
gnustep-gui-runtime v0.24.0-3.1
```

### Related (in Japanese)

- [PyMieScatt > LowFrequencyMieQ() > for small size parameter](https://qiita.com/7of9/items/eef138257744e0442c2f)
- [PyMieScatt > LowFrequencyMieQ() > Equation of Qext | 新人応援 > １次情報と実装の乖離](https://qiita.com/7of9/items/c612d72bd5b17b426916)

### Reference

- Bohren C.F. and D. R. Huffman, "Absorption and Scattering of Light by Small Particles", John Wiley, New York, NY (1983)
- PDF: [MATLAB Functions for Mie Scattering and Absorption, Research Report No. 2002-08, June 2002](https://omlc.org/software/mie/maetzlermie/Maetzler2002.pdf) by Christian Mätzler

### Equation of Qsca

http://pymiescatt.readthedocs.io/en/latest/forward.html#LowFrequencyMieQ
https://github.com/bsumlin/PyMieScatt/blob/master/PyMieScatt/Mie.py#L193

The implementation of g can be written as follows:

```math
g = \frac{4}{Q_{sca}x^2}\sum(\frac{n(n+2)}{n+1}(using a_n, b_n, g1[0:4]) + \frac{2n+1}{n(n+1)}\{Re(a_n)*Re(b_n)+Im(a_n)*Im(b_n)\}
```

An equation similar to the above can be found:
Bohren and Huffman(1983) 
p120

```math
Q_{sca}<cos\theta> = \frac{4}{x^2}[\sum_n (\frac{n(n+2)}{n+1}Re\{a_n a_{n+1}^* + b_n b_{n+1}^* \} + \sum_n \frac{2n+1}{n(n+1)}Re\{a_n b_n^*\} ]
```

Since, $g = < cos\theta >$, the coefficients are same.

~~However, the contents of the summation seems different.~~

#### 1st summation

```math
Re(a_n a_{n+1}^* + b_n b_{n+1}^*) ... (1)
```

```math
a_n a_{n+1}^*
```
```math
= (Re\{a_n\} + iIm\{a_n\})(Re\{a_{n+1}\} - iIm\{ a_{n+1}\})
```

```math
= Re\{a_{n}\}Re\{a_{n+1}\} - - Im\{a_{n}\}Im\{a_{n+1}\}
```

```math
= Re\{a_{n}\}Re\{a_{n+1}\} + Im\{a_{n}\}Im\{a_{n+1}\} ... (2)
```

Eq.(1) becomes using Eq.(2)

```math
Re(a_n a_{n+1}^* + b_n b_{n+1}^*)
```

```math
= Re\{a_{n}\}Re\{a_{n+1}\} + Im\{a_{n}\}Im\{a_{n+1}\}
```
```math
+ Re\{b_{n}\}Re\{b_{n+1}\} + Im\{b_{n}\}Im\{b_{n+1}\}
```

From above, the 1st summation is same.

#### 2nd summation

```math 
a_n = Re\{a_n\} + i Im\{a_n\} ... (3)
```

```math
b_n = Re\{a_n\} + i Im\{b_n\} ... (4)
```

```math
a_n b_n^* = (Re\{a_n\} + i Im\{a_n\})(Re\{b_n\} - i Im\{b_n\})
```

```math
= Re\{a_n\} Re\{b_n\} - - Im\{a_n\} Im\{b_n\}
```

```math
Re\{ a_n b_n^* \} = Re\{a_n\} Re\{b_n\} + Im\{a_n\} Im\{b_n\}
```

From above, the second summation is same.
[Ruby]returnについて

#return文の勉強中に気になったことがあったのでメモっとく
return文とは、メソッドの中で　return 〜　と書いた時点の値（この場合は〜の値）を戻り値とする文で、returnが出た時点でメソッドは終了となります。

```
def hoge
  "a"
  "b"
  "c"
  return "d"
  "e"
  "f"
  "g"
end

puts hoge
# =>d　が戻り値となる
```

return文が無い場合は、最後に出てきた g が戻り値となります。

##気になったこととは
メソッド内で色々と値が発生したとしても、最後に発生した値がメソッドの戻り値なんだなと、、当然かもだけど気になった。