OmniAICreator/Qiita-1.07M huggingface dataset:
TJBot zeroの型紙をレーザーカットする

全体的な内容は、[TJBot zeroのIBM公式サイト](http://ibm.biz/tjbotjp)をご参照ください。

#ボール紙をレーザーカットしてロボットの本体を作る
物作りに慣れている方であれば然程の障害にはならないかも知れませんが、初めての人にとっては、ボール紙のロボットをレーザーカッターで型抜きするということは、非常に敷居の高いことではないかと思います。私も最初はレーザーカットする方法が全くわからず、手切りで切り抜けようとしましたが、一番細かい腕のパーツで挫折してしまいました。

↓うまく切ることができずに挫折した腕のパーツ
![TJBot-Arm.JPG](https://qiita-image-store.s3.amazonaws.com/0/314541/3053c632-25ca-74a7-1f08-eee31efa89c1.jpeg)

レーザーカット用のデータは、[IBMの公式サイト](http://ibm.biz/tjbotjp)で公開されていますので、それをダウンロードしておきます。

##レーザーカッターを貸してくれる所を探す
最近は、大型のホームセンターやものづくりを支援する施設などでレーザーカッターを時間貸ししてくれる所が増えてきました。
[fabなび](https://fabcross.jp/list/series/fabnavi/)というサイトでは全国の施設をマップ形式で紹介されていますので、お近くの施設を簡単に見つけることができます。
最低でもイラストレーターのデータからA3サイズ(297mm×420mm)以上の**紙**がカットできる施設を探しましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/314541/d25d9935-0fae-123a-0a7d-85eb37d499b5.png)


私は、いつも[西千葉工作室](http://nishichibakosakushitsu.com/)さんのレーザーカッターをお借りしてカッティングしています。こちらの工作室は、工作室の利用料金が2時間まで500円、2時間以上が1,000円とそれに加えて300円/10分のレーザーカッターの利用料金を支払います。レーザーカッターの利用時間は実際にレーザーカッターがカット動作をしている時間ですので、工作室に2時間いたから2時間分の3,600円がかかるわけではありません。公開されているデータをカットするためにレーザーカッターが動作していた時間は10分程度です。（非常に利用者に優しい工作室です）
こちらの工作室でレーザーカッターをお借りする場合は、初回のみ30分500円の講習を受ける必要があります。事前講習や、費用はそれぞれの施設で異なりますのでそれぞれの施設でご確認ください。施設によっては紙の切断ができない所もありますので切断できる素材の確認も事前にすることをお勧めします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/314541/a7bcb5aa-1010-cd10-a6ed-e3a2bf118a91.png)

##用紙の選択と購入
レーザーカット用に公開されているデータは、1mm厚の用紙に最適化されています。私は1ｍｍ厚の白ボール紙(表面が白で裏がグレー）のB3サイズを入手して使っています。
紙が薄いと強度不足で作りにくく、厚いと組み立てそのものが困難になってしまいますので、紙の厚さは1mm ±0.1mm位の範囲内の物を使うことをお勧めします。
ご参考までに入手先は、お茶の水の[レモン画翠](https://lemongasui.net/products/detail.php?product_id=57)さんで1枚64円でした。

##レーザーカットの実際
[西千葉工作室](http://nishichibakosakushitsu.com/)さんのレーザーカッターは、UNIVERSAL社のVLS4.60というモデルですが、同じ機種の場合下記の設定で綺麗に切ることができましたので、ご参考までに書いておきます。
Power, Speed, PRI, Z Axisの4つの可変ファクターがあります。工作室のスタッフさんのアドバイスで、Speed以外を固定してSpeedを調整しました。（Power=100%, PRI=500, Z Axis=5mm)
1mm厚の白ボール紙
1枚の場合 : Speed = 40%
2枚の場合 : Speed = 20%
3枚の場合 : Spped = 10%
4-5枚の場合 : Speed = 5%
Speedを遅くしてゆくとカットする際のすすが多くなるように感じます。紙についたすすはティシュペーパーなどでふき取るとわまりを汚さずにすみます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/314541/6b3b82f8-2a1b-5ac0-7378-92aa22a7fbbc.png)<=実際にカットしてできた型紙

すすを出さずに綺麗にカットするには、レーザー出力を下げ、スピードを遅くすることで対応できるという情報もありますので、すすがきになる方は、お試しください。

##どうしてもレーザーカットをせずに、カット済みの型紙を入手するには。
TJBot zeroを作ってみたいけど、どうしてもレーザーカットに踏み切れいないという場合、カット済みの型紙をIBMがデベロッパー向けのイベントなどで配布していることがたまにありますので、イベント情報を探して見るのも一つの手です。また、BMUXGの分科会的な形で、[TJBot Fanメンバー](https://www.facebook.com/groups/547028405784779/)が月一回くらいのペースで製作Workshopも開催していて、そこに参加してカット済みの型紙を入手することも可能です。


[TJBot zeroのIBM公式サイト](http://ibm.biz/tjbotjp)
IBM CloudのGitLabにユーザー登録する

# はじめに
社外の人とIBM CloudのGitlab上でデータ共有したい話があったのですが、ユーザー登録の手順が見つからない。。
仕方ないので自分で確認して簡単な手順を作りました。
もっと簡単にできる方法があれば、教えていただけると幸いです。

# IBM Cloudにユーザー登録
[IBM Cloud初期画面](https://www.ibm.com/cloud-computing/jp/ja/lite-account/)からユーザー登録を行います。詳細手順は省略します。

# GitLabへのユーザー登録
## サンプル画面へのアクセス
最初に[サンプル画面](https://www.ibm.com/cloud/garage/tutorials/introduce-develop-cloud-foundry-app-toolchain?task=1)をクリックします。下の画面がでてくるので、「Create toolchain」のボタンをクリックします。

![スクリーンショット 2018-11-12 19.03.05.png](https://qiita-image-store.s3.amazonaws.com/0/206130/7e5ceb7a-3af8-a261-9c19-ea2c391c24c9.png)

## IBM Cloudへのログイン
画面の指示に従い、IBM Cloudにログインしてください。次の画面がでてくるはずなので、画面右下の「作成」ボタンをクリックします。

![スクリーンショット 2018-11-12 18.45.56.png](https://qiita-image-store.s3.amazonaws.com/0/206130/64aaea38-f99e-54c5-9d13-93f46bfcd820.png)

## APIキーの作成
画面が下のように変わるので、「作成」ボタンをクリックして、IBM Cloud APIキーを作成してください。

![スクリーンショット 2018-11-12 18.56.07.png](https://qiita-image-store.s3.amazonaws.com/0/206130/69f74b6d-5627-6ca5-a73b-74b0fcb25e5d.png)

## 登録用最終画面
APIキー作成後、しばらく待っていると下の図のように、「リージョン」「組織」「スペース」が全部埋まって、画面下の「作成」キーが有効になります。この状態を待って「作成」キーをクリックしてください。

![スクリーンショット 2018-11-12 18.56.27.png](https://qiita-image-store.s3.amazonaws.com/0/206130/bf93e224-efd7-d2b6-e2b5-a4333f8dc562.png)

## GitLabへのアクセス
これでGitLabにアクセス可能になっているはずです。下記のリンクをクリックしてダッシュボードにアクセスできることを確認して下さい。

[GitLabダッシュボード画面](https://git.ng.bluemix.net/dashboard/projects)
Rubyのcase文で配列に特定の値が含まれているかチェックする方法

# 配列に特定の値が含まれているかcase文で検証したい
```ruby
case [1, 3, 5]
when "1が含まれる場合"
when "2が含まれる場合"
when "3が含まれる場合"
```

## if文で書くなら簡単

```ruby
return hoge1 if [1, 3, 5].include?(1)
return hoge2 if [1, 3, 5].include?(2)
return hoge3 if [1, 3, 5].include?(3)
return hoge4 if [1, 3, 5].include?(4)
```


# パターン1： procにして比較する（シンプル）

```ruby
case num_array
when 1.method(:in?).to_proc then :a
when 2.method(:in?).to_proc then :b
when 3.method(:in?).to_proc then :c
when 4.method(:in?).to_proc then :d
when 5.method(:in?).to_proc then :e
when 6.method(:in?).to_proc then :f
when 7.method(:in?).to_proc then :g
else :d
end
```

## to_procする事でそのメソッドの実行結果で評価してくれる。

```ruby
[1] pry(main)> 1.method(:in?)
=> #<Method: Integer(Object)#in?>

[2] pry(main)> 1.method(:in?).to_proc
=> #<Proc:0x000055b9fbdc7c50 (lambda)>
```




# パターン2： ラムダを使って実装する

```ruby
case num_array
  when included(1) then :a
  when included(2) then :b
  when included(3) then :c
  when included(4) then :d
  when included(5) then :e
  when included(6) then :f
  when included(7) then :g
  else :d
end


# ラムダ式を定義 num_array に num が含まれているかチェック
def included(num)
  ->num_array{num_array.include?(num)}
end

```

# パターン3：lambda直書きversion

```ruby
case num_array
when ->(ids) { 1.in?(ids) } then :a
when ->(ids) { 2.in?(ids) } then :b
when ->(ids) { 3.in?(ids) } then :c
when ->(ids) { 4.in?(ids) } then :d
when ->(ids) { 5.in?(ids) } then :e
when ->(ids) { 6.in?(ids) } then :f
when ->(ids) { 7.in?(ids) } then :g
else :d
end
```
India tour

سفر به کشور هند بدون تردید یکی از بهترین و به یاد ماندنی ترین سفر های هر گردشگر تور هند خواهد بود. از زمان های دور نیز روایت است پس از بازدید از این کشور افسانه ای همگان بر این باور بودند که هند کشوری شگفت انگیز است و تا مدت های زیادی از خاطرات سفر خود را به این کشور برای همسایگان و آشنایان خود تعریف می کردند. 
کشور هند سرزمینی فوق العاده زیباست که تلفیقی از مدرنیته و سنت در بافت شهری، نوع رفتار و برخورد مردمان، غذا و ... می باشد. پایتخت این کشور دهلی نو نام دارد که جزو ده کشور پهناور دنیا و دومین کشور پرجمعیت جهان به شمار می رود. این کشور با توجه به قدمت چند صد ساله ای که دارد از منابع غنی و سرمایه های ملی خوبی برخوردار است اما آن طور که باید نتوانستند بهترین استفاده و استخراج را از این کشور داشته باشند زیرا که سالیان زیادی زیر سلطه ی استعمارگر انگلیس بودند.
<a href="http://lahzeakhar.com/%D8%AA%D9%88%D8%B1-%D9%87%D9%86%D8%AF">تور هند</a>
IPアドレスを固定するときに役立つリンク

[Ubuntsu 18.04/16.04について](https://jyn.jp/ubuntu-localip-static/)
18.04からはinterfacesはなくなったらしいです。
>/etc/network/interfacesはなくなりました。18.04からは/etc/netplan/50-cloud-init.yaml
ティッカー（横スクロール）に使えるjQueryプラグイン


案件でよく検索されるキーワードを横に自動スクロールさせたいという要望があったので、実現可能そうなプラグインを列挙。
以前は<marquee＞というタグで同様の動きが実現できたが、HTML5になり廃止タグとして指定されたため、jQueryにて対応。

ちなみに自分は知らなかったが、このような動きをティッカーというらしい。。

> ティッカーとは、特定範囲内に文字列を流して表示させる表示方式のことである。右から左（あるいは上から下へ）文字が次々に流れてゆくのを読ませる方式
  

|  | [infiniteSlide](https://wood-roots.com/sample/infiniteslidev2/) | [marquee](https://www.givainc.com/labs/marquee_jquery_plugin.cfm) |  [webticker](https://maze.digital/webticker/) | [hMarquee](https://github.com/ttionya/hMarquee) |
| -------- | -------- | -------- | -------- |-------- |
| ライセンス | MIT     | Apache License  | 有償（GPLv3）     | MIT     |
| 参考 | https://rmtmhome.com/infiniteslide-1453  | [Marquee jQuery Pluginを使って文字を流す](https://blog.tokor.org/2015/05/14/Marquee-jQuery-Plugin%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E6%96%87%E5%AD%97%E3%82%92%E6%B5%81%E3%81%99/) | [ニュースやお知らせなどに使えるティッカー「jQuery WebTicker」](https://bl6.jp/web/javascript/jquery-webticker/)| [失われし「marquee」タグを再現する［hMarquee］](https://on-ze.com/archives/1689)|
ssh接続でWARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!と表示されて繋がらない問題への対処

ssh接続で

```
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@    WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!     @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
```
表示されてしまった時の対処。
IPを静的に変更しようとゴチャゴチャとやっていたら発症。

## わかったこと
これは以前そのIPにアクセスしようとしたときにローカルに保存した鍵ファイルの中身と今接続しようとしているサーバが異なる場合に違いますよ！と教えてくれているらしい。

## 解決策
```
$ ssh-keygen -R host_name
```
を実行するとローカルに保存されている鍵ファイルを更新できる。
Amazon Rekognition

勉強の息抜きに Rekognition を触ってみた。

画像、動画、ストリーミングに対応しているが、今回はとりあえず、画像のDemoを触ってみた。

---

###1.画像###
|項目|説明|
|:-----------------|:------------------|
|オブジェクトとシーンの検出|イメージ内の物体、概念、およびシーンに自動的にラベルを付け、信頼スコアを提供します。|
|画像の節度|イメージ内の明示的または暗示的な成人向けコンテンツを自動的に検出し、信頼スコアを提供します。|
|顔の分析|信頼スコアを含む、顔の属性の完全な分析を取得します。|
|有名人の認識|イメージ内の有名人を自動的に認識し、信頼スコアを提供します。|
|顔の比較|顔を比較し、類似割合 (%) に基づいて類似度を確認します。|
|イメージ内のテキスト|イメージ内のテキストを自動的に検出して抽出します。|

↓こんな感じ。
![スクリーンショット 2018-11-12 18.53.47.png](https://qiita-image-store.s3.amazonaws.com/0/280929/2187da92-46d7-d740-a5c3-dc5b838f82f8.png)

基本はアップロードやURLを指定して行う。
![スクリーンショット 2018-11-12 18.37.43.png](https://qiita-image-store.s3.amazonaws.com/0/280929/10fa6ef0-a869-5d5c-b049-ef7fc5012c65.png)

いくつか触ってみた。


###2.顔の分析###
画像に含まれる顔を検出し、さらに顔の特徴点（目、鼻、口など）、顔の属性（ひげの有無、眼鏡の有無など）、顔の向き、感情を検出することができます。

安室奈美恵をあげてみた。
looks like a face　99.9 %
appears to be female　99.9%　
age range　　　　　　15 - 25 years old　
若え
![woma.jpeg](https://qiita-image-store.s3.amazonaws.com/0/280929/6e9d7fff-1c11-2d6b-1d23-5888a4107e93.jpeg)

野村周平をあげてみた。
looks like a face　99.9 %
appears to be male　99.9 %
age range　20 - 38 years old
![men.jpg](https://qiita-image-store.s3.amazonaws.com/0/280929/d677771c-5398-8f77-cc35-c0c27dd7c2ac.jpeg)

まあまあ性能いいかもね。


###3.有名人の認識###
イメージ内の有名人を自動的に認識し、信頼スコアを提供します。

「有名人の認識」をクリックします。
![スクリーンショット 2018-11-11 21.06.50.png](https://qiita-image-store.s3.amazonaws.com/0/280929/07a48e71-b556-f015-6a71-bc29312c6da0.png)

やってみた。
![スクリーンショット 2018-11-11 21.14.55.png](https://qiita-image-store.s3.amazonaws.com/0/280929/c68bf8f9-1b2e-941e-adda-b9e30ba9ab8b.png)
Tan Chuan-Jin　って？

![スクリーンショット 2018-11-11 21.32.17.png](https://qiita-image-store.s3.amazonaws.com/0/280929/a2a2d523-00a1-8601-61db-9d6e118f0925.png)
安倍首相は認識されんのね。

参考：[Q.有名人認識 API によってだれを識別できますか?](https://aws.amazon.com/jp/rekognition/faqs/)
まだまだどうなのかね。。。
[Angular] Angular Materialを使うためのSCSS入門

Angular Materialでテーマを作りたいと思い立ちました。
SCSS全くわからないので、ちょっとわかるwwくらいまでがんばります。

公式サイト https://sass-lang.com/

# 文法

SCSSの文法は、CSSを拡張した形になっています。
CSSそのままでも、SCSSとして解釈されます。

# 変数

SCSSでは、変数を宣言して参照することができます。

```scss:宣言と参照の仕方
.myclass {
  $mywidth: 100%;
  width: $mywidth;
}
```

頭に`$`を付けて、値と`:`で区切ります。

## 変数のスコープ

変数のスコープは、その宣言を含む `{}` の内側に限定されます。

`{}`の外側で宣言するとグローバルなスコープになります。

`{}`の内側でも`!global`を付けるとグローバルなスコープになります。

```scss:グローバルスコープ
$myglobal: blue;

.myclass {
  $alsoglobal: lightblue !global;
}
```


## 変数の型

| 型 | 説明 | 例 |
|:--|:--|:--|
| 数値 | 数値です。  | `1.5`, `8px`  |
| 文字列 | 文字列です。クォートはあってもなくてもよいです。  | `foo`, `"bar"`  |
| 色  | RGB値や色の名前です。  | `#4ff`, `blue`  |
| 真偽値 | trueまたはfalseです。 | `true` |
| null | nullです。 | `null` |
| リスト | スペースまたはカンマ区切りの値です。 | `1 1 auto`, `Helvetica,Sans` |
| マップ | キーと値の組です。言語によっては、連想配列やハッシュともいいます。 | `(key1:value1, key2:value2)` |
| 関数への参照 | 関数への参照です。`call`で呼び出せます。 | `$ref = get-function("関数名")` |

# `@`で始まるディレクティブ達

## `@import`

外部ファイルを読み込んで、全体をひとつのcssファイルにします。

## `@mixin`と`@include`

変数は値を使いまわすための仕組みでした。
mixinはスタイル全体を使いまわすための仕組みです。

```scss:mixinの宣言
@mixin 強調 {
  font-size: 1.4em;
  font-weight: bold;
}
```

mixinで定義したスタイルは`@include`で呼び出せます。

```scss:mixinを使う
.my-em {
  @include 強調;
}
```

mixinは引数付きで宣言することもできます。

```scss:引数付きのmixin
@mixin 色付き枠($color) {
  border-style: solid;
  border-width: 1px;
  border-color: $color;
}
```

使うときは引数を渡します。

```scss:引数付きのmixinを使う
@include 色付き枠(green);
```

# `@function` 

関数を宣言することができます。

# 関数

様々な便利関数が定義されています。

* `rgb($red, $green, $blue)` RGB値を色にします。
* `map_get($map, $key)` マップから指定されたキーに対応する値を返します。


その他はこちら [関数の一覧](https://sass-lang.com/documentation/Sass/Script/Functions.html)


# ちょっと

わかりました :smile:
日常的につかうものを極力Vimにする

何番煎じだ、感は否めませんが。

1ヶ月ほど前に転職して、いつも使ってる設定インポートしても良かったんですが、新しいマシンになったことですし、せっかくだしサラからやってみようと思いました。

早速やっていきます。

## 環境
> OS: macOS Mojave v10.14

## vim
デフォルトのvimだとシステムとのクリップボード共有が効かなかったので（自分の場合）、 `homebrew` で入れ直します。

念の為確認します。

```bash
$ vim --version | grep clipboard

-clipboard         +jumplist          +persistent_undo   +vertsplit
+emacs_tags        +mouse_dec         -sun_workshop      -xterm_clipboard
```

`-clipboard`と、「-」がついている場合、クリップボード共有が使えません。

```bash
$ brew install vim --with-override-system-vi
```

インストールしただけだと、システムデフォルトの `vim` を向くため、 `--with-override-system-vi` オプションをつけることで、`vim`と叩いたときに、brewでインストールしたほうが起動するようになります。

再度クリップボードが使えるか確認します。

```bash
$ vim --version | grep clipboard

+clipboard         +jumplist          +persistent_undo   +vertsplit
+emacs_tags        +mouse_dec         -sun_workshop      -xterm_clipboard
```

いけるっぽいですね。

あとは、 `.vimrc` に下記の設定を加えときましょう。

```vimrc
" クリップボード共有の有効化
set clipboard=unnamed,autoselect
```

### 肥大化する.vimrcに疲れる

昔は設定ファイルを育てることに楽しみを感じていたのですが、肥大化していく設定ファイルにめげてしまい、集合知に頼ることにします。

Ultimate vimrcって素晴らしい設定群を公開してくれてる人がいるので、それを使わせてもらうと幸せになれました。

[amix/vimrc](https://github.com/amix/vimrc)

READMEに書いてあるとおりにインストールして、僕の場合は下記の設定だけ追加。

```bash
$ vim ~/.vim_runtime/vimrcs/basic.vim
```

```vimrc
" クリップボード共有の有効化※上の記述とかぶりますが、対象ファイルが違うので念の為
set clipboard=unnamed,autoselect

" ノーマルモードの際にコロンとセミコロンを入れ替え（英字配列キーボード用）
nnoremap ; :
nnoremap : ;

" 行番号の表示
set number
```

## gVim
[香り家さん](https://github.com/splhack/macvim-kaoriya)からダウンロード＆解凍して`/Applications`以下に配置するだけです。

gVimの設定は以下を追加しました。

```vimrc
" カラースキームの設定
colorscheme desert

" クリップボードの共有
set clipboard+=unnamed

" なぜかgVimのときだけ、日本語入力がおかしくなるので、設定
set imdisable

" 背景が透明になります
autocmd guienter * set transparency=10

" フォントの設定
set guifont=Osaka-Mono:h14
```

## VSCode
VSCodeには、そのままズバリ、 `Vim` というエクステンションがあるので、インストールしましょう。

大体Vimっぽくしてくれます。

### ハイフンを単語選択に含めるようにする
デフォルトの設定だと、アンダースコア含みの文字列は選択範囲にしてくれるのですが、ハイフンも含めたいものです。

設定から、

```json
- "vim.iskeyword": "/\\()\"':,.;<>~!@#$%^&*|+=[]{}`?-"
+ "vim.iskeyword": "/\\()\"':,.;<>~!@#$%^&*|+=[]{}`?"
```

`-` が混入しているので削除します。（僕の場合VSCodeの再起動が必要でした）


VSCodeでのやり方を直接検索してもなかなか情報にヒットしなかったので、そもそもVimでやるなら、どうすればいいんだ、ってところを検索したところ、下記がヒットしたので、設定名を参照してVSCodeで当該の箇所を見つけました。

[vimで-(ハイフン)を単語に含める方法](https://qiita.com/YamasakiKenta/items/fee2a366348b9da345e8)

```vimrc
:set isk+=-
```

今回以外の設定でも「Vimでの設定用キーワード」→「VSCodeで当該キーワードを選択して設定」みたいな戦略は有用そうです。

## Vimium
Chrome用の拡張で、ブラウザ操作をVimらしくしてくれます。

### 画面操作
普通にVimです。 `hjkl` で上下左右行きます。 `gg` でページトップ、 `G` でページ末尾に移動します。

ヒストリーバックは `H` で、次のページに進むは `L` です。

他もだいたいVimなので、詳しくは公式を参照してみるといいと思われます。

参考：[philc/vimium](https://github.com/philc/vimium)

個人的に気に入っているのは、単語選択で、これを使いこなすことで圧倒的にマウスに触る機会が減りました。

1. ノーマルモードから `v` 押下
1. `c` でキャレットモードになるので、選択したい文字列付近まで `hjkl` で移動
1. 選択したい位置に移動したら `v` 押下
1. ビジュアルモードになるので好みの文字列を選択したら `y` してヤンク

## その他
あとは、ターミナルをVi modeにしようかと思ったのですが、これが私にはいまいちとっつきづらくて、結局使わなくなったので割愛します。

それでは、みなさん、良きVimライフを。
FuelPHPでAjax通信する際405エラーが出るときの対処法


## やらかしていたこと

FuelPHPとjQueryのAjaxで

```javascript:hoge.js
		$.ajax({
			type: "GET",
			url: location.origin + "/ajax/hoge.json",
			dataType: 'json',
			timeout:10000
		}),
```

上記のような記述で非同期でGETしたいときに405が返ってきた。
ずっとjs側の処理でミスしていたかと思っていたら、
php側で正しいメソッド名が記述できていなかった。

## 対処法
```php:huga.php
// ミスってた記述例
public function hoge()
{
	 $this->response("success", 200);
}
// 正しい記述例
public function get_hoge()
{
	 $this->response("success", 200);
}
```

メソッド名の前にget_やpost_を入れないと正しく通信できないのですね。
Nextcloud のチャット機能

#はじめに
NextcloudはownCloudから派生したオープンソース製品です。基本的なファイル共有の機能はほとんど同じですが、最近になってNextcloud独自の機能が出てきました。その中の一つである、チャット機能を紹介したいと思います。

#プラグイン
Talkというプラグインです。ホントは、ビデオチャットもできるのですが、きちんと検証をしていないので、今回は文字チャットだけにします。
![画像84.png](https://qiita-image-store.s3.amazonaws.com/0/308127/bd4a45bd-b431-e4ad-c9e6-8da5c65cf5bf.png)

#管理画面
管理者の設定画面です。ビデオチャットを使うときのサーバとかを指定するようです。
![画像85.png](https://qiita-image-store.s3.amazonaws.com/0/308127/1042a3bd-d0fd-017d-192b-fccacc15c430.png)

#チャット画面
画面上のチャットアイコンを選択すると、チャット画面が表示されます。色々試してみましたが、現時点ではChromeブラウザーだと、日本語が入力できないです。Edgeだと入力できました。
![画像86.png](https://qiita-image-store.s3.amazonaws.com/0/308127/8c33545f-4cf3-1878-52c9-f42b52dfce58.png)

メンバーの追加もできるので、グループチャットもできますね。
![画像87.png](https://qiita-image-store.s3.amazonaws.com/0/308127/7c903672-4f90-9a9b-ee73-75fe3b4dcb88.png)

「＋」ボタンを押すと、ファイルを共有できます。
![画像88.png](https://qiita-image-store.s3.amazonaws.com/0/308127/ea606884-9f8a-0dfc-0122-d87f292c31f8.png)
![画像89.png](https://qiita-image-store.s3.amazonaws.com/0/308127/d27ae2b1-7272-ca08-a37d-4e991861205c.png)

実際には、Nextcloudのファイル共有機能で共有しています。
![画像90.png](https://qiita-image-store.s3.amazonaws.com/0/308127/12fe608d-5feb-7e72-8f9b-953720ca1a58.png)

#スマートフォン用のアプリ
Talk専用のモバイルアプリ（Android/iOS）も出ています。
![画像91.png](https://qiita-image-store.s3.amazonaws.com/0/308127/b91d779a-ff39-dfcf-288b-99f51315be0d.png)
これだとどこでもチャットができて便利そうですね。
![画像92.png](https://qiita-image-store.s3.amazonaws.com/0/308127/7e760f53-02d9-58a3-f46d-84743e2d82f8.png)

#まとめ
一部のブラウザーで日本語が入力できないのが致命的です。まだまだこれからの機能ですかね。色々なチャットツールが出ている世の中ですが、これで十分だって方は是非。

この記事は、[スタイルズ社のNextcloudサイト](https://nextcloud.stylez.co.jp/nextcloudblog)にも公開しております。
latexmkをつかってフォントを埋め込んだPDFを作りたい (Rのggplotでフォント入りPDF画像も生成する)

# ことの始まり
論文を投稿するに当たりIEEE形式のフォント埋め込み済みPDFを作る必要があった。
[IEEE PDF eXpress](https://www.pdf-express.org)を使えばtexファイルなどから埋め込み済みPDFを生成できるが、
分割されたtexファイルや画像やらがたくさんあってアップロードが面倒(というかファイルが20個超えそうなのでできないっぽい)という状況だった。

そこで自分でコンパイルしようと思ったのだが調べてみてもアドビ製品の話やTexの統合開発環境用の話が多く、
Vim + quickrunでコンパイルしている私にマッチする情報がうまく見つからなかった。
なんとかフォントを埋め込みIEEE形式に従うPDFが作れたのでまとめる。

# 環境
- コンパイルコマンド: `latexmk -gg -pdfdvi`
- OS: Windows 10
- 言語: 英語
- 論文内の画像ファイルの形式: PDF


# ゴール
**`pdffonts PDF_NAME`としてembの列が全てyesになること**をゴールとする。
(他の体裁が整っていればIEEE PDF eXpressにチェックしてもらうとOKが返ってくるはず)

ゴールにたどり着くためには下の2つの項目を達成する必要がある。

- 論文中で使用しているフォントの埋め込み (今回はIEEE形式の論文なのでtimes系)
- 論文中の画像で使用されているフォントの埋め込み (今回はRのggplotでPDFを作成する場合の話のみ)

# 方法
## 論文中のフォント埋め込み
### 手順
簡単に手順をいうと
 1. mapファイルを用意して
 2. texファイルの先頭に`\AtBeginDvi{\special{pdf:mapfile MAP_FILE_NAME}}`と書く
だけである。

### mapファイル
mapファイルは埋め込むフォントの情報を持っているテキストファイルである。
これを書くことができれば問題は解決なんだが、**mapファイルは例を見てすぐに真似して書けるようなものではなさそう**で自分で書くのはかなり大変そうだと思った。
結論を言うと**mapファイルを書こうとするよりフォント名でググって対応するmapファイルが用意されているか調べるほうが良さそう**だと思った。
実際、今回(timesやHelveticaなど)の場合はデフォルトで用意されていて､MAP_FILE_NAMEの部分を`dlbase14.map`とすれば解決した。

dlbase14.mapの存在場所が気になったので調べてみたところ、コンパイラが認識できる場所は`kpsewhich -var-value TEXMF`で調べられた。
(kpsewhich自体はlatexmkと同じディレクトリにあったのでlatexmk持ってる人ならkpsewhichもおそらく持ってる)
私の環境では上のコマンドを実行した結果`C:\LaTeX\share\texmf-dist`が出力の一つにあり、mapファイルは`C:\LaTeX\share\texmf-dist\fonts\map\dvipdfmx\base`内にあった。
自分でmapファイルを書けちゃう人はkpsewhichでパスを調べて置いてあげると解決すると思われる。


## 画像のフォント埋め込み
**注意: 私の環境では画像はベクター系画像はすべてPDFなので他の形式の場合はわかりません**
(特にこだわりがないならベクター画像はポストスクリプトよりPDFで持つほうが扱いやすいのでおすすめです。
pdfcropで余白切れるしgmailやslack上でも開けるので他人にシェアしやすいし。inkscapeで編集もできるしRでの生成も簡単だし。)

**注意: 今回はRのggplotで描画する場合の話のみです**

### 手順
画像へのフォントの埋め込みはtexファイルのコンパイル時に行うのではなく、画像の保存時に行う方が簡単そうだった。(そもそも後からできるのかどうかわからない)
**RのggplotでPDF画像を保存する際にフォントを埋め込むにはggsaveの引数に`device=cairo_pdf`と加えればOK**だった。
ちなみにggplotでのフォントファミリーの指定は↓のようにthemeとelement_textを使って行える。

```R
FONT_FAMILY <- "Helvetica"
p <- ggplot(something) +
     theme(text=element_text(family=FONT_FAMILY))
ggsave(plot=p, file="hoge.pdf", device=cairo_pdf)
```
Qiita のトレンドを二度と見たくない，タグフィードを愛する人のためのユーザスクリプトを書きました

[Tampermonkey](https://addons.mozilla.org/ja/firefox/addon/tampermonkey/) 用です。インストールは [Gist](https://gist.github.com/mpyw/0561d066882501f093353f96e4fb4b4c) の Raw からどうぞ。 Chrome のみ動作確認済み。

```javascript
// ==UserScript==
// @name         Qiita Trend Eliminator
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  https://qiita.com/ を https://qiita.com/tag-feed にいい感じに置き換える
// @author       mpyw
// @match        https://qiita.com/*
// @grant        none
// ==/UserScript==

(() => {
  'use strict';

  // 他サイトからトレンドへの流入であればタグフィードに強制移動
  if (location.pathname === '/' && (!document.referrer || new URL(document.referrer).host !== 'qiita.com')) {
    location.replace('/tag-feed');
  }
  
  // ヘッダーの Qiita ロゴの向き先をタグフィードに変更
  const header = document.querySelector('a.st-Header_logo');
  header.href = '/tag-feed';

  // トレンドをメニュー最下部に，タグフィードはメニュー最上部に
  // for (const menu of [
  //   document.querySelectorAll('#globalHeader .st-Header_dropdown')[1],
  //   document.querySelector('.p-home_menu'),
  // ]) {
  //   const tagFeed = menu.removeChild(menu.children[2]);
  //   const trend = menu.removeChild(menu.children[0]);
  //   menu.prepend(tagFeed);
  //   menu.append(trend);
  // }

})();
```
Windows 10 で言語切り替えショートカットを無効にする方法【Windows 10 1810版～】

言語切り替えショートカットとは、「ctrl+shift」でIMEが切り替わるショートカットのことです。

Windows 10 で言語切り替えショートカットを無効にする方法【windows10 1803版】 - Qiita
https://qiita.com/ynott/items/5d8fde54e7c3a66b7af3
を書いたのですが、1810では設定方法が変わっていたので再度書いてみました。

# 0. Windows 10の1909版を書きました。
Windows 10 で言語切り替えショートカットを無効にする方法【Windows 10 1909版～】 - Qiita 
https://qiita.com/ynott/items/eca99ed763752316a128

## 1. コントロールパネルを開いて「時刻と言語」を選択

![image.png](https://qiita-image-store.s3.amazonaws.com/0/15176/5a930142-7a43-a88e-4143-88bdb6ba0913.png)

## 2. 時刻と言語で「言語」を選択

![image.png](https://qiita-image-store.s3.amazonaws.com/0/15176/06515293-6edc-3bf6-d413-1354bc10ea88.png)

## 3. 言語で「スペルチェック、入力、およびキーボードの設定」を選択

言語設定のページの「関連設定」の下(または横)にある「スペルチェック、入力、およびキーボードの設定」を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/15176/3382e0c1-fead-d015-a727-cebcf79f3793.png)

## 4. 入力設定で「その他のキーボード設定」で、「キーボードの詳細設定」を選択

![image.png](https://qiita-image-store.s3.amazonaws.com/0/15176/3af745e8-728b-d2d8-dec1-2330debd165e.png)

## 5. キーボードの詳細設定で「言語バーのオプション」を選択

![image.png](https://qiita-image-store.s3.amazonaws.com/0/15176/b3c8022b-a49c-7b46-0ebc-882bdbe841ea.png)

## 6. テキストサービスと入力言語で「キーの詳細設定」を選択

![image.png](https://qiita-image-store.s3.amazonaws.com/0/15176/2d1329a4-fb44-6964-712b-dd7233cf7183.png)

## 7. キー詳細設定で「キーシーケンスを変更」をクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/15176/6decf19b-f0cd-e1cb-2f30-2db73eed24c6.png)

## 8. キーシーケンス変更で「割り当てなし」をクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/15176/675d69ab-f052-9d32-dce0-7e516be2a38d.png)

OKを押して終了
Redis ハッシュ型で一度に複数セットする方法


## hmsetを利用する

```redis
127.0.0.1:00000 > hset hash field1 value1 field2 value2
=> (error) ERR wrong number of arguments for 'hset' command
```

通常の`hset`では引数エラーになってしまう。

```
127.0.0.1:00000> hmset hash field1 value1 field2 value2
=> OK

127.0.0.1:00000> hget hash field2
=> "value2"
```

`hset`ではなく`hmset`を使うことで一度で複数フィールドとバリューをセットすることができる

## 戻り値について
```
127.0.0.1:00000> hset hoge field1 value1
(integer) 1
127.0.0.1:00000> hset hoge field1 value2
(integer) 0
```
通常の`hset`では新たにセットする場合、戻り値は1 更新する場合は0が返ってくる。

```
127.0.0.1:00000> hmset hash field1 value1 field2 value2
=> OK
```
`hmset`の場合は`field`がないは追加され、ある場合は更新される
そのため必ず`OK`が返ってくる
UnityでRenderTextureを使ってソフトマスク

Unity Version 2018.2.10f1

意外と難しいUnityでのソフトマスクの一つのやり方について説明します。
![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/277339/e0d97171-3dfd-43a0-918a-141d36f5f93e.png)

##どうしてRenderTexture?
RenderTextureでレンダリングをすると、普通のイメージみたいに使えます。またアルファブレンディングのソースブレンドも使えるのでパフォーマンスに害はあまりありません。

##構造
###イメージ
![SoftMaskDiagram.png](https://qiita-image-store.s3.amazonaws.com/0/277339/fed6fc00-938a-b10a-ad03-488ddf5b96a3.png)
###説明
この例では両方のカメラをOrthographicに、両方のCanvasを"Screen Space - Camera"にセットしています。

レイヤーをRenderTextureLayerにセットしたRenderTextureCanvasにソフトマスクをかけたいオブジェクトを入れて、RenderTextureCameraレンダリングします。

シーンのほかのオブジェクトの邪魔にならないようにRenderTextureCameraのCullingMaskをRenderTextureLayerだけにして、MainCameraのをそれ以外にします。

これでソフトマスクをかけたいオブジェクトがテクスチャーにレンダリングされています。次はシーンにソフトマスクをかけてシーンにレンダリングすることですね。

##ソフトマスクのかけ方
###マテリアルとシェイダー
簡単なカスタムなシェイダ―でソフトマスクをかけます。

- まずはAssets > Create > Materialでマスクされるオブジェクト専用のマテリアルを作ります。この例ではMaskedImageMaterialと名付けました。
- Assets > Create > Shader > Unlit Shaderで新しいシェイダ―アセットを作ります。MaskedImageShaderと名付けました。
- MaskedImageShaderを以下のように変えます。。。
    - Propertiesに`_MaskTex ("Mask Texture", 2D) = "white" {}`を追加します
    - Tagsを`Tags {"Queue"="Transparent" "RenderType"="Transparent" }` に変えます
    - `LOD100`の下に `ZWrite Off`,`Blend SrcAlpha OneMinusSrcAlpha`を追加します。
    - `struct v2f` に`float2 uvA : TEXCOORD2;`を追加します。
    - `float4 _MainTex_ST;` の下に`sampler2D _MaskTex;` と`float4 _MaskTex_ST;`を追加します。
    - `v2f vert`に`o.uvA = TRANSFORM_TEX(v.uv, _MaskTex);`を追加します
    - 最後に`fixed4 frag`に`fixed4 alpha = tex2D(_MaskTex, i.uvA);`, `col *= alpha.a;` を追加します


###Imageの表示し方

要するにシェイダ―で別のテクスチャー (MaskTex)からアルファだけサンプリングをしてそれをRenderTextureにかけます。

なのでアルファのためのテクスチャーが必要になります。この例で使っているテクスチャーはこんな感じです。
![textureScreen.png](https://qiita-image-store.s3.amazonaws.com/0/277339/c4510672-b503-5288-5025-a1fed34261f1.png)

- 表示したいCanvasでRawImageを作成します
- テクスチャーをRenderTextureにセットします。
- マテリアルをMaskedImageMaterialにセットして、そのシェイダ―をMaskedImageShaderにセットします。
- MaskedImageShaderの設定でMaskTexをアルファのためのテクスチャーにセットします。
- シェイダ―のMainTextureはRawImageによってセットされますので触らなくてもいいです。

すると、こんな感じに表示されるはずです。:sunny:
![textureScreen.png](https://qiita-image-store.s3.amazonaws.com/0/277339/291e4730-a177-1752-e8d3-6c246bc69c3f.png)

###おまけ
- RenderCanvasがエディターで邪魔になっていたらカメラを動かしてください。
- ScrollRectなど表示したい場合はRenderTextureCanvasからRaycasterをなくし、表示する所でそのScrollRectにイベントを渡すためのオブジェクトをおきます。
- RenderCanvasのがScreen Space - Cameraの場合大きさがRenderTextureの大きさと同じです。大きさが変わるUIなどあれば、スクリプトでRenderTextureを作成してRenderCanvasにセットしないといけません。
Paizaラーニングで作ったシンプルな掲示板をHerokuデプロイしてみた。

https://atzoubbss.herokuapp.com/

参考
https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39
https://paiza.jp/works/rails/primer/beginner-rails1/14000
EgretEngineでどうやってエフェクト(Particle)するんだろう？

HTML5プラットフォームLiberappのテスト用にEgretEngineを使った簡単なサンプルゲームを作っています

ボールがバスケットを通った時にエフェクトを入れたいなと考えています。

# EgretEngineでエフェクト

http://developer.egret.com/cn/example/egret2d/index.html#150-particle-3
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/f07d0dfe-705f-e6fd-1a1d-81e8d8d12605.png)

ページトップのメニュー`Example(示例)`から`Teaching example(教学示例)`を選び
画面左の目次から`Particle(粒子)`>`篝火`を選んでください。


## 肝のコード`particle`モジュール

下記のコードがエフェクト（パーティカル）の肝の部分です。

```ts
        var system = new particle.GravityParticleSystem(RES.getRes("ballParticle_png"), RES.getRes("ballParticle_json"));
        this.addChild(system);
        system.start();
        system.y = this.stage.$stageHeight / 2;
        system.x = this.stage.stageWidth / 2;
        system.emitterX = 0;
        system.emitterY = 0;
        system.scaleX = system.scaleY = 1.5;
```

`particle`モジュールを使うようなのですが、[APIDOC](http://developer.egret.com/cn/apidoc/)には特に記載がありません

## パーティクルのドキュメントはどこ？
ドキュメント(文档)からParticleの説明[Particle粒子系统库](http://developer.egret.com/cn/github/egret-docs/extension/particle/useParticle/index.html)を見つけました。

# [翻訳] パーティクルシステムの紹介(粒子系统简介)
## 概要
パーティクルライブラリは、Egretエンジンの拡張です。 パーティクルライブラリ内のすべてのパーティクルは同じテクスチャが使われ、プロパティをいろいろ設定することにより、さまざまなモーションエフェクトが実現されています。 パーティクルライブラリは、Egretサードパーティライブラリとして提供されています。利用する際は、プロジェクトのegretProperties.jsonにモジュール情報を追加してください。nameプロパティをparticleに設定し、pathプロパティをパーティクルライブラリパスに設定します。

## 注意事項
パーティクルシステム全体で同じテクスチャを使用します。WebGLとOpenGLレンダリングであれば、非常に優れたパフォーマンスが実現できます。Canvasレンダリングモードの場合は、パーティクル数を200以内に抑えてください。

# 主なクラスの役割
- Particle: パーティクルの基本パラメータ（xy座標、回転、スケーリングなど）を定義するパーティクルクラス。
- ParticleSystem：パーティクルライブラリに必要ないくつかのメソッドを含む、パーティクルライブラリの基本クラス
- GravityParticle：Particleから継承され、GravityParticleに必要なパラメータを定義します。
- GravityParticleSystem：ParticleSystemから継承され、重力パーティクルシステムを入力コンフィグレーションで実装します。

# egretProperties.json

`Particle`モジュールを読み込むには以下のように追記してください。

```json:egretProperties.json
:
    {
      "name": "particle",
      "path": "../egret-game-library-master/particle/libsrc"
    }
:
```

`egret-game-library-master`をgithubからダウンロードし解凍して、下記のようにディレクトリ構成がなっている前提です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/79f5965a-16c7-842f-bcb4-e2c805d22401.png)
LINEログインを実装しようとしたら、CORSで弾かれた件

Lineログインを実装していたら、CORSでうまくいきませんでした。。。
その時のやったことを備忘として記載しておきます。

## やりたいこと
* 自フォームでPOSTさせて、自サーバから結果が返ってきたらLineLogin側にGETメソッドを飛ばしてLINE LOGINさせる

自サイト→LineLoginっていう順番を崩したくなかった。

## やったこと
formの登録ボタン(onclick)→js→ajaxで自サイトでの登録→ajaxでLine側へGET

```JavaScript
function entry(myParam){
    $.ajax({
        type    : 'POST',
        url     : '/entry',
        data    : myParams
    }).done(function(data, textStatus, jqXHR) {
        // 成功時
        $.ajax({
            type    : 'GET',
            url     : 'https://access.line.me/oauth2/v2.1/authorize',
            data    : {
                        response_type: "code",
                        client_id: xxx,
                        redirect_uri: xxx,
                        state: xxx,
                        scope: "profile"
            }
        })
    });
}
```
実際のコードとはちょっと違いますが、
察してください。


とまあ、それで送るとこんなのが返ってくる
```
Access to XMLHttpRequest at 'https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=xxx&redirect_uri=https://xxx&scope=profile&_csrf=xxx' from origin 'https://myService.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

ajaxで送るときのheaderにAccess-Control-Allow-Originを設定してみたけどだめ。
（相手側に設定すべき項目ですよね。今回はLineなんで諦め。）

ここみて勉強しました。
[https://qiita.com/mochizukikotaro/items/6b72ad595db8a6b5514f]

## 結論
いいのかわかりませんが、
formの登録ボタン(onclick)→js→ajaxで自サイトでの登録→jsでformのsubmitをすることで、LineへGET
とすることで、うまくいきました。


```html
<form id="mainForm" name="mainForm" modelAttribute="mainForm" class="form" method="get" action="https://access.line.me/oauth2/v2.1/authorize">
```

```JavaScript
function entry(myParam){
    $.ajax({
        type    : 'POST',
        url     : '/entry',
        data    : myParams
    }).done(function(data, textStatus, jqXHR) {
        // 成功時
        // formにパラメータをセット
        ...
        // submit
        document.mainForm.submit();
    });
}
```

まぁ確かに、わざわざajaxにする必要もないですね。
mysql2がインストールできない時

##mysql2がインストールできない

```
gem 'mysql2', '~> 0.5.1'
```


```
$gem install mysql2 -v 0.5.1
```

```
$ gem install mysql2 -v 0.5.1
Building native extensions.  This could take a while...
ERROR:  Error installing mysql2:
	ERROR: Failed to build gem native extension.
```
  
うむむ


##解決法

xcodeのアップデートに原因があったらしい。

参考：[mysql2がインストールできない問題](https://qiita.com/nakki/items/e15c6b024d27edb2b96b)

```
$ xcode-select --install
```
からの

```
$ sudo gem install mysql2 -v '0.5.1'
```
で

`bundle install`

を通すと解決した。

ちょっとだけ時間かかるので辛抱
Python勉強しつつAIでリアルタイム音声変換を目指す00

#目的
とりあえず、すごいざっくりとした目標を。

最終目標はタイトル通りの
「AIを使用したリアルタイムの音声変換」
として、そこに至るまでの小目標として以下２点。
・Pythonである程度コーディングできるようになる
・AIとかある程度理解する

PythonとAIに関してほぼ前提知識がない状態なので、
自分自身の学習目的が結構メイン。

小目標がすごいおおざっぱなのは最終目標に至るまでの過程をほぼ考えてないから。

#背景
Pythonとか勉強したいなって思っていたのと、最近はやりのvTuberをやってみようと思ったのでなんか同時にできないかなって考えた結果。

恋声とかのボイチェン使ってもよかったけれども、どうせならPythonの勉強がてらツールから作ってしまえばいいのでは？ということで。

#その他

上でもちらっと書いたけどPythonの知識はほぼ皆無、そもそもインストールするところから始まる。

プログラミング全般まで広げればJava,C,JavaScriptとかなら少しはやったことある程度。

また、高卒のため機械学習の記事とか読んでると見る線形代数とかそのあたりの知識は無い。


とりあえず01はPythonのインストールとかから初めてこまめに記事を書いていければいいなと。

タイトルの番号が2桁になっているのは続けてやるぞという意思表示。


仕事の合間にちょこちょこ進めていくことになるのでどれくらいのペースで出来るかわからないがとにかく動く成果物を作っていくことを目標にやっていきます！
crowi, the qiita-like communication tool as a widget on the jupyterlab 

# the goal

これはjupyter labにて IFrame widgetで開いた画面です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/12587/3db2f340-dc59-24df-8b1f-801e67035ede.png)

# crowi

- https://github.com/crowi/crowi
- qiita-like drag-and-drop file uploading
- qiita-flavored markdown code highlight
- slack notification integration
- etc..

## ref
- [最強のWiki「Crowi」のフォーク、「GROWI(旧crowi-plus)」を公開した話](https://qiita.com/yuki-takei/items/5df9601039ccfc1df01f )
- [3年利用したQiita:TeamをやめてCrowiを使う理由](https://qiita.com/crasae/items/fc76bc6476a183f2bef8)
- [Markdownで書ける、よさげなWikiサーバーソフトまとめ](https://qiita.com/Bakudankun/items/740ac8ba1395fe4e40a6)

# working terminal

the following image is my working terminal. there are 3 panes on a byobu session

## right-top pane

```
while true; do clear; docker ps; sleep 2; done
```

## left pane

```
mkdir temp && cd temp
git clone https://github.com/crowi/crowi
cd crowi
docker-compose -f docker-compose.development.yml up
```

## the working terminal image
![image.png](https://qiita-image-store.s3.amazonaws.com/0/12587/d9c4bd38-9b48-87a2-05e9-9e8ac95d114b.png)

# the Result
![image.png](https://qiita-image-store.s3.amazonaws.com/0/12587/cc085f05-0a92-85b3-2479-e4bbfbccc7ed.png)

# some ideas
- what about adding google ad-sense and using like blog for monetizing? 
- what about etherpad? or jupyter lab?
MojaveでTime Machineバックアップがとれないのをなんとかする 

# 概要
10日に1度くらいしかとってないのだけど、ある日を境にTimeMachineでバックアップが取れなくなった。
FirstAidを使っても、再起動しても状況が変わらないので、HDD買い替えたけど状況が変わらなかった。

# 原因?
High Sierraから導入されてたファイルシステムAPFS（Apple File System）が正式採用されたため?
あんまり良くわかってないのですけどそんな感じがします。

<img width="804" alt="ss_ 2018-11-12 16.43.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/5534/a6bacd4d-c2bd-f392-3325-adbb7c5922b7.png">

# 対策


## 1. Time Machine用のHDDのフォーマット
とりあえず買っちゃったのでBUFFALOの[これ](https://amzn.to/2PqqbCE)にバックアップすることにしました。
何でもいいし既存のを再フォーマットするんでも良いと思います。

## 2. フォーマット形式・パーティションの形式を選ぶ
新しくAPFSってのが増えたので、それを選びたくなりますが、2018年11月12日現在Time MachineはAPFS形式に対応してないそうです……
おとなしく `Mac OS拡張（大文字/小文字を区別、ジャーナリング）` を選びます。`大文字小文字を区別`にしない場合、一部のアプリが原因で Time Machine でファイルのコピーを行なうときにエラーが起きるらしいです。

Time Machine に使用できるディスクの詳細はこの辺に書いてありました。
https://support.apple.com/ja-jp/guide/mac-help/mh15139/mac

## 3. ディスクを選択しなおしてバックアップ開始
状態によるんでしょうけどしばらくほって置くと終わります。
(自分の環境だと3時間くらいで終わったような)
Amazon Data Lifecycle Manager でEBSタグがコピー出来るようになった！

以前（7-8月頃）、リリースされた Amazon Data Lifecycle Manager（以下、DLM）で
Snapshot対象となるEBSのタグコピー機能が追加になりました。

今までは、タグはDLM作成時に、手動で定義する必要がありましたが今回のアップデートで
手動での定義も可能なまま、EBSに付与されているリソースタグもコピーされます。

少しやってみました！

# アップデート情報

[公式サイト](https://aws.amazon.com/jp/about-aws/whats-new/2018/11/amazon-data-lifecycle-manager-adds-support-for-copying-ebs-volume-tags-to-ebs-snapshots/)

```
Resource tags allow you to add metadata and apply access policies to your Amazon Elastic Block Store (Amazon EBS) resources. 
Starting today, you can allow resource tags set on your EBS volumes to be automatically copied to any EBS snapshots 
that are created using Amazon Data Lifecycle Manager (DLM). This allows you to easily set snapshot metadata, 
such as access policies, to match the parent volume. 
You may enable this functionality on new or existing lifecycle policies. You may also choose to disable it at a future date.
```

# やってみた
## 対象EBSへタグ付け

以下をタグ付けしました。

|キー|値|用途|
|:--:|:--:|:--:|
|Backup|On|DLMの対象に利用するタグ（Backup:On）|
|CopyTag|SAMPLE|任意のタグもコピーされるかを確認するため|
|Name|DLM-root|EBSの名前（一番欲しい内容）|

<img width="1215" alt="dlm-tagcopy-20181112-01.png" src="https://qiita-image-store.s3.amazonaws.com/0/212868/f9b9b334-eac9-c7b4-3ce7-f5d7a77c6385.png">


## DLM 作成

基本的には、今までと[同様の設定](https://qiita.com/bee3/items/aac79410de48eb5f118f)です。

**「Copy tags」**が今回追加となったので、そこをチェックします。
 
<img width="1136" alt="dlm-tagcopy-20181112-02.png" src="https://qiita-image-store.s3.amazonaws.com/0/212868/d40e6a19-93ef-7773-d6d0-990d44a6e122.png">

<img width="1143" alt="dlm-tagcopy-20181112-03.png" src="https://qiita-image-store.s3.amazonaws.com/0/212868/96f476b3-f20c-7e9e-f974-19a8a6af6657.png">

<img width="1130" alt="dlm-tagcopy-20181112-04.png" src="https://qiita-image-store.s3.amazonaws.com/0/212868/1319f22f-5293-8fe7-4626-3e020ce197fd.png">



## 結果

設定して時間から1時間以内に、Snapshotが取得されます。
先ほど、EBSに付与したタグが引き継がれています。
（aws:dlm:lifecycle-* はDLMが処理内で付与したタグです）

<img width="1216" alt="dlm-tagcopy-20181112-05.png" src="https://qiita-image-store.s3.amazonaws.com/0/212868/9b90414d-c462-b502-75fb-02e620a1affa.png">

---

これで取得した対象EBSの確認が楽になるのではないでしょうか。
どんどんアップデートして欲しい。。
Augurのマーケット内訳(2018-11-12)

# Augurは予測市場のプラットフォーム
[Augur(オーガー)](https://www.augur.net/)は、予測市場のプラットフォームです。現在メインネットにて稼働中です。
詳細は、[CRYSTAL BALL BE](http://www.crystalball.be/)さんのページが詳しいです。
最近では、アメリカの中間選挙に関する掛け金が200万ドルを超え、既存の世界最大のギャンブルプラットフォームのbetfairを60%以上上回った額となったことで[話題となりました](https://bcfocus.com/news/augur-records-60-percent-more-bets-than-betfair-during-us-mid-term-election/26190/)。

メインネット上には、2018-11-12 16:30(JST)現在で、151種類のカテゴリ内に、706個のマーケットがあります。
カテゴリは誰でも作れるため、乱立しています。

どんなマーケットがあるかいくつあるか、数えてみました。
カテゴリ名を元に分類し、そのカテゴリに含まれるマーケット数を合計したものです。

# マーケットの内訳
PRE_REPORTING(売買受付中)のマーケットの内訳は、
暗号通貨関連：277
スポーツ：113
政治：100
経済：71
その他：145
でした。

# 感想
暗号通貨関連が多いのは当然ですが、よく目にした政治関連が思ったよりは数が少ない印象です。アメリカの中間選挙が終わった事が影響しているのかもしれませんね。
今後も定期的に調べてみたいと思います。
IDの列を任意の数で区切る

### Split処理めんどいよね

何か

”データの操作とかする時に対象規模が大きすぎるから一旦任意の数で区切ってWaittime入れてクエリ発行しますよー”

みたいな任意の地点でSplitしろみたいな現象に出くわすことって
サーバサイドなエンジニアやってると何回かあると思うんですけれど
その度に毎回スクリプト書くのもどうなんだということで

「IDのみ羅列されたファイルからN個ずつ区切って出力する」処理をざっくり書いてみました。
穴だらけなのでいつか修正したりするんじゃないでしょうか？

```golang:main.go
package main

import (
	"bufio"
	"flag"
	"fmt"
	"os"
	"strconv"
	"strings"
)

var scan = bufio.NewScanner(os.Stdin)

// AllScan is scan and convert text from Stdin datas
func AllScan() []string {
	all := []string{}
	for scan.Scan() {
		all = append(all, scan.Text())
	}
	return all
}

func main() {
	flag.Parse()
	per, err := strconv.Atoi(flag.Arg(0))
	if err != nil {
		per = 500 // default
	}

	data := AllScan()
	repeatCoe := (len(data) / per) + 1 // set repeat count
	for i := 1; i <= repeatCoe; i++ {
		upper := (i * per) - 1
		lowwer := upper - per
		if i == 1 {
			lowwer = 0
		}
		target := []string{}
		if i == repeatCoe {
			target = data[lowwer:]
		} else {
			target = data[lowwer:upper]
		}

		ids := []string{}
		for _, row := range target {
			ids = append(ids, row)
		}
		fmt.Println(strings.Join(ids, ", "))
	}
}
```

既に書いてて
「AllScan()の時にperで区切る処理持ってくればいいじゃん」
「処理が冗長すぎるのでSlice使わないほうが」
「Shellで絶対簡単に書ける奴」
みたいに思ってますが、まぁいずれ。

テストも書いてないしね。

### 使い方

雑に

```
> cat ids.txt | go run main.go 500
```

などと記述すれば標準出力でIDがドバドバ出てきます。
DynamoDBにinsertするときに空文字をnullで置き換えるサンプルコード


タイトルの通り。自分用


環境
---

* node.js(8.1)

サンプルコード
---

```
const DynamoDBDocumentClient = new aws.DynamoDB.DocumentClient({
    region: 'ap-northeast-1',
    convertEmptyValues: true
});

let records = {
     RequestItems: {
         "TALBE_NAME": insertItems
     }
};

DynamoDBDocumentClient.batchWrite(records).promise();
```


参考
---

* [DynamoDB は空の値を登録できないけど DynamoDB document client のコンストラクタにオプションを渡すだけで空の値を NULL 型には変換できるよ？](https://qiita.com/kotarella1110/items/070c4544c7d836b82a3a)
KotlinのCoroutineをコマンドラインで実行してみた

gradleをインストールするためにSDKManagerをインストールします。
あ、あとKotlinはbrewでインストールしました。
CoroutineはKotlin1.3.0から正式にリリースされてます。

```command:command
// Kotlinインストール
$ brew install kotlin

// SDKManagerのインストール
$ curl -s get.sdkman.io | bash

// SDKManagerを環境変数に登録（デフォルトディレクトリ上）
$ source .sdkman/bin/sdkman-init.sh

// sdkコマンドが通ったら
$ sdk install gradle

// gradleプロジェクト用のディレクトリを作成します。
$ mkdir CoroutineTest
$ cd CoroutineTest

// gradleプロジェクトを初期化します。
$ gradle init
```

これでbuild.gradleが出来上がるので以下のように編集

```gradle:buid.gradle
plugins {
    id 'org.jetbrains.kotlin.jvm' version '1.3.0'
}

repositories {
    jcenter()
    //mavenCentral()
}

dependencies {
    implementation 'org.jetbrains.kotlin:kotlin-stdlib:1.3.0'
    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:1.0.1"
}
apply plugin: 'kotlin'

kotlin {
    experimental {
        coroutines 'enable'
    }   
}

apply plugin: 'application'

// クラス名に書き換えてください
mainClassName = "KotlinCmdMain"
```

あとはmainを持つKotlinCmdMainクラス（これも自分で作成した名前で）を
プロジェクトからsrc/main/kotlinディレクトリを作ってそこに置く。

```kotlin:KotlinCmdMain.kt
// これは誰かのを参考にした、気がする。思い出したら元記事を記載します。
import kotlinx.coroutines.runBlocking                                                                                                                                              
import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

class KotlinCmdMain {
    companion object {
        @JvmStatic
         fun main(args: Array<String>) = runBlocking<Unit> {
            GlobalScope.launch {
                repeat(1000) { i ->
                    println("I'm sleeping $i ...")
                    delay(500L)
                }   
            }   
            delay(1300L) // 遅れて終了する
        }   
    }   
}
```

ここまでくればあとは実行。

```command:command
// プロジェクトルートで
$ ./gradlew run
```
結果はこんな感じに出るかと

```command:command
Task :run
I'm sleeping 0 ...
I'm sleeping 1 ...
I'm sleeping 2 ...

BUILD SUCCESSFUL in 2s
2 actionable tasks: 1 executed, 1 up-to-date
```
IntelliJでOracle接続をする

#IntelliJのGUI操作でOracle(11g)に接続する
##まえがき
Oracleの管理ツールであるSQLDeveloperを使ってもいいんですが、IntelliJ内でデータベースを確認したり、操作したりする作業を完結したり、DateSourceとして認識してくれればデバッグも役に立つだろうと思いますので、備忘録を記します。

##公式サイトの手順通りにやります。
[公式サイトの手順はここです。](https://pleiades.io/help/idea/connecting-to-a-database.html)日本語で書いてあります。優しい。
####1.以下の画面までたどり着く
左右にあるツールウィンドウのどっちかにあるDatabaseを選びます。
ちなみに下の画面はIntelliJ全体の画面ではなくて、一部分を切り取っています。

![範囲を選択_001.png](https://qiita-image-store.s3.amazonaws.com/0/304366/a7a33146-6ffd-22ce-8aeb-f92a72043090.png)

####2. Oracle接続設定画面までたどり着く
スクショがうまく取れないので文章でやり方を文章で記すと、
1. Databaseの下にある+を選択。
2. DataSourceを選択。
3. Oracleを選択

すると以下のような画面にたどり着く。

![範囲を選択_005.png](https://qiita-image-store.s3.amazonaws.com/0/304366/240915c0-b563-8fc8-fb73-98b908c5f572.png)

####3. 接続する。
各種設定する。
今回はSSL/SSHなど子毎回設定はしません。
HostはHostServerのIPアドレスを入れればオーケー。
PortはDBが稼働しているポートです。
SIDやUserはOracleならば管理画面で見られると思います。
DriverやURLはいじらなくても設定していけば自動的にうまく行くようにIDEがなんとかしてくれてます。
DriverはOracleで。
下の青い文字でDownloadというところを押すとドライバーをダウンロードしてくれます。便利。
あとはOKを押せばいいです。
[Illustrator_script]各レイヤーごとにオブジェクトをグループ化する

## やりたいこと
各レイヤー毎に全オブジェクトをグループ化するスクリプトを作ってみました。

## やったこと
ソースコードは以下の通り

```javascript:groupLayerObj.jsx
var myDoc = app.activeDocument;
var myLayer = myDoc.layers;

//すべての選択を解除
app.executeMenuCommand('deselectall');

for (i = 0; i < myLayer.length; i++) {
    for (j = 0; j < lay[i].pageItems.length; j++ ) {
        lay[i].pageItems[j].selected = true;
    }
    // 選択オブジェクトをグループ化
    app.executeMenuCommand('group');
    //すべての選択を解除
    app.executeMenuCommand('deselectall');
 }
```
簡易Tip: JDBCにおいて空白を削除する

## 値を取得した際の空白を削除する

Oracle DBからたまに空白を取得してしまって、その後データを新しく送り返すときに空白を削除し忘れていたら「値が大きすぎます」というエラーメッセージに遭遇してしまうことがある。
悪いことは言わないからSQLの関数で処理しよう。
あと、NLS_LANGとは疑わなくていいと思う。
基本的にJDBCを使う場合、Javaコードでなんとかするのは最終手段だと思う。

## 使う関数
使う関数は２つある。

####[RTRIM関数]
右側の空白を消してくれる関数
####使用法

列名をRTRIMで囲う
```sql
SELECT RTRIM(列名) FROM (テーブル名)
```

####[LTRIM関数]
左側の空白を消してくれる関数

```sql
SELECT LTRIM(列名) FROM (テーブル名)
```

## 組み合わせて両端の空白を削除する
勘のいい人はもう築いていると思うが、これを組み合わせると前後の空白が完全に削除できる。
右側の空白を削除してから、左側の空白を削除を実行すればいい（逆もまた然り）。

```sql
SELECT LTRIM(RTRIM(列名)) FROM (テーブル名)
```
なお、列名が長いのでASで修飾すると良いと思うよ。

[参考ページ:SAK図書館](http://sak.cool.coocan.jp/w_sak3/doc/sysbrd/sq_kj07_2.htm)
Docker-ComposeでTerraformを使う

# 前置き
hashicorpが公開しているterraformのDocker Imageを便利に使ってみようという試み。
https://hub.docker.com/r/hashicorp/terraform/
3年前のver.0.6.14から各バージョンが揃ってます。
~~過去案件のTerraformに手を加える時、大抵バージョン違いによるエラーの嵐に白目を剥いているので助かる~~
## 環境
とりあえず自環境のバージョンを添えて。

- docker for mac (18.06.1-ce)
- docker-compose (1.22.0)
- aws-cli (1.16.14)
- direnv (2.14.0)

# クイックスタート
docker/docker-composeだけ入っていれば実行できるシンプルな使い方。

###1.docker-composeの用意
```docker-compose.yaml

version: '3'

services:
  terraform:
    image: hashicorp/terraform:0.11.10
    volumes:
      - ./:/workdir
    working_dir: "/workdir"
    environment:
      - AWS_ACCESS_KEY_ID=xxxxxxxxxxxxxxxxxxxx
      - AWS_SECRET_ACCESS_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
      - AWS_REGION=xxxxxxxxxx
```
`image` の末尾、image tagでバージョン指定。
`environment` として直接アクセスキー・シークレットアクセスキーを書いてしまう方法なので、取り扱い注意。

### 2.コマンド実行
tfファイルの存在する任意のディレクトリ上でdocker-composeを実行。

```
docker-compose run --rm terraform plan
```
`docker-compose run --rm ` 以降は通常のterraformコマンドと同じ形で使える。
ちなみに単発コマンド用な書き方のため、 `docker-compose up` してもhelpが表示された後でstop状態なコンテナが残るだけです。

# もうひとこえ
主にAWSのcredencials管理を気楽にするための一手間。
以下、"direnv"というツールを利用しています。
https://qiita.com/kompiro/items/5fc46089247a56243a62
###1.docker-composeの用意
```docker-compose.yaml
version: '3'

services:
  terraform:
    image: hashicorp/terraform:0.11.10
    volumes:
      - ~/.aws:/root/.aws:ro 
      - ./:/workdir
    working_dir: "/workdir"
    environment:
      - AWS_ACCESS_KEY_ID
      - AWS_SECRET_ACCESS_KEY
      - AWS_REGION
      - AWS_DEFAULT_REGION
      - AWS_PROFILE
```
※こちらはtag(terraformのバージョン)指定の他はコピペで利用可能

`volumes` read onlyでローカルのaws認証情報をマウント。
`environment` 環境変数のKEYだけを設定すると、ローカルに設定されたものがそのまま継承される。

### 2.認証情報の用意
```..envrc
export AWS_ACCESS_KEY_ID=xxxxxxxxxxxxxxxxxxxx
export AWS_SECRET_ACCESS_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
export AWS_REGION=xxxxxxxxxx
```

もしくはプロフィールで管理

```
aws configure --profile wasshoi
```
↓

```..envrc
export AWS_PROFILE=wasshoi
export AWS_REGION=ap-northeast-1
```
読み込ませる

```
direnv allow
```

### 2.コマンド実行
あとは同じ。

```
docker-compose run --rm terraform plan
```
# おわり
【Python】ログイン処理をSeleniumで行い、その後はrequestsで処理する

Seleniumでログイン後、POSTリクエストでjsonファイルを取得したいケースがあった。
調べたところSelenium自体にはPOSTリクエストする機能は無かったので、requestsにログイン時のセッションを渡し、そちら側で処理をすることにした。
（下記はChromedriverの場合）

```python

driver = webdriver.Chrome()

#～ログイン処理～

session = requests.session()

#セッションの受け渡し
for cookie in driver.get_cookies():
    session.cookies.set(cookie["name"], cookie["value"])

result = session.post(url,data=payload)
data = json.loads(result.text)
```

これでPOSTリクエストで取得できるようになった。

ちなみにGETリクエストでも、Selenium経由でjsonを取得したい場合はrequestsを使った方が綺麗に書ける。
Seleniumだとjsonにhtmlタグが付いて戻ってくるためBeautifulsoupを挟んで取得するといいが、それなら直接requestsで取得した方が余計なタグも付いてこないので良い。
一応Selenium+beautifulsoupで取得する場合を下記に記載する。

```python
driver.get(url)
data = json.loads(BeautifulSoup(driver.page_source,"lxml").find("body").text)
```
react hooksを使ってみる

今更ではあるがReactConf2018で発表されたHooksを軽く試す。

## React Hooks
https://reactjs.org/docs/hooks-intro.html
https://qiita.com/Naturalclar/items/706d10e4d3a442f4e513
https://qiita.com/YutamaKotaro/items/ef0430f570779dcf8a26
https://qiita.com/__sakito__/items/417688ea125e395b353d
https://qiita.com/terrierscript/items/1516e946dfe91397c229

よくあるヘッダーのUIで、トップにあるときは透明背景で、スクロールすると背景ありになる
https://www.orosapparel.com/collections/mens-jackets/products/mens-orion-parka
にあるようなヘッダーUIをuseStateとuseEffectで実装してみる。

``` Header.js
import React, { useState, useEffect } from 'react'
import { HeaderStyle } from './style'

function Header() {
  // useState(初期値)
  // useState（）は[state, setState]の配列を返してくれるので、それぞれに好きな名前を与える。
  const [onTop, setOnTop] = useState(true)

  // scroll時に上部からのオフセットによってstateを更新する
  function onScroll() {
    const offset =
      window.pageYOffset ||
      (document.documentElement && document.documentElement.scrollTop) ||
      document.body.scrollTop

    if (offset >= 20 && !onTop) return false
    if (offset >= 20 && onTop) {
      setOnTop(false)
      return false
    }
    setOnTop(true)
  }

  // 今までならcomponentXXXmount系のライフサイクルでやってたeventListenerの登録などをuseEffectでやる
  useEffect(() => {
    document.addEventListener('scroll', onScroll)
    return () => document.removeEventListener('scroll', onScroll)
  })

  return (
    <div className={HeaderStyle(onTop)}>
        I am Header.
    </div>
  )
})

export default Header
```

``` style.js
import { css } from 'emotion'

export const HeaderStyle = (onTop) => css`
  background: ${onTop ? 'transparent' : '#fff'};
`
```
2×3 か 3×2 か？かけ算順序の問題への職業プログラマからの意見

# 最近聞いた話から考えてみた

小学生のテストで、

```
りんごを2つずつ3人に配りました。
その時の式と答えを書きなさい

答え
  式： 2 × 3
  答： 6
```

みたいなのがあって、`2 × 3` だと正解で、 `3 × 2` だと間違いになったとか。

*「結果は同じなんだからそんなの算数(数学)としておかしい！！」*
*「いや、考え方として順番が大事だ！！」*

という論争がありましたとさ。

## わたしの考え

正解？不正解？それは、

**「先生が何をテストしたかったか次第では？」**

結局よくある けーす ばい けーす の話ですね……

小学生のこの年代くらいであれば、先生からの教え方で `「2つ」のものを「3人」に配るのなら「2 × 3」と書きましょう、順序も大事です` 、みたいな教え方をされているのだと思います。

この手のテストでこの手の採点方法のケースでは、**答えが6であることではなく、学校で教えられた通りの解法で解くことがテストされている**のだと思います。

であれば、掛け算を使わない `2 + 2 + 2` は**テストとしては**不正解ですし、逆順の `3 × 2` も**テストとしては**不正解です。

ただ単に答えの`6`を求めたかったのか、`2 × 3 = 6`を求めたかったのか、それはテスト出題者の意図次第だと思います。

**良いか悪いかは置いておいて**、世の中の「問題」と「答え」はそういうものだと思います。

---

世の中のテストというものは、出題者が決めたルールの中で高い点数を取るというゲームです。

ただ単に「論理的に、科学的に、答えがあっていればいいというものでは無い」というのがわたしの理解です。

電卓を使ったらダメなのも、ググるのもダメなのも、横の人に答えを聞いたらダメなのも、名前をローマ字ではなく漢字で書くのも、周りが習っていないテクニックを使って答えを出すことがダメなのも、出題者が決めたルールですよね？

ボールをゴールに入れるだけなら手で持って走ればいいのに、足しか使っちゃいけないというサッカーのルールと同じです。決められたルールの中で高得点を出すというゲームがテストです。

※ ただし、その「ルール」が明確にされていることは重要です。おそらく今回の算数のテストのケースでも先生は「順序も大事ですよ」というルールを事前に言ってくれてた……と……信じています。

---

ということで、わたしは学校の教え方として、かけ算の順序を教えるのはおかしい！順序を意識させた方がいい！ そもそもそんなテストはおかしい！ みたいな議論をしているわけではなく、まあ、テストってそんなものだよね。。。という考えです。

## なんでQiitaでこんなことを？

結果が同じでも、様々な書き方が出来るもの…… そう！**ソースコード**です！！

どなたかがTwitterで、

**「算数のしぐさみたいなものなら道徳の時間にやるべきではないか」**

みたいなことを書いてました。

**「え！？ コーディングも同じ結果になることを様々な書き方出来るんだけど…… コーディングスタイルとかも道徳でやるべきなの？？」**

という違和感を覚えたからです（汗）

> 言った本人は「算数なんて当たり前なものは道徳ででも…」と思ったのかもしれませんが、小学生低学年のかけ算は初めて習うことで全然当人には当たり前じゃないですからね（笑）大人のプログラミングくらいには当たり前じゃないと思う。。

ソースコードもこれじゃないとイケないなんてものは無いモノの、やっぱり慣習として、ベターな書き方があります。`if`文の書き方、`for`文の書き方、`==`の書き方、インデントの書き方、などなど。

それに対して「答えが同じなんだからどっちでも良いべきだ」と言われると、違うかな…… と思います。可読性が変わってきます。可読性が変わってくるとレビューの効果・効率が落ちたり、保守性が悪くなったりします。

## わたしが考えるキレイなソースコード

最初の算数の問題に非常に近い話ですが、「`2つを3人に`」であれば「`2 × 3`」と書かれているのが、キレイなソースコードの１つの要素だと思います。

それが絶対な正解では無いにせよ。やりたいことが素直にストレートに表現されている、文学的なソースコードというのが、がキレイなソースコードだと思います。

ちょっと極端な言い方ですが、やっぱり一般的な日本語の文脈の通りに`2 × 3`と書いてくれる方がソースコードとしては読みやすいです。相手が日本人ならなおさら。

> もちろん速度を重視するために一部をアセンブラに書き換えるようなこともあるとおもいます（わたしもやってました）そうなると可読性もあったものじゃないので、結局はケースバイケースなのは百も承知です。それでも、やりたいことがストレートに表現されているコードを、わたしは素直でキレイなコードだと思います！！

## 終わりに

大人になったら、ひらがなの「はね」「とめ」なんて気にしなくても感じは通じます。だからといって漢字のテストで「はね」「とめ」を無視していいことにはなりません。習った当初にはそういうことを「学校のテスト」というツールを使ってしっかり身に着けさせることは、あながち悪い事ではないと思います。

> でも、不正解にしながらも、先生にはちゃんと「本当はどっちでもいいんだけどね。でも今回は数の順番もテストの範囲だから書き方を気を付けてね^^」「大きくなったらPythonでも使って計算を解いていいから、今だけ我慢してね^^」というフォローはしていただきたいと思います。じゃないと理不尽な記憶だけが残ってしまいますので。。。
画像を一括ダウンロード---コード必要なし

#About
・画像をデータとして集めるときに一枚、一枚ダウンロードするのは大変
・一度に数十枚をまとめてダウンロードする方法を紹介
・コードは全く使わない方法
・環境：windows7



###1, 画像がまとめて表示されているページを開く
インスタグラムのハッシュタグ検索のページ
Google画像検索　　等

###2, 右クリック→名前を付けて保存→ファイルの種類を「ウェブページ、完全」にして保存をクリック