OmniAICreator/Qiita-1.07M huggingface dataset:
Ubuntu にAndroid Studio をインストールしてみた


2019年1月18日現在の方法
Ubuntu18.04（Amd64　64Bit版Ubuntu）を対象にしています
64bit版の場合あらかじめ32Bit版のライブラリなどをあらかじめいれてないとだめだそうです。
（わたしの環境では入れなくても動きましたどうしてかわかりませんおまじないでしておくといいとおもいます。）

```bash
sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6
```

アンドロイドのエミュレーターを使う場合
KVMのインストールとBios（UEFI）で仮想化のVTなどを有効にしている必要があります


##　１．ダウンロード
https://developer.android.com/studio/?hl=ja#downloads
こちらのダウンロードのホームページから
 Linux  android-studio-ide-182.5199772-linux.zip  1010 MB をダウンロード

```bash
wget https://dl.google.com/dl/android/studio/ide-zips/3.3.0.20/android-studio-ide-182.5199772-linux.zip
```
注意：　wget してもダウンロードできたけどホームページから規約に同意してみたいなこときかれるので　（このリンクはすぐに駄目になる可能性はあるかもです。）

##　２．インストール
任意のフォルダにandroid-studio-ide-182.5199772-linux.zip　を設置します。
unzipで展開します

```bash
unzip android-studio-ide-182.5199772-linux.zip
```

##　３．実行

```bash
　./android-studio/bin/studio.sh
```

これで実行するとウインドウが開いてアンドロイドスタジオが動きます。
色々ダウンロードやインストールでさらに時間がかかるのでおちついた時間がとれるときがおすすめです

ググるとなんかのライブラリを予めインストールしたりJAVAがいるみたいなことが書かれていましたが
とくになにもなく普通に入っちゃいました。

数ギガバイトとかのダウンロードを連発してくれるのでなるべく早い通信環境をおすすめします

https://developer.android.com/guide/?hl=ja
あとはこのページのガイドをみながらできる感じです。
Three.jsで透明度のあるテクスチャを設定するとノイズが発生する

##はじめに
Three.js r97でパーティクルを制作していた時に、スマートフォンで表示されたパーティクルがとても残念な見た目になったので、備忘録も兼ねて解決方法を載せてみます。

