OmniAICreator/Qiita-1.07M huggingface dataset:
ブラウザ上で動くプレビュー付きのAsciidocエディターを作ってみた

## 最初に結論

[ブラウザ上で動くプレビュー付きのAsciidocエディター](https://yamanee.info/adt_editor/)を作ってみました。

以下は全て与太です。

## これまでのあらすじ

物覚えが悪くてAsciidocの文法とかヘッダの項目名とかが覚えられません。
なんにも知らなくてもアイコンぽちぽちしたらどうにかなるエディターでもないものかとちょいと探してみるも、AsciiDoc界隈はイメージ的にMarkdownよりも硬派な雰囲気で、UIなんてペッ！ってな感じです（個人的な見解）。

ならば作るか。作ろう。そういうことになった。

## 材料

* [Asciidoctor.js](https://asciidoctor.org/docs/asciidoctor.js/)
* [Ace (JavaScript製コードエディタ)](https://ace.c9.io/)
* [code-prettify](https://github.com/google/code-prettify)
* 中途半端な知識

## 要件
* 書いた内容をプレビューしたい
* 編集内容の読み込み、保存がしたい
* よく使うパターンはボタンとかで挿入したい
* ドキュメントヘッダとか覚えられないので書きたくない
* UMLとか書かないので、PlantUML はパス
* あまりマイナーな言語のコードも書かないので、ハイライターはprettifyで十分
* いまのところサーバーを準備するつもりはないので、HTMLページ一枚だけで済ませたい

## 結果

まあどうにかなるだろうと軽いキモチで始めたのですが、休日がまる二日ほど潰れました。
どうにか使えなくもない程度にはなったかなあと思います。

変換部分はすごく簡単なんですが、BootstrapとかJQueryとかImgurとかAjaxとか、本筋とか関係ないところで時間を食いました。

Webのクライアントサイドって今までまともにコード書いたことなかったんですが、結構おもしろいかも。

## 残っている課題

Aceの使い方がまだいまいち判ってないので、テキスト挿入後のカーソル位置や選択範囲をなんとかできていません。これができるとたいぶ使えるモノになるはずなのですが・・・
さくらVPSで利用していたmemcachedがリフレクションDDoS攻撃発信の踏み台として悪用された件

# 突如メールが・・・
<img width="660" alt="スクリーンショット 2018-02-28 12.43.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/19603/53dbd369-12b0-9c1a-acf3-ca19067d7ea5.png">


# セキュリティ案件
memcached のアクセス制御に関する注意喚起
https://www.jpcert.or.jp/at/2018/at180009.html

memcahcedの設定をデフォルトで使用していたため、リッスンするIPに制限がかかっておらず外部からアクセス可能になってたみたい。

なぜ外部からアクセス可能だとDDoS攻撃発信の踏み台になるかはこちらが詳しいです。(2018/03/02追記)
簡単にいうと下記。

- UDP通信を使用している場合送信元偽装が簡単
- 送信元をDDoS攻撃したいIPに偽装して大量のデータをGETする操作を実施
- 偽装したIPに大量のトラフィックが集中する


###### 参考(2018/03/02追記)

- memcached を悪用したDDoS攻撃についてまとめてみた
    - http://d.hatena.ne.jp/Kango/20180301/1519939259
- memcachedの開放ポート(11211/tcp, 11211/udp)をサクっと確認する
    - http://d.hatena.ne.jp/ozuma/20180228/1519828918


# 対応ログ
## serviceコマンドに対応させる
そもそもserviceコマンドに対応してなかったので対応させる(※ この時点でやばい)

- initスクリプトを/etc/init.d/memcachedに作成(参考：http://pentan.info/server/linux/memcached.html)
- /etc/init.d/memcachedに実行権限を付与
- /sbinにパスを通しserviceを呼べるように

service memcached start系のコマンドが打てるようになる

## リッスンするIPを制限
/etc/sysconfig/memcached
のOPTIONSを編集しようと思ったが、ファイル自体がない。
sysconfigからのオプション追加はあきらめて、起動スクリプトのコマンドにlオプションつけて対応した

```shell:/etc/init.d/memcached
IP_ADDRESS=127.0.0.1
start()
{
  echo -n "Starting ${TARGET}: "
  ${DST_BIN} -d -u ${EXEC_USER} -m ${CACHE_SIZE} -l ${IP_ADDRESS}
  echo
}
```

## memcached再起動
service memcached restart

## 適用されたかを確認
ps aux|grep memcached
起動オプションに、"-l 127.0.0.1" が含まれていればOK

## その他の方法
- UDPをやめる
    - 「-U 0」というオプションを付加
    - 厄介なことにmemcachedデフォルトではTCPだけでなくUDPも開放される(memcached 1.5.6からはUDPはデフォルトでは無効らしい)
- ファイアウォールを設定しmemcachedが使用するポートへのアクセスを制限する



## さくらにメール返信
圧倒的謝罪
※ 追記
メール送ってから30分ほどで通信制限解除されました。レスポンスの速さ圧倒的ですねさくらさん…！

# 所感
学生のときにつくったサービスとはいえ、セキュリティ周りの知識きちんと持っていないとダメだなと思いました…
[超初心者向け]Bootstrapの使い方〜効率よくレスポンシブサイトを作る方法

# 目的
効率よくレスポンシブデザインのサイトを作るために、ここではBootstrapの使い方について研究していきたいと思います。

# 設定環境
- OS
    - Mac OS X
        - 10.12.6
- Software
    - PostgreSQL
        - 10.1
    - Ruby
        - 2.5.0
    - Rails
        - 5.1.5

## ウェブデザインを始めるにあたって
ウェブデザインをするにあたっては、CSSを学び、コーディングしていく必要があります。
CSSを習得するには時間が必要です。
これを効率よく他の人が作ったCSSをコピペしてデザイン完了するというコンセプトを持った、CSSのフレームワーク（テンプレート）がBootstrapと呼ばれるものです。

以下の内容で試したことを記述していきたいと思います。
共有しながら一緒に学んでいけたらと思いますので、アドバイス等いただければ嬉しいです。

### **ウェブデザインとは?** ##

サイトやアプリの表面となるユーザーが見える部分でのウェブサイトのデザインをすることをウェブデザインと言います。

### **レスポンシブデザイン、レスポンシブサイトとは?** ##

レスポンシブデザインとは利用される端末に合わせて、デザインを柔軟に対応させるという要素を含むデザイン方法です。　レスポンシブサイトとはレスポンシブデザインを導入しているウェブサイトになります。

### **Bootstrapとは?** ##

CSS導入が簡易的に初心者でも完結でき、かつデザイン性に優れているフレームワークがBootstrapです。
一定のコードをコピーし、貼り付けるだけでデザインができてしまうことを想像してもらってもいいです。

まずはこの公式サイトにアクセスしてみましょう。
http://getbootstrap.com/
このサイト自体もBootstrapで作られているみたいです。

それではBootstrapの基礎について研究していきましょう。

## **Bootstrapの基礎** ##
Bootstrapを勉強する上で今のところ効率よく学べてるのはドットインストールです。
[Bootstrap 4入門]
(https://dotinstall.com/lessons/basic_twitter_bootstrap_v5)

こちらのhackerthemeというサイトを使えば、
目的毎のコードサンプルが出てきます。
https://hackerthemes.com/bootstrap-cheatsheet/

こちらにもチートシーとがあるらしいです。
http://programming-study.com/technology/bootstrap-cheatsheet/

## **Bootstrap公式サイトからのサンプル活用方法** ##

まずはこの公式サイトにアクセスしてDocumentをクリックしてみてください。
http://getbootstrap.com/

そこにStarter Templateがあり、さくっとTemplateのコードをコピーして自分のエディターなどにPasteしてみてください。これで遊ぶところから始めていきましょう。

```js
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
  </body>
</html>
```

この続きは研究中です。。

## **RailsアプリとBootstrap** ##

Railsアプリ作成時点からBootstrapを導入していけるとのうわさがネット上で流れていたので調べてみました。　効率よくRailsアプリを作り、Bootstrapを活用しデザインを整えらるのであれば使ってみたいと思います。

以下でやり方を書いてあるので近々やってみます。
[Ruby on Rails のWebアプリに Bootstrap を適用する]
(http://asobo.hatenablog.jp/entry/2016/01/17/120609)

## **参考** ##
[Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】]
(https://techacademy.jp/magazine/6270)
ATTiny書き込み用治具

ATTiny85の書き込み用に作った治具です。ジャンパーで8ピンと20ピンが書けるようにしました。基板は秋月のArduino用ユニバーサルの切れ端です。ゼロプレッシャーICソケットはAitendoの怪しいやつですが、とくに問題ありません。

![写真（2018-02-28 12.37）.jpg](https://qiita-image-store.s3.amazonaws.com/0/104066/e2e6e6d9-5d5a-17ae-da6d-990afd7e29b4.jpeg)

![写真（2018-02-28 12.37） #2.jpg](https://qiita-image-store.s3.amazonaws.com/0/104066/a7491b34-db35-3411-3b67-447cfbb6fa95.jpeg)

外部クロックでFUSEを焼いてしまうと、この治具では書けなくなります。
Tinkercad > UI > 直方体を削る

ブラウザ動作するAutoDeskのTinkercad。

直方体から削るには以下のようにするようだ。

### 1. ソリッドと穴のオブジェクトをオーバーラップさせる

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/e8d82403-72bc-3cfb-e9bf-507515ba0ae5.png)

### 2. 2つのオブジェクトを選択して、グループ化する

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/85349545-d702-e588-e634-f22db872da70.png)

### できあがり

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/2ff2c44d-494e-0fa5-06ce-cd52b8d7abc1.png)

レッドXVI

X68000 16MHzの3倍速い (48MHz)。
MaxCompute 有効化の注意点

##注意点
サービスの事前準備のページですがこの通りやっても開始できないです。
https://jp.alibabacloud.com/help/doc-detail/58226.htm?spm=a3c0i.o27803ja.a3.3.732de511jEQCml

![サービス開通_-_事前準備__Alibaba_Cloud_ドキュメントセンター.png](https://qiita-image-store.s3.amazonaws.com/0/234379/86c857bb-e6ff-450f-2657-eae837876b1a.png)
赤枠で失敗したのでサポートに連絡したところ、現在はサポート側で登録するようです。その後、使用出来るようになりました。
react stateを使わずにmobxでreact-beautiful-dndを動かす方法

# サンプル
https://github.com/github0013/react-beautiful-dnd-mobx/tree/master

# 問題
https://github.com/atlassian/react-beautiful-dnd
で用意されているサンプルは`state`を使っているため、そのままmobxに変更してもうまく機能しない。
問題の場所は`(provided, snapshot) => ()`関数内でmobx observableオブジェクト`this.items`を使う必要がある事で、この関数内では`this.items`自体がobservableとしてうまく機能していない。

```jsx
  @mobx.observable items = [{id: "...", content: "..."}]

  ...
  ...
  ...

  render() {
    return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        <Droppable droppableId="droppable" direction="horizontal">
          {(provided, snapshot) => (
            <div
              ref={provided.innerRef}
              style={getListStyle(snapshot.isDraggingOver)}
              {...provided.droppableProps}
            >
              {
                // ここでobservableが必要になる
              }
              {this.items.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>

```


# 解決策
https://github.com/atlassian/react-beautiful-dnd/issues/156

`(provided, snapshot) => ()`関数内の部分を別コンポーネントとして切り出して、そのコンポーネントを`@observer`を使いobservableオブジェクトを正しく機能させる。

https://github.com/github0013/react-beautiful-dnd-mobx/blob/master/src/App.tsx#L49
https://github.com/github0013/react-beautiful-dnd-mobx/blob/master/src/DraggableInternal.tsx
Memcached脆弱性でDDoS踏み台に使われて、プロバイダによるネットワーク制限発生

# 経緯
さくらインターネットのVPSを使って、2/26にあるVPSサーバーのネットワークを制限したというメールが届きました。
確認して、該当サーバーに設置したサイトが閲覧できない状態になっています。

# 対応
メール本文の中に下記文言が入っています。

```
この度、お客様ご利用中の上記サービスにおいて、DDoS攻撃のパケットと
思われる異常な通信が行われている状況を確認いたしました。

本件によって弊社の回線設備に多大な負荷がかかり、他のお客様が利用中の
サービスに影響が及んでいたため、誠に勝手ながら該当サービスにつきましては
通信停止措置を実施させていただきました。

緊急的な措置のため、事後のご報告となりましたことをお詫び申し上げます。

お手数ではございますが、以下の内容を実施くださいますでしょうか。
----------------------------------------------------------
■ 調査・対応
　・該当VPSサーバが悪意のある第三者により不正侵入されている可能性や、
　　memcachedがオープンとなっている可能性があるためフィルタリングを
　　実施ください。

```

よって、下記2つの可能性が考えられます。

1. VPSが第三者により不正侵入されて、DDoS攻撃の踏み台になった
2. memcachedがオープンになっている

まずは1の対応について、正直に言うと、侵入痕跡はどこから調べて行けばいいのかあまりわかりません！

なので、2つ目の可能性を先に調べます。
まずmemcachedがオープンになっているのは初耳なので、「memcached　オープン」をグーグル先生に聞いてみたが、あまりヒットしません、、、（言葉自体はかっこいい？が、わかりにくいですね）

そして、「memcached 設定」で再びグーグル先生に聞きます。
下記記事をみつけましたが、「オープン」に関して、特に書かれていません。
https://qiita.com/y13i/items/37e1ae7aa84fb946646a
しかし、memcachedの設定ファイルは「/etc/sysconfig/memcached」という手がかりを見つけました。

オープンの意味から推測して、キーワードを「memcached 外部アクセス」に変えて、下記記事でアクセス制限の設定ができることをわかりました。
http://gihyo.jp/dev/feature/01/memcached_advanced/0002

しかし、`memcached -l IPアドレス`を実行して、一時的な制限ですよね？再起動する時、自動実行を設定必要になります？もっとスマートな設定があるでしょうと思い、もう少しmemcached設定について検索してみまたら、やっと設定ファイルに制限を追記する方法をわかりました。
http://suka4.blogspot.jp/2011/02/centosmemcached.html

さらに健全な設定を求めるなら、ログやログローテーションを設定します。
[Cent OS 6.9 に Memcached をインストール、ログの設定まで実施する](https://www.monotalk.xyz/blog/cent-os-69-%E3%81%AB-memcached-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%83%AD%E3%82%B0%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%81%BE%E3%81%A7%E5%AE%9F%E6%96%BD%E3%81%99%E3%82%8B/)

[CentOS 7.4 に Memcached をインストール、ログの設定まで実施する]
(https://www.monotalk.xyz/blog/cent-os-74-%E3%81%AB-memcached-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%83%AD%E3%82%B0%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%81%BE%E3%81%A7%E5%AE%9F%E6%96%BD%E3%81%99%E3%82%8B/)

一先ず、memcachedの設定変更を行った状態で一度さくらインターネットに連絡して、しばらく経ってからネットワーク制限を解除してくれたメールがきました。

# 追記
その後、ニュースをチェックして、2月21日ごろより「memcached」狙うアクセスが増加、悪用報告も続出とわかりました。
http://www.security-next.com/090544

### **「memcached」をデフォルトのまま利用している場合など、サーバが外部に意図せず公開されている場合があり、攻撃の踏み台に利用されたり、情報漏洩につながるおそれがある ** 

そもそも、該当サーバーのサービスは一つの静的なサイトのみで、memcachedを使っていないですが、自動化構築によるmemcachedが勝手に入ってしまいました。

# まとめ：
個人的な感想ですが、
1. Memcachedのアクセス権限をちゃんと設定すべき
2. Cloudサービスなら、セキュリティグループなどに予めポートのアクセスについて定義してあるので、VPSより安全ですね。
3. 脆弱性ニュースを常にチェックした方がいいです。
4. 使わない物をインストールしないあるいは起動しない方がいいでしょう。
儲かりやすいティッカーシンボルはあるの？

## ティッカーシンボル名でパフォーマンスは違うのか？

[米株のティッカーシンボル名は何から始まるのが多いの？](https://qiita.com/shinseitaro/items/f2265930178440345fa3 "米株のティッカーシンボル名は何から始まるのが多いの？ - Qiita")という投稿をしました．

これを使って，シンボル名でパフォーマンスは変わるか？というネタ投稿をしたいと思います．

```python
from quantopian.pipeline.data.builtin import USEquityPricing
from quantopian.research import run_pipeline
from quantopian.pipeline import Pipeline
from quantopian.pipeline.factors import DailyReturns,SimpleMovingAverage
from quantopian.pipeline.experimental import QTradableStocksUS

from collections import Counter
import pandas as pd

def make_pipeline():
    # Quantopian 側で用意してくれている，トレーダブルな銘柄リストに入っている銘柄だけで検証します．詳しくは
    # https://www.quantopian.com/posts/working-on-our-best-universe-yet-qtradablestocksus
    universe = QTradableStocksUS()
    dayreturn = DailyReturns(inputs = [USEquityPricing.close])
    # 且つ10ドル以下の銘柄は外します．ココを外さないと結果は違うかもしれません．
    sma30 = SimpleMovingAverage(inputs = [USEquityPricing.close],window_length=30)
    not_penny = sma30 > 10
    
    pipe = Pipeline()
    pipe.add(dayreturn, 'dayreturn')
    pipe.set_screen(universe & not_penny)
    return pipe

# ザックリ過去8年くらいチェックしたいと思います
results = run_pipeline(make_pipeline(),start_date="2010-1-1", end_date="2018-2-22" )
```

まずはこの期間中に存在したのシンボル名をチェックします．[前回](https://qiita.com/shinseitaro/items/f2265930178440345fa3)はQuantopianで利用できる全ての銘柄を数えましたが，今回は，トレーダブルで，10ドル以上の銘柄のみを対象にしました．また，前回は，2018年1月2日に存在した銘柄のみを数えましたが，今回は過去8年間，各営業日に存在したシンボルを全部数えました．

```python
syms = [sym.symbol for sym in results.index.get_level_values(1).unique()]
data = [sym[0] for sym in syms]

counter = Counter(data)
df_initials = pd.DataFrame(counter.most_common(), columns=["initial", "count"])
df_initials["pct"] = df_initials["count"] / df_initials["count"].sum()
df_initials.sort_values(by="pct", ascending=False)
```
![Screenshot from 2018-02-26 21-40-54.png](https://qiita-image-store.s3.amazonaws.com/0/14019/ceaa3149-d3e2-4d9f-c907-116087d1a66c.png)

トレーダブルな銘柄に絞ると，CとAから始まる銘柄が全体の20％占めるなんてちょっと驚きですね．

## 頭文字毎に日々のパフォーマンスをチェック

```python
results["initial"] = [sym.symbol[0]  for sym in results.index.get_level_values(1)]
results["count"] = [len(sym.symbol) for sym in results.index.get_level_values(1)]
by_initial = results.groupby(by="initial")
by_initial["dayreturn"].median().plot(kind="bar")
```
![Screenshot from 2018-02-27 15-06-35.png](https://qiita-image-store.s3.amazonaws.com/0/14019/0cfdf25f-8e4f-e785-5b6d-f56632e963f7.png)

これは，年率にすると結構大きくパフォーマンスが違ってきそうです．

## 文字数は小さい方が有利か？

```python
by_count = results.groupby(by="count")
by_count.median().plot(kind="bar")
```

![Screenshot from 2018-02-27 15-08-35.png](https://qiita-image-store.s3.amazonaws.com/0/14019/243cefd2-f4ec-3284-66fc-5c41d1e067ed.png)

やはり短い方が有利のようです．

## Pipelineがべんり

それにしても Pipeline は便利すぎます．もっとガツガツ使いこなしたいです．
それと，pandas の groupby 最高＼(^o^)／．
CircleCIでflutter testする

#### ポイント
* CircleCIが用意している[Androidのdockerイメージ](https://circleci.com/docs/2.0/circleci-images/#android)を使う
    * ロケールが`C.UTF-8`になっていて`flutter`コマンド実行時にエラーが出るので`en_US.UTF-8`にしておく

#### 設定例
```yaml:config.yml
version: 2
jobs:
  build:
    environment:
      - LANG: en_US.UTF-8
    docker:
      - image: circleci/android:api-27-alpha
    steps:
      - checkout
      - run:
          name: Install Flutter SDK
          command: git clone -b beta https://github.com/flutter/flutter.git ~/flutter
      - run:
          name: run tests
          command: ~/flutter/bin/flutter test
```
電子回路入門　明るさ検知

#**はじめに**
[書籍](https://www.amazon.co.jp/%E9%9B%BB%E5%AD%90%E9%83%A8%E5%93%81%E3%81%94%E3%81%A8%E3%81%AE%E5%88%B6%E5%BE%A1%E3%82%92%E5%AD%A6%E3%81%B9%E3%82%8B-Raspberry-Pi-%E9%9B%BB%E5%AD%90%E5%B7%A5%E4%BD%9C%E5%AE%9F%E8%B7%B5%E8%AC%9B%E5%BA%A7-%E7%A6%8F%E7%94%B0/dp/4800711614)に沿って引き続きやっていきます。

#**使用部品**
- PSoC 5LP
- 抵抗(100, 470, 2k, 10kΩ)
- [CdS](http://akizukidenshi.com/catalog/g/gI-05859/)
- [フォトダイオード](http://akizukidenshi.com/catalog/g/gI-03822/)
- [フォトトランジスタ](http://akizukidenshi.com/catalog/g/gI-02325/)

--CdSとは--
硫化カドミウムらしいです。ヨーロッパの方では使っちゃいけないとか…これ使ったら輸出できない(´;ω;｀)
日本の電子工作で明るさ検知する場合なんかによく使われていると思います。
**光を浴びると抵抗値が下がります。**（光電効果？電気が流れやすくなる。）
今回使用するCdSは明るい時と暗い時の抵抗値が以下のようになるようです。
・明抵抗：１０～２０ｋΩ（１０Ｌｕｘ時）
・暗抵抗：１ＭΩ

--フォトダイオードとは--
光を受けるとカソード(-)からアノード(+)へ電流が流れるようになります。
CdSと違い、明るさに対して電流がある程度比例しているので、そこそこ正しい明るさの計測が可能です。
電流変化が微量なので、増幅回路が必要だとか…

--フォトトランジスタ--
トランジスタですが、ベースが無く、コレクタとエミッタしかありません。
光がベースの代わりになります。
CdSと違い、明るさに対して電流がある程度比例しているので、そこそこ正しい明るさの計測が可能です。
さらに、フォトダイオードと違い、トランジスタなので、電流増幅もされています。

#**回路図**
##CDS
今回使用するCDSは明るい時10~20kΩ(10lux時)らしいですが、私の部屋は明るいようで、100luxくらいあるみたいなので、2kΩを使用します。
100lux時の抵抗値が2kΩのようなので、
計算式　`マイコンにかけたい電圧 ÷ (供給電圧 - マイコンにかけたい電圧) × CDSの最大抵抗値`
2 ÷ (5 - 2) × 2k = 1.3k
今回は2kΩを使用。
![CDS_ブレッドボード.png](https://qiita-image-store.s3.amazonaws.com/0/195542/ecfb27aa-96df-c8b7-3530-fef5a8bee40b.png)
![CDS_回路図.png](https://qiita-image-store.s3.amazonaws.com/0/195542/9e4b53d6-b505-c98b-410e-56982c5626c5.png)

##フォトダイオード
フォトダイオードの場合は電流値(A)が変化するので。
計算式　`マイコンにかけたい電圧(V) ÷ 最大電流値(A) = 付ける抵抗値(Ω)`
今回使用するフォトダイオードは最大で10mA流れるようなので、
2 ÷　0.01 = 200Ω
200Ωにしておけば基本的には問題ないですが、私の部屋では最大で3mAだったので、
2 ÷ 0.003 =  600Ω
600Ωが無かったので470Ωを使用します。
プログラム内で送られてきた電圧からつけた抵抗値を割ることにより電流値(A)を求めることができ、電流値と照度(lux)はある程度比例しているため、電流値から照度を求めることが可能になります。(今回はしませんが…)
![フォトダイオード_ブレッドボード.png](https://qiita-image-store.s3.amazonaws.com/0/195542/f410996d-299b-25e0-7f07-0dd73dc05c04.png)
※上図では+と書いてあり混乱しますが、**カソード(-)を５Vにつなげます。**

![フォトダイオード_回路図.png](https://qiita-image-store.s3.amazonaws.com/0/195542/09aca70d-6d96-27b5-7c4a-d87674ed547b.png)

##フォトトランジスタ
フォトトランジスタもフォトダイオードと同様に、
2 ÷　0.01 = 200Ω
ですが、変化がわかりづらいので、1kΩを使用します。
![フォトトランジスタ_ブレッドボード.png](https://qiita-image-store.s3.amazonaws.com/0/195542/bea20a20-90d6-c5f8-1c20-1af4c7181d6b.png)
![フォトトランジスタ_回路図.png](https://qiita-image-store.s3.amazonaws.com/0/195542/9a55240e-c145-68e4-751a-0b91b1760d18.png)

#プログラム
[前回](https://qiita.com/aikawa_YO/items/c536ce3ba529fc5f16a1)と同様です。
動作としては暗くなるとLEDも消えていきます。
Android 開発初心者が SNS + Firebase でPush通知をとりあえず送って見ようとした時に躓いたこと

基本は[Android端末で、FCM経由でAWSSNSを受け取るまで](https://qiita.com/k_keisuke/items/24afa62955808721033e)をなぞった時の奮闘記です。感謝。
バージョンは、 Android 7.0、 API 24。

Push 通知はエミュレータでできるか心配だったけど、この記事の範囲内では問題なかった。



# 読んでて疑問だったこと (解決はしてない)
> 6. Android package nameにSNSをアプリのパッケージ名を入力する

SNS 関係なさそう

> 6. push Platform NotificationでGoogle Cloud Messaging(GCM)を選択する
> 7. API Keyにコピーした「Legacy server key」を貼り付け、Create platform applicationをクリックする

なんで Legacy なんやろ... なんで GCM なんやろ...
# build すると xml でエラー出ちゃう
サンプルなどにある、下記の XML を Manifest.xml に追加するとビルド時にエラーが出ちゃってとっても困った。

```xml
<service android:name=".MyFirebaseMessagingService">
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT"/>
    </intent-filter>
</service>
```

結論としては、自分は階層を間違えていて、正解は application の中の層に書く。

```diff
 <manifest ... >
     <application ... >

......

+        <service android:name=".MyFirebaseMessagingService">
+            <intent-filter>
+                <action android:name="com.google.firebase.MESSAGING_EVENT"/>
+            </intent-filter>
+        </service>
     </application>
 
     <uses-permission android:name="android.permission.INTERNET" />
 </manifest>
```

まあ考えれば当たり前なんですけど、手探りで作業して全体像がボヤーっとしてると間違えたままになっちゃったりとか、ありません？

ちなみに端折ったんでしけど、 service はトークン取得のためにもう一個書いている。

# エミュレータでFirebase の token 取れない
何やらエラーが出るので、 firebase のトークン取得を下記のように書いていたら、 `token is null` だった。

```java
        String token = FirebaseInstanceId.getInstance().getToken();
        if (token == null) {
            Log.d(TAG, "token is null.");
        } else {
            sendRegistrationToServer(token);
        }
```

エミュレータがインターネッツに繋がってない場合があるので、再起動すると治った
https://stackoverflow.com/questions/37517860/how-to-handle-firebaseinstanceid-getinstance-gettoken-null

# 適当なところで onTokenRefresh を呼び出してもエラーで落ちる
onRefreshToken がどのタイミングで呼ばれるかよく分からなかっため、起動時に通過する Activityから強制的に呼び出してみました。エラーが出たので `} catch (Exception ex) {` したら、 `ex.getMessage()` には何も入ってなかったんですが、 `ex.getClass()` すると `NetworkOnMainThreadException` が出てきました。これはなんか聞いたことがあったなと思って調べたら、「メインスレッドで HTTP 通信するな」っていうやつです。つまるところ、自分の場合は「適当なところで」というのが適当すぎて不適切でした。

```java
public class MyFirebaseSnsRegistrationService extends AsyncTask<String, Void, String> {

    @Override
    protected String doInBackground(String... params) {
        MyFirebaseInstanceIdService service = new MyFirebaseInstanceIdService();
        service.onTokenRefresh();
        return "";
    }
}
```

こんな非同期クラスを書いて、これを Activity から呼び出してやると、SNS への同期が完了しました。

メッセージの受け取りはまだ実装していないのですが、 SNS のコンソールからテストメッセージを送信してみたところ、無事ログには FCM からのメッセージの受信が出ました。流れは理解できたような気がします。
DroidKaigi 2018 2日目

今更ですが、新米Androidエンジニアとして[DroidKaigi](https://droidkaigi.jp/2018/)の2日目だけ参加してきたのでその所感をつらつら述べようと思います。
1日目は会社の研修で参加できなかった。。

## はじめてのKotlinハンズオン
日本でKotlinといえばこの人ってぐらい有名なエムスリーの長澤さん(@ngsw_taro )
発表資料：https://docs.google.com/presentation/d/1CRaPCgUYzdtUecT-VduwZx0qjzSY7KzluYjxmZ3U0lg/edit#slide=id.g2e4fa3a2b5_0_371

今年からKotlinを勉強する予定の自分にとってはかなり基礎的な内容で丁度よかった。
よくあるFizzBuzzだったり、拡張関数を解説付きで解いていくような感じ
あとはKotlinの特徴として

* Java互換でスッキリしたコードが書ける
* null安全

の説明があり、拡張関数というものがKotlinにはあるということを知った
今回はインタフェースやジェネリクスなどの説明がなかったので、その辺は今後自分で勉強していくところだなと感じた

ただ、まだJavaに追いついていないなというところが正直な感想であるが個人的に幅を広げるためにどちらも使えるエンジニアになる必要があるなーと思う発表だった
 
## アプリを成長させるためのログ取りとログ解析に必要なこと
Wantedlyの住友さん
発表資料：https://www.slideshare.net/TakaoSumitomo/ss-87583483

業務で最近ログ周りのことをしたので、少し興味本位で聞いてみた。
PLレベルで施策などを考えないといけないようになったら必要な内容だったが、現在の自分の役割ではまだ不要だなという印象だった。
ただ実装する上で気をつけないといけないことはとても勉強になった。

## All you need is isolating the domain (How to apply DDD to Android Application Development 2)
Androidを勉強しはじめた当初かなりお世話になった[あんざいゆき](https://www.blogger.com/profile/04059587494895790858)さん(@yanzm)

前年のDroidKaigiではDDDの話をしたらしく、今回はそれをすでにあるAndroidアプリに入れる方法についてだった
発表を聞いていると前提条件が自分の環境にマッチしていた。

* Androidアプリ開発
* リリースされてから１年以上継続的に開発している
* マスターデータはサーバにあり、アプリはサーバとAPIを介してやりとりする
* 複数人で開発している
* サーバ側は別チーム

ただ、そもそもDDDを理解していなかったので、今回の話もそーなんだーぐらいの理解しかできなかった。

## 来年参加するにあたって(仮)
来年はどの発表も理解できるように自分の知識をもっと蓄えないといけないなとかなりいい刺激がもらえた1日でした。。
Apple Developerのアカウント名を変更したかった

諸事情でApple Developerのアカウントに紐づいている姓名が実名と異なっていたが、チームアカウントから見た時に誰？ってなるのでいい加減実名と揃えようと思って変更の手続きについて調べた。

https://developer.apple.com/ からはアカウントの姓名変更はできないようだ。

というわけで以下のサイトから問い合わせ。
文言は [こちら](https://tech.cookbiz.co.jp/etc-811) を参考にさせていただいた。
そのうち変えてくれるそうだ。

https://developer.apple.com/contact/submit/

~~~
I would like to change my name.
Could you change the data in the following ways?

Team ID: チームのID
==Contact Information==
Registered E-mail: AppleIDの名称変更したいアカウントのメアド
First Name : 名
Last name : 姓

Thanks.
~~~

# 参考URL
https://tech.cookbiz.co.jp/etc-811

# 後日談
自分は、結果的に名称変更はできませんでした。アカウント譲渡の規約に引っかかるそうです。
多分誤字くらいならこれで変えてくれると思いますが、一度異なる名前を設定してしまうと変更は難しいそうです。
その場合は、アカウントを取り直してくださいとのこと。

個人的には、AppleIDの昔の仕様のせいで仕方なく違う名前を利用していたため、とても腑に落ちないです。
Appleに振り回されてる。辛い。
プログラミングにおける×(かける)の扱い 〜超初歩的な知識をなんで今まで知らなかったんだ!!!〜

#プログラミングにおける×(かける)の扱いかた

計算をするときに、2かける2をしたい場合、
`2*2`

こんなんはさすがに僕でも知ってますわ。
知らなかったのはこれ

#問題文や説明文で使われている×(かける)はx(エックス)で入力されている
HackerRankで問題を解いていて、こんなことがありました

![スクリーンショット 2018-02-28 11.33.51.png](https://qiita-image-store.s3.amazonaws.com/0/238739/cbf8d882-9a5e-62e1-2767-2c7fd54a8853.png)

WrongAnswer!?!?!?あってるやん！！！笑

プログラマーの友達に質問してみると・・・

「かけるって打って変換したやろ？ これエックスやで！！」


まじか、、
再挑戦。


![スクリーンショット 2018-02-28 11.34.38.png](https://qiita-image-store.s3.amazonaws.com/0/238739/3ff5d3bd-e783-a61a-1cc6-e7137e09223a.png)

できました。エックスでした。笑

いや、一緒やん・・・。笑
AWS API Gatewayの設定方法

　[この記事](https://qiita.com/running1017/items/86b2c8f6c490c9c4e5bf)でつまづいたAWS API Gatewayの設定方法の記録です。AWSのアカウントを持っていてLambda, CloudWatchが使えることを前提にしています。またLambdaはPythonで実装しました。

# やりたいこと
　DialogflowのFulfillment先にAPI Gatewayを使用してLambdaで処理をし、適切なレスポンスを返したい。

# 設定方法
## Lambdaの作成
　あらかじめAPIの処理に使いたいLambda関数を作成しておきましょう。ここでは`APITest`というLambda関数を作成して、コードは以下のシンプルなものにしました。何かエラーが起きてよくわからないときはprint等の出力がAWS Cloud Watchにログとして記録されるのでそれを見てなんとかしましょう。

```python:lambda_function.py
import json

def lambda_handler(event, context):
    print(json.dumps(event))
    return {'speech': 'ちわーっす'}
```

## APIの作成
　API Gatewayのページで`+APIの作成`をクリックしてAPIを作成します。初回の場合は`今すぐ始める`をクリックします。
![スクリーンショット 2018-02-23 12.53.10.png](https://qiita-image-store.s3.amazonaws.com/0/230715/3e427060-0040-db29-c9a1-0ab9ce81d8bb.png)
<br><br>
新しいAPIを選択し、わかりやすいAPI名と説明を追加します。エンドポイントタイプは[公式アナウンス](https://aws.amazon.com/jp/about-aws/whats-new/2017/11/amazon-api-gateway-supports-regional-api-endpoints/)を見ましたがよく分からなかったですしどっちを選んでも特に問題はなかったので好きな方を選びましょう。
![スクリーンショット 2018-02-23 12.56.21.png](https://qiita-image-store.s3.amazonaws.com/0/230715/dceb80c4-6f5c-599d-af8d-368ca4c25d3d.png)
<br><br>
アクションからリソースの作成をクリックし、
![スクリーンショット 2018-02-23 12.58.23.png](https://qiita-image-store.s3.amazonaws.com/0/230715/021c627c-970e-4e8b-a2cc-0027c7da2cfd.png)
<br><br>
わかりやすいリソース名をつけてリソースの作成をクリックします。
![スクリーンショット 2018-02-23 13.01.31.png](https://qiita-image-store.s3.amazonaws.com/0/230715/6f2fd785-fe50-45f0-81d5-3c4f0975c9db.png)
<br><br>
そのリソースを選択した状態で「アクション」→「メソッドの作成」をクリックします。メソッドはDialogflowだとPOSTリクエストなのでPOSTを選択し、チェックボタンをクリックします。
![スクリーンショット 2018-02-23 13.03.04.png](https://qiita-image-store.s3.amazonaws.com/0/230715/5b01207b-1d79-2aaf-b4d1-2c0a3dc2d6ac.png)
<br><br>
ここでいう「統合」が何を統合しているのかはよく分かりませんが、POSTメソッドを投げたいLambda関数を指定します。LambdaリージョンはLambdaの編集ページの右上にあるARNというコードの中に書いてあります。「Lambdaプロキシ統合の使用」にデフォルトではチェックされていませんが、私は何を思ったかここにチェックを入れていたら何かの権限が無いとかで思うように動かず苦戦したので、チェックしないでください。Lambda関数が指定できたら保存→OKをクリックします。
![スクリーンショット 2018-02-23 13.04.14.png](https://qiita-image-store.s3.amazonaws.com/0/230715/55ca7f04-8d58-c4ff-262b-9aa635f4ab6c.png)
<br><br>
そのPOSTメソッドのテストをクリックし、何も入力せずテストボタンをクリックします。
![スクリーンショット 2018-02-23 13.16.28.png](https://qiita-image-store.s3.amazonaws.com/0/230715/eb2fb4bb-fcd2-90f2-e86f-ba9ae6e75060.png)
<br><br>
レスポンス本文に先ほどのLambda関数の返り値が入っていればOKです。
![スクリーンショット 2018-02-23 13.19.08.png](https://qiita-image-store.s3.amazonaws.com/0/230715/b4c28281-e618-7352-5f75-cc79d94a650a.png)
<br><br>
「アクション」→「APIのデプロイ」をクリックし、好きなステージ名でデプロイします。デプロイとは「使えるようにする」みたいな意味です。
![スクリーンショット 2018-02-23 13.23.02.png](https://qiita-image-store.s3.amazonaws.com/0/230715/e0714b6d-cd55-1ac0-304f-040c178c3bef.png)
<br><br>
これでデプロイしたステージのPOSTメソッドをクリックし、URLの呼び出し:`https://~~`のURLにPOSTリクエストを投げるとLambdaで処理して返してくれます。
![スクリーンショット 2018-02-23 13.23.58.png](https://qiita-image-store.s3.amazonaws.com/0/230715/d7c2aef9-f6e4-3452-332c-5dd632f191e6.png)

# まとめ
　色々謎な設定が多いAPI Gatewayでした。Lambda関数のトリガーからAPI Gatewayを設定するとメソッドがANYになって二度手間になったり面倒なのでAPI Gatewayのページから作成したほうが簡単だと思います。このURLをDialogflowのFulfillmentに使うことで、Google Assistantの処理としてLambdaを利用する準備ができました。

# 補足
　今回は[株式会社SmartHacks](https://smarthacks.jp/)での就業形インターンとして、この記事を作成しました。
【Unity】Listや配列で要素の重複を確認したいときはHashSetが使える！

※コメントに丁寧な解説を頂いているので是非そちらも参照ください。
C#でListや配列の重複を確認したくなったことはありませんか？
そんなときはHashSet<T>型が便利です！

HashSetは重複した要素を格納できないので、Listや配列に重複があるかどうかを判定するのに使えます。

自分はポケモン対戦風のゲームを開発していて、ポケモン対戦では同じパーティーに同じポケモンを入れられないルールが主流なので、ポケモンの重複チェックが必要でこの方法を使いました。

```C#:CheckDuplication

using System.Collections;
using System.Collections.Generic;

List<Pokemon> Party = new List<Pokemon>();

//重複時はfalseを返す
bool CheckDuplication()
{
	HashSet<Pokemon> hashSet = new HashSet<Pokemon> ();

	foreach (var item in Party) {
		hashSet.Add (item);
	}

	//重複がある場合は要素数が減る
	if (Party.Count > hashSet.Count) {
		return false;
	}
		return true;
}
```

*注記
ちなみにLINQを使うとGroupByでもっと簡単に書けるみたいです。
【順次更新】個人的によく使うgit操作まとめ

インターン先でよく使うgit操作のまとめです。
今まで git add と git commit だけしか知らなかったので、gitもまだまだ勉強することがあります。。。
新しいものを知ったら順次更新していきます。

## git stash 系
```
$ git stash
```
git commit はしていないけれど、一時的に作業内容を保存したいときに、その変更ファイルを保存し、ファイル内容は前回のcommit内容に戻す。

```
$ git stash list
```
先ほどのgit stash での保存状況が見られる。

```
$ git stash list -p
```
git stash した内容を詳しく見たいときに、変更したファイルの一覧が見られる。

```
$ git stash apply stash@{0}
```
git stashで保存しておいた変更内容にファイルを変更する。
後ろの数字はgit stash list に書いてある内容の番号のを書く。
最新のものなら省略可。

```
$ git stash pop stash@{0}
```
git stash してあった内容を適用すると同時に、削除する。

```
git stash drop stash@{N} 
```
N番目のstashを削除する。


## その他

```
$ git log
```
ここ最近のcommit歴を見られる。

```
$ git branch
```
現在いるブランチの確認ができる。

```
$ git checkout master
```
ブランチの変更ができる。masterに移動できる。

```
$ git checkout -b new_branch
```
新しいブランチを作り、そこへ移動する。

```
$ git push origin branch_now
```
現在いるブランチの内容をmasterにpushする。
このときorigin masterではない。

```
$ git reflog
```
過去のブランチ操作＆commit操作が見られる。
これで戻りたいところを探し、 `git reset --soft HEAD@{1}`でその時のコミットまで戻ることができる。
TypeScript型駆動開発の｢穴｣の作り方

型駆動開発では、少しずつコンパイラチェックを通しながら開発を進めるために、実装を後回しにできるようHole(穴)というものを使う。まずはコンパイルが通る穴埋め問題的なコードを書き、後はコンパイルが壊れないよう確認しながら実装を埋めていく。

型駆動開発がサポートされている言語ではHoleがビルトインで用意されているが、TypeScriptには無いので自分でHoleを定義してから型駆動開発に望む。

## Holeの定義

とりあえずコンパイルさせ通れば良いので、`any`や`undefined`を使っても良いが、もう少し手を加えるなら自前のHoleを用意するといい。

```ts
type __<T extends any = any> = T
const __: __ = (..._: __[]) => undefined
```

`const __`が関数になっているのは、tsconfigの`noUnusedParameters`を回避するためである。`noUnusedParameters`が有効になっていると引数を持っている関数が未実装のときコンパイルエラーになってしまう。`const f = (a, b) => __(a, b)`のようにHoleに流しておけばコンパイルエラーにならずに進められる。

## Holeの使い方

HTTPリクエストを処理してHTTPレスポンスを返す関数を作りたいが、まずは関数のモデルをトップダウンで考えたい。`HttpRequest`型の構造や、それを処理する`handle`関数の実装は後回しにしたい。こういうときに、Holeを使うことになる:

```ts
type HttpRequest = __ // HTTPリクエストの構造は後で考える
type HttpResponse = __
const handle = (req: HttpRequest): HttpResponse => __(req) // 関数の実装は後で考える
```
TypeScriptの関数オーバーロードの単純な例

TypeScriptでは関数シグネチャのオーバーロードができる。次のように、シグネチャを列挙した上で、実装はひとつの関数にまとめる。

```
function 関数名(シグネチャA)
function 関数名(シグネチャB)
function 関数名(シグネチャC)
function 関数名(シグネチャA,B,Cどれにでも対応できるシグネチャ) {
  そしてその実装
}
```

そのため、実装はif分岐が多くなる。もしもJavaのように実装を別々に書くことができればコードがすっきりするだろうが、TypeScriptにはまだそういう構文はない。

例えば、1個から3個までの数値を引数に、その合計値を計算する関数`sum`をオーバーロードで書くと次のようになる:

```ts
function sum($1: number): number
function sum($1: number, $2: number): number
function sum($1: number, $2: number, $3: number): number
function sum($1: number, $2?: number, $3?: number): number {
  return $1 + ($2 || 0) + ($3 || 0)
}
```

```ts
sum(1) //=> 1
sum(1, 2) //=> 3
sum(1, 2, 3) //=> 6
```

ちなみに、この例はオーバーロードで書くよりも、下記のような実装だけで十分ではある。

```ts
function sum($1: number, $2?: number, $3?: number): number {
  return $1 + ($2 || 0) + ($3 || 0)
}
```
ビットコインエクスプローラー(ウォレットコマンド:fetch-balance)

# ビットコインエクスプローラー(ウォレットコマンド:fetch-balance)

原文(https://github.com/libbitcoin/libbitcoin-explorer/wiki/)

## bx fetch balance


支払いアドレスのsatoshi残高を取得する。

```
bx fetch-balance --help
```

```
Usage: bx fetch-balance [-h] [--config VALUE] [--format VALUE]           
[PAYMENT_ADDRESS]                                                        

情報：支払いアドレスのsatoshi残高を取得する。Libbitcoinサーバに接続する必要がある。

オプション (named):

-c [--config]        コンフィギュレーションファイルを指定        
-h [--help]          コマンドの説明を表示
-f [--format]        The output format. Options are 'info', 'json', and  
                     'xml', defaults to 'info'. 
                     アウトプットのフォーマットを指定。オプションは、'info','json',と’xml'。
                     デフォルトは、'info'             


引数 (positional):

PAYMENT_ADDRESS      支払いアドレスを指定。指定がなければ、STDINから読み込む。
                     
```



このコマンドは、設定をサポートしている。
バージョン3(それ以降は、)、未承認の残高を提供していない。少なくとも一つの承認は、必要とされている。

`18446744073709551615`の値は、消費が、レシートとは無関係であることを示す。

これは、消費がインデックス化されたときに、レシートがない場合に発生する。サーバが二つのトランザクショを一つの高さで索引を始めたときに発生する。
相関の失敗は、非常に発生確率の低いハッシュ衝突の際に発生する。実行する場合は、この状態を常にチェックするべきである。

#### Example 1

ブロックチェーンの最初のアドレス

```
bx fetch-balance 1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa
```
```
balance
{
    address 1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa
    received 6538241483
    spent 0
}
```
上位のプロパティは、アドレスと関連するsatoshiの数を表示する。
iOSブラウザでタップした要素が自動的に暗くなるのを防止する

## なぜか折りたたみメニューがちらつく現象が発生
仕事でWebシステム作ってるんですけど、リスト型のメニューをslideToggleで折りたためるように変更したら、スマホで見るとタップするたびにリスト全体がちらつく現象が発生してしまいました。

PCのブラウザだと問題なかったのですが、iOSのブラウザで見たときに上記の現象が発生。

色々調べた結果、iOSブラウザは自動でタップした範囲が暗くなる設定がされているのですが、今回のはなぜかリスト全体が選択された状態になってしまっていて、ちらついたように見えることが判明しました。

## HTMLはこんな感じ

```html
<div id="menu">
    <div>
        <div class="list">めにゅー1</div>
        <ul>
            <li>アイテム1</li>
            <li>アイテム2</li>
            <li>アイテム3</li>
        </ul>
    </div>
    <div>
        <div class="list">めにゅー2</div>
        <ul>
            <li>アイテム1</li>
            <li>アイテム2</li>
            <li>アイテム3</li>
        </ul>
    </div>
</div>
```

.listの部分をタップするとul内がhideしたりshowしたりする、よくあるやつです。
これで、なぜか.listをタップすると#menuが全体的にタップされた状態になってしまうので、メニュー全体が一瞬暗くなる。でもhide,showの動作は問題なかったのが謎です。  
id="menu"の部分全体が暗くなるとどうしてもメニューを開閉したときにちらついて見えるのが鬱陶しかったので、タップしたときに自動で暗くなるのを防止しました。

## CSSで回避

```css
#menu{
    -webkit-tap-highlight-color:transparent; 
}
```

タップした時にデフォルトでカラーが設定されないように指定。これでちらつきが回避できました！やった！
なぜid="menu"全体がタップされたと認識してしまったかは謎のまま…。
ひとまず、これでちらつきは回避できそうなのでよしとすることにしました。何日も悩んでいたのでスッキリ。  
この回避策、スマホで見るサイト作るときは覚えておかないと面倒なことになりそうなので、メモとして残しておきます。

## 環境
iOS 11.2.5
ブラウザ　Safari, Chrome
機械学習論文読みメモ_121


[Neural Optimizer Search with Reinforcement Learning](https://arxiv.org/abs/1709.07417)
deepnetの更新規則に関して、RNNを用いて自動生成する手法を提案する。
このRNNは強化学習を用いて複数エポック後の性能向上を最大化するよう
学習される。

[Photorealistic Style Transfer with Screened Poisson Equation](https://arxiv.org/abs/1709.09828)
Photorealistic性を保つstyle transfer手法を提案する。
content画像に対する勾配情報を保ったまま、style画像に対する忠実性を
持たせるようscreened Poisson equationを利用する。

[Unsupervised Image-to-Image Translation Networks](https://arxiv.org/abs/1703.00848)
Unsupervised Image-to-Image Translationは異なったドメイン間の結合分布を学習する。
この学習はどちらか一方のドメインの周辺分布のみから予測する必要がある。
この問題設定は、いくらでも結合分布のパタンが存在するため、意味のある結果を得るために新たな
制約が必要になる。
本論では、新たな制約として共有された潜在変数空間を用いる事を加える。
自分がHP制作初心者だった頃に知っておきたかったこと

<p>「HPを作りたい」と一言にいってもWebに関するスキルは多岐に渡っており、中々理解するのが難しい世界です。<br>
そのために、多くの人がとりあえず「HTML+CSS」について勉強したけど、何作っていいかわかんないとなってしまうのです。<br>
自分が勉強を始めたばかりの時の自分に伝えたかったことをご紹介します。</p>

<h2>HPを作ることは目的ではない。HPを作ることで何をするのかということをまず決める必要がある。</h2>
<p>HPと一言にいっても、ECサイトや通販サイト、ブログサイトといった、様々な種類がありますが、共通して言えるのは、HPを作ることが目的ではないということです。<br>
ECサイトであれば、サイトになるべく多くのお客さんが来てくれることで商品が多く売れることが目的であり、ブログサイトであれば、なるべく多くの記事を読んでもらうことが目的です。<br>
そのため、<strong>HPを作るときには何のためのHPなのかを決める必要が必ずある</strong>のです。<br>
そうすることで、例えばECサイトであれば、なるべくレイアウトに手を駆ける必要があるから、デザイナーを雇う(または、自分で学習する)ことが必要だと気付き、次のステップに進むことができます。<br>
「HP制作」はプログラムをやみくもに書けばできるものではなく、しっかりとした<strong>設計書</strong>が必要なのです。
<h2>「HP制作」=HTML+CSS+javascriptをとにかく勉強するではない</h2>
<p>「HP制作」では0からHP制作に取り掛かることはほぼないです。<br>
なぜならば、近年のHP制作にはほとんどの場合、無料(あるいは有料)の<strong>テンプレートをカスタマイズする</strong>ことでHPを作ることが一般的だからです。(Wordpressも含む)<br>
こういうと真面目な方ほどHTMLやCSSやjavascriptをマスターしてからHPを作ろうと考える方が多いのですが、正直すべてのHTMLタグを覚えたところで、あまり意味はありません。<br>
むしろ、テンプレートをカスタマイズしながら、リファレンスサイト等を使って自分なりに作っていきながら勉強するほうが身に付きますし、何よりも楽しいので続きます。<br>
私は、半年近くギャラリーサイトから見つけてきたHPをまねして作るということをしていましたが、モチベーションは続かないし、自分のスキルに対し、自己嫌悪になったこともしばしばでした。<br>
なので、勉強を始める皆さんは、「<strong>テンプレートをカスタマイズしながら</strong>、HTML+CSSを学んで、ある程度やれるようになってからjavascriptやその他の言語を勉強していってほしいと思います。<br>
<h2>「HP制作」にはデザインに関する知識が必要</h2>
<p>「HP制作」は、レイアウトなどのデザインが命となることが多いです。<br>
例えば、通販サイトでは、商品を購入するボタンの位置がどのような位置であるかによって大きく売り上げが変化するため、特にデザインスキルが必要になります。<br>
そのほかにもLP(ランディングページ)の作成ではLPというものは広告のチラシと似たようなものであるという性質もあるため、デザインスキルが必要になります。<br>
このようにHPを作ること自体に目的を持っている場合(例えば個人のブログなど)であればデザイン知識は必要ないのですが、HPを作ることで通販の売り上げを上げるであるとか、クリック数を稼ぐなどの目的がある場合は、必ずと言ってもいいほどデザインについての学習が必要です。
<h2>Photoshop+illustratorのプロになる必要はない</h2>
<p>PhotoshopやillustratorはAdobe社の作った素晴らしいツールで多くの機能が搭載されています。<br>
そのため、多くの初心者がこれらのツールが持つ機能をすべてマスターしようとします。<br>
しかし、その必要はありません。むしろ無駄といってもいいでしょう。<br>
これらのツールが持つすべての機能のうち、プロのWebデザイナーやHP制作者は20%以下の機能しかほとんど使いません。<br>
例えば、写真の加工でろうそくの写真に火をともそうなどがありますが、現場でこの機能をこの目的で使うことはほぼないと言ってもいいでしょう。<br>
よくよく考えてください。ろうそくのともった写真がほしければ、自分で撮ればいいだけの話なのですから。笑<br>
そのため、皆さんにはPhotoshopを使ってバナーを作るなどして<strong>、実際に自分の作品を作っていくこと</strong>をおすすめします。<br>
その過程の中で、どういうツールを使うことが一番多いかなどは分かっていきますし、アレがしたいけどやり方わかんないとなれば、<strong>ブログサイトやYouTube動画を見て、やり方を学べば</strong>いいのです。<br>

<h2>最後に</h2>
<p>いかがだったでしょうか</p>
<p>人によってはちょっとしたイライラ感情や、そんなはずはないといった感情を持つ方もいらっしゃるでしょう。<br>
しかし、少なくともHP制作などの<strong>エンジニア系職は作品が命</strong>だということだけは忘れないでいただきたいです。<br>
10歳の子どもが作った作品でも、その作品が素晴らしければ評価されますし、いくらいい大学をでて、優秀な成績を過去収めていようが作品が悪ければ評価されません。<br>
<strong>「HP制作は作品が命」</strong>この言葉が、私が初心者の頃の自分に一番伝えたい言葉です。
機械学習論文読みメモ_120


[ShuffleNet: An Extremely Efficient Convolutional Neural Network for Mobile Devices](https://arxiv.org/abs/1707.01083)
新たな高速なCNNとして、point-wise group convolutionとchannel shuffleを取り入れたネットワークを提案する。
kernelが1x1のpoint-wise convolutionは高コストだが、チャンネル毎に切り分けるgroup convolutionを組み合わせ
る事で高速化する。
また切り分ける事のチャンネル間の情報断絶を特徴をCNNブロック間でチャンネル方向にシャッフルすることで対応する。

[VAE with a VampPrior](https://arxiv.org/abs/1705.07120)
Variational autoencoderに関して、variational mixture of prior (VAMP)を提案する。
VAMPは疑似的の入力から学習された変分事後分布の混合である。
これは階層モデルと組み合わせて用いる事で性能向上が出来る。

[NoScope: Optimizing Neural Network Queries over Video at Scale](https://arxiv.org/abs/1703.02529)
ビデオに対する高速な物体探索手法を提案する。
参照する物体認識ネットワーク、ビデオと探索物体に関して、
参照ネットワークの精度を保ちつつ、高速探索を実現した。
specialized networkと呼ばれる参照ネットワークを模倣した高速モデルと
高速な変化検知を行うdifference detectorの二つのネットワークから成り立つ。
Windows Server2008R2 Cドライブ空き容量が激減

Windows Server2008R2のCドライブの容量が激減し、空き容量が不足する事態が発生

容量が最も多いフォルダを調査
目視は時間がかかるため、インストール不要でチェックできる下記ツールを利用
実行ファイルはDドライブに空きがあったためDドライブに実行ファイルを保存

https://forest.watch.impress.co.jp/library/software/diskinfo/

調査の結果
C:WindowsTemp フォルダが肥大化しており
CAB関連のファイルが多数存在。

以下のファイルを削除で容量確保ができた。
 
C:\Windows\temp\cab_XXX_X (前述の図)
C:\Windows\logs\CBS\CbsPersist_xxxxxxxxxxx.log (以下図)
C:\Windows\logs\CBS\CbsPersist_xxxxxxxxxxx.cab (以下図)

参考URL：
https://blogs.technet.microsoft.com/askcorejp/2015/04/15/cwindowstemp-cab_xxx_x-x-37327/
機械学習論文読みメモ_119


[Squeeze-and-Excitation Networks](https://arxiv.org/abs/1709.01507)
CNNでは、空間とチャンネル方向に展開する受容体を用いた
特徴抽出を用いる。
CNNの表現力を向上させるための試みとしては、従来
空間的な特徴抽出能力を底上げする努力がなされてきた。
一方本論ではチャンネル方向へフォーカスし、
新たにSqueeze-and-Excitation (SE)構造を提案する。
SEはチャンネル単位の表現、あるいはチャンネル間の依存関係を陽に抽出する
squeeze, excitation関数を導入する。
データに対して適応的に特徴抽出を行う事を可能にする。
このSEを多段に積み上げたSENetは大きく性能向上が可能である。

[Efficient ConvNet for Real-time Semantic Segmentation](http://ieeexplore.ieee.org/document/7995966/)
リアルタイムのsegmentation手法を新たに提案する。
新たに提案するネットワーク構造として、
residual networkとfactorized convolutionを組み合わせた構造を
提案する。
ここではresidual networkはnon-bottleneck構造を用い、
またfactorized convolutionは１次元の畳み込み処理を示す。

[Dual Path Networks](https://arxiv.org/abs/1707.01629)
Higher order recurrent network (HORNN)の観点より、
Residual netとDense netの等価性を示し、
一方でresidual netは特徴の再利用を、densnetは新たな特徴の
探索を行うネットワークである事を示した。
本論では、この二つの特徴を組み合わせたネットワークを提案する。
機械学習論文読みメモ_118


[Scalable Top-n Local Outlier Detection](http://www.kdd.org/kdd2017/papers/view/scalable-top-n-local-outlier-detection), KDD2017
skew distributionを対象とした場合において、
local outlier factorに基づいた外れ値検出は効果的である。
データにおけるminorityが外れ値の定義と考えた場合に、
本論では外れ値度合いに基づいて上位を抽出する
Top-N local outlier factorを考える。
しかし、単純にTop-Nを求めようとした場合ｋNNを何度も
行う事になり計算量に問題がある。
本論ではそれを解決するスケーラブルな手法としてTOLFと呼ばれる
手法を提案する。
TOLFではmulti-granularityなpruning strategyを導入し、
LOFを計算せずに事前にTop-Nにならない外れ値候補を
除去する事が可能である。

[Understanding Convolution for Semantic Segmentation](https://arxiv.org/abs/1702.08502)
CNNの利用により、semantic segmentationは大きな改善を実現した。
本論ではさらなる性能向上のために畳み込み処理を改良する手法を提案する。
まずupsampling（decoding)時において単純なbilinear samplingの代わりに、より詳細な
情報補完が可能なdense upsampling convolution(DUC)を提案する。
DUCではdownsampling ratioに合わせて、解像度を変化させずchannel数を調整した各クラスごとの特徴を得る。
そしてchannel方向に保持された特徴を画像高さ、幅方向に展開する事で高解像度化を実現する。
これより、upsamplingなどの追加の処理を行わず畳み込み処理だけで解像度を上げる事が出来る。
またencoding時にも新たにhybrid dilated convolution (HDC)を提案する。
この手法では全体特徴を抽出するためにより大きな受容体を効率良く作成可能で、
通常のdilated convolutionで発生するgridding問題を軽減する事が可能である。
gridding問題は、dilated filterを用いた場合に受容体が歯抜け構造になってしまい、
推論結果においてもその構造が引き継がれてgrid形状のsegmentationが得られてしまう現象である。
HDCでは、従来のように各層で同じdilation rateを使うのではなく、異なった解像度に合わせたrateを
採用する事で、歯抜けを防ぐ構造を持たせる事が可能になる。

[Automatic Semantic Style Transfer using Deep Convolutional Neural Networks and Soft Masks](https://arxiv.org/abs/1708.09641)
従来のstyle transfer手法の問題点として、異なったセグメント間においてstyleの反映が上手くいかない事が多い
問題がある。
本論では、segmentationの推論を取り入れたstyle transfer手法を提案し、この問題を解決する。
この手法、画像に対するセグメンテーションを行い、その情報を活用しながらstyleの反映を行うよう
設計されている。
機械学習論文読みメモ_117


[Anomaly Detection with Robust Deep Autoencoders](https://dl.acm.org/citation.cfm?id=3098052)
異常検知の文脈においては、ノイズのないデータを用意するのが難しく
Deep autoencoderのモデルを学習する事は難しい。
本論では、そうしたデータを用意する必要なく、外れ値の影響を除去しながら
学習可能のdeep autoencoderの発展版を提案する。
提案モデルはRobust PCAにインスパイアされており、
ノイズに関するL1正則化項を導入することでRobust性を向上させた
deep autoencoderを提案する。
またさらなる応用として、L1でなくgroup sparsityを用いた構造正則化を
用いた学習モデルも提案する。

[Incorporating Feedback into Tree-based Anomaly Detection](https://arxiv.org/abs/1708.09441)
異常検知の手法は主に統計的な異常をその観点からランキングしたリストとして生成し、
分析者はそのリストから、本当に異常なものを見つけ出す。
しかしながらこのプロセスは実際は非現実的で、高ランクに位置づけされたFalse Positiveサンプルが
多くなりがちな問題がある。
本論では分析者がfeedbbackを与える事でこのプロセスをより分析者にとって容易にする事を目的とする。
理想的には、実際の異常を見つける以外の形でフィードバックを与える事でFalse Positiveを減らす事が良い。
提案する手法では、単純なバイナリフィードバックを用いる。
そのフィードバック情報はtree-basedな異常検知手法、特にIsolation Forestに入れ込む事を考える。
そして、フィードバックを用いない場合と比較して有意に性能向上を行う事に成功した。

[REMIX: Automated Exploration for Interactive Outlier Detection](https://arxiv.org/abs/1705.05986)
外れ値検出の性能は、どのような検出アルゴリズムを用いるかと
どのような特徴空間を用いるかに強く依存している。
適応ドメインに合致したそれらを選ぶ事が高性能を得るためには
重要になるが、本論ではそれをinteractiveな手法で実現する。
また本論ではそうしたinteractiveプロセスが時間制約を持つ場合を考える。
本論で提案するシステムであるREMIXは外れ値検出においてはじめて
interactive systemを取り入れている。
REMIXはmixed integer programmingを用いる事で多数ある外れ値検出手法の
選択、除外を制限時間内に行う。
この設定においては、検出器の合計実行時間、アルゴリズム及び特徴量の多様性、
各検出器の評価に関するメタ学習、を取り入れている。
esa.io > tips > タイトル文字列をコピーする手順 x 2

esa.ioを使用していてひっかかるUIとしては、タイトル文字列をコピーできないということ。

タイトル文字列は「編集」機能のクリックに対応しているため、タイトル文字列の選択が容易ではない。
マウスで範囲指定しようとしても、タグ文字列や下のアイコン（編集やコピーなど）も含めての選択となる。
タイトル文字列の左から選択しようとすると、意図しない範囲の選択になり失敗する。

簡易な選択方法はないだろうか。

以下のいずれかの方法でできそうだ。

### 1. Copyアイコン使用

1. Copyアイコンをクリック
2. 生成される記事のプレビューの「Copied from:」にてタイトル文字列を選択
3. ブラウザのバック機能でCopyしたものを破棄
4. ペーストしてタグ文字列(#で始まる文字列)を削除して使う

### 2. Share Postアイコンの右から選択

1. Share Postアイコンの右側から範囲選択
2. ペーストしてタグ文字列(#で始まる文字列)を削除して使う

### 備考

タイトル文字列をクリックすることで「編集」に入る機能は僕自身は使っていない。~~Editボタンがあるので。~~ Editボタンまたは鉛筆アイコンがあるので。
(追記 2017/02/28 EditボタンはWIPの記事の時だけ表示され、Ship It!した記事ではEditボタンでなく鉛筆アイコンの表示となる)。

すでに多くのユーザが使っているサービスなので、UI変更は安易にはできないのだろう。
(UIの変更時に使用していた機能が削られた経験はいくつかしている）。
C++を書いている人がJavaを書いてみた

私は普段C++を書いているのですが、諸事情で急きょJavaを書くことになりました。そこで、感想がてら簡単な比較を書いてみようと思います。（他の記事よりかなり適当な気持ちで書いてしまった…）

### for文

まず、最初に同じ部分から。
どちらの言語も

```Java
for (int i = 0; i < size; ++i) {
    a[i] = i;
}
```

が使えます！

### 型

| 種類 | C++ | Java |
| --- | --- | ---- |
| 論理 | bool | boolean |
| 文字 | char | char |
| 整数 | (signed) short, int, long, long long | byte, short, int, long |
| 浮動小数点数 | float, double, long double | float, double |

- 基本的には似たようなものが多い。
- 論理型のつづりが違う。
- Javaに符号なしの整数はない。

ここで挙げたものはJavaで基本データ型、プリミティブ型などと呼ばれるものです。
これ以外にクラスとして作られているものが大量にあるのですが、それらにはC++とJavaで大きな違いがあります。型の名前を Test とすると、

| C++ | Java（基本データ型） | Java（その他のクラス） |
| --- | --- | --- |
| `Test test;` | `Test test;` | なし |
| `Test* test;`,`Test& test;` | なし | `Test test;` |

のような感じです。Javaにおいて基本データ型でないものは全てアドレスを内部に持つ参照型になります。メンバには ```test.member``` の形式でアクセスする一方、C++の参照とは違って置き換えができたり、```Test test = new Test();``` のように new で初期化したりとポインタ的な特性も持ちます。
ちなみに、Javaには`delete`がなく放っておけば自動で消してくれるという便利な仕様があります（shared_ptrみたいに参照回数を数えているのでしょうか？）。

### クラスと関数

C++だと

```C++
class Test {
private:
    double _val;
public:
    Test(double val) : _val(val) {}
    double get() const { return _val; }
    void set(double val) { _val = val; }
};
```

と書いているものが、Javaだと

```Java
public class Test {
    private double _val;
    Test(double val) {
        _val = val;
    }
    public double get() {
        return _val;
    }
    public void set(double val) {
        _val = val;
    }
} 
// ;は要らない
```

となります。基本的には似たような気持ちでクラスが作れます。しかし、C++だとクラスはpublicな状態しかないのが、Javaだと何種類か選べます。また、メンバ変数・関数のprivate/publicは各メンバごとに書きます。そして、アクセス指定を書かない状態が意味を持ちます。あとprotectedの意味が違います。クラス内のメンバのアクセス指定は次のような感じです。

| 指定 | Javaでの意味 | C++での意味 |
| --- | --- | --- |
| private | クラス内からのみ | クラス内からのみ |
| なし | 同じパッケージ内のみ | privateと同じ |
| protected | 同じパッケージ内かサブクラスから | クラス内か派生クラス内から |
| public | どこからでも | どこからでも |

なお、パッケージはC++の名前空間と似たようなものですが、ディレクトリ構造を使って作る点がC++とは大きく異なる部分だと思います。

### 継承

C++ だと継承は

```C++
class Derived : public Base {
    (members)
};
```

ですが、Javaだと

```Java
public class Derived extends Base {
    (members)
}
```

です。基底クラスのアクセス指定はなく、ただ `extends Base` と書きます。
メンバーについては `virtual` 指定とかしなくてもオーバーライド可能です。それを防ぐには `final` を使います。
さらに、単なる継承以外に、インターフェースというのもあり、

```Java
interface Base {
    void func();
}
class Impl implements Base {
    void func() {
        // implementation
    }
}
```

のように書きます。C++の抽象クラスと似たような印象です。
なお、Javaの派生クラス（サブクラス）の変数は普通に基底クラスの変数へ代入でき、基底クラスの変数から派生クラス側でオーバーロードした関数を呼び出せます（C++の参照と同じ）。

…とこんな感じで色々違いはありつつも基本的なオブジェクト指向のプログラミングはそのままJavaでもできました。リファレンスの本を1冊買うくらいで普通にプログラムが書けて楽しかったです。
avrでsram

#概要

avrでsramやってみた。
attiny85でアセンブラで書いた。
attiny85には、512byteのsramがある。

#環境

avr studio 4
attiny85 1mhz
tera term
usb-serial

#写真
![image](https://qiita-image-store.s3.amazonaws.com/0/18104/f215a579-31bc-eeff-36ed-dbabef11a0a9.png)



#サンプルコード
sramの先頭から２５５→１まで、書き込んで読んでみる。

```
setup:
	ldi 	r16, high(RAMEND)
	out 	SPH, r16
	ldi 	r16, low(RAMEND)
	out 	SPL, r16
	cbi 	DDRB, PB0
	sbi 	DDRB, PB1
	sbi 	PORTB, PB1
loop:
	ldi		ZL, LOW(SRAM_START)
	ldi		ZH, HIGH(SRAM_START)
	ldi 	r22, 255
	st		Z+, r22
	dec		r22
	brne	PC - 2
	ldi		ZL, LOW(SRAM_START)
	ldi		ZH, HIGH(SRAM_START)
	ldi 	r22, 255
	ld		r16, Z+
	rcall	bin2hex2
	ldi		r19, ' '
	rcall	send
	dec		r22
	brne	PC - 5
	rcall	wait
	rjmp	loop

```

以上。
Sentry-onpremiseの導入

Webサーバのエラー監視に利用できる便利ツールにはいろいろ種類があるのですが今回sentryを利用することになりました。
sentryを一度いろいろ試したいと思っていたら自前の環境に立てられるonpremiseバージョンがあることがわかったので今回はそちらを試した記録をつけておこうと思います

## onpremise
必要なのは
- sentry-onpremiseというリポジトリをクローンすること
- dockerとdocker-compose
この２つなので簡単！

<img width="990" alt="スクリーンショット 2018-02-28 9.56.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/189219/1034f05e-916f-c837-6f51-ee74d32adfe0.png">

[https://github.com/getsentry/onpremise](https://github.com/getsentry/onpremise)
リポジトリがあるのでここから持ってくるといい感じです

```
git clone https://github.com/getsentry/onpremise sentry
```

Dockerの入れ方は環境によって違うので今回は割愛します

## リポジトリの使い方
基本的なことはREADMEに全部書いてあってその通りに実行すればとりあえず動くのですが手順を書いていくとこんな感じに

```
docker-compose run --rm web config generate-secret-key
# docker-compose.ymlの環境変数にSENTRY_SECRET_KEYをコピペ
docker-compose run --rm web upgrade
# 初期のアカウントの作成を開始
# emailを入力
# passwordを入力
# superuser => true
docker-compose up -d
# ブラウザでIPアドレス:9000へアクセス
RootURL -> URL:9000を入力するかIPアドレス:9000を入れる
AdminEmail -> 管理者のメールアドレスを入れておく
Authentication -> チェックは付けない！付けると誰でも登録できるのでだめ
Beacon -> sentry開発者へエラー情報を送るかどうかのチェックっぽい
```

## メールの設定
メールの設定はリポジトリのルートにある `config.yml`で行います
今回は実験だったのでGmailで設定するようにしました

```
mail.backend: 'smtp'
mail.host: 'smtp.gmail.com'
mail.port: 587
mail.username: 'example@gmail.com'
mail.password: 'パスワード。これは二段階認証用のパスワードなので事前に取得すること'
mail.use-tls: true
mail.from: 'example@gmail.com'
```
[Gmailの設定はここから](http://blog.saboh.net/smtpgmailcom/)

## まとめ
WEBサーバ側の設定はSentryのドキュメントにいろいろあるので今回は割愛します
クラウドでLaTexが簡単に使える【SI2018 Robomech2018 テンプレコンパイルできた】

#TeXが長らく使えなくて困っていたが
学会論文提出間近，いつもTexで書きたいと思いながら，現在の環境にあったインストールができず，M社のワープロソフトで作成していたが．．．
今朝，なんとなく「クラウド Tex」で検索したら，あっさりと学会の講演論文集のテンプレートがコンパイルできましたので，備忘録を兼ねてまとめておきます．

##SI2018にもトライしてみる
- 計測自動制御学会　システムインテグレーション講演会2018の[テンプレート](http://www.sice-si.org/conf/si2018/assets/si2018sample_tex.zip)をダウンロード
- [執筆要領のページ](https://www.sice-si.org/conf/si2018/paper-instructions/)
 - 久しぶりにログインしたらアカウント情報の追加を求められた。
-  解答してUPロード。main.texを削除して、ターゲットに設定
-  コンパイルしたらあっさりコンパイルされた。
-  ![SI2018.png](https://qiita-image-store.s3.amazonaws.com/0/237044/644345f6-aefb-3a09-1b52-2e5cc0a8121a.png)
- さあ、本日締切。頑張って書こう（汗。

##Robomech2018のときに書いた内容
- [Cloud LaTeX](https://cloudlatex.io)
- 新規登録をする（私は　Facebookアカウントでサクッと登録）
- ログイン後はプロジェクトを作成（Robomech2018を作成）
- [ロボメカ講演会2018論文投稿について](http://robomech.org/2018/papersubmit/) 学会のテンプレートをDLして，解答したものをドロップ＆ドラッグでUPロード【ルートにコンパイルターゲットのファイルを置く必要があるみたい】
- ターゲットをコンパイルしたいテンプレートに設定（デフォルトのmain.texを削除したら選べるようになった)
- 右上の「コンパイル」選択したらコンパイルできた．アッサリすぎて，どっきり

#コンパイル後
コンパイル後はPDFにできるようですね．

- 右上にPDF↓というリンクがあるので，クリックする．
- ブラウザ上でPDFが表示されるので，それをDLすると手元にPDFを入手できます．
![Robomech2018.png](https://qiita-image-store.s3.amazonaws.com/0/237044/ff0143b2-04a6-c910-eebd-b4148bdee34b.png)

#JPG/PNGを読み込む
- [情報元のページ：LaTeX入門/図表](https://texwiki.texjp.org/?LaTeX%E5%85%A5%E9%96%80%2F%E5%9B%B3%E8%A1%A8#s7e8e2f8)

PNG / JPEG 形式の図の挿入を使うには，プリアンブルに
\usepackage[dvipdfmx]{graphicx}
を記述します．そうすれば
\includegraphics[width=5cm]{apple.png}
\includegraphics[width=5cm]{apple.jpg}
のようにして挿入できます。

#JPGファイル等からepsファイルに変換する方法
いろいろな方法があるが，ここでは，変換ができるサイトを紹介する．変換には時間を要するが，インストールやCPUに負荷が掛からないので，使用してみてはどうでしょうか？

- [変換無料|Image-Converter](https://www.henkan-muryo.com/image-converter.php) ※無料プランでは一日に5ファイルまでだそうです．．．

#動画のサイズを小さくするサイト
TeXとは関係ありませんが，投稿時に動画をてんぷすることができます．
そのファイルサイズを小さくできるサイトです．
- [動画サイズ縮小サイト](http://www.videosmaller.com/jp/)

#いい時代になりました
私が作成の頃は，EPSONのNEC互換機にTeXをいれて，MSDOS上でコンパイルしてました．
１０ページぐらいのコンパイルの間にお茶タイムすることができたんですけどね．懐かしいなあ〜
dbmigrateした後にgitで前バージョンに戻したときはtableをdropしとこ

# 想定ケース

db:migrateしてtableを作成した後に間違えが見つかって、gitで前バージョンに戻した場合、tableはそのままの状態になっている。このままだとmigrationfileはgitでなくなったのにtableは残っているという状態になってmigrationfileとtableが一致しない状態になる。

# 対処方法

tableを作成するmigrationをする前にdropを書く

```ruby:例
class CreateUsers < ActiveRecord::Migration[5.1]
  def change
    drop_table :users
    create_table :users do |t|
      t.string :provider
      t.string :uid
      t.string :nickname
      t.string :image_url

      t.timestamps
    end
  end
end
```
Project Euler 40「チャンパーノウン定数」

素直に愚直に文字連結。
numpyを覚えたいので今後はちょくちょく使っていこうと思う。
ナムパイ？ナンパイ？ナムピー？ナンピー？

# Problem 40 「チャンパーノウン定数」
正の整数を順に連結して得られる以下の10進の無理数を考える:
0.123456789101112131415161718192021...
小数第12位は1である.
dnで小数第n位の数を表す. d1 × d10 × d100 × d1000 × d10000 × d100000 × d1000000 を求めよ.

```python
import numpy as np

def hoge():
    d = ''
    n = 1
    while len(d) < 1000000:
        d += str(n)
        n += 1
    return np.prod([ int(d[10 ** m -1]) for m in range(6) ])

print(hoge())
```