OmniAICreator/Qiita-1.07M huggingface dataset:
Maya python でノード選択とかのメモ

Maya 2018 or later を考えます.

## Python API の種類

* Legacy? python API (maya.cmds)
* PyMel
* OpenMaya(python2 api?) => C++ OpenMaya API とほぼ同等. こちらを推奨?

## PyMel
 
```
import pymel.core as pm
```

として使います. デフォルトでも pymel が呼べるようですが, 上記の呼び出しをすると最新?の pymel が使えるようです.

## ノードの選択

レガシー? なやりかたでは, `ls` して `select` と, いくらか面倒です.

PyMel では, PyNode で名前からノードの python object を取得できます.

```
trans = pm.PyNode('joint1')
print(trans)

# nt.Joint(u'joint1')
```

### Transform の設定

ノード名が既知の場合は, setAttr がいいでしょうか.

```
pm.SetAttr('joint1.translationX', 10)
```

ノード名が不明(or 複数 node を一括処理したい)ときは以下の API を使います

#### 回転, 移動など, ノード Transform(行列)の設定

Maya では Euler 回転です(default では XYZ order)

xform を使うか

https://download.autodesk.com/us/maya/2011help/CommandsPython/xform.html

pymel では setTranslation などで設定できます.

https://download.autodesk.com/us/maya/2011help/PyMel/generated/classes/pymel.core.nodetypes/pymel.core.nodetypes.Transform.html
初心者 Laravelの基礎知識学んでみた

前提
某スクールでLaravalの基礎知識を学ぶ課題が出たので、提出しつつQiitaでいつでも見れる様に纏めてみました。
最低限必要そうな知識を箇条書きして、分からない単語を掘り下げた内容になっています。間違いがあればご指摘して頂けたら幸いです

##①Laravelの特徴
・簡単なアプリケーションを自動生成できるフレームワークのこと。
・Laravel　= フルスタックフレームワークと呼ばれる
・MVCフレームワークの一種
・他のフレームワークCakePHPやSymfony)と違って学習コストが低い
・Bootstrapを実装している

##② ①で調べた結果、なんのことを言っているのかわからない単語について

###フルスタックフレームワーク

・データベースの操作(データ処理、ログイン機能)といったPHPでのWEB開発に必要な機能が全て揃っているフレームワーク


###MVCフレームワーク

・M(モデル)、V(ビュー)、C(コントロール)のそれぞれの頭文字を取った名称。
・MVCモデル言う概念を持ったフレームワーク。端的に言えば設計する方式を指す。

-M(モデル)..データの処理を行う
-V(ビュー)..ユーザーが入出力を行う
-C(コントロール)..MとVを制御する機能がある


###Bootstrap

・マークアップ言語(HTML,CSS)、JavaScriptを搭載したフレームワーク



###フレームワーク
-システム開発が楽に行えるプログラムのひな形、骨組みの事を指す。
-フレームワークには使い方のルールが存在する

例)決まった変数を使う、設定値専用のファイルに値を書く、共通処理は一つのファイルにまとめる

**フレームワークを使う上でのメリット**
1..汎用性高いパッケージが予め存在するので使い勝手が良い
2..共同開発をする際、互いのレベルに合わせやすいが故に、個人の個性が排除されやすい
3..普段よく使う処理などはフレームワークを使った方が早く済む。


**フレームワークを使う上でのデメリット**
1..上記に記述した使い方のルールがある為、ルールから外れた処理は無理にでも書かなければならない。
その為、フレームワークで書くプログラムを想定しなければ後ほど一から作り込必要がある。
RDSのフェイルオーバー時に不安なところを、本番環境で試してみた

# 発端

はじめにサービス自体がでかいと聞いていたから、おれはDBインスタンスひよって1サイズ大きめで作ったんだ。
サービス開始後に落ち着いて、ログなどを見てみたら全然来ていない。
Google Analyticsも、そこまで行っていない。
ちょっともったいなくない。

## やりたかったこと

インスタンスを変更して、適切なサーバにしてもったいない感をなくしたかった。
お金は十分もらっているから、そのままにしていてもいいけど、節約したかった。


## 環境

・サービスが２つ立ち上がっているAPサーバ1台（アプリサーバ）
・RDS1台（db.t3.small)

## 手順

１．　対象DBのレプリカを作る
対象DBのレプリカを、db.t3.microで作成した。（変更したいインスタンスタイプ）
リードレプリカが作成中となる。
対象DBも変更中と出て少し焦る。（★焦りポイント１）
が、全然繋がる。安心して。

２．　対象DBのレプリカが作成される
このとき、APサーバの向き先を変えないといけないと思っていた。（★焦りポイント２）
が、変えなくていい。むしろ変えちゃうと書き込めない。変えちゃダメ。絶対

３．　対象DBのレプリカをマスタに昇格させる
このとき対象DBと、対象DBのレプリカが別物になり同期しなくなる。
同期しなくなるけどいいかとダイアログが出るので、押す。おれの動悸は激しくなる（★焦りポイント３）
ダイアログで脅してくるが、怖くないよ。

４．　対象DB（マスタ昇格後）が出来上がる。
このあとに、APサーバの向き先を、対象DB（マスタ昇格後）に変更する。
なるべく速やかに変更できるようにする。もしくはメンテに入れておくのがいいね。

５．　対象DBの古い方を停止する。
両方ともマスタになっていて、古い方はもういらないので一気に削除としない。（★焦りポイント４）
もしかしたら、向き先が変わってないかもしれないとかあるかもしれないので一旦停止がいいと思う。

６．　対象DBの古い方を削除する。
対象DBを停止してから、一晩寝て起きてから、アクセス来てないのを確認し、削除がいいと思う。
ゆっくり行こうぜ。

## やってみて

本番で試したら汗がじとっとして、やせる可能性がある。
ダイエットにオススメ！！
macOS Catalina 10.15に上げたら VSCodeでGoがデバッグできなくなった

# 問題
ある日Macをアップデートしたら、VSCodeでデバッグできなくなった。辛い。
**VSCode > Debug > Start Debugging** とすると
`could not launch process: debugserver or lldb-server not found: install XCode's command line tools or lldb-server Process exiting with code: 1`
と言われてしまう。。。

# 解決
Terminalにて、

```sh
$ xcode-select --install
```

と打つと、親切にも「コマンドラインツールが必要です、ダウンロードしますか？😅」　と言ってくれるので、それに従いインストール→起動成功🎉

# 過程
- command line toolsが必要らしく、 https://developer.apple.com/download/more/ にアクセスして見てみたが、10.15用のToolsが 2019/10/25時点では無かった。
- XCodeが最新ではなかったため、アップデートすれば一緒に入ってくるかなと思ってアップデートしてみたけど無理。
- 最終的に上記の方法でいけた
Xcode11でIBOutlet

先日久しぶりにXcodeで開発を行いました。
そのとき少し困ったことがあったので記事にしたいと思います。

# 検証環境
Xcode 10.3
Xcode 11.0

# Storyboardを開いた画面を比較
<img width="318" alt="スクリーンショット 2019-10-25 13.49.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474483/60e54561-1656-ced3-269b-4fe5d13abba4.png">
Xcode10.3
<img width="322" alt="スクリーンショット 2019-10-25 13.50.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474483/8374be16-c59c-e7e4-9157-e9da7abc7836.png">
Xcode11.0
リンクアイコンがなくなっている...

# 解決方法
<img width="337" alt="スクリーンショット 2019-10-25 13.50.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474483/a30ef850-3c33-3376-9238-153a8092b56d.png">
Adjusts Editor Options ー> Assistant(Cntrl + Option + Command + Enterでも可)
これでStoryboardとView Controllerをスプリット表示できます
Alamofireで通信してみる。


iOS開発で、Laravelと組み合わせて、Alamofireを使用して通信してみる。

Podfile

```Podfile
pod 'Alamofire', '4.8.2'
```


サーバーサイドへ
http://bbsystem.local:8000/analysis/getData/1001/2020/2
をリクエストすると、以下のJSON返却

![スクリーンショット 2019-10-25 14.16.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33953/10246b10-4d68-f843-df49-6a7cd817fbbe.png)


簡易サーバーを使用している場合、以下で起動


```
 php artisan serve --host 0.0.0.0
```




```swift
import UIKit
import Alamofire

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        Alamofire.request("http://bbsystem.local:8000/analysis/getData/1001/2020/2")
            .responseString { response in
            debugPrint("Response: \(response)")
        }
    }
}

```

HTTP 通信を有効にする。

```info.plist
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
```


確認
![スクリーンショット 2019-10-25 14.26.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33953/23524bd9-3beb-b946-5a70-eb3f48fd09a2.png)
モバイルアプリ素人向けほぼノーコーディングでスマホアプリ開発サイトの備忘録 / No Coding iOS & Android App Development Memo

