OmniAICreator/Qiita-1.07M huggingface dataset:
django#logging

今回は簡単なdjangoのLoggingプログラムを作ります。難しいことはやってないので、基本なpython知識あればokです。

## 流れ
LOGGINGの簡単説明
settings.py にLOGGINGの設定する

##LOGGINGの簡単説明
DjangoはPythonの標準Loggingモジュールを使ってシステムLoggingをします。Python loggingの構成は以下の四つになります：

* Loggers
    *  LoggerはLoggingシステムの始まり、Loggingするのにこれを使うことになる。Loggerには“Log Level”があり、この“Log Level”にとってLoggerの処理なども変わります。これはPythonのLog levels:
        *  DEBUG：まぁ、いわゆるDebug用、開発者が使うレベル
        *  INFO：システムの一般情報
        *  WARNING：システムが小さい問題が発生したときの情報
        *  ERROR：システムがメイン問題が発生したときの情報
        *  CRITICAL:システムが非常に大きな問題が発生したときの情報
    *  メッセージなどがLoggerに渡すときは“Log Record”です。“Log Record”が自分のLog Levelがあり、このメッセージの重要性をがわかります。流れとしては：
        *  メッセージがLoggerに渡しします。
        *  LoggerこのLog recordのレベルと自分のレベルに比較します。
        *  Log recordのレベルはLoggerのレベルより以上なら処理します。以下無視します。
 
* Handlers
    * Loggerは“Log record”を処理するっていったが、ここで登場するのは“Handlers”です。
HandlersはLog recordをどんな処理するのかを決めます、例えばFileに書き込むか？Screenで表示するか？それでもネットに投げるか？など。
同じく、Handlersも自分のレベルがあり、もぢLog recordのレベルはHandlersのレベルより以上なら処理します。以下無視します。

* Filters
    * Loggingするともちろん大量のLogがFileの中に貯まることになるので、ここでFilterをかければ特定なErrorなどだけをLoggerすることができます。
* Formatters
    * 最後に、Loggingがどんな形？例えば日付がどんな表示なのか？などの設定はこのFormattersに任せます。

## settings.py にLOGGINGの設定する
今度はLoggingの設定をやってみよう。DjangoがdictConfig fomat を使っています。
このあたり↓には詳しい説明があります。
https://docs.python.org/3/library/logging.config.html#logging-config-dictschema
こちらは今回のFile構成です：
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/e44e32de-fc13-aa0c-e619-b89202a32501.png)

settings.pyの一番下にLOGGIN=｛｝を入れます

```
#for logging
LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,

    'formatters':{

        'standard':{
            'format' : "[%(asctime)s] %(levelname)s [%(name)s:%(lineno)s] %(message)s",
            'datefmt' : "%d/%b/%Y %H:%M:%S"

        },
    },
    'handlers': {
        'file': {
            'level': 'INFO',
            'class': 'logging.handlers.RotatingFileHandler',
            'filename': 'debug.log',
            'maxBytes': 50000,
            'backupCount':2,
            'formatter':'standard',
        },
        'console':{

            'level':'INFO',
            'class':'logging.StreamHandler',
            'formatter':'standard'
        },
    },
    'loggers': {
        'django': {
            'handlers': ['file'],
            'level': 'DEBUG',
            'propagate': True,
        },
        'main':{
            'handlers':['file','console'],
            'level':'DEBUG',
            'propagate':True,

        }
    },
}

```

次はviews.pyに簡単なLoggerを作ります。

```
from django.shortcuts import render
from django.http import HttpResponse
import logging

logger=logging.getLogger(__name__)

def homepage(request):
	logger.info('info is logged')
	return HttpResponse('hello')

```

サーバ走ったら、OKになりましたね！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/1f358275-bb3c-169b-3862-18a1f022a83b.png)

Consoleにもありましたね！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/add9d2dd-5844-9b6e-15dc-6a1a7b901df9.png)
NuxtでFontawsomeのTwitterアイコンが出せない問題の対処法

NuxtのFontawsomeモジュールを入れただけではTwiiterのアイコンが使用できなかったため、対処法を書いておきます。

## NuxtでFontawsomeのTwitterアイコンが出せない問題の対処法
いわゆる`fab`アイコンを使うには、下のモジュールも必要でした。
インストールします。

```bash
npm install @fortawesome/free-solid-svg-icons
```
configにも追加

```javascript:nuxt.config.js
  fontawesome: {
    imports: [
      {
        set: '@fortawesome/free-brands-svg-icons',
        icons: ['fab']
      }
    ]
  },
```
これが完了したら（pugで）`font-awesome-icon(:icon="['fab', 'twitter']")`の様に使うことができました。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
ERBで改行コードをbrタグへ置換する（XSS防止）

#更新履歴
###2019/03/16
記事を投稿しました。

###2019/03/17
頂いたコメントをもとに正規表現の書き方を修正しました。


#目標
改行コードを含んだ文字列をブラウザ上で改行された状態で表示させる。

```ruby:hoge.rb
#改行表示させたいターゲットの文字列
@hoge = 'hoge'+"\n" +'hoge'
```

#結論
```ruby:hoge.rb
hoge = 'hoge'+"\n" +'hoge'
@escaped_hoge = h(hoge).gsub(/\R/, "<br>")
```

```erb:hoge.html.erb
<%= raw(@hoge) %>
```


#結論についての説明

### 普通に出力した場合（問題あり）

```erb:hoge.html.erb
<%= @hoge %>
<!--
hoge hoge
※改行コードがbrタグとして認識されないので改行表示されない
-->
```

### 改行コードをbrタグに置換した場合（問題あり）
```ruby:hoge.rb
@hoge = 'hoge'+"\n" +'hoge'
#正規表現で置換
@hoge.gsub(/\R/, "<br>")
#\Rは複数存在する改行コードを表すメタ文字
```

```erb:hoge.html.erb
<%= @hoge %>
<!--
hoge<br>hoge
※ERBの機能でhtmlエスケープされているので、brタグがタグとして認識されない
-->
```

### エスケープせずに出力した場合（問題あり）

```erb:hoge.html.erb
<%= raw(@hoge) %>
<!--
hoge
hoge
※上手くいったように見えるがhtmlエスケープをしていないためセキュアではない
-->
```

```ruby:foo.rb
@foo = 'foo'+"\n" +'foo<script>悪意のあるスクリプト</script>'
@foo.gsub(/\R/, "<br>")
```

```erb:foo.html.erb
<%= raw(@foo) %>
<!--
foo
foo
※悪意のあるスクリプトが実行される（XSS脆弱性）
-->
```

###予めエスケープして出力した場合

```ruby:foo.rb
foo = 'foo'+"\n" +'foo<script>悪意のあるスクリプト</script>'
#hでhtmlエスケープする
@escaped_foo = h(foo)
#htmlエスケープしたあとにbrタグへ置換するので、brタグはエスケープされずに機能する
@escaped_foo.gsub(/\R/, "<br>")
```

```erb:foo.html.erb
<%= raw(@escaped_foo) %>
<!--
foo
foo<script>悪意のあるスクリプト</script>
※scriptタグはhtmlエスケープされているので単なる文字列として解釈される（目標達成）
-->
```

###Railsの場合、置換処理をhelperとして登録しておくと便利

```ruby:application_helper.erb
module ApplicationHelper
  def nl2br(str)
    h(str).gsub(/\R/, "<br>")
  end
end
```

```erb:hoge.html.erb
<%= raw(nl2br(@hoge)) %>
```

#番外編
###simple_formatを使う
```erb:hoge.html.erb
<%= simple_format(h(@hoge)) %>
<!--
上記と出力内容は同じだが、出力がpタグで括られる
-->
```

無駄にpタグを増やすのが嫌なので個人的には使わないです。
Research Paper Writing Services from Experts