##どう残念だったのか
下の画像のように、パーティクルの内部に謎のノイズが混ざってしまっています。さらに、アニメーションをさせると、謎のノイズがうごめいて凄く気持ち悪い見た目になります。
![myth_mobile.jpg](https://qiita-image-store.s3.amazonaws.com/0/329228/6d9a3b93-98b4-3148-3ced-1e8f5ccb4de2.jpeg)


同じパーティクルをパソコンで見ると問題なく表示されました。
![myth_pc.jpg](https://qiita-image-store.s3.amazonaws.com/0/329228/9020027b-8343-8678-6ff2-25ef159482fe.jpeg)


パーティクルに設定したテクスチャには、canvasで描画されたものを使用しています。
![texture.png](https://qiita-image-store.s3.amazonaws.com/0/329228/94046ce9-21ad-d03e-efb2-d559562434e7.png)
※実際に使用しているテクスチャは黒背景ではありません。

その際、記述していたコードは以下の通りでした。（テクスチャの読み込み部分を抜粋）

```javascript:hoge.js
// 前略...
var texture = new THREE.texture(canvas); // このままだと表示がおかしくなる
// 後略...
```

##原因
new THREE.Texture(...)でテクスチャを作成する場合、通常は符号なしbyte型として処理されてしまいます。この状態で、透明度のあるテクスチャを作成しようとすると正しい表示ができなくなってしまうようです。

（Textures - Three.js docs, https://threejs.org/docs/#api/en/constants/Textures より）


##対処法
今回の場合、テクスチャをFloat型で処理するように指定してあげると解決しました。

```javascript:hoge.js
// 前略...
var texture = new THREE.texture(canvas); // これだけじゃダメ
texture.type = THREE.FloatType; // 追加してあげる
// 後略...
```

スマートフォンでもきれいに表示されます。
![result.jpg](https://qiita-image-store.s3.amazonaws.com/0/329228/0323f24b-977b-c9d1-433d-f468d96b88ca.jpeg)


##まとめ
透明度のあるテクスチャを扱うときは、テクスチャの処理精度を指定してあげる事が肝要です。
Makefileには使用するshellを定義すると良さそう

`GNU Make`のお話です。
Makeを使用したことがある方を想定しているので、`GNU Make`とは何かは書きません。

# Makefileに使用するshellが定義できるの知らなかったよ

```
SHELL=/bin/bash
```
上記のように定義できます。bashを指定しました。

# /bin/shを使う必要があるかという話

`GNU Make`はデフォルトでは/bin/shが使用されます。

> By default, /bin/sh is used for the shell

https://www.oreilly.com/openbook/make3/book/ch05.pdf

では、/bin/sh が問題がある場合はどのようなときでしょうか。
私の経験だと、/bin/sh が使用されたために、zshで成功してしていた`source ./conf.txt`がエラーになりました。
ですので、どこの環境でも大体利用できる/bin/bashを指定しておくのが良いのではないかと。

# 参考
- [とあるエンジニアの備忘log: Make のポータビリティについて考える](http://masahir0y.blogspot.com/2012/07/make_26.html)
    - こちらのブログ無しにはMakeの使用shellを知り得なかった :bow: 感謝 :bow:
- [オライリー](https://www.oreilly.com/openbook/make3/book/index.html)
- [/bin/sh と /bin/bash の違い - 双六工場日誌](http://sechiro.hatenablog.com/entry/20120806/1344267619)
    - /bin/bash と /bin/sh は完全に別物だと思ってました....
JavaScript オブジェクトの深くネストされているプロパティに値をセットする setProperty

前の記事で、getProperty を作りました。

JavaScript オブジェクトの深くネストされているプロパティに安全にアクセスする getProperty - Qiita
https://qiita.com/standard-software/items/bb044217d0a4b394b8e2

今回は、オブジェクトの深くネストされているプロパティに値をセットする setProperty を作ってみました。

JSでは、値の全書き換えのときに深いネストのプロパティ値を書くのは、そんなに面倒でもなんでもないです。(括弧の対応は少し面倒かも)

ですが、そのオブジェクトの一部の値だけ上書きしたいとか、そのときにその深いネストのところのプロパティが存在したりしなかったり不定とかいう場合に、この setProperty は便利になるでしょう。

# ソースコード

```js
function isObject (item) {
  return typeof item === 'object' 
    && item !== null && !Array.isArray(item);
}

function setProperty(object, path, value) {
  if (!isObject(object)) { return; }
  
  const propertyArray = path.split('.');
  for (let i = 0; i <= propertyArray.length - 1; i += 1) {
    if (propertyArray[i] === '' ) { throw new Error('setProperty path'); }
  }

  let result = object;
  for (let i = 0; i <= propertyArray.length - 2; i += 1) {
    if (!isObject(result[propertyArray[i]])) { 
      result[propertyArray[i]] = {};
    }
    result = result[propertyArray[i]];
  }
  result[propertyArray[propertyArray.length - 1]] = value;
}

let testObj1 = {
}
var path = 'a.b';   setProperty(testObj1, path, true); console.log(path, testObj1);
var path = 'a';     setProperty(testObj1, path, true); console.log(path, testObj1);
var path = 'a.b.c'; setProperty(testObj1, path, true); console.log(path, testObj1);
// var path = '';      setProperty(testObj1, path, true); console.log(path, testObj1);
// var path = 'a.';    setProperty(testObj1, path, true); console.log(path, testObj1);
// var path = '.a';    setProperty(testObj1, path, true); console.log(path, testObj1);
var path = 'a.c';   setProperty(testObj1, path, true); console.log(path, testObj1);
var path = 'b';     setProperty(testObj1, path, true); console.log(path, testObj1);
var path = 'b.c';   setProperty(testObj1, path, true); console.log(path, testObj1);
```

動作確認部分でコメントアウトしているものは例外発生します。プロパティのパスをピリオドで分解したときに空文字が入っているものがあるからです。

もしかしたらプロパティ名に使えない記号文字が入っていたら、なんらかのエラーが出てしまうかもです。もしご存知でしたら教えてください。

そういうパターンも網羅しておいて、プロパティパス部分にこういう文字列を記載すると例外が発生するよ。ということを明示的にテストコードを書くとソースコードの品質があがりますね。

例外が発生するか発生しないかのテストの書き方は次の記事で書いてあるので、ご参考にしてください。

有名なテストフレームワークには多分例外補足テストの処理が搭載されているとは思いますが、大掛かりなものではなくてもソースコピペで十分に例外処理可能なテストフレームワークを作ることもできます。

JavaScriptで世界一簡単なテストフレームワークに例外捕捉機能追加した - Qiita
https://qiita.com/standard-software/items/d4fb99655e17a3a68fcb
Railsで音楽スタジオの検索サイトを作ったので所感を共有する

# サービス紹介
私は趣味でバンドをやっているのですが、練習場所のスタジオを選ぶときは大体普段行く場所から選んでいます。
スタジオも食べログみたいに口コミ等から探せればいいのになあ、と感じたのでDIY精神で作ってみました。

スタサーチ
https://sta-search.herokuapp.com/

バンドスタジオを路線名or駅名、スタジオ名、特徴、価格帯などから絞り込み検索することができます。
ユーザー登録することで口コミ投稿やスタジオのお気に入りリストに入れることもできるようになります。

# 作ってみた感想
制作期間はRailsの勉強から始めて50日間くらいです。ProgateとRailsチュートリアル各1週ずつしていきなり制作に取り掛かりました。
Webアプリケーションを公開するのは初めてだったのですが、意外となんとか形にすることができました。

HTML/CSS/Railsはもちろん勉強になりましたが、APIについてもかなり勉強になりました。
Google Places APIを使うことで初期データとして多数のプレイスを登録することができたり、写真まで持ってくることができました。

個人的に音楽が好きなので、次回はSpotify APIを使った何かを作ろうと検討しています。

# 反省
#### ・テストを書くべきだった
学習コストがかかること、また早く完成させたい気持ちから今回テストを書かずに実装に入りました。
結果は一つ変更するたびに至る場所でエラーが出る惨状。急がば回れとはまさにこのことです。。。

Railsチュートリアルで学んだテストドリブン開発は安心感があってよかったと今更気づきました。
RSpec勉強しなきゃ…と強く感じております。
#### ・もっと詳細に設計するべきだった
一応初めに簡単なワイヤーフレーム、URL設計、ER図を作ってから制作に取り掛かりました。
しかし、途中からあれもこれもと色々な機能を追加して初期設計とは大幅に異なった物が出来上がりました。

もっと実装したい機能を真面目に検討してから製作に入ればよりスムーズに進んだと思います。
もちろん、最初から全ての機能を上げるのは難しいと思いますが、次回からはより機能検討に時間を割くべきだと感じました。

#### ・開発環境と本番環境でDBを統一するべきだった
今回開発環境では初期設定DBのSQLite3を使用しました。
デプロイまで特に不都合を感じていなかったのですが、いざHerokuにデプロイした後のデータ移行にかなり手間取りました。

結果としてCSVに書き出してインポートして対処しましたが、初めから開発環境でもPostgreを使っていればpg:pushコマンドが使えて便利だったと感じました。

#### ・Gemの選定をしっかりするべきだった
Deviseを使うかSorceryを使うか、Will_paginateを使うかKaminariを使うかといった話です。
今回認証は勉強も兼ねて自分で実装、ページネーションはRailsチュートリアルで使ったWill_Paginateを使いました。

認証はともかく、ページネーションは明らかにKaminariの方が多機能で失敗した感が強かったです。
ここらへんは経験がモノを言う世界だと思うのでもっと色々なGemを触って吟味できるようになりたいと思います。

####・Bootstrapは3を使うべきだった
あまりフロントエンドコーディングが得意ではないので、Bootstrapにおんぶにだっこで乗り切りました。

バージョンは新しいほうがいいっしょｗくらいの軽い気持ちでBoostrap４を選択したのですが、意外にも３と４で変更点が多いので困惑することが多々有りました。
特にcol-xs-xxがcol-xxになっているのには相当苦しめられました。xsサイズでもレイアウト変わらなくてかなりハマりました。。。

初心者のうちは文献が多いCSSフレームワークを選択するのが賢いと思います。
# 終わりに
プログラミング学習に関してはインプットも大事ですが、アウトプットも同等か、それ以上に大事だと感じました。
一通りのインプットが済んだ時点でまずは手探りでなにか作ってみるといいかもしれないですね。

この記事が私と同じような駆け出しのエンジニアの参考になればと思います。
VBA_「すべて検索」関数

#1.概要
指定文字を含むセルをすべて検索し塊で返す関数。
(Excelの「すべて検索」を再現したもの)

#2.ソースコード

```vb
'すべて検索のテスト
Sub testAllFind()
    Dim rg As Range
    Set rg = ActiveSheet.UsedRange
    
    'デバッグとしてSelect
    AllFind("a", rg).Select
End Sub

'「すべて検索」の関数
Function AllFind(findstr As String, findRegion As Range) As Range
    
    Dim firstFound As Range '最初に見つかったセル
    Set firstFound = findRegion.Find(findstr)
    
    '1つも見つからなければNothing
    If firstFound Is Nothing Then
        Set AllFind = Nothing
        Exit Function
    End If
    
'-----2つ目以降を検索する処理-----
    Dim tempFound As Range '見つかったセルをの一時バッファ
    Dim result_ As Range 'return用
    
    'それぞれに最初に見つかったセルをセット
    Set tempFound = firstFound
    Set result_ = tempFound
    
    Do
        '前回の検索結果以降を検索
        Set tempFound = findRegion.FindNext(tempFound)
        '最初のアドレスに戻ってきたらループ終了
        If tempFound.Address = firstFound.Address Then
            Exit Do
        Else
            'returnに加える
            Set result_ = Union(result_, tempFound)
        End If
    Loop
        
    Set AllFind = result_
        
End Function


```

#3.出力結果

～略～


#4.出典
http://officetanaka.net/excel/vba/tips/tips100.htm
TextViewでキーボードを閉じる処理

初歩的なことですが、あまり書いている記事がなかったので、TextViewで入力フォームとキーボード以外の場所をタップした時に、キーボードが閉じるという処理を書いていこうと思います。

```swift
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    if (self.textView.isFirstResponder) {
        self.textView.resignFirstResponder()
    }
}
```
を用います。
以下、実践的な例になります。

```swift
class ProfileCell:UITableViewCell, UITextViewDelegate {
    var masterViewPointer:ProfileEditViewController?

    @IBOutlet weak var textView: UITextView!{
        didSet {
            textView.delegate = self
            textView.text = ""
            //textViewのtextの量に応じて、textViewの高さを決める
            textView.translatesAutoresizingMaskIntoConstraints = true
        }
    }
    
    //入力画面ないしkeyboardの外を押したら、キーボードを閉じる処理
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        if (self.textView.isFirstResponder) {
            self.textView.resignFirstResponder()
        }
    }
    
    //編集終了後のtextデータを、別のファイルへ送信したい時はこの中に書く。
    func textViewDidChange(_ textView: UITextView) {
        masterViewPointer?.profileData?.profile = self.textView.text
    }
    
}

```

何をやっているかというと、CellのTextViewに入力された情報を、TableViewに渡してます。

<img width="318" alt="スクリーンショット 2019-01-17 23.47.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/261020/893e102c-ff7b-c348-8a60-8747080ce29c.png">

TableViewのCellのTextViewを、上のCellのコードと紐つけています。
TableViewは下のコードと紐付けています。

```swift
//省略
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if indexPath.ro == 1 {
    //省略
    } else if indexPath.row == 4 {
        let cell:ProfileCell = tableView.dequeueReusableCell(withIdentifier: "profileCell", for:indexPath) as! ProfileCell
        cell.textView.text = self.profileData!.profile
        cell.selectionStyle = UITableViewCell.SelectionStyle.none
        cell.masterViewPointer = self
        return cell
    } else if indexPath.row == 5 {
    //省略
}
```

tableViewの定義と、cellの定義とファイルを分割し、masterViewPointerを使って情報の受け渡しを行なっています。
シンプルですが以上です。参考になれば幸いです。
wip railsアプリケーション新規作成時の自分的ベストプラクティス

rbenvなどは事前にインストール済みという前提
rbenvなどのインストールについてはこちらを参考
https://qiita.com/_kanacan_/items/59f3959169c41a167b1e

## railsのインストール
アプリケーション用のフォルダを作成し、その中で
`bundle init`する

上記コマンドでGemfileが作成されるのでGemfileを開き、
`# gem 'rails'`のコメントアウトを外す。

その後、`bundle install --path vendor/bundle`
でvendor/bundle内にライブラリをインストール。

`git init`でgit管理もしておく。
また.gitignoreを追加して、rails用のignoreファイルを作成
https://github.com/github/gitignore/blob/master/Rails.gitignore

その後
`bundle ex rails new . -B -d mysql --skip-turbolinks --skip-test`
を実行。各オプションの意味はこちら http://railsdoc.com/rails

Gemfileを編集して不要なgemの削除や追加したいgemを追記。

削除するやつ
coffee scriptは使わないので、
`# gem 'coffee_script'`でコメントアウト

追加するやつ

```
  gem 'annotate'            # 現状のスキーマの注釈をコメントとしてファイルの上部や下部に追記してくれる。
  gem 'better_errors'       # エラー画面をデバッグしやすい形に整形してくれる
  gem 'binding_of_caller'   # better-errorsのエラー画面でirbができる
  gem 'bullet'              # 「N+1 問題」を検出してくれる
  gem 'hirb'                # コンソールのModelの出力結果を表形式で分かりやすく表示する
  gem 'hirb-unicode'        # 日本語などマルチバイト文字の出力時の出力結果のずれに対応
  gem 'letter_opener_web'   # 送信したメールを確認できる
  gem 'pry-rails'           # コンソールをirbからpryに置き換える。
  gem 'pry-byebug'          # ソースコードにブレークポイントを埋め込んで、所定のポイントでpryを起動

# slim使う場合
  gem 'slim-rails'          # slimのジェネレータを提供してくれる
  gem 'html2slim'           # ERB形式のファイルをslim形式に変換してくれるerb2slimコマンドを提供

# bootstarap使う場合
  gem 'bootstrap'
```

最後にbundle installでgemをインストール。

## DBのセットアップ
`bundle ex rake db:create`でDBを作成

rake:dbコマンドについてはこちらを参考
https://qiita.com/parsetree/items/e9b08c6b11f762b949de
UiPathでつまづいた箇所メモ【備忘録的な】

# この記事を作るにあたった"きっかけ"
以前同じ現場だった先輩からの情報でRPAという存在を知りました。

面倒なことがとにかく嫌いな自分に、こんなにも画期的なツールがあるのだと興味深々。即座にUiPathの学習に入ったわけです。

しかし、所々つまづく箇所があったので備忘録も兼ねてここにメモしていきます。
(初投稿のため拙いつくりになりますが、生温かく見守ってください)

**◆変数"DataTable"の参照**
CSVファイルを読み込んだ際の出力先としてDataTable型の変数を用意する必要があったのですが、
説明動画にはデフォルトであるのに、自分のところには無い。
→変数タブから「型の参照」で、「System.Data[4.0.0.0]」にある「DataTable」を選択すれば作成できます。

※都度追記
OSSのワークショップに参加してみた

OSSに以前から興味があったけど、なんとなく難しそうなイメージでした。でも今回ワークショップに参加させていただいて、企業での実務経験ゼロの私でも色々貢献できそうなことが見つかりました。ここではOSS開発に参加するきっかけになりそうなことをいくつか上げてみたいと思います。

#自分が直面した問題や使いづらさをIssueとして送ってみる
私が今回取り組んだOSSは以前学習目的でECサイトを作った時にメール送信用に利用したライブラリでした。メールの件名が文字化けするという問題が発生したのですが、その時は解決策を検索して終わりという状況でした。でもよくよく考えてみるともしREADMEやサンプルコードにUTF-8への対応のさせ方が明記されていれば文字化けで苦労する人は減るんじゃないかとういうことで、今回Issueを送ることにしました。自分が直面した問題をIssueとしてあげることで今後同じような問題で困った人のためになるかもしれないということが自分の実体験を振り返ってよくわかりました。

#ドキュメントをよく読んでみる
以前はサンプルをもとに適当に使ってみたという感じでしたが、改めてREADMEをよく読んでみると開発者が翻訳の編集や追加を求めているということで、これなら自分でも貢献できるのではと思いました。また、言語テスト用のファイルに改善できる点が見つかったため、これもIssueとして送って見ようと思いました。READMEなどのドキュメントも普段何気なく読み飛ばしたりしているところがあるかもしれないのでしっかり読み込んでみると貢献につながるヒントが見つかると思います。

#初心者だから気づくこと
以前使った時はいくつかのサンプルコードを参照しながら自分のプログラムに取り入れるという感じでした。もしフォーム入力からメールの送信までが一つのサンプルにまとめられていたらもっと簡単に利用できたのではということで、自分なりにサンプルコード改善してプルリクを送ってみたいと思いました。こういう風に説明してもらえる（ドキュメントを書いてもらえる)と助かるというのもOSSの開発に参加するいいきっかけになるのかなと思いました。

#まとめ
今回OSSの開発に参加するという目的をもってOSSを使ってみると今まで気づかなかったことに色々気づけました。今後も普段使っているオープンソースのエディタやツールなど色々なOSS開発に参加していきたいと思いました。
Pythonの名前空間（メモ）

Pythonの変数は、名前空間ごとに定義される。

・関数の中と外
・クラスの中と外
・モジュールの中と外

では、名前空間が異なるため、変数は別々に定義される。

```python:hoge.py
x = 1
def function():
    x = 2
    print(x)

function()  # =>2
print(x)    # =>1
```

関数内では x=2 で
関数外では x=1 。
x は別々に定義されている。

クラス、モジュールに関しても同様。
AWS SNSでSMSを送信する

# やりたかったこと
AWSのLambdaとSNSを連携させて、SMSを送信する。
複数の人に一斉に送信するのではなく、必要な時に一人にだけ送信できれば良い・・・

# やってみた
### Lambda

```
const AWS = require('aws-sdk');
const sns = new AWS.SNS({apiVersion: '2010-03-31'});

exports.handler = async (event) => {
    
    try{
        
        let phoneNumber = event.number;
        let message = event.message;
        
        var params = {
            Message: message, /* required */
            PhoneNumber: phoneNumber
        };
        
        let res = await sendSMS(params);
        return res;
        
    }catch(e){
        console.log('ERROR!',e)
        
    }
    
};

const sendSMS = (params) => {
    return new Promise(function (resolve, reject) {
        
        sns.publish(params, function(err, data) {
            if (err){
                console.log('ERROR! : SendSMS')
                console.log(err, err.stack); 
                reject(err)
            }else{
                console.log('SUCCESS! : SendSMS')
                console.log(data);  
                resolve(data)
            }
        });
        
    });
    
}
```
React Native Firebase でユーザのEmailを認証する

# コード
RNFirebase.User内にEmailの認証を行うメールを送信する **sendEmailVerification( )** が用意されている。

```typescript:user.ts
import firebase, { RNFirebase } from 'react-native-firebase'

class User {
  private user: RNFirebase.User

  constructor() {
    firebase.auth().onAuthStateChanged((user: RNFirebase.User) => {
      this.user = user
    })
  }

  verifyEmail = () => {
    this.user.sendEmailVerification()
  }
}
```

# 注意点
メール内のリンクからEmail認証後に、サインインしなおすか、RNFirebase.User内の**reauthenticateWithCredential(credential)**を実行しないと認証されていないことになってしまう。
RedmineをView Customize pluginを使ってカスタマイズ～カスタムクエリBootstrap風ボタン実装編～

# 要件

- BtoCサービスのスタッフ向けに構築したRedmineでカスタムクエリを複数作成した

その結果、下記のような課題がスタッフより上がってきたので、その課題の解決を`View Customize plugin`で行った。
[RedmineをView Customize pluginを使ってカスタマイズ～引用折り畳み編～](https://qiita.com/yuta-yoshinaga/items/262517c8e6cde1bd44bc)、[RedmineをView Customize pluginを使ってカスタマイズ～LINE風チャット画面実装編～](https://qiita.com/yuta-yoshinaga/items/fbaf542acf41a445e72b)の続き。

## 課題

- カスタムクエリがサイドバーにあり、ぱっと見、目に入ってこないので押さない
- サイドバーにあるとなんとなく、押してしまってよいのか(何か変更されたりとか)気になってしまって結局押さない

## 解決案

- カスタムクエリをBootstrap風の押しやすいボタンにする
- 押しやすいようにメイン部分の上下にボタンを配置する

## 環境
- Redmine Ver. 3.4.6
- View Customize plugin Ver. 2.0.0
- テーマ Farend basic

## View Customize pluginでの設定手順

[View Customize plugin](https://github.com/onozaty/redmine-view-customize)のインストール方法など公式リポジトリを参照。
以下はView Customize pluginがインストールされている前提での設定手順

1. `新しい表示のカスタマイズ`を押す
1. パスのパターンに`/issues/*`を入力する。
1. 挿入位置を`全てのページのヘッダ`にする。
1. 種別を`JavaScript`にする。
1. コードに下記コードを入力する。

```javascript
$(document).ready(function () {
    var querieBtns = $('<div class="querieBtns" style="margin:10px 0;"></div>');
    var querieCnt = 0;
    var colors = new Array();
    var txtColors = new Array();
    colors.push('#2780E3');
    txtColors.push('#ffffff');
    colors.push('#3FB618');
    txtColors.push('#ffffff');
    colors.push('#9954BB');
    txtColors.push('#ffffff');
    colors.push('#FF7518');
    txtColors.push('#ffffff');
    colors.push('#FF0039');
    txtColors.push('#ffffff');
    colors.push('#373a3c');
    txtColors.push('#ffffff');
    $('.query').each(function (index, element) {
        var tgt = $(this).clone();
        tgt.css('display', 'inline-block');
        tgt.css('padding', '10px');
        tgt.css('border-radius', '5px');
        tgt.css('margin', '10px');
        tgt.css('box-shadow', '5px 5px 6px 3px #808080');
        tgt.css('color', txtColors[querieCnt % txtColors.length]);
        tgt.css('background-color', colors[querieCnt % colors.length]);
        if (tgt.hasClass('selected')) {
            tgt.css('border', '5px solid #3E5B76');
        }
        querieBtns.append(tgt);
        querieCnt++;
    });
    if (querieCnt != 0) {
        $('#content').before(querieBtns.clone());
        $('.pagination').before(querieBtns.clone());
    }
});
```
## 完成イメージ
![screencapture-e-btm-tokyo-projects-201711_jandk-issues-2019-01-17-22_56_56.png](https://qiita-image-store.s3.amazonaws.com/0/291912/83b82721-8fb0-f8d8-23b6-440a9a1c1e64.png)


## 解説
サイドバーにあるカスタムクエリエレメントをループで取得しながら、エレメントをクローンして、ボタン風に改造するためのCSSを付加して、ページの上下に配置している。カスタムクエリがたくさんあるとページがうるさくなるが、5～6個くらいなら実用には耐えるかと思われる。

## 所感

原色系の色を6色用意して、6個以上のカスタムクエリがあった場合には色がループするように考慮してある点が工夫した点。
デザイン的な面ではボタンにCSSでシャドー付けたり、角丸にしたりしてBootstrap風ボタンに仕上げた点かな。
スマホでもそれなりに押しやすいので、お勧めです。
Vagrant+VirtualBoxでの環境構築を(半)自動化

# 目的
面倒くさい環境構築を(半)自動化して楽しよう！というのが今回の目的です。

# 手順

## VagrantとVirtualBoxのインストール
[Vagrant](https://www.vagrantup.com/)と[VirtualBox](https://www.virtualbox.org/)をそれぞれインストールする。

## ディレクトリの作成と初期化
VMを入れるフォルダを作り

```
$ mkdir project 
```
そこで初期化

```
$ cd project

$ vagrant init
```

## Vagrantfileの編集
変更点のみ記述します。

```..Vagrantfile
# 15行目
config.vm.box = "使いたいOS"

# 35行目(コメントを外す)
config.vm.network "private_network", ip: "192.168.33.10"

# 66行目
config.vm.provision "shell", :path => "provision.sh", :privileged => false
```
#### 66行目の説明
この行を記述することにより、初回の`vagrant up`の際に`provision.sh`に記述されている内容を実行してくれます。
そのおかげで`yum update`などのゲストOS上で行うインストール作業などを自分で入力することなく終わらせることができます。
:pathはprovision.shファイルのある場所を指します。
:privilegedはデフォルトだとtrueで、管理者権限でコマンドを実行してしまいます。
`yum update`などは問題ないと思いますが、anyenvなどをインストールするする際は、設定を変える必要が出てくるので、falseにすることをおすすめします。

## provision.shに関する注意点
1.provision.shをちゃんと作成すること。
作成しないと普通に`vagrant up`されるか、エラーが出て`vagrant up`できません。(未検証なので検証後正確な情報を書きます。)

2.インストールなどの許可
`yum install ~~`などのように書いてしまうと、y/nを問われ途中でシェルスクリプトが止まってしまうので`-y`をつけるか、`echo y\n`としましょう。

3.PATHを記述するものの扱い
.bash_profileなどにPATHを記述するもの(anyenvなど)をインストールする場合、`exec $SHELL -l`とすることが多いですが、シェルスクリプトにこう書いてしまうと途中でプログラムが終わってしまうので`source ~/.bash_profile`のように書きましょう。
そうすることで最後までプログラムを実行してくれます。

## さいごに
たぶんもっと楽な方法はあると思います。(自動化ツールなど)
ですがこの方法は手軽にできる点でおすすめです。
編集したVagrantfileやprovision.shを保存しておけばコピーして再度使えるので、もし環境を破壊してしまったとしてもやり直しが楽になります。
Dockerfileでうまくマウントできないのでdocker-compose.yml使ってマウントする(o*｡_｡)o

#はじめに(メモと独り言)
DockerfileにVOLUMEの記述でマウントできるかなと思ったのですが、パーミッションエラーでたり、うまくいかないのでdocker-compose.yml使うことにしましたというお話です。

パーミッションよりそもそもマウントがうまくいっていないきが…。
DockerfileのBilud時はSucceseとかいったくせに…ぐちぐち( ´Д`)

ちなみにパーミッションのまとめ方以下サイトが自分の中でみやすくありがたかったのでここにメモします。メモメモ_φ(･_･
http://www.tohoho-web.com/wwwxx012.htm

気をとりなおして、copyでなくてマウントしたかったので上記タイトル内容おこなったこと、ここにメモしておきます。_φ(･_･

あと…
Docker自体の記事も書いているのでもしよかったらみてください。
https://qiita.com/sachiko-kame/items/35e0cf07d117c3b92613

#ちなみに用語の私的説明

####Dockerfile　
Dockerのimageを作るために必要なもの。このイメージを実体化することによってコンテナできます。コンテナは一つのサーバーだと思ってくれればいいと思います。

####VOLUME
これは二つの意味がある気がしています。一つは置き場所を作る、いわばフォルダをつくるとでも思っておけばいいのかなと思っています。もうひとつはマウント。マウントはこの場所にあるけど、コンテナの指定したパスのところにあるようにして！って言っている感じの解釈です。
参考:http://docs.docker.jp/engine/tutorials/dockervolumes.html#mount-a-host-directory-as-a-data-volume


####パーミッション
権限。自分や他の人がなにまでやってもいいかというようなこと。

####copy
マウントではなくコピー。コンテナのそのパスにこの場所の内容コピーして！って感じ。マウントではないのでファイル操作しても変わらない。コンテナの中までいってファイル変更すれば、変更が反映されるかもですが。


#ファイル構成
※README.mdは今回の話に必要ないので消してもあってもなにも問題ないです💦
<img width="224" alt="スクリーンショット 2019-01-17 22.48.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/c3fb214b-30e4-0526-6924-45c5c20de28a.png">

<img width="480" alt="スクリーンショット 2019-01-17 22.47.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/29acd8c4-086c-9333-53a9-4b9dcb7e0403.png">


#ファイル中身(大事なところ)
Dockerfile ※Dockerhubのimageを書いてあるだけです。

``````dockerfile:Dockerfile
From php:7.0-apache
```


```docker-compose.yml
version: '3'
services:
  apache:
    container_name: sample-apache-container
    build: ./
    ports:
      - 80:80
    volumes:
      - ./html:/var/www/html
```

*version: '3' 
バージョン3を使う。一番新しいかちょっと古いぐらいだと思います。

apache:
いい感じの名前をつけとく

container_name:
コンテナの名前好きな名前をつける

build: ./
Dockerfileのありか(./)記述
ここでのコンテナはこのDockerfileをイメージ化、コンテナ化したものを使う

ports:
コンテナ８０ポートを自分のパソコン８０ポートに繋げる。
左が自分、右がコンテナ

volumes:
      - ./html:/var/www/html
自分のローカルファイル今いるところのhtmlフォルダをコンテナの/var/www/htmlフォルダのところにあるていにする

github (中身のところ) cloneしてこのフォルダに行って`docker-compose up`動くはずです(✿´ ꒳ ` )動かない。エラーの場合はコンテナとかが起動していないかと確認するといいかもです。
https://github.com/sachiko-kame/dockers/tree/master/yml_use_apache


#最後に
以上ナイーブな記事でした。:chicken:
こういう方法あるよとか、言っていること違うよとか、理解間違っているよなどありましたら、優しく教えていただけると嬉しいです:hatching_chick:

あと…
Docker自体の記事も書いているのでもしよかったらみてください。
https://qiita.com/sachiko-kame/items/35e0cf07d117c3b92613


sachikomemo
docker-compose up
docker-compose up --build
Paraphrase での条件分岐の書きかた

# はじめに
　この文書は、マルチコア対応 Forth 系言語 [Paraphrase](https://github.com/iigura/Paraphrase/) での条件分岐処理はどのように書くのか？ について説明します。


# いわゆる普通の if
　スタックの一番上にある値（TOS=Top Of Stack）が true の時のみ、ある処理を行う場合は、

    if ある処理 then

と書きます。もちろん、ある処理の部分は複数のワードから構成されていても構いません。例として、TOS の絶対値を計算する abs というワードを定義してみます。

```Paraphrase
> "abs" : dup 0 < if -1 * then ;
 ok.
> 5 abs .
 5 ok.
> -5 abs .
 5 ok.
```

TOS の値を複製（dup）しておき、その複製した値と 0 とを比べ、0 よりも小さい場合に限り、if 〜 then の間にある -1 を掛ける処理を実行します。正の場合は、if 〜 then の間は実行されないので、TOS の値は変化しないこととなります。

# if - else
　上の例は、ある条件を満たした時のみ特定の処理を実行するものでしたが、プログラムにおいては、ある条件を満たしているときは処理 A を、満たしていないときは処理 B を実行したい場合があります。これは C などでは if( 条件式 ) { 処理 A } else { 処理 B } などと書かれます。

　Paraphrase でも、このような処理を記述できます（Forth でもできます）。以下の様に書きます：

    if
        TOS が true の時の処理
    else
        TOS が true でない時の処理
    then

これを用いて、TOS の逆数を計算する rcp というワードを定義してみます。TOS が 0 の時は逆数を計算できませんので、このときは "ERROR" という文字列を TOS に積むこととします。

```Paraphrase
> "rcp" : dup 0 != if 1.0 swap / else drop "ERROR" then ;
 ok.
> 2 rcp .
 0.500000 ok.
> 0 rcp .
 ERROR ok.
```

# switch - case
　Paraphrase でも他の言語同様、多方向分岐を行うための仕組みが用意されています。関連するワードは switch, case, ->, break, dispatch です。これについては、言葉で説明するよりも、以下の擬似コードを見たほうが分かりやすいかと思います：

    switch
        case TOS に対するテスト1 -> テスト1 が true の時に実行される処理 break
        case TOS に対するテスト2 -> テスト2 が true の時に実行される処理 break
          :
        case TOS に対するテストN -> テストN が true の時に実行される処理 break
        上記のテスト、いずれにも合致しない場合に実行される処理
    dispatch

ある条件を満たした時に実行される処理が終了すると、dispatch の後に書かれた処理より実行が再開されます（dispatch の次に書かれている処理までジャンプします）。

　有名な Fizz Buzz 問題（[Wikipedia の説明へ](https://ja.wikipedia.org/wiki/Fizz_Buzz)）を処理するワード FizzBuzz は以下のように記述できます。このワードは、TOS が 3 の倍数なら "Fizz" を、5 の倍数なら "Buzz" を、3 および 5 の倍数（つまり 15 の倍数）であれば "FizzBuzz" という文字列をスタックに積みます：

```Paraphrase
"FizzBuzz" :
    switch
        case 15 % 0 == -> "FizzBuzz" break
        case  5 % 0 == -> "Buzz" break
        case  3 % 0 == -> "Fizz" break
    dispatch
;
```

switch ブロックでは case は順次上から実行されていきますので、15 の約数であるか否かは最初に確認しなければなりません（でないと 5 の倍数もしくは 3 の倍数であると判断されてしまうので）。

実際のこのワードを用いて FizzBuzz 列を出力させると、以下のようになります。

```Paraphrase
> 1 20 for+ i FizzBuzz . next
 1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz 16 17 Fizz 19 Buzz ok.
```


# その他
　拡張辞書の extFactor を用いると、factor:if というワードを使用することもできます。これは [Factor](https://factorcode.org/) という連鎖性言語で使われている if 文と同様の条件判断を行うものです。こちらについては Paraphrase に同梱されているドキュメント docs/ext/extFactor.html を参照して下さい。
[CakePHP3]belongsToMany(多対多)のデータの保存方法

　　
## この記事でわかること
- belongsToManyの使い方
- belongsToManyな関係のデータの保存方法

## 前提
### 想定
塾講師の管理システムを作るとします。
今回実装したい機能は、講師の担当教科を設定できるようにすることです。
例：ジョージ先生は数学、物理を担当している。

### 使用するテーブル
- teachers：講師情報（名前など）を管理するテーブル
- subjects：教科テーブル(nameカラムに「数学」や「英語」などが入る)
- teachers_subjects：講師がどの教科を教えることができるのかを保持しているテーブル

```
CREATE TABLE teachers (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50),
    created DATETIME,
    modified DATETIME
);

CREATE TABLE subjects (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255),
    created DATETIME,
    modified DATETIME
);

CREATE TABLE teachers_subjects (
    teacher_id INT NOT NULL,
    subject_id INT NOT NULL,
    PRIMARY KEY (teacher_id, subject_id),
    FOREIGN KEY subject_key(subject_id) REFERENCES subjects(id),
    FOREIGN KEY teacher_key(teacher_id) REFERENCES teachers(id)
);
```

## belongsToManyについて
belongsToManyは “Teachers belongsToMany Subjects” (先生が多くの科目に属する) ということになります。
belongsToMany アソシエーションでは**`三つのデータベーステーブルが必要`**です。 
今回で言えば、 teachers 、 subjects および teachers_subjects で、 
結合(中間)テーブルは、**`関連する二つのテーブルの名前をアンダースコアーで結びつけるという規約があります。`**

### 例
こんな感じでデータを保持します。

- ジョージ先生は数学、物理を担当している。
- ロレイン先生は国語、英語、歴史を担当している。

**teachers**テーブル

| id    |name    |
|:------|:-------|
| 1     |ジョージ  |
| 2     |ロレイン  |

**subjects**テーブル

| id    |name |
|:------|:----|
| 1     |数学  |
| 2     |国語  |
| 3     |英語  |
| 4     |歴史  |
| 5     |地理  |
| 6     |物理  |
| 7     |化学  |


**teachers_subjects**テーブル

| id    |teacher_id|subject_id|
|:------|:-------|:-------|
| 1     |1  |1  |
| 2     |1  |6  |
| 3     |2  |2  |
| 4     |2  |3  |
| 5     |2  |4  |


### アソシエーション

 両方のモデルの中で belongsTo アソシエーションを定義することができます。

```src/Model/Table/TeachersTable.php
class TeachersTable extends Table
{
    public function initialize(array $config)
    {
        $this->belongsToMany('Subjects');
    }
}

```

```src/Model/Table/SubjectsTable.php
class SubjectsTable extends Table
{
    public function initialize(array $config)
    {
        $this->belongsToMany('Teachers');
    }
}
```

## belongsToManyな関係のデータの保存方法

では実際に、担当科目を設定できるようにしていきます。
まず、TeachersからSubjectsのデータを保存できるようにします。

``` src/Model/Entity/Teacher.php

class Teacher extends Entity
{
    protected $_accessible = [
        'name' => true,
		'subjects' => true //←これを忘れると保存できないので注意
    ];
}

```

講師を追加するためのaddアクションです。
本来はフォームから受け取ったデータを保存するべきですが割愛します。

```src/Controller/TeachersController.php

<?php
namespace App\Controller;

class TeachersController extends AppController
{
    public function add()
    {
        $data = [
			'name' => 'ジョージ',
			'subjects' => [
				['subject_name' => '数学'],
				['subject_name' => '物理']
			]
		];
		$teachers = TableRegistry::get('Teachers');
		$teacher = $teachers->newEntity($data, [
			'associated' => ['Subjects'],
		]);
		$this->Teachers->save($teacher);

		return $this->redirect(['action' => 'index']);
    }
}
```

これだけで講師(teachers)、教科(subjects)、その講師が担当できる教科(teachers_subjects)が一度に保存できました。
なかなか便利ですね〜
今まで、teachers_subjectsのような中間テーブルを手動で保存していたので、これからはもっとスマートに書けそうです。
【Unity】VR用にスマホ移動（右、左）でキャラクターも移動する

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Unity 2018.2.15f1
⭐️Xcode10.1
⭐️iPhone7(IOS 12.1)

実際に動かした動画はこちら↓↓
https://twitter.com/nonnonkapibara/status/1085881392788004870
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">✨VR用✨にスマホ移動できるように勉強したよぉ。<br>キャラクターをカメラ追跡☺️<br>VR用にスマホ左、右、向けると、キャラクターも移動する。<br>スマホを上にすると、Jumpするようにしたよぉ〜。<br>いろいろ調べて、やっとできた。😁 <a href="https://t.co/CQf3DqkWvy">pic.twitter.com/CQf3DqkWvy</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1085881392788004870?ref_src=twsrc%5Etfw">2019年1月17日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

1.キャラクターの配下にMain Cameraを配置する「RunController.cs」
<img width="1278" alt="スクリーンショット 2019-01-19 17.37.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/b91eda90-395a-52fb-dc71-a0fe31af3f68.png">


2.カメラ追従のスクリプトをセットする「CameraFollowing.cs」
<img width="1270" alt="スクリーンショット 2019-01-19 17.38.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/3673a43f-8056-325e-43e8-f04529252293.png">


キャラクターにカメラを追従する。

```c#:CameraFollowing
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CameraFollowing : MonoBehaviour {
    Vector3 diff;

    public GameObject player;
    public Camera mainCamera;
    public float followSpeed = 25f;
    private Vector3 offset;
    void Start()
    {
        //プレイヤーとカメラ間の距離を取得
        offset = mainCamera.transform.position - player.transform.position;
    }

    /*
     * LateUpdateは、全てのオブジェクトのUpdate()が行われた後に実行。
     */
    void LateUpdate()
    {
        transform.position = player.transform.position + offset;
    }
}
```

VR用にスマホ左、右、向けると、キャラクターも移動する。
↓↓↓↓スマホを上にすると、Jumpする

```c#:RunController.cs
   〜省略〜
    void Update()
    { 
        // VR用
        // スマホ左へ傾ける
        if (mainCamera.transform.forward.x < 0.0f)
        {
            MoveToLeft();
        }
        else if (mainCamera.transform.forward.x > 0.0f)
        {
            // スマホ右へ傾ける
            MoveToRight();
        }

        // スマホを上にしたらJump
        if (mainCamera.transform.forward.y > 0.0f) {
            MoveToJump();
        }
    }

```


</br>
</br>
</br>

#<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【Unity】やっとVR用のゲームができました！！<br>シーンの遷移も、スマホにVR用の出力もできました！！<br>やった！！<br>v(≧∇≦)v イェェ～イ♪<a href="https://twitter.com/hashtag/unity?src=hash&amp;ref_src=twsrc%5Etfw">#unity</a> <a href="https://twitter.com/hashtag/unity3d?src=hash&amp;ref_src=twsrc%5Etfw">#unity3d</a> <a href="https://twitter.com/hashtag/VR?src=hash&amp;ref_src=twsrc%5Etfw">#VR</a> <a href="https://t.co/AEsbXdrnhX">pic.twitter.com/AEsbXdrnhX</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1076511052043448320?ref_src=twsrc%5Etfw">2018年12月22日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
他セグメントにいるWindowsノードにSSHポートフォワーディングを利用してLinuxサーバ経由でRDP接続する。間にLinuxサーバ2台。

SSHポートフォワーディング。いつもどうやってやるんだっけと調べているので、サンプルを一つ。

![0001.png](https://qiita-image-store.s3.amazonaws.com/0/197060/e7283a0d-05df-9ba7-f4cf-9fbc404d09b8.png)

![0002.png](https://qiita-image-store.s3.amazonaws.com/0/197060/c34b57a1-1e71-4ff4-9f16-777fa294b849.png)

## 【1】CentOS①でコマンド実行

```shell:command
$ ssh ＜user＞@＜CentOS②＞ -C -L 12345:＜Windowsサーバ＞:3389
```

CentOS②にssh接続し、Windowsサーバのポート3389をCentOS①のポート12345と接続する。-Cで通信パケットを圧縮。CentOS①以外から12345ポートへのアクセスを許可しないため、-gオプションは付与しません。

## 【2】PuttyやTeraTermでCentOS①にSSH接続してからポートフォワーディング設定

Puttyの場合は[接続>SSH>トンネル]
（TeraTermは[SSHポート転送]）

- 源ポート/ローカルのポート: 23456
- 送り先/リモート側ホスト・ポート: 127.0.0.1:12345

## 【３】リモートデスクトップで127.0.0.1:23456に接続するとWindowsサーバのRDPに接続される。

とっても便利
How much would it cost to develop a Grocery Delivery App like AmazonFresh, Instacart & Peapod? A Complete Guide

The mobile technology has given a paradigm shift to our lives. With a few clicks, you can play your favorite music album; control your devices, order delicious food and book movie tickets. Users have embraced convenient, comfortable and time-saving mobile apps that minimize efforts and offer the highest gratification in return. Take the example of grocery delivery apps. Visiting grocery stores every weekend is a tedious and time-consuming task, and the solution is right here- online grocery delivery apps. You can order household products without moving an inch.

InstaCart, Peapod, Vons, Blue Apron, Fresh Direct, and Purple Carrot are some of the significant on-demand grocery delivery apps. If you want to make a grocery delivery app, this article is for you. Read More..https://www.prismetric.com/cost-to-develop-grocery-delivery-app/
Laravelのローカル環境構築

## 概要

Laravelをローカルで開発できる環境を用意します。
前提として簡単なTerminal/コマンドの知識がです。

## Composerの用意

Laravelのローカル環境を用意するためにはComposerが必要です。<br>

[PHP:composer](https://getcomposer.org/)
<br>

以下のコマンドを順にTerminalに入力<br>

`curl -sS https://getcomposer.org/installer | sudo php`<br>
`mv composer.phar /usr/local/bin/composer`

「Composer.pharファイルをダウンロードし、どこでもComposerの実行可能に設定」（グローバルインストール）
<br>
## Laravelインストール

開発するフォルダはこんな感じで用意しようと思います。<br>

```
.
├── Applications
├── Desktop
├── Documents
├── Downloads
├── Library
├── Movies
├── Music
├── Pictures
├── Public
└── dev
    └── Laravel
            └── Laravel_sample
```

~/dev/Laravelフォルダに移動し以下のコマンドを入力<br>

`composer create-project --prefer-source laravel/laravel Laravel_sample "5.5.*"`<br>

上記コマンドの簡単な意味を以下に記します。<br>

```
composer create-project 
// コンポーザーを使ってプロジェクト作る！

--prefer-resource　laravel/laravel
// GitHub から laravel/laravel　をクローンでダウンロードします（時間かかります）

Laravel_sample
// Laravel_sample　という名のProject名で生成。Laravelのファイル名がLaravel_sampleになります。
// 作りたいアプリの題名です。

 "5.5.*"
// laravel 5.5の最新版をダウンロード
```

ローカル環境に`laravel_sample`が用意できたかと思います。実際にLaravelが動くか試してみましょう。

```
cd Laravel_sample

php artisan serve
```
以下のURLをブラウザに入力
http://127.0.0.1:8000

<img width="1015" alt="スクリーンショット 2019-01-17 22.31.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/222848/4b778c94-b251-b005-9b1d-cb901cd9ae06.png">

上記の画面が出れば成功です！
GITコマンドで複数のGITHUBアカウントを使い分ける方法

(2021/07/01追記) この記事の内容は古いです
この手法は、submoduleを運用するときに破綻するので、もっと良い方法を書きました。
https://qiita.com/hikaruna/items/60f2749e2abd3885ac46

---

account_aとaccount_bでプライベートキーが違うと、git-cloneなどに失敗する。

direnvとgitのGIT_SSH_COMMANDという設定で制御する


```shell-session:ディレクトリ構成
home
├── .ssh/
│   ├── account_a_private_key
│   └── account_b_private_key
├── src_account_a/ # account_aのプロジェクトを配置するディレクトリ
│   └── .envrc
└── src_account_b/ # account_bのプロジェクトを配置するディレクトリ
    └── .envrc
```

```shell:src_account_a/.envrc
export GIT_SSH_COMMAND="ssh -i ${HOME}/.ssh/account_a_private_key
```

```shell:src_account_b/.envrc
export GIT_SSH_COMMAND="ssh -i ${HOME}/.ssh/account_b_private_key
```

こうすると、src_account_a/では、account_aのprivateリポジトリなどに、src_account_b/では、account_bのprivateリポジトリなどにアクセスできる。
　
## 参考

- ```man git```
- https://blog.dnpp.org/git_environment
VirtualBoxを職場で無料で利用し続けるために。

## 概要

VirtualBoxを無料で使うために気にすることを記録しておきます。ホストとゲストはどちらもWindows10で。


## 環境情報

- 仮想化ソフトウェア: VirtualBox 5.2.22
- ホストOS: Windows10 バージョン1803
- ゲストOS: Windows10 バージョン1803


## Extension Packは使用しない。

職場で利用する場合はライセンスの都合上「Extension Pack」は使用できません
https://www.virtualbox.org/wiki/VirtualBox_PUEL


## タスクスケジューラで強制時刻同期。

Extension Packをインストールできない関係で、時刻がずれまくります。
幸いにもLANから接続可能な場所にNTPサーバがいたので、タスクスケジューラで強制同期のタイミングを複数用意しておきます。

- [タスクスケジューラ（ローカル）] > [タスクスケジューラライブラリ] > [Microsoft] > [Windows] > [Time Synchronization]

[ForceSynchronizeTime]をエクスポートしてインポートします。インポート時は別名[ForceSynchronizeTime_Custom]などと別名をつけます。

[ForceSynchronizeTime_Custom]のプロパティを表示して、トリガーに以下を追加します。

| トリガー | 詳細 |
|:--|:--|
| ワークステーション　アンロック時 | 任意のユーザーがワークステーションのロックを解除したとき |
| ユーザーセッションへの接続時 | 任意のユーザーセッションへのリモート接続時 |
| ログオン時 | 任意のユーザーのログオン時 |
| 毎日 | 毎日 xx:xx に起動 – トリガーされた後、1日間の間30分ごとに繰り返します。 |

さらに、スクリーンセーバーを[再開時にログオン画面に戻る]にチェックを入れて設定しておくことで再ログインを促し、
利用開始時に時刻同期されるように調整します。そのあたりは利用者の癖にもよるので、人それぞれな設定が必要かもしれません。
また、私の環境ではスクリーンセーバーの待ち時間をホストOSよりも短くしておかないとゲスト側でうまいことスクリーンセーバーが発動しませんでした。
適宜調整してください。


## リモートデスクトップで接続

ゲストOSの操作はリモートデスクトップ経由が良いです。歴史が長いだけに快適です。
(Hyper-V使ったとしてもそのコンソールよりリモートデスクトップの方が快適な気がする。)


# デタッチモード起動

初期インストール以外では基本的にVirtualBoxコンソール画面は使用しないのでゲストOSはデタッチモードで起動しておいた方が良いでしょう。
ホストOS側でゲストマシン設定することでデフォルトデタッチモード起動にすることも可能です。

```dos:command
> VboxManage.exe modifyvm <仮想マシンの名前> --defaultfrontend separate
```

# ディスク暗号化

Extension PackをインストールできないのでVirtualBoxのディスク暗号化は使用できません。
暗号化しておきたい場合はゲストOS側のWindows BitLockerを使用しましょう。
その際、ディスク全体ではなく使用域のみを暗号化することで、VirtualBoxのVDI容量可変機能は生かせます。

ゲスト環境でのBitLocker設定時には以下グループポリシーを変更しておく必要があります。
暗号化後には設定したグループポリシーは解除されるようですが、特に問題にはなりませんでした。

- [ローカルコンピューターポリシー] > [コンピューターの構成] > [管理用テンプレート] > [BitLockerドライブ暗号化] > [オペレーティングシステムのドライブ]

[スタートアップ時に追加の認証を要求する]を[未構成]から[有効]に変更してオプションの[互換性のあるTPMが装備されていない BitLockerを許可する・・・・]をチェックする。


## ディスク容量のメンテナンス

ストレージ容量肥大化の際は以下ツールでメンテします。

- ゲストOSのパーティションの管理ならAOMEI Partition Assistant

- ゲストOSの未使用域ゼロ埋めならWindows標準のsdelete64

- VirtualBoxで仮想ドライブを収縮するならVBoxManage modifyhd ＜仮想ドライブフルパス＞ --compact
Scalaで変数を使う

##はじめに
Scalaを勉強し始めたので、学んだ内容を整理していきます。
参考書として [基礎からわかるScala](https://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%82%8F%E3%81%8B%E3%82%8B-Scala-%E9%AE%AB%E5%B3%B6-%E5%85%89%E8%B2%B4/dp/4863542267) を使っています。

今回は、「変数」について学びました。

##変数の種類

Scalaで登場する変数は下記の2つ。

1. val -> 定数。宣言後は値が変わらないもの。
2. var -> 変数。宣言後も値が変わるもの。


##1. val
###書き方
val 変数名: 型 = 初期値;

###サンプルソース
```VariableSample.scala
object VariableSample extends App {
  val valValue: Int = 100;
  printf("定数 = %d \n", valValue);

  //下記の記述をすると、コンパイルエラーが発生
  //valValue += 1;
}
```

###実行結果
>定数 = 100

##2. var
###書き方
var 変数名: 型 = 初期値;

###サンプルソース
```VariableSample.scala
object VariableSample extends App {
  var varValue: Int = 99;
  printf("変数 = %d \n", varValue);
  varValue += 1;
  printf("変数 = %d \n", varValue);
}
```

###実行結果
>変数 = 99
>変数 = 100
ransackでボタンを押すだけで検索したい！



```index_controller.rb
def toppage
 @search = Offer.ransack(params[:q])
 @result = @search.result
end
def search
 @search = Offer.ransack(params[:q])
 @result = @search.result
end

```

```toppage.html.erb
<%= link_to 'クリックしてください', controller: "index", action: "search",q: {title_cont: '検索させたいワード'} %>
```

```search.html.erb
<% @result.each do |result| %>
　　表示したいものを表示...
<% end %>

```


これで、ユーザーさんが入力する手間が省けて
クリックするだけであらかじめ決められてるワードとかなら検索できて便利かなぁと思いました！

間違い等ありましたらご指摘いただけると嬉しいです！
GitでどうしてもProxyが突破できない場合にローカルプロキシを使用する。

## 概要

Windows環境でGitのプロキシ認証設定をいくら頑張ってもプロキシを突破できないことがありました。
根本的な原因はわかりませんが、とりあえずローカルプロキシを立てることで、突破できないプロキシはローカルプロキシに突破してもらい、
Gitからはローカルプロキシに接続することで何とか繋がりました。


## 環境情報

- クライアント端末：Windows10 1803
- ローカルプロキシ：BurpSuite Community Edition v1.7.36 (Jarファイル版)
- Gitサーバ：AWS CodeCommit にHTTPS接続


## ローカルプロキシ設定

BurpSuiteを利用しました。このソフト自体はパケット改ざんとかできる高機能ソフトですが、今回はローカルプロキシとしてのみ使用します。
他、ローカルプロキシが実現できるソフトなら何でもOKだと思います。JMeterなんかでも試してみたらできました。
昔お世話になったProxomitronを使おうと思ったら全く更新されてない・・・製作者の方亡くなっていたんですね。完成度高かったな・・

ダウンロードして起動したら以下の通り設定します。

### プロキシ設定

環境次第かと思いますが、ざっくりと以下のようにしました。


- User Options > Connections > Upstream Proxy Servers > Add

| 項目 | 設定値 |
|:--|:--|
| Destination host | * |
| Proxy host | ＜プロキシホスト名を入力＞ |
| Proxy port | ＜プロキシポート番号を入力＞ |
| Authentication type | ＜認証方式を入力＞ |
| Username | ＜ユーザ名を入力＞ |
| Password | ＜パスワードを入力＞ |

### Intercept設定(ソフトウェアを起動するたびに実施する必要があります。)

パケットを参照したりいじくったりするソフトウェアですので、デフォルトで通信を遮ってしまいます。
今回は不要なので、Intercept設定をオフにします。

- Proxy > Intercept

[Intercept is on]トグルボタンを押下して[Intercept is off]に変更する。


### 備考

デフォルトの設定ファイルは以下フォルダに格納されます。

- C:\Users\＜ユーザ名＞\AppData\Roaming\BurpSuite
AngularでC3.jsを使う

# はじめに
本記事が初投稿となります。まずは簡単なテーマで投稿してみたいと思います。
仕事でAngularプロジェクトの中でC3.jsを使ったのでその方法を書きます。

# 前提
Angular CLIのインストールが済んでいることとします。
筆者がインストールしたCLIのバージョンは`7.2.1`です。

# Angularプロジェクトの作成
参考: https://qiita.com/nrainiero/items/de5edec1ca7d85abcc71

下記コマンドを実行してください。

```bash
~$ ng new my-angular-proj
```

実行後、以下の質問をされますので答えます。
筆者はAngular Routingを追加せず、スタイルシートはCSSを指定しました。
（今回、C3.jsを使うだけの簡単なプロジェクトなのでRoutingは追加しませんでしたが、実際には追加しておくと便利です。)

```bash
Would you like to add Angular routing? (y/N) y
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS 
  SCSS   [ http://sass-lang.com   ] 
  SASS   [ http://sass-lang.com   ] 
  LESS   [ http://lesscss.org     ] 
  Stylus [ http://stylus-lang.com ] 
```

# C3.jsのインストール
プロジェクトフォルダに移り、C3.jsをインストールします。

```bash
~/my-angular-proj$ npm install c3
~/my-angular-proj$ npm install -D @types/c3
```

# Angularでグラフを書いてみる
まず忘れないうちに、C3.js用のCSSファイルをインポートしておきます。

```css:src/styles.css
@import "../node_modules/c3/c3.min.css";
```

今回はAngular CLIで既に作成されている`app.component`にグラフを記述します。
HTMLテンプレートは以下の通りとします。

```html:src/app/app.component.html
<div id="chart"></div>
```

tsファイルは以下の通りです。

```typescript:src/app/app.component.ts
import { Component, AfterViewInit } from '@angular/core';
import * as c3 from 'c3';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit {
  private data: any[] = ["data", 1, 2, 3, 4, 5];
  private chart: c3.ChartAPI;

  ngAfterViewInit(): void {
    this.chart = c3.generate({
      bindto: '#chart',
      data: {
        columns: [this.data]
      }
    });
  }
}
```

# ブラウザで確認する
まずはビルドします

```bash
~/my-angular-proj$ npm start
```

ブラウザから`http://localhost:4200`にアクセスすると、グラフが表示されるはず...!
![画像.png](https://qiita-image-store.s3.amazonaws.com/0/344869/a0ac55bc-c584-c2e3-01ae-f91da606bceb.png)
LVM パーティション切らずにデバイスごとVolume Groupに追加

備忘メモです。
とりあえずLVの容量拡張できればなんでもいいとき用。

追加するデバイス名は/dev/sdb

```shell:command
# df -h
# fdisk -l

# pvdisplay
# pvcreate /dev/sdb
# pvdisplay

# vgdisplay
# vgextend ＜VG NAME＞ /dev/sdb
# vgdisplay
# pvdisplay

# lvdisplay
# lvextend -l +100%FREE /dev/mapper/＜追加対象LVディスク＞
# lvdisplay

# df -h

(CentOS 6)
# resize2fs /dev/mapper/＜追加対象LVディスク＞

(CentOS 7 /dev/centos/からもディスク指定可能)
# xfs_growfs /dev/mapper/＜追加対象LVディスク＞

# df -h
```
AWSでインスタンス再起動したら、サーバーにアクセスできなかった話

#エラー内容
インスタンス再起動後に、サーバーを立ち上げ、アクセスしてもアクセスできませんと言われる。
#原因
nginxが動いてなかった。
#対処
⓵$ sudo service nginx restart
②$ sudo service mysqld start
⓷　再デプロイ

#注意
⓵reloadというコマンドは起動指定ないと動かない。
②インスタンス再起動後は、とりあえず、mysql、nginx、unicornをたちあげてみる。
実機なしでArduboyをプレイ・開発する方法

エミュレータを使うことで、Arduboy実機を持ってなくても、ゲームをプレイしたり開発することが可能になることを知りました。その方法を説明します。
（私はArduboyを壊してしまったのでこの方法を見つけられてよかった...）

#ProjectABE
エミュレータ「ProjectABE」を使います。これはブラウザでもアプリでもできます。

Qiitaを読むような層なら以下のサイトを読めば大体分かるのではないでしょうか？
[GitHub ProjectABE](https://github.com/felipemanga/ProjectABE)

残りの記事では、上のサイトを読んでも分からない人向けに書きます。

#ゲームの遊び方
まずは、「ProjectABE」のホーム画面を開きましょう。

ブラウザ版は以下のリンクから飛ぶだけです。
[Browser ProjectABE](https://felipemanga.github.io/ProjectABE/)

アプリ版は以下のサイトからダウンロード・インストールして開くだけです。
[local ProjectABE](https://github.com/felipemanga/ProjectABE/releases)

ゲームを遊ぶにはSourcesから遊びたいゲームを選ぶだけです。craitさんやTeamARGのゲームなどArduboy界隈で有名なゲームは大体遊ぶことができます。

ただし、この方法では好きなゲームを遊べるわけではありません。特に自分で作ったゲームが遊べません。好きなゲームが遊びたい場合は、そのゲームのhexファイルをProjectABEのホーム画面にドラッグアンドドロップしましょう。これだけですが、普通の人はよく分からないと思うので、次の節でもう少し詳しく説明します。

#ゲームの作り方
ProjectABEを用いて実機なしでゲームを作るには概ね二つの方法があります。

(1) ProjectABEに直接コードを書く
簡単ですが、あまり難しいゲームは作れない方法です。My Projectsにコードを書けばゲームが作れます。初めてArduboyでゲームを作る人にはオススメできる方法です。ただし、Arduinoのライブラリが使えない（というより使い方が分からない）ので、例えばC++のSTLが使えないです。

(2) Arduino IDEでコーディング、hexファイルで動かす
もう一つの方法は、Arduino IDEで通常と全く同じようにコーディングし、実機にアップロードする代わりにhexファイルをProject ABEで動かす方法です。

この方法では、まず通常通りにコーディングするだけなのでArduino IDEを導入してください。
それには[Arduboy ことはじめ](https://qiita.com/fum1h1ro/items/9c7fb0d072e4e6e87633)や[Arduboyの始め方〜購入からゲーム作成までの最短ルート〜](https://qiita.com/lovebourbaki/items/d9dd0c9c2b8173f1e8ef)を読んでください。

また、Arduboyでのゲーム製作は[Arduboyでゲームを作ろう](https://qiita.com/lovebourbaki/items/351e333122a60d1a9668)を参考にしてください。

さて、Arduino IDEでhexファイルを作るには、コンパイル（やアップロード）する代わりに「スケッチ」から「コンパイルしたバイナリを出力」を選んでください。するとinoファイルが入ったフォルダにhexファイルが生成されているはずです。hexファイルはコンパイル後にArduinoが実行する機械語に翻訳されたコードです。実機がなくてもProjectABEにhexファイルをドラッグアンドドロップすることでゲームを起動することができます。
erusev/Parsedownのcode部分のみ簡易拡張

### codeタグを拡張したかった。
理由は、(teratail)のマークダウン表示の真似をしたかったからです。
真似をするには、cssも必要ですが、今回は記載しません。

parsedownは、デフォルトだと、下記のように出力されてしまいます。

```html
<pre><code class="language-php">コード</code></pre>
```

それをこのようにしたいと思いました。

```html
<pre class="language-php"><code class="hljs language-php" data-language="php">コード</code></pre>  
```
### 作業をするにあたって
■こちらの記事が参考になりました。拡張方法の詳細など詳しく載っています。
https://blog.keinos.com/20180128_3166

##以下、上記URLを読んで頂いた前提で、話を進めさせて頂きたいと思います。

### 拡張の説明が少ない
公式チュートリアルを実際にやる。→ソースコードを読む
の流れがオススメだと思います。
https://github.com/erusev/parsedown/wiki/Tutorial:-Create-Extensions#change-element-markup

ちなみに、インライン画像のマークダウンは、このような形です。これを食わせてください。

```php
$markdown_txt = '![alt text](https://github.com/icon48.png "Logo Title Text 1")';
$converted_txt = $Extension->text($markdown_txt);
```

### 答え
```php
class Extension extends Parsedown {
  protected function blockFencedCode($excerpt) {
    $language_name = substr($excerpt['body'], 3);
    $code = parent::blockFencedCode($excerpt);
    $code['element']['attributes']['class'] = $code['element']['text']['attributes']['class'];
    $code['element']['text']['attributes']['class'] = 'hljs ' . $code['element']['text']['attributes']['class'];
    $code['element']['text']['attributes']['data-language'] = $language_name;

    return $code;
  }
}
```
Flexbox Froggy

# 紹介
同僚からFlexboxのお勉強用によいサイトを紹介してもらった。
ので、ただの紹介。
https://flexboxfroggy.com/#ja

# どんな感じ？

![screenshot-flexboxfroggy.com-2019-01-16-18-34-33-108.png](https://qiita-image-store.s3.amazonaws.com/0/180599/2d30e67d-ba9d-6a49-3111-f2318ec9d39d.png)

　　↓

![screenshot-flexboxfroggy.com-2019-01-16-18-37-58-308.png](https://qiita-image-store.s3.amazonaws.com/0/180599/4f189b28-ae82-77df-6bd9-dbd644961ee9.png)

　　↓

![screenshot-flexboxfroggy.com-2019-01-16-20-07-36-320.png](https://qiita-image-store.s3.amazonaws.com/0/180599/557bc589-121a-e62e-8df6-44cefa352fbb.png)

# まとめ
こんな感じでLv1〜24まで。
やりはじめると一気に・・・。

全クリアするとちょっと嬉しい。最後の問題だけが難しい。

![FireShot Capture 001 - Flexbox Froggy - CSS flexbox学習ゲーム - https___flexboxfroggy.com_#ja.png](https://qiita-image-store.s3.amazonaws.com/0/180599/fc71c104-42ea-b31f-8587-76018d49491a.png)
Goのstrings.BuilderをラップしてJavaのStringBuilder風に

# お題
Goの1.10からstrings.Builderというのが追加されて文字列連結が効率的になった様子。
ただ、JavaのStringBuilderを使ってきた身からするとメソッドチェーンでつなげていきたい。Goの作法に則っていなくても。
というわけで、お試しでラッパー作ってみた。

# 開発環境
### # OS
```
$ $ cat /etc/os-release 
NAME="Ubuntu"
VERSION="18.04.1 LTS (Bionic Beaver)"
```

### # 言語
```
$ go version
go version go1.11.4 linux/amd64
```

# 実践

## strings.Builderラッパー
こんな感じ。

```go

// NewStringBuilder ...
func NewStringBuilder() StringBuilder {
	return &stringBuilder{sb: strings.Builder{}, anyErrors: []error{}}
}

// StringBuilder ...
type StringBuilder interface {
	Append(str string) StringBuilder
	AppendInt(num int) StringBuilder
	ToString() string
	Errors() []error
}

type stringBuilder struct {
	sb        strings.Builder
	anyErrors []error
}

// Append ...
func (b *stringBuilder) Append(str string) StringBuilder {
	_, err := b.sb.WriteString(str)
	if err != nil {
		b.anyErrors = append(b.anyErrors, err)
	}
	return b
}

// AppendInt ...
func (b *stringBuilder) AppendInt(num int) StringBuilder {
	_, err := b.sb.WriteString(fmt.Sprintf("%d", num))
	if err != nil {
		b.anyErrors = append(b.anyErrors, err)
	}
	return b
}

// ToString ...
func (b *stringBuilder) ToString() string {
	if len(b.anyErrors) > 0 {
		return ""
	}
	return b.sb.String()
}

// Errors ...
func (b *stringBuilder) Errors() []error {
	return b.anyErrors
}
```

ただラップして、ご丁寧に`WriteString`を`Append`と呼び変え、`WriteString`が`error`を返すので、返されたエラーをいったん溜めておくようにしただけ。

## 実行
以下のようにmainで実行

```go
type book struct {
	ID     int
	Name   string
	Author string
	Price  int
}

func main() {
	b := book{
		ID:     1,
		Name:   "何かの本",
		Author: "著者A",
		Price:  100,
	}

	builder := NewStringBuilder()
	jsonLog := builder.
		Append(`{`).
		Append(`"book": {`).
		Append(`"id": `).AppendInt(b.ID).Append(", ").
		Append(`"name": `).Append(b.Name).Append(", ").
		Append(`"author": `).Append(b.Author).Append(", ").
		Append(`"price": `).AppendInt(b.Price).Append("").
		Append(`}`).
		Append(`}`).
		ToString()

	fmt.Println(jsonLog)
}
```

## 実行結果

```
{"book": {"id": 1, "name": 何かの本, "author": 著者A, "price": 100}}
```

# まとめ
Goの「エラーを戻り値で返す主義」と「メソッドチェーン」は、やっぱり相容れないものがある。
Goらしく書くならメソッドチェーンは避けるべきかな。。。