（最新更新2019年10月）
さあモバイル開発始めよう！ということで、いきなりAndroid Studioやxcodeインストールし始めてつまづく人も多いと思う。まずは手軽にGUIでアプリを作成してみたいのではないかと（私なんかも）。Android Studioだとkotlinにしますかjavaにしますかに始まり、projectがどうたらこうたら・・・　からの脱却！たくさんの無償、有償のサービスが転がっていてよくわからなかったので、自分なりにまずはかき集めてみた。無料で一番無難なものはMIT App Inventor 2かその派生から来ているAppy Builder（機能追加版？）が無難に見えた。ネットの情報量も多い（特に英語は）。
#完全無償か有償でなくてもそれなりに使えはするが有償版があるもの
　
●【完全無償】MIT App Inventor 2 https://appinventor.mit.edu/
　・Androidであれば世界的には一番メジャーなノーコーディング系のツールの模様
　・基本的な部品やサンプルがありそう、無料にしてはかなり高機能に見える
　・Androidのみ
　・iOS版が開発中（2019年10月時点ではまだ正式リリースされていない模様、利用者を限定している）
　http://doesappinventorrunonios.com/
　https://appinventor.mit.edu/blogs/evan/2019/09/25/mit-app-inventor-ios-version-0-9
　・ダウンロード版があるが、Windowsのみ　https://appinventor.mit.edu/explore/ai2/windows

●【完全無償】Appy Builder http://www.appybuilder.com/
　・**2019年8月よりオンラインではAPK作成、ダウンロードができなくなったことに注意**
　・MIT App Inventor の派生の様子、ハイレベルではMIT App Inventor 2と同じ
　・Appy Builder => MIT APP Inventor 2 へのインポートができない場合があるので（例えばspacerを入れている場合）、オンラインのブラウザだけで作成を考えている場合は（mac利用者等）MIT APP Inventor 2 で最初から作成した方が良さそう

●Thunkable https://thunkable.com
　・無料版でもできることはある
　・無料版だと開発したアプリをPrivateにできない（全てPublic扱いになる）
　・Android, iOS両方に対応
　・無料版の部品はあまり多くないかもしれない
　
●Kodular https://www.kodular.io
　・お金儲けしなければ無料
　・なぜかログインができず全容がわからない（サーバーパフォーマンス改善に関する通知が表示されていた）

●AppsGeyser https://appsgeyser.com/
　・基本的な部品やアプリのサンプルはありそう
　・Androidのみ
　・MIT App Inventor で対応できるのであれば、あえてこちらのサービスでないといけない理由はなさそう

●Buzztouch https://www.buzztouch.com/
　・iOS, Android両方に対応
　・無償は全ての機能が使える様子で30日有効で何もしなければ一旦アカウントが削除・キャンセルされてしまうが、事前にファイルダウンロードが可能なようなので、方法によっては再利用可能？

●AppArchitect / AppGyver http://www.apparchitect.com/
　・最終的なアプリ公開までのフローがわからなかった

#原則有償（初期のみ無償のケースもある、検索していろいろなところから拾ってきた一覧）
Yappli （日本がベース、無償版はなさそう）https://yapp.li/
Abtitu https://abtitu.com/
Andromo https://www.andromo.com/en/
Appery.io https://appery.io
Appy Pie https://jp.appypie.com/
AppMakr https://www.appmakr.com/ja/pricing/
Apps Builder http://www.apps-builder.com/
App Machine https://www.appmachine.com
AppYourself https://appyourself.net/en/
Biznessapps https://www.biznessapps.com/
Bubble https://bubble.io
BuildFire https://buildfire.com/
Jmango360 https://jmango360.com/
Mobile Roadie https://mobileroadie.com
Mobilous https://www.mobilous.com/ja/index.html
Yapp https://www.yapp.us/
ubuntu 18.04 LTSにpyenv環境の構築/基本的な使用方法

自分用にまとめたメモです．記述は必ずしも正確でない場合があります．
また，一部のコマンド実行結果は間に合わせに手元のMacBook Proで得られたものであり，したがってubuntuの場合には異なる表示をされることがあります．
## pyenv環境の構築

### 依存パッケージをインストールする

```shell
$ sudo apt-get install git gcc make openssl libssl-dev libbz2-dev libreadline-dev libsqlite3-dev zlib1g-dev
```

### pyenv自体をgitリポジトリからクローンしてくる

```shell
$ git clone git://github.com/yyuu/pyenv.git ~/.pyenv
```

### pyenvへのpathを通す
以下のように`echo`コマンドによって`.bash_profile`へ追記する (もちろん直接ファイルに書き込んでもok)．最後に`source`して，追記したpath設定を読み込む．

```shell
$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
$ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(pyenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile
```

## pyenvの基本的使用方法

### pythonの各バージョンのインストールについて
現在pyenvでインストール可能なpythonのバージョンを確認し，欲しいものを選んでインストール実行．

```shell
$ pyenv install --list # 現在インストール可能なバージョンの一覧を表示
$ pyenv install 3.6.4 # 例としてpython 3.6.4を指定
$ pyenv versions # 目的のバージョンがインストールされたことを確認
* system
  3.6.4
```

### `global`や`local`の実行
システム全体にわたって，デフォルトで特定のバージョンのpythonを使用する場合には`global`を実行する．

```shell
$ pyenv global 3.6.4
``` 
特定のディレクトリで使用するpythonのバージョンを指定するには，`local`を実行する．この設定は，globalよりも優先される．

```shell
$ pyenv local 3.6.4
```
現在どのバージョンを使用中か確認するには，`version`を実行．

```shell
$ pyenv version
  3.6.4
```
## 参考にした記事
- https://qiita.com/micheleno13/items/39ad85cfe44ca32f53ee
- https://qiita.com/1000ch/items/93841f76ea52551b6a97
- https://qiita.com/mogom625/items/b1b673f530a05ec6b423
php エイリアス ロジック


```php
  * アーティストエイリアス属性
     */
    public function getAliasStrAttribute()
    {
        $aliasArray = json_decode($this['alias'], true);
        if (isset($aliasArray)) {
            $aliasNames = array_column($aliasArray, 'name');
            $alias = '';


            for ($i = 0; $i < count($aliasNames); $i++) {
                if ($i + 1 < count($aliasNames)) {
                    $alias .= $aliasNames[$i] . '/';
                } else {
                    $alias .= $aliasNames[$i];
                }
            }
            return $alias;


        }
    }
```

↓だめだったやつ

```php

foreach ($aliasNames as $aliasName) {
    $i = 0;
    $i++;
    if ($i < count($aliasNames)) {
        $alias .= $aliasName . '/';  
    } else {
        $alias .= $aliasName;
    }
}
return $alias;
```
凡ミスで、毎回$iを初期化していた。。。foreachでもいけました。

修正版↓

```php

$i = 0;
foreach ($aliasNames as $aliasName) {
    $i++;
    if ($i < count($aliasNames)) {
        $alias .= $aliasName . '/';  
    } else {
        $alias .= $aliasName;
    }
}
return $alias;
```
UniVRMをAndroid向けにビルドするとMtoonで躓く現象の回避方法

## 環境
macOS 10.14.6
Unity 2018.4.9f1
UniVRM 0.53.0

## 起こったこと
UniVRMを含むプロジェクトをAndroid向けにビルドすると、次のようなエラーが発生し、ビルドに失敗した。

```
Shader error in 'VRM/MToon': invalid subscript '_LightCoord' at Assets/VRM/MToon/MToon/Resources/Shaders/MToonCore.cginc(163) (on gles)
```

類似のISSUEを探すと↓が見つかるが、この方法では回避できず。
[MToon issues on Unity Android project · Issue #238 · vrm-c/UniVRM · GitHub](https://github.com/vrm-c/UniVRM/issues/238)

## 回避方法
どうも次のような原因でビルドに失敗しているらしい。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Android向けビルドしたらMToonシェーダでエラー出てビルドできない！？と思ったら、グラフィックスAPIがGLES2なのがマズかったらしくてGLES3にしたら直った</p>&mdash; 海行プログラム (@kaigyoPG) <a href="https://twitter.com/kaigyoPG/status/1168851701052268544?ref_src=twsrc%5Etfw">September 3, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

試しにFile>BuildSettings>PlayerSettings>Android>OtherSettingsでGraphicsAPIをOpenGLES3のみにするとビルドが通った。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309048/84161587-e483-9ff4-bd9b-09600a24e060.png)
Access メモ　フォーム内のテキストボックスをクリア

すぐ忘れるので、自分用にメモ

フォーム内のテキストボックスをクリアする

```vb
Private Sub cmdClear_Click()
'[クリア]ボタンクリック時

  Dim ctl As Control
  
  On Error Resume Next
  'このフォーム内のすべてのコントロールを検索
  For Each ctl In Me.Controls
    With ctl
      If .ControlType = acTextBox Then
        'コントロールの種類がテキストボックスなら値をNull（空）に設定
        .Value = Null
      End If
    End With
  Next ctl

End Sub
```
Qiitaのマークダウン記法を試してみる

## 見出し

サイドバーの見出しにもなるのでしっかりと。

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5

> 見出しはレベル6まで対応している。

## リスト

* リスト
    * リスト
        * リスト

> リストはネストできる。

## 連番リスト

1. 1-1
1. 1-2
  1. 1-2-1
  1. 1-2-2
    1. 1-2-1
    1. 1-2-2

> 連番リストは2階層まで？

## チェックボックス

- [ ] チェック
- [x] チェック済

## 装飾

文字を**強調**
文字を*斜体*にする
文字を~~打ち消し~~する

## コードの挿入

### インライン表示

コードを `インライン表示` したい場合はこちら。

### コードの埋め込み