![writing.jpg](https://qiita-image-store.s3.amazonaws.com/0/378314/6e7a725b-22cb-46b4-b3a5-b328b643c095.jpeg)

Research paper writing is a detailed investigation of a specific topic. It is not just a day’s work, rather a task that can take you days and weeks to complete. For you get top grades in your research paper writing, you must present a well-researched, informative and accurate information.

Being a long, detailed process, often when asked to write research paper many prefer to seek help. There are a number of credible research papers writing services online ready to help. Choose GetWritings [paper writing help](https://getwritings.com/write-my-paper)  and get your academic research paper written professionally. 
##Get the help you desperately need
This is a professional writing service that continued to assist thousands of students to write research papers since its inception. If you are having nightmares about your college research paper writing, do not hesitate to contact us.

**Order research papers online and start enjoying a stress-free academic life**

- Our research paper writing service welcomes you to order papers if you:
- Don't know how to write a research paper
- Are having difficulties choosing a suitable topic for your research paper
- You can't find time to conduct a thorough research for your paper
- Need custom research paper writing assistance
- Can't find a suitable academic research papers service
- Buy research papers service

**When you order papers from our writing service, be sure to get a research paper that meets the following requirements:**

- 275 words per page
- Any citation style
- Free cover page
- Free bibliography
- Free outline
- Free title page, table of contents, reference
- Free plagiarism report
- Free unlimited amendments
- Free delivery
- Money back guarantee

**GetWritings also helps you with:**

- Choose a suitable topic,
- Narrow the scope of your research
- Conduct thorough research
- Develop a thesis statement
- Identify the best research methodology
- Analyze the findings
- Formulate a suitable discussion
- Referencing the sources
- Revise, edit and proofread the  final draft

Whatever citation style you need, our writing experts will help you select the most appropriate. Our writing services are worth every penny. You can order research papers services from our writing service with confidence. 

**Our paper writing service hires only the most qualified and highly experienced research writers. As such, we are sure to give you exceptional college research papers because:**

- Our writers understand the requirements of today’s education system
- Our writers are skilled individuals with massive knowledge in writing academic research papers.
- Our writers write academic research papers from scratch adhering to standard research paper writing rules.
- Our writers write research papers and tune them to your personal specifications.

Order papers online from GetWritings and be assured of excellent professional research writing services. 

Spend less, buy research papers, and write your way to the top now.
AWS認定機械学習 - 専門知識ベータ試験 受験レポート

# はじめに
10番目のAWS認定「**AWS Certified Machine Learning – Specialty Beta Exam (AWS認定機械学習 - 専門知識ベータ試験)**」に合格し、AWS認定10冠を達成しました。
備忘のため試験の概要について簡単にまとめたいと思います。

# 認定のステータス
「AWS Certified Machine Learning – Specialty」は、2018年11月のAWS re:Inventで発表されたAWS認定です。2018年12月でベータ版試験の申し込み受付は終了しており、2019年3月現在では受験することはできませんが、将来的に正式版が公開される見込みです。
正式版試験は受験後すぐに合否が分かるのに対して、ベータ版試験は受付期間終了後の通常3ヶ月以内に合否が発表されるという違いがあります。

# 試験の結果
2018年12月7日に受験、2019年3月15日にメールで通知が届き、AWS認定ページで合格を確認できました。
100〜1000点で採点され750点以上が合格という基準で、私のスコアは809点でした。
ギリギリでは無いけれどあんまり余裕がある感じでは無いですね。私の本職はバックエンドエンジニアなので、AWSサービスにある程度精通したAI系のエンジニアであればもう少し高いスコアが期待できると思います。

# 試験の概要
- 選択可能な言語: **英語のみ**
- 試験時間: 180分
- 問題数: 70問
- 合格基準: 750点以上 (100〜1000点のスコアレンジ)

私は義務教育+αで英語を学んだ程度なので、英文の意味が理解できるか不安でしたが、機械学習や深層学習のテクニカルタームを除けば分かりやすい英語で記述されており、案外何とかなりました。

# 求められる知識レベル
私見ですが、以下の知識レベルが求められる試験だと思います。

- **機械学習と深層学習**: JDLAディープラーニングG検定+α程度の知識
- **SageMaker**: 普段からSageMakerを使っている、またはSageMakerの開発者ドキュメントをしっかり読み込んでいる
- **その他のAWSサービス**: ソリューションアーキテクトアソシエイト+α程度の知識

AWSとは関係ない一般的な機械学習と深層学習に関する問題が思いの外多かった印象です。
JDLAディープラーニングG検定を受験した約2週間後にこちらの試験を受験したため、記憶が割と新鮮だったことが良い方に働いてくれたと思います。
SageMakerに関する知識も上記の次に重要だと思います。半日のハンズオントレーニングを受講したことがある程度だったので、もう少し開発者ドキュメントを読み込んだり、実際に使ってみたりすれば良かったと感じています。

# 最後に
11番目のAWS認定「AWS Certified Alexa Skill Builder - Specialty Beta」も2019年2月に受験しましたので、こちらも結果が分かったら簡単なレポートを書く予定です。
また [AWS認定9冠制覇したのでオススメの勉強法などをまとめてみる - Qiita] (https://qiita.com/nakazax/items/20458e146d3d9f2aa615) の方も折を見てアップデートしたいと思います。
現場からは以上です。
djangoMemo#_もしdjango-admin is not foundが出たら

djangoを一回pipでアンインストールする

```
pip3 uninstall django
```

そしてももう一度pipでインストールし、今回はsudoと一緒に。

```
$ pip3 uninstall django
```

次は本当に入ってるかどうかをcheckするー。

```
$which django-admin
/usr/local/bin/django-admin
```

参考link：
stackerflowさまありがとうございます！
https://stackoverflow.com/questions/48361731/installed-django-but-django-admin-is-not-found
Kubernetes のコンテキストを一定時間だけ保持して利用する fish 関数

# はじめに
Kubernetes の複数の開発環境を扱う場合 `kubectl config set-context` や `kubectx` などのプラグインを利用してコンテキストを切り替えますが、この方法だと意図しない環境を操作してしまうこともしばしば...

そこで Kubernetes のコンテキストを一定時間だけ保持して利用する fish 関数を書いてみました。

# 説明

## 事前準備
以下を使える環境を前提としています。
- [kubectl](https://kubernetes.io/docs/tasks/tools/install-kubectl/)
- [fish](https://github.com/fish-shell/fish-shell)
- [peco](https://github.com/oh-my-fish/plugin-peco)

## fish function の作成
function 名は `kubettl` とします。
`$HOME/.config/fish/functions/kubettl.fish` というファイルを作成し、以下のソースを記述します。

```sh
function kubettl
    # 利用する変数の初期化
    set ctx_dir $HOME/.context
    set cxt_file $ctx_dir/kubectx
    set ctx

    # コンテキストが保持されていても無視する `--ignore` オプションの指定を確認
    set cmd_argv $argv
    if [ $argv[1] = '--ignore' ]
        set cmd_argv $argv[2..-1]
    end

    # コンテキストの決定
    if [ $argv[1] != '--ignore' ]; and test (find $cxt_file -mmin -10 ^ /dev/null | wc -l) -eq 1
        # 利用可能なコンテキストがあれば使う
        set ctx (cat $cxt_file)
    else
        # 無ければ peco を利用して選択する
        set ctx (string split ' ' (kubectl config view -o jsonpath='{.users[*].name}') | peco)
    end

    # コンテキストをファイルへ出力
    test -d $ctx_dir; or mkdir $ctx_dir
    echo $ctx >$cxt_file

    # コンテキストを指定してコマンド実行
    kubectl --context=$ctx $cmd_argv
end
```

### コンテキストを一定時間だけ利用する方法について
コンテキストをファイルに出力し、そのファイルの更新日時が 10 min 以内であればその内容を利用するようにしています。

```sh
find hoge -mmin -10
```

こうすると `hoge` というファイルが 10 min 以内に更新されている場合のみ結果が出力されます。
* [findコマンドのmtimeオプションまとめ](https://qiita.com/narumi_/items/9ea27362a1eb502e2dbc)という記事が参考になります。

該当のファイルが存在しないとエラーが起きるため、ソース内では `^ /dev/null` をつけた上で行数をカウントしています。

```sh
test (find hoge -mmin -10 ^ /dev/null | wc -l) -eq 1
```

## 使い方
`kubectl` の代わりに `kubettl` を使うだけです。

```sh
kubettl get pods
```
![kubettl.gif](https://qiita-image-store.s3.amazonaws.com/0/51818/c04b818d-9f90-6f45-ca78-dbb308eba2fe.gif)

# 最後に
単にコンテキストをファイルに書き出して一定時間内だけ利用するという手法なので、もちろん Kubernetes のコンテキストに限らず利用できます。
Speech-to-Text APIを利用した議事録の自動生成


## はじめに
こんにちは。

現在 [株式会社Nexceed](https://www.wantedly.com/companies/nexceed) にてインターンを行っている学生です。
今回は議事録の自動生成を目指し、音声認識を行ってくれるSpeech-to-Text APIを利用していきたいと思います。

↓ こちらの記事の続きという形になりますので、よろしければご覧ください。
[Speech-to-Text APIを使って文字起こしを試してみる](https://qiita.com/saihara-k/items/86ba457523daa02c1869)


## 準備
#### 必要なライブラリをインストール
```python
pip install pyaudio  # Python3.7系は非対応なので注意
```

#### サービスアカウントのAPIキーのパスを設定
GCPでサービスアカウントのAPIキーを作成しておきます。

```python
# 認証用のJSONファイル(GCPで作成)
CREDENTIAL_JSON = 'secret.json'  #ここを変更してください
```


## 今回作成したプログラム
ストリーミングではなく同期認識を用いていますが、後述の公式のサンプルプログラムを参考にしてます。
https://gist.github.com/saihara-k/b083455c8ae0ad398e18305de7d63313


## 実行結果
#### 生成されたテキストファイル
```text
たとえ井戸の中に閉じ込められている束縛状態の波動関数
でも有限の高さの障壁の中には少ししみ出すことを見た日に出した波動関数の神父
衝撃の中を進むにつれて指数関数的に急激に減衰するので正直厚みが十分にあれば
波動関数をしっかりと閉じ込められそうであるでは衝撃の厚みがとても薄いとどうなるかその場合は
の関数は十分減衰しないうちに障壁を継ぐかしてしまう一旦障壁の外に出てしまえば波動関数
人生は山のでどこまでも減衰せずに電波するつまり障壁の厚みが薄いと波動関数を
家に閉じ込めることができずにいるから漏れ出てしまう言い換えると障壁は波動関数を完全に
ことができずに一部を透過させてしまう
```
#### 元の文章
```text
たとえ井戸の中に閉じ込められている束縛状態の波動関数でも、
有限の高さの障壁の中には少し染み出すことを見た。染み出した波動関数の振幅は、
障壁の中を進むにつれて指数関数的に急激に減衰するので、障壁の厚みが十分にあれば、
波動関数をしっかりと閉じ込められそうである。では、障壁の厚みがとても薄いとどうなるか？
その場合は、波動関数は、十分減衰しないうちに障壁を通過してしまう。いったん障壁の外に出てしまえば、
波動関数の減衰は止むので、どこまでも減衰せずに伝播する。つまり、障壁の厚みが薄いと波動関数を
完全に閉じ込めることができずに、井戸から漏れ出てしまう。言い換えると、障壁は波動関数を完全に
跳ね返すことができずに、一部を透過させてしまう。
```

## 感想
メモとして利用できる程度には精度があり、文字起こしのテキストファイルを見返せばどんな会話があったか思い返すことが出来るのではないでしょうか。
議事録として利用していくことを考えると、今後発話者の認識などが出来るようになれば良いなと思います。

## 参考サイト
- [Python 非ストリーミングおよびストリーミング音声認識サンプル](https://github.com/GoogleCloudPlatform/python-docs-samples/tree/master/speech/cloud-client)
- [Google Cloud Speech gRPC API を使ってストリーム音声認識をしたい！（簡易VAD付けた）](https://qiita.com/sayonari/items/a70118a468483967ad34)
BeagleBoneGreenでGPSを受信する04(fake-hwclock)

[BeagleBoneGreenでGPSを受信する03](https://qiita.com/pata128/items/b3cf8ff2ea1a81b7011c)でGPSログを取れるようにしたが、なぜかまれにしか記録されない。
原因は、
BeagleBoneGreenはRTCが無いため(※)毎回起動時は同じ時間で起動する
→ログ記録を開始する→ファイル名は日時でつけているが、起動時は毎回ほぼ同じタイミングで開始するため同じファイル名になる。
→前回のログファイルを上書き
なので、車でログ採って家に戻ってログを抜き出そうとすると電源を入れたときにせっかくのログが上書きされ消えてしまっているのであった。
(※：正確にはAM3358にはRTCがあって32.768kHzも実装されているのだが、RTC電源のVRTCがジャンパR5でVLDO1につながっているだけなので電源を落とすとRTCの記憶が消えてしまう。それとドライバ入ってる？調べてません。)

これを(ソフトだけで)解決する方法
#fake-hwclockをインストール
シャットダウン時の時刻を記録しておいて、次回の起動時にその時刻にしてくれるソフトです。起動時の時刻が変わることになるため、gpxloggerのログファイル名が毎回変わり上書きされることがなくなるります。

```
$ sudo apt-get install fake-hwclock
```
AWS CLIからCloudFormationを利用する（個人的なメモ）

# IAMへCloudFormation実行ユーザーを作成する

1. AWSコンソールへログインし「サービス」→「セキュリティ、アイデンティティ、コンプライアンス」→「
IAM」を選択する

1. 「個々のIAM ユーザーの作成」→「ユーザーの管理」を選択する

1. 「ユーザーを追加」を選択する

1. 「ユーザー名」へユーザー名を入力、「アクセスの種類」で「プログラムによるアクセス」へチェックを入れ「次のステップ: アクセス権限」を実行する

1. CloudFormationフルアクセスポリシーを作成する（自分で作成する必要がある)

```yaml:file
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "VisualEditor0",
      "Effect": "Allow",
      "Action": "cloudformation:*",
      "Resource": "*"
    }
  ]
}
```

1. EC2フルアクセス等必要なポリシーとCloudFormationフルアクセスのポリシーをユーザーに付与する

1. ユーザーを作成しCredentialsをダウンロードする（もしくはメモする)


# AWS CLIの設定を行う

一般ユーザーにて行う方が良いと思われる。また場合によってはCloudFormation実行用ユーザーのプロファイルで設定した方が良いと思われる。

```shell_session
$ aws configure --profile your-profile-name
AWS Access Key ID [None]: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
AWS Secret Access Key [None]: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Default region name [None]: ap-northeast-1
Default output format [None]: json
```

# 操作方法

一般ユーザーにて行う方が良いと思われる。また場合によってはCloudFormation実行用ユーザーのプロファイルで設定した方が良いと思われる。

```shell_session
$ #スタックを作成する 
$ aws cloudformation create-stack --stack-name stack-name --template-body file://stack.yml --profile cfn-user
$
$ #スタックを削除する 
$ aws cloudformation delete-stack --stack-name stack-name --profile cfn-user
```
Expo (React Native) のエントリポイントになるファイル App.js を変更する

## 便利な Expo

React Native を簡単に使うことができる [Expo](https://expo.io)、便利ですよね。
[Expo CLI](https://docs.expo.io/versions/latest/workflow/expo-cli/) をインストールして、 初期設定コマンドを実行するだけで、Android と iOS の両方に対応した React Native アプリの雛形を生成してくれます。

```shell
$ npm install expo-cli -g
$ expo init sandbox-expo
```

このあといくつかの質問に答えて、

```shell
$ cd sandbox-expo
$ yarn start # or `npm start`
```

これだけでアプリの開発環境が立ち上がります。実機でもシミュレーターでもOK。
<img width="1552" alt="Screenshot 2019-03-15 15.45.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/125062/c41c2545-fe96-2bed-9b35-04ac5b6dcf7d.png">

<img width="507" alt="Screenshot 2019-03-15 15.51.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/125062/42a87a53-0632-0575-5e3c-3461d69a0049.png">

## ファイルの命名規則が..

`expo init` で作られるプロジェクト雛形を見てみると次のような感じ。

```shell
$ tree . -I node_modules
.
├── App.js
├── app.json
├── assets
│   ├── icon.png
│   └── splash.png
├── babel.config.js
├── package.json
└── yarn.lock

1 directory, 7 files
```

エントリポイントのファイル名が `App.js` で決め打ちになっているのが困る人もいそうで、別のパスに変えたいことはよくあるのではないでしょうか。ファイル名を case-sensitive にしたい・したくないなど、色々ありそうです。

## エントリポイントがどのように指定されているかを確認する

Expo の雛形がどのようにしてエントリポイントを指定しているのかを確認してみます。

まずは package.json:

```json
{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}
```

[`main` フィールド](http://liberty-technology.biz/PublicItems/npm/package.json.html#main)として、 `node_modules` 以下のファイルが指定されています。

そして `node_modules/expo/appEntry.js`:

```javascript
import { KeepAwake, registerRootComponent } from 'expo';
import App from '../../App';

if (__DEV__) {
  KeepAwake.activate();
}

registerRootComponent(App);
```

`node_modules` 以下にインストールされている `expo/appEntry.js` は、依存関係がピュアな若干行の JavaScript であることが分かりました。 [`registerRootComponent` 関数](https://docs.expo.io/versions/latest/sdk/register-root-component/) を呼ぶことでエントリポイントを作成できそうです。

## エントリポイントをカスタマイズ

上記のことから、 `expo/appEntry.js` 相応のエントリポイントを作成すれば、 `App.js` のパスを変更できることが分かりました。カスタマイズを行ってみます。

```json
$ cat ./package.json
{
  ...
  "main": "main.js",
  ...
}
```

```shell
$ tree . -I node_modules
.
├── app.json
├── assets
│   ├── icon.png
│   └── splash.png
├── babel.config.js
├── main.js
├── package.json
├── src
│   └── app.js
└── yarn.lock

2 directories, 8 files
```

```javascript
// main.js
import { KeepAwake, registerRootComponent } from 'expo';
import App from './src/app';

if (__DEV__) {
  KeepAwake.activate();
}

registerRootComponent(App);
```

例えば、上記のように `main.js` を作成し、 `App.js` を `src/app.js` に書き換えて、 `package.json` の `main` フィールドを書き換えると、エントリポイントをカスタマイズすることができます。
VSCode内のTerminalでPython(Anaconda)にPATHを通す

# VSCodeのTerminalでPython(Anaconda)が呼び出せない？
VSCodeで.pyファイルを書いているときに、Terminalで実行したい時ありますよね？
サクッとVSCode内から実行したいのに、`python`と入力するだけではPython(Anaconda)が立ち上がらない。
MacOSのTerminalや、VSCode内のTerminalで`python3.6`と入れてやると立ち上がるのに・・・


```console:MacOSのTerminal
$ which python
/anaconda3/bin/python
```
```console:VSCode内のTerminal
$ which python
/usr/local/bin/python
$ which python3.6
/anaconda3/bin/python3.6
```

# 環境変数を確認してみる

それぞれの環境で確認してみると、なぜかPATHの順番がテレコに。
左に書かれているほどPATHの優先順位が高いそうなので、
VSCodeの環境だとMacOSデフォルトのPythonが立ち上がってしまう模様。

```console:MacOSのTerminal
$ export -p

...
declare -x PATH="/anaconda3/bin:/anaconda3/condabin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin"
...

```
```console:VSCode内のTerminal
$ export -p

...
declare -x PATH="/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/anaconda3/bin:/anaconda3/condabin"
...
```

# .bash_profileでPATHを再定義する
なぜテレコになっているか分からなかったので、
ホームディレクトリの`.bash_profile`を編集して、
Terminalを立ち上げる度にPATHが再定義されるようにしました。(MacOSのTerminalも再定義される）


```sh:~/.bash_profile
# 以下を追記

PATH=/anaconda3/bin:/anaconda3/condabin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
export PATH
```


#### 結果

```console:VSCode内のTerminal
$ which python
/anaconda3/bin/python
```
無事、`python`と入力するだけでPython(Anaconda)が立ち上がるようになりました。
VSCodeのTerminalをログインbashにしていないと意味無いかもです。

かなりストレスが減りましたので、どなたかの参考になれば幸いです。
もし、もっと良い方法があればご教授くださいませ。
VSCodeのHTMLのブラウザプレビュ_ショートカット

いつも忘れがちな、VSCodeでのhtmlのブラウザでのプレビュの
ショートカットの備忘録です

#ショートカット
windows,linux: 　　ctrl + F1
mac : 　　command + F1

#前提
[View In Browser](https://marketplace.visualstudio.com/items?itemName=qinjia.view-in-browser)
入れましょう

次にVS codeのUser Settingに下記を追加します
(基本設定→設定)

```json
    "view-in-browser.customBrowser": "chrome"
```
2点見積もりを使って学んだ事

# 動機、背景

5名のチームメンバーのリードエンジニアとして、1〜5人月の規模の開発の進捗管理を担当しています。
2点見積もりという手法を使って見積もりをしていますが、導入して1年ほど経ち、学ぶことがありましたので投稿します。

# 2点見積もりとは

以下のように、楽観と悲観で2つの見積もり、バッファを計算する手法です。

項目 | 楽観 | 悲観 | (悲観 - 楽観)の2乗
:--- | :--- | :--- | :---
要件定義 | 10h | 20h | 100
概要設計 | 15h | 30h | 225
... | | |
合計 | 100h | | 500(*)

バッファは(*)の平方根で算出します。


以下の記事で紹介されていた手法をそのまま使いましたので、詳細は記事を参照してください。
https://qiita.com/Hiraku/items/c29ca383fbef8eb38fd2

# 学んだ事

## タスクはなるべく細かく分割する

設計、テスト、といった大きな粒度での見積もりは、実績とのズレが大きくなります。
何を設計（テスト）するのか、細かい単位に分割することでズレを抑えることができます。
開発の初期段階ならば、画面の数、APIやバッチの本数を数えて見積もりに反映しましょう。
ある程度設計までできたならば、さらにタスクを細かく分割できるはずです。


## 曖昧な部分を具体的にする

見積もりの提出を求められる開発初期の段階では、未確定な部分があり不安なことも多いと思います。
見積もりの精度を上げるためには、曖昧な部分を具体的にすることが重要です。
不安は見積もりの結果に現れるので、見積もりを「曖昧な部分を明確にするためのツール」として活用しましょう。
不安なことを文章に書き出して整理することで、客観的に判断ができるようになります。


## 実績と照らし合わせて改善する

2点見積もりは主観をベースに見積もるため、人によって結果が左右されやすいように思います。自分は適当な性格なので少なく見積もりがちでした。
開発はチームで行います。人それぞれ技術レベルや慎重さなどの性格も違うため、開発する人によって実績に差が出るのが当然です。
チームで開発にかかった工数の実績を出して、ふりかえりをしましょう。細かな改善を繰り返すことで、より現実的な見積もりになると思います。
Google ColaboratoryにてKerasモデルを可視化 & Googleドライブに画像を出力

[Google Colaboratory](https://colab.research.google.com/)にてKerasで構築したモデルの可視化をしてGoogleドライブにグラフ構造図を出力するまでの過程をメモ。
※この記事執筆時点では「python 3.6.7」を使用
###必要なライブラリを確認
図の出力には`keras.utils.vis_util`モジュールを使用しますが、graphvizとpydotというライブラリが必要です。
Google Colabのノートブックでインストールされているライブラリ一覧を確認するには以下のコードで確認できます。

```python

import pkg_resources
for dist in pkg_resources.working_set:
  print(dist)
```

どちらのライブラリもデフォルトでインストールされているようです。
※python3.5、3.6ではpydotが動かないらしいのですが、代わりのpydotplusやpydot-ngも入ってました。→ [参考記事](https://qiita.com/hrs1985/items/7d923e9465985d6b8968)
###Googleドライブのマウント
出力した図の保存先であるマイドライブをマウントします。
ついでに保存先のパスも用意しておきます。

```python

from google.colab import drive
drive.mount('/content/drive')

model_path = "./drive/My Drive/model.png"
```

###グラフ構造図の出力
図の出力には`plot_model`を使います。自分は`model.compile`の後ぐらいに以下の処理を追加してます。

```python

from keras.utils import plot_model
plot_model(model, to_file=model_path)
```
これでマイドライブ直下にpngファイルが保存されました。

〜完〜

※参考までに公式ドキュメント
https://keras.io/ja/visualization/
NowでTokyo リージョンを使う方法

[Now in Tokyo](https://zeit.co/blog/introducing-now-in-tokyo)
ということで、zeit の Now で東京リージョンが追加されました。
今までは、サンフランシスコとかにしかなかったのが、東京にできたので速度的にも嬉しくなりそうです。
[Regions and Providers](https://zeit.co/docs/v2/platform/regions-and-providers/)

早速試してみました。

## now.json の設定方法

試してみるには、`now.json`に`"regions": ["hnd1"]`を追加するだけです。
これで Now にデプロイすれば、東京リージョンにデプロイされます。

[configuration regions](https://zeit.co/docs/v2/deployments/configuration/#regions)

```json
{
  "version": 2,
  "name": "XXX",
  "alias": "XXX.now.sh",
  "builds": [{ "src": "package.json", "use": "@now/static-build" }],
  "regions": ["hnd1"]
}
```

## 確認方法

Now のダッシュボードからデプロイしたプロジェクトを選択して、
対象の URL の Deployment Overview をみると確認できるようです。
Memo: 即時関数の意味　IIFE

即時関数の意味　IIFE
http://analogic.jp/immediate-function/
https://techacademy.jp/magazine/5530

構文:
(function (引数１, ２, ...) {
    //処理内容
}('実際の渡す値１', '２', ...));

スコープ:
JavaScriptには他の言語にあるようなブロックスコープがない。あるのはグローバルスコープと関数スコープのみ。 その為、関数は任意にスコープを作るための唯一。

<例２：名前付き関数を使った場合>
var result = 0,　//結果を格納する変数
calc = function () {　//結果を求める関数
        //結果を求めるための一時変数
        var a = 1, b = 2;
        return a + b;
    };
result = calc();
console.log(result); //「3」が出力される

<例３：即時関数を使った場合>
var result = 0;　//結果を格納する変数
result = (function () {
    var a = 1,　b = 2;　//結果を求めるための一時変数
    return a + b;
}());
console.log(result); //「3」が出力される
電話番号のリンクをスマホのときだけに効かせたい


## はじめに
電話番号のリンクを付けたものの、pcにもリンクが付いて逆に不便になりますね

## ちなみに電話番号のリンクはこちら
```
<a href="tel:0120-12-0000">0120-12-0000</a>
```


## スマホだけに対応するには？
メディアクエリーでスマホサイズ以上（768px）の解像度のときに
`pointer-events`を`none`します

```
@media screen and (min-width: 768px) {
    a[href^="tel:"] {
        pointer-events: none;
    }
}
```
これでaタグ等の動作を無効にさせます


## メディアクエリー使って↑のコード書いたのにpointer-eventsがnoneしない時
aタグを`display: block;`か`display: inline-block;`にしてみてください

## 出来上がり

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="kikuchi" data-slug-hash="YgarLM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="電話番号のリンクをスマホのときだけに効かせたい">
  <span>See the Pen <a href="https://codepen.io/kikuchi/pen/YgarLM/">
  電話番号のリンクをスマホのときだけに効かせたい</a> by naoko kikuchi (<a href="https://codepen.io/kikuchi">@kikuchi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


## 参考サイト
 [レスポンシブっぽくCSSだけで電話番号リンクをスマホにだけ適用する方法](https://unguis.cre8or.jp/web/7907 "レスポンシブっぽくCSSだけで電話番号リンクをスマホにだけ適用する方法")
Reactチュートリアル:初めてのアプリを作成して安全にする

![スクリーンショット 2019-03-15 21.04.57.png](https://qiita-image-store.s3.amazonaws.com/0/189613/2e87a276-28a9-97d1-8d35-6b8a226fa677.png)



本書では、React の基本的な概念について学びます。その後、バックエンド API に依存するシンプルな Q&A （質疑応答）アプリを作成しながら、React の機能を見ていきます。必要であれば、この GitHub リポジトリをチェックして本書に対応するコードを確認してください。お楽しみください！
本書は次のセクションに分かれています。

前提条件
強制ではありませんが、React アプリのチュートリアルに入る前に、JavaScript、HTML、および CSS について少し学びましょう。これらテクノロジーの経験がなければ、本書の手順に簡単に従うことができないかもしれませんので、まずこれらについて学ばれることをお勧めします。Web 開発の経験がある方は、このまま本書をお楽しくください。

開発マシンには Node.js および NPM がインストールされている必要があります。これらツールがまだない場合は、公式ドキュメントに記載された手順に従って Node.js をインストールしてください。NPM（Node Package Manager）にはデフォルトの Node.js がインストールされています。

最後に、端末のオペレーションシステムにアクセスする必要があります。MacOS または Linux をご利用の方は大丈夫です。Windows でご使用の方は、おそらく問題なく PowerShell をご利用できるでしょう。

#React の紹介
[React](https://reactjs.org/) は Facebook が [シングルページ アプリケーション(SPA)](https://en.wikipedia.org/wiki/Single-page_application) の開発を容易にするために作成した JavaScript ライブラリです。Facebook は React がオープン ソースしアナウンスしたので、このライブラリは世界中で大変人気になり、開発者のコミュニティでも大量の導入が増えました。今日、Facebook がまだ主に維持していますが、その他大企業（Airbnb、Auth0、および Netflix など）がこのライブラリを取り入れて自社製品を構築するのに使用しています。[このページには、React を使用する 100 社以上の企業リストが記載されています](https://github.com/facebook/react/wiki/Sites-Using-React)。

本章では、React でアプリの開発をしながら、留意すべき重要な基本概念について学びます。ただし、今回の目標はこれらトピックについて完全に説明することではないことをご了承ください。ここでの目標は初めての React アプリケーションを作るときに、内容が理解できるように十分なコンテキストを与えることです。

各トピックの詳細については、[公式 React ドキュメント](https://reactjs.org/)をご覧ください。

(つづく)

##この続きは、以下のAuth0ブログで解説しております。
[Reactチュートリアル:初めてのアプリを作成して安全にする](https://auth0.com/blog/jp-react-tutorial-building-and-securing-your-first-app/)



# Auth0 統合認証プラットフォーム
Auth0はWebアプリやモバイル、APIなどに対して認証・認可のサービスをクラウドで提供している、いわゆるIDaaS (Identity as a Service)ベンダーです。企業がもつWebアプリケーションやAPI, Native Mobile Appなどでユーザー認証や認可、セキュリティを組み込みたいけれでも実装が難しい・・・という方にオススメのソリューションを提供しています。


##Githubに様々なプラットフォーム用のサンプルソースを公開
Auth0は今回のチュートリアルで使用したサンプルプログラムをはじめ、様々なプラットフォーム・フレームワーク用のサンプルプログラムをGithubに公開しています。今回紹介したReact以外にも多数のフレームワーク用のソースを公開していますので、お試ししてはいかがでしょうか。
[Githubリポジトリ - Auth0] (https://github.com/auth0)


##実際にAuth0を利用するには
Auth0のサービスは契約をしなくとも無償で評価(フリートライアル：2２日間)をすることができます。フリートライアルは、[Auth0のホームページ](https://auth0.com/jp "http://auth0.com/jp")にアクセスし、画面右上の<A HREF="https://auth0.com/signup?utm_campaign=qiita_auth0_aspnet_core&utm_source=qiita"><img width="123" alt="スクリーンショット 2017-09-07 21.59.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/189613/c0ffbce4-d802-6fdd-ea2a-aa4a7ccd775b.png"></a>をクリックするとトライアル登録が行うことができます。ユーザー登録にはGitgubやGoogle, Microsoftアカウントを使用してサインアップすることできますので、試してみてはいかがでしょうか？
リストタグ（li）で作ったリストの、米印部分を空ける


## はじめに
リストの注釈文を書く時によくある米印、↓みたいに書くと…

```
<ul>
  <li>
    ※この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れてい
  </li>
  <li>
    ※この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、
  </li>
</ul>
```


:arrow_down:こうなってしまう:confused:
※この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れてい
※この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、

改行された時に回り込んでしまいます:frowning2:
:rolling_eyes:どうにかして複数行になったときの一文字目を空けたい
## cssで解決できます
２行目の一文字目を空けたいときは
`text-indent` を使えば解決します:ok_woman:

## 出来上がり
:relaxed:
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="kikuchi" data-slug-hash="moxMGj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="リストタグ（li）で作ったリストの、米印部分を空ける">
  <span>See the Pen <a href="https://codepen.io/kikuchi/pen/moxMGj/">
  リストタグ（li）で作ったリストの、米印部分を空ける</a> by naoko kikuchi (<a href="https://codepen.io/kikuchi">@kikuchi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


## 参考サイト
 [CSSだけであの気になる米印(※)の段差を付ける方法](https://recost-design.com/1655.html "CSSだけであの気になる米印(※)の段差を付ける方法")
擬似要素のbeforeを使ってやる方法も載ってます:kissing_heart:
【Unity(C#)】VR空間内に"絶対読んじゃう説明文"をノンスクリプトで作る方法

　　
　　
　　
この記事は

**『プログラミング完全未経験からUnityでの開発現場に迎え入れてもらえた世界一の幸せ者』**

の記事です。そのつもりでお読みください。




##ほとんどの人が説明文を読まない
こんなこと言いだしといてなんですが、私も読みません。
説明書とかもほとんどの確率で捨てます。

なので絶対に見させたい説明文や画像があるときに強制的に見させる方法を考えました。

**※以下、HTC-Viveのお話となります。**

##画面に追従するキャンバスを作る
これは非常に簡単です。
Camera(eye)の子にすればいいだけです。
![cameraRig.png](https://qiita-image-store.s3.amazonaws.com/0/244071/fb7b6242-a732-ec22-3449-899359e8c385.png)

そして、`Render Mode`を`World Space`にします。
`World Space`にすることで大きさをいい感じに調節できます。

---
2019/08/22　追記

**Z座標を5**とかにしとかないとゆがみます。
5ｍカメラから離したうえでキャンバスの大きさを調整するのがベストです。

##最前面で描画する(描画順を最後にする)
[こちらの記事](https://qiita.com/OKsaiyowa/items/413c9da869f23f6b44d1)で紹介した手法を使います。
別のCameraをもう一つ用意してそこにUIのみを映します。
![UIのみカメラ設定.png](https://qiita-image-store.s3.amazonaws.com/0/244071/07df9619-5532-3519-5514-f8c735d00685.png)
~~設定はこれだけです。~~

---
2019/08/22　追記

**用意したUIカメラの`Depth`の値をVRカメラの`Depth`の値より大きくしないと映りません。**
また、VRカメラの方の`Culling Mask`の`UI`のチェックが入ったままだと、二重で描画されてしまいます。
VRカメラの`Culling Mask`の`UI`のチェックを外すか、
別のLayerを用意してUIカメラの`Culling Mask`の項目をそのLayerだけにすればOKです。

OculusQuestで利用する場合は`CenterEyeAnchor`の子階層にキャンバスをくっつけるといい感じに追従します。
また、絶秒な位置に設定しておかないとクビがしんどいので注意です。

##結果
これで、いくら顔を振り回しても画面に張り付いて離れない&常に最前面に表示される最強の説明文が完成しました。
![Unity-2018.2.gif]
(https://qiita-image-store.s3.amazonaws.com/0/244071/f0bbcacd-bac5-06e9-1217-d63324b9290e.gif)

ただこれは没入感が激減し、ユーザーのストレスともなりうる諸刃の剣なので
`どうしても見せたいものがある`というときに使ったほうがいいと思います。
React Context API: 状態を簡単に管理する

![スクリーンショット 2019-03-15 20.47.37.png](https://qiita-image-store.s3.amazonaws.com/0/189613/4523db43-2bf7-e5fc-51bd-fd3875998e93.png)

React Context API は React のエコシステムでは新しいものではありません。ただし、React  の  16.3.0  リリース では  [API に多くの改善がなされています](https://auth0.com/blog/whats-new-in-react-16-3/)。これら改善は予想以上のもので、Redux やその他高度な状態を管理するライブラリの必要性が大きく提言されます。本書では、実用的なチュートリアルを通して新しい React Context API が小型の React アプリケーションに対する Redux への必要性をどのように置き換えるかを学んでいきます。

#Redux についてのクイックレビュー
React Context API に進む前に、両者を比較できるように Redux についてのクイックレビューをする必要があります。[Redux は状態の管理を容易にする JavaScript ライブラリです](https://redux.js.org/)。Redux は React 自体には結びつきません。世界中の開発者は  React  や  Angular  といった人気の高い JavaScript フロントエンド フレームワークと共に Redux を使ってきました。

誤解のないように言うと、本書で言う状態の管理とはシングルページアプリ（SPA）で発生する特定のイベントが発生したときの変更を処理することです。例えば、ボタンのクリックやサーバーから来る非同期メッセージのようなイベントがアプリの状態への変更をトリガーします。

Redux では、特に、次の点をご留意ください。

1. アプリ全体の状態が単一のオブジェクト（別名「頼できる情報源(Source of truth)」）に格納されます。
2. 状態を変更するには、発生する必要があることを説明する  actions  をディスパッチする必要があります。
3. オブジェクトのプロパティを変更したり、既存の配列を変更することはできません。Redux では、新しいオブジェクトまたは新しい配列に常に新しい参照を返さなければなりません。

Redux についてあまりご存知でない方や詳細を学びたい方は、[Redux についての実用的なチュートリアル](https://auth0.com/blog/redux-practical-tutorial/)をご覧ください。

#React Context API の導入
React Context API はあらゆるレベルに手動で props  を伝えなくても、コンポーネント ツリーを通してデータを送信する方法を提供します。React では、親コンポーネントからその子コンポーネントにプロパティとして送信されることがよくあります。

新しい React Context API を使うことは次の 3 つのステップによって決まります。

1. 初期状態を React.createContext に送ります。この機能は  Provider  や  Consumer  と共にひとつのオブジェクトを返します。
2. Provider  コンポーネントをツリーのトップで使用し、value  と呼ばれるプロパティを承諾させます。この値は何でも構いません。
3. 状態のサブセットを取得するために、Consumer  コンポーネントをコンポーネント ツリーにあるプロバイダーの下で使います。

ご覧のように、関係する概念は Redux とはそんなに異なりません。実際、Redux はそのパブリック API の下で React Context API を使用します。ただし、最近 Context API は一般人でも十分使用できるほどその成熟度が高まりました。
(つづく)

##この続きは、以下のAuth0ブログで解説しております。
[React Context API: 状態を簡単に管理する](https://auth0.com/blog/jp-react-context-api-managing-state-with-ease/)



# Auth0 統合認証プラットフォーム
Auth0はWebアプリやモバイル、APIなどに対して認証・認可のサービスをクラウドで提供している、いわゆるIDaaS (Identity as a Service)ベンダーです。企業がもつWebアプリケーションやAPI, Native Mobile Appなどでユーザー認証や認可、セキュリティを組み込みたいけれでも実装が難しい・・・という方にオススメのソリューションを提供しています。


##Githubに様々なプラットフォーム用のサンプルソースを公開
Auth0は今回のチュートリアルで使用したサンプルプログラムをはじめ、様々なプラットフォーム・フレームワーク用のサンプルプログラムをGithubに公開しています。今回紹介したReact Context API以外にも多数のフレームワーク用のソースを公開していますので、お試ししてはいかがでしょうか。
[Githubリポジトリ - Auth0] (https://github.com/auth0)


##実際にAuth0を利用するには
Auth0のサービスは契約をしなくとも無償で評価(フリートライアル：2２日間)をすることができます。フリートライアルは、[Auth0のホームページ](https://auth0.com/jp "http://auth0.com/jp")にアクセスし、画面右上の<A HREF="https://auth0.com/signup?utm_campaign=qiita_auth0_aspnet_core&utm_source=qiita"><img width="123" alt="スクリーンショット 2017-09-07 21.59.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/189613/c0ffbce4-d802-6fdd-ea2a-aa4a7ccd775b.png"></a>をクリックするとトライアル登録が行うことができます。ユーザー登録にはGitgubやGoogle, Microsoftアカウントを使用してサインアップすることできますので、試してみてはいかがでしょうか？
【Wordpress】ドメインを変えたらJSやCSSが効かなくなる事件

Wordpressサイトのドメインを変えたらJSやCSSが効かなくなってひたすらに焦ったのでメモ。

## 使用環境
- ロリポップサーバー
- ムームードメイン
- Wordpress

## 再現手順
1. wp-test.comに作業ディレクトリをデプロイ。無事に画面を見ることができる。
2. ロリポップ上でtest.comにドメインを変更。
3. cssやjsが当たらなくなり焦る。

## 原因
WordpressではDB上に保存されているデータは、ドメインを参考にして保存されている。だから、それらを全て書き換えないといけない。

## 解決方法
1. ロリポップ上からphpMyAdminに入ってDBの中身をexport。
2. ローカルでSQLファイルを開いて、旧ドメイン箇所を新ドメインに書き換える(一応ファイルのバックアップは取っておきましょう)
3. 編集したSQLファイルをimport
4. 画面を見るとCSS/JSが適用されている

Wordpress開発も一人でやると詰まるところが多い。
ruby 基本文法

progateのbubyクラスの「料理注文システムを作ろう！」

のまとめ。
本当に基本的なところだからしっかり理解しようと思う。
まずはクラスから。
##クラス

```menu.rb
class Menu
  attr_accessor :name
  attr_accessor :price
  
  def initialize(name:, price:)
    self.name = name
    self.price = price
  end
  
  def info
    return "#{self.name} #{self.price}円"
  end
  
  def get_total_price(count)
    total_price = self.price * count
    if count >= 3
      total_price -= 100
    end
    return total_price
  end
end
```
###インスタンス変数
クラスに情報を持たせるには、下記のようなインスタンス変数を作らなければいけない。

```
attr_accessor:シンボル
```

例：attr_accessor:name
この場合、nameをインスタンス変数と呼ぶ。

###initializeメソッド

initializeメソッドは、「クラス.new」でインスタンスを生成した直後に自動で呼び出されるもの。
例：

```test.rb
class Test 
  def initialize
    puts "おはよう"
  end
end
test1 = Test.new
```
コンソール結果

```
おはよう
```
と出力される。
###インスタンスメソッド

クラスの中で定義して、インスタンスに対して呼び出すメソッドのこと。
例：

```test.rb
class Test
  def sample(age)
    return "私は#{age}歳だ。"
  end
end
test = Test.new
puts test.sample(20)
```
コンソール結果

```
私は20歳だ。
```
##クラスを呼び出す方

```index.rb
require "./menu"

menu1 = Menu.new(name: "ピザ", price: 800)
menu2 = Menu.new(name: "すし", price: 1000)
menu3 = Menu.new(name: "コーラ", price: 300)
menu4 = Menu.new(name: "お茶", price: 200)

menus = [menu1, menu2, menu3, menu4]

index = 0

menus.each do |menu|
  puts "#{index}. #{menu.info}"
  #連番にする
  index += 1
end

puts "--------------"
puts "メニューの番号を選択してください"

# 入力を数値として受け取って変数orderに代入してください
order = gets.chomp.to_i

# 選択されたメニューのインスタンスを変数selected_menuに代入してください
selected_menu = menus[order]

# 「選択されたメニュー: ○○」となるように出力してください
puts "選択されたメニュー:#{selected_menu.name}"

puts "個数を入力してください(3つ以上で100円割引)"

# 入力を数値として受け取って変数countに代入してください
count = gets.chomp.to_i

# 「お会計は○○円です」となるように出力してください


puts "お会計は#{selected_menu.get_total_price(count)}円です"
```
###each文

```
配列.each do |変数|
  #したい処理
end 
```

###gets.chomp
このコードが実行されると、コンソールが待ち状態となる。

```
test = gets.chomp
```
とすることでエンターキーを押すまでに入力されたものがtestに代入される。

またこの場合は数字でも文字列として取得してしまうので、数値として取得したい場合は

```
test = gets.chomp.to_i
```
といった感じにする。
bot サービスを無料で作るにあたっての試行錯誤

最初に申し上げておくと、これは仕事帰りに一人で立ち飲み屋でスマホで飲みながら書いておりますのでご了承ください。

動機
とある自分のイベントでボットサービスを立ち上げることを決めた。要件は以下の通り。
・無料か低価格で立ち上げられる
・運用が楽
・開発が楽
・可能ならばわざわざアプリをインストールしたり登録しなくても利用可能
・色々な反応がつくれる
四番目に関しては妥協しましたが…

ベストプラクティス
いきなりベストプラクティスについて言及します。
Dialogflow + Line@ です。
両者とも無料無制限に利用できます。
Line@のフリープランはpushApiが使えない、つまり投稿に対して応答は出来るけど、プログラムから自発的に投稿はできません。あしからず。

Line@はデフォルトで自動応答の設定ができますが、表記揺れに弱いです。あとフラグ管理とか細かいことはできないです。
そこで登場するのがDialogflow。フラグ管理も出来ますし、選択肢表示とかも自由自在にできます。
詳しくはググって下さい。

以下は検討して試行錯誤した内容です。

・Botkit + webui
Botkit cmsというツールでいい感じに応答を作成できるらしいのですが、アプリ間の連携がうまく行かず。あとデフォルトのwebui が微妙。

・BotPress + webui
応答を作るのはいい感じだったんだけど、たぶんライセンスを購入しないと公開できなさそう。管理者ログインしてないセッションからは401が返ってきた。

・Dialogflow + webui demo
公開するためのURLがトークンを含むためすごいダサいのと、自分の発言が左側に表示されるUIを許せなかったので却下。

・Dialogflow + facebook messenger
構築は簡単だけど、公開するためにはfacebookに内容の申請を出して承認を得ないとだめ。個人的なbotは運用できない。

・azure bot freamwork + QnAmaker
質問と回答を作るのはすごい簡単だし、構築は楽。ただ、全てのインスタンスをフリープランで作るとbotの反応が凄く重い。あとフリープランで運用できる時間がすごい短い。

という訳でLineは誰でも入ってるよね、という言い訳でベストプラクティスに至ります。
以上。
cssメモ

##input内の左端にスペースを作る
~~paddingを使う場合と違って、表示崩れしないという多大なメリット。
文字位置調整の他、虫眼鏡マークも入れられます。~~
フォームいっぱいに入力した場合、インデントしなくなるので普通にpaddingで・・・
![text-indent.JPG](https://qiita-image-store.s3.amazonaws.com/0/18858/5fe99de1-7f70-ab16-efc9-3e1ece2ccde0.jpeg)

```css
  /* text-indent: 2em;*/
  padding: 0.4em 0.8em 0.4em 2em;
```
##Opacity
重なるものすべてを透明にしてしまうopacity。
z-index使っても意図した挙動にならない場合あり。

![opacity.JPG](https://qiita-image-store.s3.amazonaws.com/0/18858/ca331c58-2302-ff5a-de68-6a048d52ef2c.jpeg)


```index.html
<div class="a0">
    <div class="a0_child">子要素<br/>
                          absolute<br/>
                          z-index:9999<br/>★両方意味なし
     </div>
</div>
<div class="a1">a1<br>static<br/>z-index:9999<br/>★z-index意味なし</div>
<div class="a2">a2<br>relative<br/>★OK</div>
```
css

```css:style.css
.a0 {
  opacity: 0.6;
  /* position:relative; *//* ポイント */
  /* z-index: -9999; *//* ポイント */
}

.a0_child {
  position: absolute;
  z-index: 9999;
}

.a1 {
  z-index: 9999;
}

.a2 {
  position: relative; /* ポイント */
}
```

opacityしている要素を次のようにする。

1. position:relative付与。デフォのstatic以外ならなんでもいい。
2. z-indexの値を下げる

```css:style.css
.a0_child{
  opacity:0.6;
  position:relative; /* これと */
  z-index:-9999; /* これ*/
}
```

または、透明にしたくない要素をrelativeにする。デフォ以外ならなんでもいい。

```css:style.css
.a1{
  position:relative /* absolute,fixedでもいい */
}
```
opacityがある子要素の場合には効果なし。

##固定と可変floatでのカラム落ち対策
###原因

固定(px)　 可変(%)
![b.JPG](https://qiita-image-store.s3.amazonaws.com/0/18858/a6f6478d-4985-4e0e-295d-f81b748fbb6e.jpeg)

可変が100%でなくとも、ウィンドウサイズを縮めていくと固定領域は縮小しないので、固定の全体に占める割合が次第に増えていき、可変領域がカラム落ちします。


###対策

1. 可変のfloatとwidth(%)を親に移動
2. 親で固定幅分をネガティブマージン
3. 可変要素自身でネガティブマージン幅を打ち消して位置調整

```css
#right{
  /* 親に移動
     float:left;
     width:100%;  */
   margin-left:80px;/*ネガティブマージンで左によった分を打ち消し*/
}
#rightContainer{
  float:left;
  width:100%;
  margin-left:-80px; /*ネガティブマージン*/
}
```

![ネガティブマージンでカラム落ち対策.JPG](https://qiita-image-store.s3.amazonaws.com/0/18858/ef274dbb-ba04-a90e-1924-4d78dee595ee.jpeg)

###面倒なところ
幅調整する要素には、親が必要。

###float使わない代替手段
flexbox使う。display:flex。多分最近の主流。
vue.js pull-to-reflesh

pulltoreflesh　のメモ。
うまくうごかんなーこれも。
スクロールのCSSが大事。

```

<style>


    .menu-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 0;
        margin-top: 45px;
        margin-bottom: 45px;
    }


</style>
<template>

    <div>

        <pull-to
                class="menu-content"
                :top-config="config"
                :top-load-method="refresh">


                <ul>
                    <li v-for="item in dataList">
                        {{ item }}
                    </li>
                </ul>

            <div style="height:150px;">

                下の要素が隠れちゃうので。

            </div>



        </pull-to>



    </div>


</template>

<script>
    import PullTo from 'vue-pull-to'



    export default {
        components: {
            PullTo
        },
        data() {
            return {
                config: {
                    pullText: '↓引っ張って再読み込み',
                    triggerText: '↑指を離すと読み込みます',
                    loadingText: '更新中...',
                    doneText: 'OK',
                },
                dataList: [
                    '一浪',
                    'じろう',
                    'はなこ',
                    'たろう',
                    'じろう',
                    'はなこ',
                    'たろう',
                    'じろう',
                    'はなこ',
                    'たろう',
                    'じろう',
                    'はなこ',
                    'たろう',
                    'じろう',
                    'はなこ',
                    'たろう',
                    'たろう',
                    'じろう',
                    'はなこ',
                    'たろう',
                    '--------------------',
                    'はなこ',
                    'たろう',
                    'じろう',
                    'はなこ',
                    'たろう',
                    'じろう',
                    'はなこ',
                    'たろう',
                    'じろう',
                    'はなこ',
                    'たろう',
                    'じろう',
                    'はなこ',
                    'たろう',
                    '22222222--------------------',
                    'はなこ',
                    'たろう',
                    'じろう',
                    'はなこ',
                    'たろう',
                    'じろう',
                    'はなこ',
                    'たろう',
                    'じろう',
                    'はなこ',
                    'たろう',
                    'じろう',
                    'はなこ',
                    'たろう',
                    'じろう',
                    'はなこ',
                    'じろう',
                    'はなこ',
                    'たろう',
                    'じろう',
                    'はなこ',
                    'たろう',
                    'じろう',
                    '最下部やで',
                ]
            }
        },
        methods: {
            refresh(loaded) {
                alert("再読込完了");
                loaded('done');
            }
        }
    }
</script>

```
golangでWebアプリケーションのルーティングを実装する！

#はじめに
golangで__Webアプリケーションのルーティング__を実装する方法を覚えたのでアウトプットします！

#実装ページ
<img width="551" alt="スクリーンショット 2019-03-15 20.24.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/343290/0860eb05-93c1-61ac-8ff7-ee376862ee9c.png">

---

<img width="548" alt="スクリーンショット 2019-03-15 20.18.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/343290/b72bca5a-af56-ec2b-0067-a52a555138b7.png">

---

<img width="549" alt="スクリーンショット 2019-03-15 20.19.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/343290/bad53484-c0de-2933-4612-3f0d0cf220f6.png">

---

#コード

```golang
package main

import (
	"fmt"
	"net/http"
)

//「http://localhost:8080/hello」の処理
func helloHandle(w http.ResponseWriter, r *http.Request) {
	h := `
		<html>
			<head>
				<title>Hello</title>
			</head>
			<body>
				Hello
			</body>
		</html>
		`
	fmt.Fprint(w, h)
}

//「http://localhost:8080/goodbye」の処理
func goodbyeHandle(w http.ResponseWriter, r *http.Request) {
	h := `
		<html>
			<head>
				<title>goodbye</title>
			</head>
			<body>
				goodbye
			</body>
		</html>
		`
	fmt.Fprint(w, h)
}

//「http://localhost:8080/」の処理
func landingHandle(w http.ResponseWriter, r *http.Request) {
	h := `
		<html>
			<head>
				<title>Landing</title>
			</head>
			<body>
				Landing
			</body>
		</html>
		`
	fmt.Fprint(w, h)
}

func main() {
	// URLごとに関数を登録
	http.HandleFunc("/hello", helloHandle)
	http.HandleFunc("/goodbye", goodbyeHandle)
	http.HandleFunc("/", landingHandle)

	//Webサーバを起動
	if err := http.ListenAndServe(":8080", nil); err != nil {
		fmt.Println(err)
	}
}
```
MS-DOSって地味に使えるという気付き

# 事の起こり
DDLファイルが1テーブルずつ自動生成される現場で、それはまぁいいんだけど、「ローカルに自分で立てたDBにそれを都度反映せよ」というお達しが出た。
ファイル数がバカみたいにある。めんどくさい。

# 手段を考えてみる
1ファイルずつ実行するのは論外として。
Oracleのsqlplusで@ファイル指定で、ディレクトリ配下のもの全部、って指定が出来るのかもよくわからなかった（また調べとこ・・・）。
上記が出来ないとしても、ファイル1つにすれば済む話やん、WindowsでUnixのcat相当のものってあんのかな。
もしかしてMS-DOSで出来たりしない？

# MS-DOSで出来ました
copyコマンドに/bオプションで出来ました。
これでC:¥hoge配下の、拡張子txtのファイルを、all.txtの1ファイルに出力。

``` 
> copy /b C:\hoge\*.txt C:\hoge\all.txt
``` 

# Windows開発あるあるだけれど
今回みたいにファイルをごねごねする＝ツール使えば良くね？ってなりがちで、Windowsだとその手のファイルも転がってるんだろうけど、お外（現場ともいう）に出てるとツールをインストールするのにめんどくさいやり取りが発生することが多い。
そもそもやり取りが発生する前に、「やってはいけないこと」だったりするし。
そんなとき、MS-DOSが意外と便利・・・かもしれない。[^1]
また気付きがあり次第追記。

# リンク
[Windowsのコマンドでファイルを結合する](https://qiita.com/5zm/items/6688ded69d2ddc4bec10)

[^1]: 調べるのも面倒で、目の前で開発してる言語でツール作り始めるのもあるある。
プログラミング学習記録27〜paramsの理解が甘い〜

##今日やったこと
- Progate rails1~3
- Progate rails道場編1

rails1,2でやる内容はだいたい理解できたのですが、まだrails3でやる投稿機能を作成するやり方の理解が甘いです。

試しに道場編をやってみたところ、rails3の範囲の部分で撃沈しました。

paramsという変数がいまいちよくわかっていません。

URLや入力フォームから指定した値を取得する変数らしいのですが、まだ腑に落ちていないです。

明日は全体像を確認しながら、paramsやその他のコマンドについての理解を深めたいと思います。

おわり
Puma caught this error: Error loading the 'sqlite3' Active Record adapter. Missing a gem it depends on? can't activate sqlite3 (~> 1.3.6), already activated sqlite3-1.4.0. Make sure all dependencies are added to Gemfile. (LoadError)

# Error内容
rails new コマンドで新しいアプリを作成しrails sしたところ、
ブラウザ画面で以下のエラーが表示された。


```
Puma caught this error: Error loading the 'sqlite3' Active Record adapter. Missing a gem it depends on? can't activate sqlite3 (~> 1.3.6), already activated sqlite3-1.4.0. Make sure all dependencies are added to Gemfile. (LoadError)
```

Errorを読むに、sqlite3のversionが原因。
確認してみるとversionが `1.4.0`となっている。

```
$ gem list |grep sqlite3
sqlite3 (1.4.0)
```

# 対処方法
gem sqlite3のバージョンを明示的に、 `1.3.6` で指定する。

```
gem 'sqlite3', '~> 1.3.6'
```

bundle installする。



ブラウザを更新すると
<img width="1043" alt="スクリーンショット 2019-03-15 19.33.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/251648/a3597eb8-bf76-60ec-b57c-8b2f9d0f9f3d.png">
このようなエラーが表示されるが、rails serverを再起動させるといつもの画面が表示されます。


<img width="640" alt="スクリーンショット 2019-03-15 20.04.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/251648/8053527d-7b28-feb1-76e6-5809e3f84b3b.png">
[PHP][Laravel].envとの紐付け

#はじめに
雑ですが、「.env」ファイルとの紐付けをしたので、コードだけでも共有しておきます。
参考にしてもらえれば幸いです。

#今日のコード
```php5:test.php
<?php
require 'vendor/autoload.php'; //vendorの場所に注意！

$dotenv = Dotenv\Dotenv::create(__DIR__); //よく見かける「new」だとエラー出るので、公式から引っ張ってきた
$dotenv->load(); // .envファイルから環境変数を読み込み

echo getenv('PASS1');
echo "\n";
echo getenv('PASS2');
echo "\n";
```

```text:.env
PASS1=1234567890
PASS2=ABCDEFGHIJ
```

#実行結果
```terminal:実行結果
bash-4.2# php test.php
1234567890
ABCDEFGHIJ
```
2点間に引く線をLine Rendererで描画する[Unity5][2D]

こんな風なタイトルの記事はあったのですが古かったので新しく書いてみようと思って書いてみました

#指定した2点間に線を引く
この処理を実装するにはUnityのLineRendererというコンポーネントを使います

画像貼るのは面倒なのでテキストのみでの紹介となります

#手順
①ヒエラルキー上でCreate Emptyを選択し空のオブジェクトを作成する
②インスペクター上で「Add Component」をクリックし"Effects/LineRenderer"を選択する
③スクリプトを書く

#サンプルコード(極短)
```c#
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class LineGenerator : MonoBehaviour
{
    LineRenderer line;
    GameObject Hoge;
    GameObject Puke;

    // Start is called before the first frame update
    void Start()
    {
        this.Hoge = GameObject.Find("Hoge");
        this.Puke = GameObject.Find("Puke");

        //コンポーネントを取得する
        this.line = GetComponent<LineRenderer>();
        
        //線の幅を決める
        this.line.startWidth = 0.1f;
        this.line.endWidth = 0.1f;
        
        //頂点の数を決める
        this.line.positionCount = 2;
    }

    // Update is called once per frame
    void Update()
    {
        //Updateに書いたのは作者が動的に変化させたかったため
        //0や1は頂点の順番(多分)
        line.SetPosition(0, Hoge.transform.position);
        line.SetPosition(1, Puke.transform.position);
    }
}
```

未熟な作者がVS2017上の注釈を読んだので少しおかしいかもしれませんが作者の環境ではちゃんと動きました

#追記
Materialとかを色々いじればデフォルトの見た目から変えられます