#### Java

```java
class Hoge{
  public static void main(String[] args){
  // Javaのコード
}
```

#### swift

```swift
class MySwift{
  func getHoge() -> Int{
    // swiftのコード
  }
}
```

#### javascript

```javascript
var hogeFunction = function(foo, bar){
  // javascriptのコード
}  
```

#### css

```css
.hoge{
  /*cssのプロパティ*/
}
```

#### html

```html
<html>
  <!- HTMLのタグ -->
</html>
```

## 引用

> 引用
>> 引用
>>> 引用
>>>> 引用
>>>>> たくさん引用できる

## リンク

リンクの埋め込み。Googleへの[リンク](http://google.com)

## 画像

画像の埋め込み。
![qiita](https://help.qiita.com/images/qiitan-icon.png)

## テーブル

|左寄せ|中央寄せ|右寄せ|
|:----|:-:|----:|
|テキスト1|centor|0|
|テキスト2|centor|10|
|テキスト3|centor|555|
|テキスト4|centor|123.456|

## 水平線

----

yeah めっちゃ horizon

----
----
AWSのS3のファイルの存在確認できるメソッド

## doesObjectExist($bucket, $key)

### 説明
パラメーター1　:　$bucket
例　:　Configure::read('aws.s3.*.bucket')

パラメーター2　:　$key
例：　ファイルのPath

CASE：
```
use Aws\S3\S3Client;

$s3Client = S3Client::factory([
    'region' => Configure::read('aws.s3.*.region'),
    'version' => Configure::read('aws.s3.*.version')
]);
$bucket = *;
$key = *;
$s3Client->doesObjectExist($bucket, $key);
```
注: [*]は自分の内容を替わります。
NFCとAWSLambdaとSlackでスマホをかざすして呼び出しをする

# はじめに
* NFCタグを使ってスマホをかざすだけで、Slackに通知をしたい
* 自分が座席にいないときに、いちいちメモを残してもらったり、他の人に言伝を頼んでもらうのが忍びない
    * 本当は呼び出されたくないという気持ちをぐっとこらえて、呼び出す仕組みを作る
* 複雑な操作をすると電話やメールと変わらないので、さっとできるものは何かと考えたら、ひとまずNFCタグかなという結論に
    * そのうちスマートボタンにするかも

## 前提
* SlackのWebHookのURLの払い出しは、様々なサイトで解説がありますので省略いたします。
* NFCタグは手元にあるものとします :smile: 

## 流れ
* 書き込みのフロー
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/caf9826c-6aac-5426-f1ca-97287c42329a.png" width=30%>

* 読み込みのフロー
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/ff378dd4-e140-18a1-81f8-b8ac72f64c8d.png" width=50%>


### 読み込みについて
* スマーフォン→NFCタグ
    * NFCなどで検索するとアプリがたくさんあり、一般的なアプリでブラウザアクセスがありますので、ダウンロードし、次項で払い出すAWS Lambdaアクセス用URLをいれ、Writeします

### 書き込みについて
* NFCタグ→スマートフォン
    * ただ読み込むだけなので、複雑な処理は不要です。
    * ただし、電源が入っていて画面を表示ホーム画面が出ている必要がある？(アプリ起動は不要です)
* スマートフォン→AWSLambda
    * 書き込みのタイミングでAWSLambdaのURLを使ってブラウザアクセスが行われるので、自動でブラウザ起動＆アクセスが行われます

* AWS Lambda→Slack
    * [AWS Lambdaで作るSlack bot (Incoming Webhook)](https://qiita.com/yokoc1322/items/553ad147b82277b2beca)　こちらを参考にさせていただきました。
    * 上記を参考にIncomingWebHookURLを埋め込み、API Gatewayでイベント契機を設定すると、下図の黒枠の部分にアクセス用URLが表示されます

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/2d1c8e4b-873f-958b-faf9-a3ead2afd0cd.png" width=50%>

* Slack
    * イベントがやってくるのを確認する
    * 
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/613fafd4-e82d-2084-fa1b-94c442be53f3.png" width=30%>

## 最後に
* NFCタグをかざすと直接WebHook(HTTP/POST)ができたらいいのになぁ
* 毎回ブラウザが起動してしまうのが、少し鬱陶しい
* スマホのID的なものだけでもとれたら、パラメタ化して条件分岐できるのですが、現状誰がかざしても同じメッセージ。。。
WebRTC janus-gateway を使って自作ビデオチャットサーバーを作る。

#概要
今やLINEだろうと、Skypeだろうと、slackだろうと当たり前についているビデオチャット機能。
自分で新しく作るアプリケーションにもその機能を作りたい。

ニコニコ生放送、YoutubeLive、TwitchみたいなStreamServiceを自分で作りたい。
そんなニッチな需要に答える記事となります。

世に出ているこういったサービスはWebRTCという技術を使っています。

>WebRTC - Web Real-Time Communication の略で、ブラウザどうしがプラグイン無しで直接通信し、映像や音声、データをリアルタイムにやりとりすることを可能にする技術。

今回はWebRTCのライブラリ Janus を使って以下のような構成を実現して、ビデオチャットサーバーを作ります。

![アーキテクチャ](https://vv1jfa.ch.files.1drv.com/y4meNodd7Zc8R4_GBjTbx-t6goeAIz88tPkBT-ojhjkwiWWIGz7DGTf9EK4NZzBf6XF4sdGl7awzHI3YypM04yYMl1in3ld3YgRrz260_HlNZljjb4UbkIhEuzkmuO5njwoQvpGLysO8MVNVVzBjZx5xvy24rU43EDlFG7K70MBhkziRpYY3keuOA7E4tp9Vn6sHIn2q-LC48UkaxUglOyfkQ?width=934&height=329&cropmode=none)

#Janusサーバーの構築

今回の前提環境(Windows Subsystem for Linuxでいけました)
>OS ubuntu 16.04

##ライブラリ群のインストール

```bash
$ sudo apt-get update
$ sudo apt-get upgrade
```

```bash
$ sudo apt-get install libmicrohttpd-dev libjansson-dev libnice-dev \
libssl-dev libsrtp-dev libsofia-sip-ua-dev libglib2.0-dev libopus-dev \
libogg-dev libcurl4-openssl-dev pkg-config gengetopt libtool \
doxygen graphviz libconfig-dev libavutil-dev libavformat-dev automake
```

websocketのインストール

`cmake がなかったら事前にapt install cmake`

```bash
$ git clone https://github.com/warmcat/libwebsockets.git
$ cd libwebsockets
$ mkdir build
$ cd build
$ cmake -DCMAKE_INSTALL_PREFIX:PATH=/usr -DCMAKE_C_FLAGS="-fpic" ..
$ make && sudo make install
```
libsrtp2.0をインストール

```bash
$ cd ~
$ wget https://github.com/cisco/libsrtp/archive/v2.0.0.tar.gz
$ tar xfv v2.0.0.tar.gz
$ cd libsrtp-2.0.0
$ ./configure --prefix=/usr --enable-openssl
$ make shared_library && sudo make install
```
##janusのインストール

```bash
$ cd ~
$ git clone https://github.com/meetecho/janus-gateway.git
$ cd janus-gateway
$ sh autogen.sh
$ ./configure --enable-post-processing --enable-docs --prefix=/usr/local
$ make
$ make install
$ make configs
```

`configure , make , make installは結構処理長いです。configureで結構warning出ますが気にせず…`

##janus起動

```bash
$ /usr/local/bin/janus &
```
`warningはめっちゃ出ますが起動できます。`

#Nginxサーバーの構築

##Nginxのインストール
```bash
$ apt install nginx
```
##janusのデモページのコンテンツを配置してNginxを起動

```bash
$ cp -rf ~/janus-gateway/html/* /var/www/html/ 
$ systemctl enable nginx
$ systemctl start nginx
```
#アクセスしてみよう

ブラウザから サーバーのIPにアクセス

![demo](https://ium72q.ch.files.1drv.com/y4mj71BKe51qk2J8Y_dikDbfcup-aM7yTpMP1357JT7AKh_IPiaMCQbYPySyd-aLj8fZkpNfHQMqoD5OZOYxEonyad6ClUa-710JhmcL2w1D_5R-0MvcMK-ekz6fXnIEgrmLywz3WT7vNKbsHEOY-aMp8QWZlliRGH0sgpEiYICDFSrSP05XtJnk2-VRn6ngWdrS7kk3BwxMYH2G8fFQRN36A?width=660&height=297&cropmode=none)

こんな感じの画面が出れば成功です。
上のDemos　からvideoRoom videocall などなど、いろんなデモが体験できます。
複数のデバイスからつないでお互いにvideochatなどもできます。

ちなみにですが、このデモサイトは公式も公開してくれていて、
https://janus.conf.meetecho.com/

にアクセスすれば同じものが見られます。
demoで配置したhtmlやjsを見ながら自分のwebサイトに配信ページ等を作りましょう。
Hamlの基本箇所についての復習①(基本的な書き方)

#はじめに
Hamlの書き方について書いていきます。
個人的にhtmlに対して苦手意識があったのですが、
hamlでビューファイルを書くようになってからは、苦手だと思うようになくなりました。
#内容
Hamlの基礎について書いていきますが、
導入方法などについては別途投稿したいと思います。
飽く迄、この記事は***Hamlの書き方の基礎***についてのみ書いていきます。
#実行
例えば、以下のようなhtmlファイルがあったとします。（一部を切り出し）

```html:index.html

<div class = "content1">
 <div class = "word1">
  <p>こんにちは</p>
 </div>
 <div class = "word2">
  <p>はじめまして</p>
 </div>
</div>
<div class = "content2">
 <p>こんばんは</p>
</div>
```

これをHamlで書き直す（又は変換）すると以下のようになります。

```haml:index.html.haml
.content1
  .content1__word1
    %p こんにちは
  .content1__word2
    %p はじめまして
.content2
  %p こんばんは
```

この書き方ならば`</div>`のような閉じタグを書く必要がないので、見た目にもスッキリしたコードになります。
また、CSSの書き方の一つである`sass`とも非常に相性が良いです。（別途投稿したいと思います）

#終わりに
今回はHamlの基礎的な書き方のみの記事になりましたが、実際にHamlを使用してコードを書くには様々なルールを守る必要がある他、事前の導入も必要です。
いずれ、それらについての記事も書きたいと思います。
swift UITabBarを使ってメニュー画面遷移を実装

UITabBarの使い方を画面下部にメニュー作成する例で解説。
ユーティリティーエリアにてtabbar選択ドラッグ、エディエリアのViewController下部へセット
![スクリーンショット 2019-10-25 13.01.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/ded13517-c497-ec7b-63cd-b49f0c414f84.png)
下記の様にセット更にTabBarItem選択TabBar上にItemを追加セットする。
![スクリーンショット 2019-10-25 13.02.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/1611a455-9ab2-bbb8-a77c-fdac725806b3.png)
実際のにメニューとしてiconImageをAssets.xcassetsに登録。
![スクリーンショット 2019-10-25 13.59.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/dc0b9825-c36e-a4bb-45bc-354dbb872fde.png)
![スクリーンショット 2019-10-25 13.38.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/7433ebf7-a78d-4395-e18a-07363c39f200.png)
![スクリーンショット 2019-10-25 14.02.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/14d175d5-deeb-ba03-97bf-2884689a235d.png)
各TabBarItemにtag番号を設定してしてメニュー切り替えのIDとする。
![スクリーンショット 2019-10-25 14.03.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/0d302e62-5d2e-0630-d713-288643286b6f.png)
![スクリーンショット 2019-10-25 14.04.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/c368a821-66ed-f8df-0f5d-94be8acb33f6.png)
Google ChartsのCombo Chartで右側のY軸に対応したデータを指定する

# ことのてんまつ
縦軸が左右に二つあるグラフ(2軸グラフ?)を使いたくて、Google Charts の ComboChart を調べていたのだけれども、巷に出回っているサンプルは複数の課題を一緒に説明しているサンプルコードが多くて、何が必要なのかがわかりにくい。。。読解力が乏しい私にもわかるように、ピンポイントで教えてください!!!

で、必要な部分だけを抽出した結果がこれです。

``` combocharts-sample.html
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="/javascript/combocharts-sample.js"></script>
  </head>
  <body>
    <div id="chart"></div>
  </body>
</html>
```
HTML側のPlaceholderとして\<div>が必要なので、'chart'という Id で\<body>の中に一つだけ\<div>を配置しています。


``` combocharts-sample.js
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    let data = [
        ['', 'Left-Y', 'Right-Y'],
        ['X1', 10, 10],
        ['X2', 20, 30],
        ['X3', 30, 60],
        ['X4', 20, 80],
        ['X5', 10, 90],
        ['X6', 20, 110],
        ['X7', 30, 140],
        ['X8', 20, 160],
        ['X9', 10, 170],
        ['X10', 20, 190],
        ['X11', 30, 220],
        ['X12', 20, 240],
    ];

    let dataTable = google.visualization.arrayToDataTable(data);
    
    let options = {
        width: 600,
        series: {
            // series[0]は、Left-Yの列のデータ
            0: {type: 'bars', targetAxisIndex: 0},
            // series[1]は、Right-Yの列のデータ
            1: {type: 'line', targetAxisIndex: 1},
        }
    }

    let element = document.getElementById('chart');
    let chart = new google.visualization.ComboChart(element);
    
    chart.draw(dataTable, options);
}
```
これで、こんなグラフが表示できます。
![combocharts.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491921/a03b8c4d-56a8-785f-7366-8982d1bd1999.png)
draw()に渡す options.series[n].targetAxisIndex に 0 を指定すると「左側の軸」、1を指定すると「右側の軸」のデータとして扱われるということでした。たったこれだけ。。。ちなみに、Defaultは 0 なので、「左側の軸」のデータの場合はあえて書かなくてもOKです。

vAxes や vAxis などの option もあって、そちらの Reference とにらめっこしていたので、targetAxisIndex で指定できることに気づきませんでした。。
firebase と vue.js 。windows10を添えて。

firebaseをそろそろ勉強しないと行けない。

・環境を整える
・firebase に デプロイする
・ローカルでデバッグしながらOKだったら デプロイするようにする

参考
https://qiita.com/Satachito/items/4a00b402970d657a88f3
https://www.cresco.co.jp/blog/entry/9035/

# node.js を ダウンロードし、インストール

[Download \| Node.js](https://nodejs.org/en/download/)


フォルダを作り、cd で移動

```

cd C:\Users\hideki\Dropbox\website\vuetest

```



パワーシェルをを管理者権限で開く
windows マーク > Windwos PowerShell

```

npm --version
node --version

```

最新版になっていればOK!


このエラーがでたら
vue : このシステムではスクリプトの実行が無効になっているため、

```

Set-ExecutionPolicy RemoteSigned

```
を入力


#firebase tools を インストール

```

npm install -g firebase-tools
firebase login

```

chrome が認証ページに飛ぶので認証。

# vue.js を インストール

```

npm install -g @vue/cli
npm install -g @vue/cli-service-global
npm install -g @vue/cli-init

vue init webpack hideki
cd hideki
npm run build//本番用
npm run start//開発用

```

この時点で
http://localhost:8080

で閲覧可能。


firebaseの初期化

```

firebase init hosting

```

以下聞かれたら dist フォルダを設定

```

What do you want to use as your public directory? dist


```


```

 firebase deploy

```

これで、デプロイされているはず。
https://＜Firebase のプロジェクト名＞.firebaseapp.com


/vuetest/hideki/package.json

```

"start": "npm run dev --open",

```

にしておくと、http://localhost:8080 にアクセスした時、vueファイルを保存するたびに更新してくれるので便利。
CI環境下のみ(?)発生するyarnエラー対策

## 背景
あるリポジトリにScrutinizerを導入したら、最初のinspectから速攻コケました。

Buildが通らない。スコアが見れない。

こまった。

ということで、、、(?)

エラー原因を調査してみました。

## エラー箇所
```
$ yarn install --force
```

Scrutinizer画面
![Screen Shot 2019-10-24 at 14.18.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390133/334e3e6a-72ae-9dfb-4ea1-b3924e9bbdfa.png)



## エラー内容
Request failed、、404エラー、、ふむふむ。

```
error An unexpected error occurred: "https://registry.yarnpkg.com/sass/-/sass-1.22.8.tgz: Request failed \"404 Not Found\"".
info If you think this is a bug, please open a bug report with the information provided in "/home/scrutinizer/build/yarn-error.log".
```

## 原因
本記事末尾に貼っているyarnのリポジトリ内のissue[1][2]内に同様のエラーについて議論がされていました。

読み進めてみると `yarn.lockが原因`とのことです。

具体的には、
yarn install 実行時に参照される yarn.lock ファイル内にエラー文内の “https://registry.yarnpkg.com/sass/… “ のURLが記録されており、
ここから404エラーが出ていました。


## 解決策
`yarn.lock` を削除することで解決できます。

自分も同じ状況になりましたが、参考記事内でも述べられている通り、なぜかCI環境下でのみ発生します。

今回は `Scrutinizer` なので、Settings > Configuration 内に下記を追加しておしまいです。

```
build:
    ...
    dependencies:
        before:
            - rm yarn.lock
    ...
```

再inspect...

![Screen Shot 2019-10-24 at 14.25.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390133/0d60daa6-3e8b-f088-d22d-0bcc21730f87.png)


＼ 🎉 ／

## おまけ
### その１
ScrutinizerのConfigurationには様々な設定が可能です。
https://scrutinizer-ci.com/docs/configuration/build_reference
必要に応じて使いこなしたいですね。

### その2
上記に示した解決策以外で試してみたものを下記に記します。

- エラー文の上にwarningで `package-lock.json` が云々と書かれていたので、
package-lock.jsonを消してから再inspectしましたが、
warningが消えたのみで同エラーは発生したので、今回の問題とは関係なさそうです。

- 別記事にまず `yarn upgrade --latest` をするとよい、みたいなことが書かれていたので、
やってみましたが、こちらも今回のエラーには関係なさそうでした。

## 参考記事
- [1]  [An unexpected error occurred: “https://registry.yarnpkg.com/<package>: Not found” #5865](https://github.com/yarnpkg/yarn/issues/5865) 
- [2] [An unexpected error occurred: Request failed \”404 Not Found\””. #2738](https://github.com/yarnpkg/yarn/issues/2738)
[Pycharm]Dlibの顔検出の複数人検出で困っています。

Pycharmでdlibを使って、webカメラを用いた顔検出を行なっています。（検出した顔の上に写真を貼り付けるプログラムになります。）
一人だけが顔検出されるところまではできたのですが、複数人の顔検出の仕方がわかりません。
コードは下記の通りです。どこを変えれば、複数人の顔が検出されるようになりますでしょうか？よろしくお願いします。

import cv2
import dlib
from datetime import datetime

IMAGE_PATH = "./niko.png"
CAPTURE_SCALE = 0.5

def main():

    detector = dlib.get_frontal_face_detector()
    predictor = dlib.shape_predictor("shape_predictor_68_face_landmarks.dat")

    cap = cv2.VideoCapture(0)

    while True:
        _, frame = cap.read()

        frame = img_resize(frame, CAPTURE_SCALE)
        h, w, _ = frame.shape

        img = frame
        dets = detector(frame[:, :, ::-1])

        if len(dets) > 0:
            parts = predictor(frame, dets[0]).parts()
            distance, pos = calc_distance_and_pos(img, parts)
            icon, icon_w, icon_h = load_icon(IMAGE_PATH, distance)

            if (pos != None) and (distance > 0.0):
                x = pos.x - int(icon_w / 2)
                y = pos.y - int(icon_h / 2)
                if (0 <= y) and (y <= (h - int(icon_h))) and (0 <= x) and (x <= (w - int(icon_w))):

                    img = merge_images(img, icon, x, y)

        cv2.imshow("camera", img)

        k = cv2.waitKey(1) & 0xff
        if k == ord('q'):

            break
        elif k == ord('p'):

            save_image(img)
            cv2.imshow("saved", img)


    cap.release()
    cv2.destroyAllWindows()



def load_icon(path, distance):
    icon = cv2.imread(path, -1)
    icon_height, _ = icon.shape[:2]
    icon = img_resize(icon, float(distance * 1.5 / icon_height))
    icon_h, icon_w = icon.shape[:2]

    return icon, icon_w, icon_h



def img_resize(img, scale):
    h, w = img.shape[:2]
    img = cv2.resize(img, (int(w * scale), int(h * scale)))
    return img



def calc_distance_and_pos(img, parts):

    cnt = 0
    pos = None
    p1 = None
    distance = 0.0

    for i in parts:
        if (cnt == 0):

            p1 = i
        if (cnt == 16):

            distance = ((p1.x - i.x) ** 2 + (p1.y - i.y) ** 2) ** 0.5
        if (cnt == 33):
            pos = i
        cv2.putText(img, str(cnt), (i.x, i.y), cv2.FONT_HERSHEY_SIMPLEX, 0.3, (0, 0, 255), thickness=1,
                    lineType=cv2.LINE_8)
        cv2.circle(img, (i.x, i.y), 1, (255, 0, 0), -1)
        cnt = cnt + 1

    return distance, pos



def save_image(img):
    date = datetime.now().strftime("%Y%m%d_%H%M%S")
    path = "./" + date + ".png"
    cv2.imwrite(path, img)



def merge_images(bg, fg_alpha, s_x, s_y):
    alpha = fg_alpha[:, :, 3]
    alpha = cv2.cvtColor(alpha, cv2.COLOR_GRAY2BGR)
    alpha = alpha / 255.0

    fg = fg_alpha[:, :, :3]

    f_h, f_w, _ = fg.shape
    b_h, b_w, _ = bg.shape


    print("f_w:{} f_h:{} b_w:{} b_h:{} s({}, {})".format(f_w, f_h, b_w, b_h, s_x, s_y))

    bg[s_y:f_h + s_y, s_x:f_w + s_x] = (bg[s_y:f_h + s_y, s_x:f_w + s_x] * (1.0 - alpha)).astype(
        'uint8')
    bg[s_y:f_h + s_y, s_x:f_w + s_x] = (bg[s_y:f_h + s_y, s_x:f_w + s_x] + (fg * alpha)).astype('uint8')

    return bg


if __name__ == '__main__':
    main()
Cronの代わりにcloudwatchとSNSで簡単自動実行

１回だけ定期実行して欲しいタスクがあるけども、
サーバーがオートスケーリングするためcronで設定すると
同時に複数回実行されてしまう・・・なんて場合の対処法です。
基本的にコードを追加することなく、非常に簡単に実行できます。
# CloudWatch EventsでSNSを呼び出し
まずは定期実行のトリガーをcloudwatchで仕込みます。

cloudwatchのメニュー「イベント」→「ルール」をクリックし、
「ルールの作成」から下記画面を表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310229/4a2f930c-9711-4792-0a0c-8ab75fa53d9a.png)
左側画面の「スケジュール」で実行タイミングを指定し、
右側画面の「ターゲット」で呼び出すトピック名を指定します。
この時表示されるトピック名は作成済みのSNSトピックのみなので、
未作成の場合は先にSNSトピックを作成してください。

また、「入力の設定」に定数などを指定すれば、
後述のSNSからのpost時にjsonデータが含まれますので、
これで実行時の制御を行うことも可能です。
# SNSからHTTPSでpost
SNSで通知する宛先はlambdaなども選べますが、HTTPSでpostすることもできます。
下記画面でpost先を指定すれば、cloudwatchで指定したjsonデータを含めてpostしてくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310229/7b095abe-6135-f5aa-f34f-a91cc49cd6bb.png)
#post先でタスクを実行
これだけ設定してあげれば、postしてあげた先のfunctionが実行されます。
簡単ですね。
【Android】NavigationDrawer開閉時、ハンバーガーアイコンの回転アニメーションを無効化する方法

#はじめに
DrawerLayout、NavigationView、Toolbarを使ったActionBarの管理を行う際、
ActionBarDrawerToggleを使ってDrawerLayoutへ紐付けてハンバーガーアイコン（<b>≡</b>）を表示している方が多いかと思います。

その際何も設定しないと、Drawerの開閉時にアイコンが回転するアニメーションが発生します。
オフにする場合は<b>[こちら](https://qiita.com/nissiy/items/b0c98cf210b7fe8833a7)</b>で書かれている通り、onDrawerSlideで対応することができますが
もっと簡単な方法がありますので、自分用のメモついでに書かせていただきます。

##対応方法
```kotlin:

// トグルの生成
val toggle = ActionBarDrawerToggle(activity, drawerLayout, toolbar, R.string.open_drawer, R.string.close_drawer)

// アイコンのアニメーションのON/OFF
toggle.isDrawerSlideAnimationEnabled = false

// DrawerLayoutへトグルを紐付け
drawerLayout.addDrawerListener(toggle)

```

これだけです。
isDrawerSlideAnimationEnabledをfalseにすることにより、ハンバーガーアイコンをタップした際のアニメーションをオフにできます。

一応、トグル生成時の引数の説明を書いておきます。
>1.Activity
>2.DrawerLayout
>3.Toolbar
>4.「引き出しを開く」アクションを説明する文字列リソース
>5.「引き出しを閉じる」アクションを説明する文字列リソース

第４、５引数に関しては適当な文字列で問題ないかと思います。

##引用元
https://qiita.com/nissiy/items/b0c98cf210b7fe8833a7
https://qiita.com/CUTBOSS/items/c1eeda5df0da757a00f9
http://y-anz-m.blogspot.com/2017/05/
Djangoで掲示板アプリを1から作るの。（その1）

#はじめに
pythonを勉強したくてdjangoを触りたくて、python初心者として１からアプリ作成の過程をまとめていこうと考えました。同じ境遇の方がいればぜひお読みください。

#Djangoでは
『プロジェクト』というものまず作り、その中に『アプリケーション』と呼ばれるディレクトリを機能やページごとに分類していくつか作ります。
そして、それぞれの『アプリケーション』の中のファイルにコードをバシバシ書いていくって感じですね。

#流れ
1.  プロジェクトの作成
2.  アプリケーションの作成
3.  データベースの作成
4.  パスを通す
5.  コードをかく

その1では「2.アプリケーションの作成」までやりましょう。
（環境構築は終わっているものとします）

#プロジェクトの作成
```
$django-admin startproject mysite
```
ターミナルでお好きなディレクトリへ移動し上記のコマンドを打ちます。
これで`mysite`というプロジェクトがディレクトリとして作成されます。

```
$ls mysite
mysite   manage.py
```
`mysite`ディレクトリの中には、上記の2つのファイルとディレクトリが入っているはずです。
`manage.py`には、コマンドなどの操作についていろいろ書いてありますが、まずは気にしなくて良しです👍

`mysite/mysite`を見てみますと

```
$ls mysite/mysite
__init__.py   settings.py   urls.py   wsgi.py
```
4つのファイルが作られました。ここには設定系のファイルが入っています。

`__init__.py`は、django君に「ここにディレクトがありますよ〜」と教えてくれる目印みたいなものです。そのため中には何も書きません。こんなファイルが必要なんですね。

`settings.py`は、このプロジェクト全体の設定が書き込まれています。この先ちょいちょい書き込んでいきます。

`urls.py`は、ブラウザからURLを読みこんで、どのファイルやクラスに飛ぶのかを記載しています。アプリケーションなどが増えるたびにここへ書いていきます。いわゆる目次です。

`wsgi.py`は正直よくわからないです。ごめんなさい。

今作ったmysiteプロジェクトにアプリケーションを作成していきます。

#アプリケーションの作成

```
$python manage.py startapp posts
```
mysiteプロジェクトのディレクトリで上記のコマンドを打つとpostsというアプリケーションが作成されます。
アプリケーションが作成されるたびにさっきの`mysite/mysite/setting.py`に追記をするのですが、それは『4.パスを通す』で話します。

```
$ls posts
__init__.py  admin.py  apps.py  migrations  models.py  tests.py  views.py
```
作成されたpostsの中には6つのファイルと1つのディレクトリが生成されます。順番にみていきましょう。

`__init__.py`は、ただの目印ですね。

`admin.py`は、管理サイトに関する記述をするファイルです。
djangoでは自動で管理サイトを作ってくれます。非常に便利ですね。

`apps.py`は、アプリケーションを識別するためのファイルです。つまり、気にしなくて大丈夫みたいですね。

`migrations`は、マイグレーション用のディレクトリです。データの移動系ですね。

`models.py`は、MTVのMすなわちModelを担当するファイルです。
※DjangoではMVCではなくMTVとよび、アプリケーションごとにこれらの機能に関するファイルをおきます。（でもTemplateは別のディレクトリにまとめることが多い）

`test.py`は、テストに関する記述をするファイルですね。テストとか何言ってんのかわかりませんね。

`views.py`は、MTVのVすなわちViewを担当するファイルです。MVCでいうとControllerの役割です。

この中で主にコードを書くのはmodels.pyとviews.pyです。

```
$mkdir templates
$cd posts
$touch urls.py
```
この他に、urls.pyもアプリケーションごとに作ったほうがいいでしょう。
templateはHTMLファイルを置いておく場所です。
templateもアプリケーションごとにおいてもいいですが、全てのアプリケーションのtemplateをまとめて他のディレクトリにおくほうが一般的です。
templatesを作ったらまた`setting.py`に追記をするのですが、それもあとでやりましょう。

これで土台は完成です。
次の記事ではデータベースを使えるようにしていきます。
セレクトボックスのCSS適用が意外に難しい

## shadowが消えない
![Screen Shot 2019-10-25 at 13.07.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109241/4f129991-862f-c3e9-cd72-30a2c7bf6be9.png)

↓ クリックすると shadow がつく

![Screen Shot 2019-10-25 at 13.07.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109241/f911dbe5-55c3-02a1-3e3b-cbf5914dbd23.png)

### やりがちなCSS
```common.scss
.select:focus {
  box-shadow: none;
}
```

`input` の場合だとこれで消えるが、 `select`  の場合はこれじゃ消えない

### 実はこうです
```common.scss
.select:focus {
  outline: none;
}
```

#### 2020/01/31追記
`button` タグも `select` と同様のやり方で消えます。

## border-radius が消えない（矢印も消えない）
矢印は↓ココのこと
![Screen Shot 2019-10-25 at 13.15.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109241/77732a9a-d698-7f56-1c4c-0bc17c2b6961.png)


### やりがちなCSS
```common.scss
.select {
  border-radius: 0;
}
```

`input` の場合だとこれで十分だけど、なぜか `select`  の場合はこれじゃ消えない

### 実はこうです
```common.scss
.select {
  -webkit-appearance: none; //追加
  -moz-appearance: none;  //追加
  appearance: none; //追加
  border-radius: 0;
}
```

上記三行を追加して、セレクトボックスのそもそものデザインを初期化する必要があるらしい。
（appearance：プラットフォームにおける標準的なUIの外観にする）

## 参考
http://www.htmq.com/css3/appearance.shtml
https://hacknote.jp/archives/9505/
http://nakagaw.hateblo.jp/entry/2015/06/18/164021
(ボツ) #Ruby でぼっち演算子 &. を使って、ネストしたハッシュから #Rails の dig みたいに値を取り出し、 nil エラーの例外も起こさない。

`hash[:key]` と書くところを

`hash&.[](:key)` と書けば良いっぽい。


```rb
{a: { b: :c } }&.[](:a)&.[](:b)
=> :c

{a: nil }&.[](:a)&.[](:b)
=> nil

nil&.[](:a)&.[](:b)
=> nil
```

わりと分かりづらい。


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2626








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Desmosというグラフ描画サービスが便利すぎたので紹介する

# はじめに

NLP界隈では2013年頃、Word2Vecの登場を筆頭に、ニューラルネットワーク、ディープラーニングが流行りだしました。
2019年現在ではBERTなどがトレンドですが、いずれにせよ、正しくモデルを理解して構築するためには、数学的な知識・技術が必要不可欠となっています。

本記事では、ディープラーニング、特に活性化関数の分析・設計に役立つグラフ描画ツールの紹介をします。


# Desmos | Graphing Calculator

https://www.desmos.com/calculator

「Desmos」はWebブラウザ上で動く、グラフ描画アプリケーションです。（インストール不要）


![スクリーンショット 2019-10-11 12.41.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395743/240237ca-ca33-a759-4192-b461a6df73f6.png)

このような簡単なグラフはもちろん、

![スクリーンショット 2019-10-25 9.15.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395743/1cb59798-c35c-5588-4160-6699bf989c30.png)


ディープラーニングでよく使用される、シグモイド関数やtanhなども簡単に記述できます。

# Desmos活用のポイント

このWebアプリケーションの優れているところは、ゲインの調整やX軸、Y軸の並行移動など、数式上の様々なハイパーパラメータを変更し、その結果を可視化して確認できる点です。

![スクリーンショット 2019-10-25 9.15.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395743/00462c06-1626-96c6-e753-d58f389daac8.png)

たとえば、「パラメータωをシグモイド関数を使って0~1に収めたいけど、ω=+1,-1くらいで1になるようにしたい」などが、Desmosを使うことで簡単に実現できます！（上述のグラフより、ゲインを5にすれば良いことがわかります）

# 余談

![スクリーンショット 2019-10-25 9.22.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395743/51b798ac-7843-59cb-5750-ff8b0ef228df.png)

頑張れば絵も掛けるっぽい・・・
https://www.desmos.com/art

# まとめ

この記事では、数式可視化ツール「Desmos」を紹介しました。

Webブラウザから簡単に利用できるので、皆さんもぜひ試してみてはいかがでしょうか？
windowsでポートフォワードの設定

# はじめに
windowsServer上の仮想マシン内に構築したWebアプリケーションを共有したい
社内規定上、仮想ネットワークの設定はNAT接続で利用する必要がある

# ゴール
外部PCからホストOSを介してゲストOSのWebサーバにアクセス出来る事を確認する

# 環境
仮想マシンはwindowsServerにインストールしてます。  
ゲストOSはCentOSで動作してます
CentOS上に検証用のWebサーバ(NginX)を立ててます
CentOSのセキュリティ設定はしてません
ホストOSからゲストOSのWebサーバにアクセスできることは確認済み
外部PSからゲストOSのwebサーバへのアクセスできないことも確認済み

# ホストOSの設定あれやこれや
外部PCからホストOSのWebサーバのリバプロ機能を使ってゲストOSのWebサーバにアクセスを試みる
 * IIS+ARR
 * ApacheのReverceProxy
 * NGINXのReverceProxy
設定が下手くそなのか上手く出来ませんでした。
上記リバプロ環境でホストOSの別webサーバアクセスは確認した


# 解決策
windows標準のコマンドにポートフォワードの設定があった。
ホストOSでコマンド叩いたらそれで解決しちゃいました。。。

```
netsh interface portproxy add v4tov4 listenport=8080 listenaddr=* connectport=80 connectaddress=GESTOSIP
```
自分のためのMarkdown記法メモ

# Markdown記法初心者の自分のためのメモ
自分のためのメモです:sweat:

# 改行
- 改行には文末に半角スペース2つを入れる必要がある。  
※ 前行の文末に半角スペース2つを入れました。
- 一行空白を空けると段落が変わります。

※ 前の文章との間に一行空白があります。

リスト表示していないと改行は普通に改行されるようだ。
※ 前行から単純に改行しただけです。  
※ 前行の文末に半角スペースが入っています。

# 装飾
- アスタリスク2つずつ`**hoge**`で挟むと**boldボールド**。**太字**。
- 1つずつ`*hoge*`で挟むと*italicイタリック*。*斜体*。日本語フォントは反映されないかもしれない。
- チルダ2つずつ`~~hoge~~`で挟むと~~打消し線~~。

# インライン表示
- ここまで何度も使っているが`インライン表示`はグレイヴアクセント「`」で挟む。アクサングラーヴとも言う。

>グレイヴ・アクセント（`）またはアクサングラーヴは、おもにラテン文字を用いる言語の表記に用いられるアクセント符号で、ダイアクリティカルマーク（発音区別符号）の一種。抑音符（よくおんぷ）、抑音符号（よくおんふごう）、重アクセント、低アクセント、鈍アクセントとも呼ばれる。
>
>（Wikipediaの [グレイヴ・アクセント](https://ja.wikipedia.org/wiki/グレイヴ・アクセント "グレイヴ・アクセント") より）

- 引用符号のクオーテーションマーク「‘hoge’」「'hoge'」ではダメです。

# リンク
- `[表示したい文字列](リンク先 "リンクに付けたい文字列")`
- たとえば、`[Qiita](https://qiita.com/ "Qiitaのトップページへ")`と書くとこうなる↓
- [Qiita](https://qiita.com/ "Qiitaのトップページへ")

# 見出し h1
「見出し」は番号記号の`# hoge`を使う。`#`の繰り返し数（`## hoge` `### hoge`という感じ）で見出しレベルを下げられる。早速書いてみよう。
## h2
### h3
#### h4
##### h5
###### h6
####### h7
######## h8
見出しで下げれるのは`###### h6`までのようだ。

# 順序無しリスト
- l1
    - l2
        - l3
            - l4
                - l5
                    - l6
                        - l7
                            - l8
                                - l9
                                    - l10 リストはハイフン`- hoge`を使う。`タブ- hoge`で階層を下げれる。

# 順序付きリスト
1. `1. hoge` `2. hoge` `3. hoge`と番号をそのまま書くだけ。タブで階層を下げれる。
2. `2.`と書いた。
    3. `3.`と書いたが、タブで階層を下げると番号がリセットされるようだ。

# チェックボックス
- [ ] チェックボックスは`- [ ] hoge`。
- [x] チェックを入れておくには`- [x] hoge`。

# 引用
- 引用は`> hogehoge`を使う。

たとえば、
>***D'où venons-nous ? Que sommes-nous ? Où allons-nous ?*** est une des œuvres les plus connues de Paul Gauguin. Peinte à Tahiti en 1897-1898, elle est conservée au musée des beaux-arts de Boston (Massachusetts, États-Unis).  
>（Wikipediaの [D'où venons-nous ? Que sommes-nous ? Où allons-nous ?](https://fr.wikipedia.org/wiki/D%27o%C3%B9_venons-nous_%3F_Que_sommes-nous_%3F_O%C3%B9_allons-nous_%3F "Where Do We Come From? What Are We? Where Are We Going?") より）

とか、

>**"Nothing in Biology Makes Sense Except in the Light of Evolution"** is a 1973 essay by the evolutionary biologist Theodosius Dobzhansky, criticising anti-evolution creationism and espousing theistic evolution. The essay was first published in *American Biology Teacher* in 1973.  
>（Wikipediaの [Nothing in Biology Makes Sense Except in the Light of Evolution] (https://en.wikipedia.org/wiki/Nothing_in_Biology_Makes_Sense_Except_in_the_Light_of_Evolution "Nothing in Biology Makes Sense Except in the Light of Evolution") より）

# 終わりに
- 今日はここまで。（2019年10月25日、了。）
Pythonで隠しフォルダを作成する

ありそうでなかったので書いた。

```python
import pathlib
import subprocess

def mkdir_hidden(self):
    renamed = self.parent / f'.{self.name}'
    renamed.mkdir(parents=True, exist_ok=True)
    if type(self) == pathlib.WindowsPath:
        cmd = ['attrib', '+H', str(renamed)]
        subprocess.run(cmd, shell=True)
    return renamed

pathlib.Path.mkdir_hidden = mkdir_hidden
hoge = pathlib.Path(__file__).parent / 'hoge'
hoge = hoge.mkdir_hidden()
```

Linuxは名前の頭に`.`がついていれば隠し扱いになりますがWindowsの場合は属性を設定してあげなきゃいけないのでそんな感じにしてます。
XMLHttpRequestについて。 もっと言えば、setRequestHeader() について。

# 前提
### XMLHttpRequestとは
JavaScriptでAjax(非同期通信)を行う原初の方法。
（つまり、JavaScriptでHTTP通信を行う方法。)
使いづらいため、素のまま使われることは少ないが、
Ajaxの実行が目的である
jQueryのajaxメソッドや、JavaScriptのFetch関数、JavaScriptライブラリのaxiosなどは、この仕組みを利用して実装されている。

# 使い方
参考:[【JavaScript入門】Ajaxの使い方とGET・POST通信まとめ！](https://www.sejuku.net/blog/30245#XMLHttpRequestAjax)

#### GET通信の場合

```JavaScript:JavaScript
const インスタンス名 = new XMLHttpRequest();

インスタンス名.open( 'GET', 送信先 ); 
インスタンス名.send();

インスタンス名.onreadystatechange = function() {
  if( インスタンス名.readyState === 4 && インスタンス名.status === 200 ) {
    //エラーを出さずに通信が完了した時の処理。
    // ↓ 例 ↓
    console.log( インスタンス名.responseText );
  }
}
```
**NOTE**
「送信先」と書いた部分には、通信を受け取ってほしいURLを記入する。
（HTMLの`<form action="○○○">`に指定するようなURL）

- 値を受け取ってほしいファイルのパス
- APIを実行するためのアドレス　など。

GET通信の場合、通信先に送信する情報も、一緒に記述する。
例1:`インスタンス名.open('GET','/送信先?送信する情報名=送信する値');`
例1:`Request.open('GET','/example.com?id=001');`

（ちなみに、↑のようにURLに情報も書き込んで送る書き方（`?`以降の記述）を
　「パラメータ」や「クエリ文字列」などと呼ぶ。）

#### POST通信の場合

```JavaScript:JavaScript
const インスタンス名 = new XMLHttpRequest();

インスタンス名.open( 'POST', 送信先 );
インスタンス名.setRequestHeader( 'content-type', 'application/x-www-form-urlencoded;charset=UTF-8' );
インスタンス名.send( 'パラメータ=値' );

インスタンス名.onreadystatechange = function() {
  if( インスタンス名.readyState === 4 && インスタンス名.status === 200 ) {
    //エラーを出さずに通信が完了した時の処理。例↓
    console.log( インスタンス名.responseText );
  }
}
```
**NOTE**
GET通信との違いは…
1. 送信するパラメータは`send()`の引数に指定する。
2. `open()`と`send()`の間に`setRequestHeader()`を記述する。

### 解説

#### open()
通信方式(GETまたはPOST)と、リクエストの送信先を設定するメソッド。

#### send()
Ajax通信を開始するメソッド。
#### setRequestHeader()
HTTPリクエストヘッダを設定するメソッド。
（参考: [HTTPリクエストヘッダとは](https://wa3.i-3-i.info/word1844.html)）

第一引数にヘッダ名、第二引数にヘッダの値を記入する。
HTTPリクエストヘッダにはたくさんの種類があるが、
今回の使い方では`content-type`の指定をしていれば問題ない。

#### content-type
送るデータの形式を指定する。複数指定する場合は`;`で区切る。
以下、指定する値の例。

##### 　　application/x-www-form-urlencoded
　　送信するデータはテキスト形式だ、と指定する。
　　デフォルトのデータ形式。
　　もともと、HTMLの`<form>`からデータを送信する時に使われてきた形式。
　　`<form>`を使用しない場合でも、テキスト形式で送信するのであれば、問題なく使える。

###### 　　multipart/form-data
　　バイナリ形式。画像やファイルなどを送信する場合に使う。

###### 　　application/json
　　JSON形式。JavaScriptのオブジェクト型みたいな書き方の文字列。
　　APIでデータをやりとりする時に、よく使われる形式。

##### 　　charset=UTF-8
　　送信するデータの文字コードを UTF-8 に指定する。

#### responseText
レスポンスをテキスト形式で表すプロパティ。
レスポンスがJSON形式だったとしても文字列型として帰って来るので、
その場合は`JSON.parse(インスタンス名.responseText)`で変換しよう。
レスポンスをXML形式で扱いたい場合は **responseXML** を使う。

#### onreadystatechange / readyState / status
冒頭の参考リンクにて、詳しく説明されています。

#おわり
Ajaxについて勉強中です。
`setRequestHeader()`で何を指定すればいいのか理解できず、
メンター様に質問したらわかりやすく教えてくださったので、知識を共有します。
ご意見やアドバイスなど、コメントお待ちしております！
Pythonのコンテナ系の書き方（備忘録）

# Pythonのコンテナ系の書き方（備忘録）

いつも書き方を忘れて探し回るのでメモっとく

## リスト

```python
a = []  # 空リスト
a = list()  # 空リスト
a = ['a', 'b', 'c']  # 値指定で定義
a = [0] * 10  # 値0を10個持つリスト
a = [[0] * 3 for i in range(2)]  # [[0,0,0], [0,0,0]]
a.append('d')  # 末尾に追加
a.insert(0, 'aaa')  # 先頭に追加。0を変えて任意の位置
a[0]  # 参照（範囲外でexception
a[0] = 'e'  # 上書き
a.pop()  # 末尾の要素を除去、値を返す（空リストだとエラー
a.pop(0)  # 先頭の要素を除去、値を返す（空リストだとエラー
'b' in a  # 'b'が存在すればTrue、無ければFalse
'c' not in a  # 'c'が存在すればFalse、無ければTrue
a.index('b')  # 'b'の位置を返す。なければエラー
len(a)  # 要素の個数
```

## リスト内リストの扱い方

```python
a = [[1,2,3], [4,5,6], [7,8,9]]  # リスト内リストを定義
list(map(sum, a))  # 内部のリストについてそれぞれsumしたリスト
>> [6, 15, 24]
list(zip(*a))  # 縦横逆にしてリスト内タプル
>> [(1, 4, 7), (2, 5, 8), (3, 6, 9)]
list(map(list, zip(*a)))  # 縦横逆にしてリスト内リスト
>> [[1, 4, 7], [2, 5, 8], [3, 6, 9]]
list(map(sum, zip(*a)))  # 縦横逆にして内側のリストの和のリスト
>> [12, 15, 18]
```

## タプル

イミュータブル（値の追加、変更は不可）

```python
a = ()  # 空タプル
a = tuple()  # 空タプル
a = ('a', 'b', 'c')  # 値指定で定義
a = ('d',)  # 要素が一つだけの場合、最後にカンマ付ける
a[0]  # 参照（範囲外でexception
'b' in a  # 'b'が存在すればTrue、無ければFalse
'c' not in a  # 'c'が存在すればFalse、無ければTrue
len(a)  # 要素の個数
```

## 辞書

バリューからキーを直接には取り出せない。順番は保持されない

```python
a = {}  # 空辞書
a = dict()  # 空辞書
a = {'a': 'あ', 'b': 'い', 'c': 'う'}  # 値指定で定義
a['d'] = 'え'  # キー＆バリュー追加
a['b']  # キーで参照（存在しないキーだとエラー
a.get('z')  # キーで参照（存在しないキーでもエラーにならない
a['c'] = 'ううう'  # 上書き
del a['d']  # 削除
a.keys()  # キーの一覧
'b' in a  # キー'b'が存在すればTrue、無ければFalse
'c' not in a  # キー'c'が存在すればFalse、無ければTrue
len(a)  # 要素の個数
```
## 辞書のリスト

```python
c = [{'id': 1, 'name': 'a'}, {'id': 2, 'name': 'b'}, {'id': 3, 'name': 'c'}]  # 定義
[x.get('name') for x in l]  # 特定のキーのリストを取得
# >> ['a', 'b', 'c']
[x.get('name', '---') for x in l]  # デフォルト値はgetで指定
[x.get('name') for x in l].index('b')  # あるキーの値から元のリストの位置を取得する
# >> 1
```

## deque

キュー、スタック。リストより早い

```python
from collections import deque
a = deque()  # 宣言
a.append('z')  # 末尾に追加
a.appendleft('a')  # 先頭に追加
a.pop()  # 末尾を削除、値を返す
a.popleft()  # 先頭を削除、値を返す
len(a)  # 要素の個数
```

## heap

リスト型をヒープとして使うライブラリ。min-heapでインデックスは0始まり

```python
import heapq
a = []  # 値はリスト型として持つ
heappush(a, 1)  # ヒープaに値1を追加
heappop(a)  # 最小値を返す
```

ヒープソートの実装例（公式に載ってる）

```python
def heapsort(iterable):
    h = []
    for value in iterable:
        heappush(h, value)
    return [heappop(h) for i in range(len(h))]
heapsort([1, 3, 5, 7, 9, 2, 4, 6, 8, 0])
```
DllPluginを使ってWebpackのビルド時間を改善する

# 概要
Webpackのビルド時間を改善する手法としてDllPluginを使ってビルド対象を分割するというものがあります。そのやり方を説明します。

# DLLPluginとは
DLLPluginはWebpack公式にも紹介されている方法でビルド対象を分割する事によって劇的にビルドのパフォーマンスを改善してくれます。 https://webpack.js.org/plugins/dll-plugin/

DLLとはダイナミックリンクライブラリの略で、要するに動的にライブラリにリンクしてくれるということなので、事前にライブラリを別のbundleとしてビルドしておいて、それに含まれるライブラリに依存するバンドルは後からライブラリのbundleにリンクするという形を取ります。
これによりライブラリとライブラリを使う側のコードのビルドを分離できるので、都度ライブラリ側のコードをビルドしなくて良くなりビルドが速くなります。

# 導入
ライブラリ側のファイルのビルドと使う側のファイルを分けるので、webpackの設定は２つ書きます。同時にビルド用のnpmスクリプトも2つ用意します。ライブラリ側をvendorとし、ライブラリを使うアプリケーション側をappとします。

## ライブラリ側のビルド
今回はライブラリを詰め合わせたビルドをvendorという名前で作っていきます。

```js:webpack.vendor.js
const path = require('path');
const webpack = require('webpack');
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
  entry: {
    vendor: [
      'axios',
    ],
  },
  output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: '[name]-[hash].js',
    hashDigestLength: 6,
    library: '[name]'
  },
  plugins: [
    new webpack.DllPlugin({
      /**
       * path
       * manifestファイルの出力先
       * [name]の部分はentryの名前に変換されるので今回はvendor
       */
      path: path.join(__dirname, 'public/js', '[name]-manifest.json'),
      /**
       * name
       * どの空間（global変数）にdll bundleがあるか
       * output.libraryに指定した値を使えばよい
       */
      name: '[name]'
    })
  ]
};

```

axiosを分離してビルドする設定を書きました。

これを実行すると
`public/js/vendor-[hash].js`
`public/js/vendor-manifest.json`
という2つのファイルが生成されます。

`public/js/vendor-[hash].js`はビルド結果が入り、`public/js/vendor-manifest.json`の方にはDLLPluginでのリンク用の設定が吐き出されます。

```
{
  "vendor.js": "vendor-ee25a3.js"
}
```

## ライブラリを使うコード側のビルド

app.jsにはaxiosを使うようなコードを予め書いておきます。

```js:webpack.js
const webpack = require('webpack');

module.exports = {
  entry: {
    app:'./resources/js/app.js',
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./public/js/vendor-manifest'),
    }),
  ],
  ... 略 ...
}
```

これを実行すると`app-[hash].js`が生成されます。

このようにしてDllReferencePluginを使うことでDllPluginで作ったvendor側のファイルを動的に読み込むことができます。

## npm script
上2つのビルドはそれぞれ別々に実行できます。最初は依存関係があるのでvendor、appの順にビルドしてください。

```json:package.json

{
  "private": true,
  "scripts": {
    "build-app": "webpack --no-progress --hide-modules --mode=production --config=./webpack.js",
    "build-vendor": "webpack --no-progress --hide-modules --mode=production --config=./webpack.vendor.js"
  },
... 略 ...
}
```

これによって日々の開発ではapp.js側しかビルドしなくて良いのでビルドが早くなります。

## HTML側での読み込み

依存関係に合わせて順番に読むようにして下さい。

```html
<script src="js/vendor-[hash].js"></script>
<script src="js/app-[hash].js"></script>
```

## DllPluginを使ってみて
実際のアプリケーションにDllPluginを導入したところビルド時間が約3分の2ほどに短くなったので、とてもおすすめです。またDllPluginの対象はパスを指定するだけなので外部のライブラリだけでなく開発中のコードもクラス単位でビルドを分離可能なので、枯れていてほとんど変更がない部分についてはどんどんDllPluginの対象にしていくというのが有効だと思います。
javascriptのArrayをImmutableに扱うメモ

javascriptの配列操作メソッドには、配列自身を書き換えてしまう破壊的なものが多くありますが、
メモリを気にしなければいけないケース以外は、破壊的なメソッドは使わない方がバグが減って良いです。
それらをなるべく使わないための代替手段メモ

# 末尾に要素を追加する
Array.pushが一般的ですが、これは破壊的です。
Array.concatかスプレッド構文を使いましょう

``` javascript
const newArray = baseArray.concat(valueToAdd);
const newArray2 = [...baseArray,valueToAdd];
```

# 特定のIndexの要素を書き換える
ここに関してはメソッドではありませんが。

``` javascript
//baseArray[targetIndex].hoge = "fuga";
const modified = baseArray.map((value,index) => {
  if(index !== targetIndex){
    return value;
  }
  return {
    ...value,
    hoge:"fuga"
  }  
})
```

# 特定の要素を削る(popやshiftなど)
Array.filterで。
Array.filterの第一引数の関数にはindexや元Arrayが引数として入るので、
そこで先頭や末尾判定が出来ます。

``` javascript
const shifted = baseArray.filter((value,index) => index !== 0);
const popped = baseArray.filter((value,index,array) => index != array.length -1);
```

# 要素を増減させる(splice)
減らすだけならfilterで行けますがSpliceではないといけない操作をする場合はreduceが必要です。
大体再現しようとすると以下のような感じ？

``` javascript
//array.splice(startIndex,deleteCount,items)
const spliced = baseArray.reduce((prev,current,index) => {
  if(index < startIndex || index > startIndex + deleteCount){
    return prev.concat(current);
  }
  if(index === startIndex){
    deleteCount <== 0 ? prev.concat(items).concat(current):prev.concat(items);
  }
  return prev;
},[]);
```
ただ、Spliceの機能のすべてを使うわけではないのならもっとシンプルでいいし、
厳密にImmutableにこだわらないのなら、以下のようにspread演算子で配列をコピーしてからspliceした方が無難。
この記事の項目全てに当てはまってしまいますが。

``` javascript
const spliced = [...baseArray];
spliced.splice(startIndex,deleteCount,items);
```

# 配列の反転(reverse)
reduceRightを使うと逆順に回るので+concatで。

``` javascript
const reversed = baseArray.reduceRight((prev,current) => prev.concat(current),[]);
```

# 配列のsort
こればかりはちょっといい方法が思いつかなかったので、配列をコピーしてソートする方向で。