OmniAICreator/Qiita-1.07M huggingface dataset:
Next.js 9.3: 新世代の静的サイト生成、Built-in Sassのサポート

本日、[Next.js](https://nextjs.org/) 9.3 がリリースされました。本リリースの特徴は次のものです。

- Static Site Genration のサポート
- プレビューモードのサポート
- ビルトインの Sass サポート
- 404 ページの静的化
- ランタイムの縮小

各トピックごとに簡単に説明します。詳しく知りたい場合は[公式のリリースノート](https://nextjs.org/blog/next-9-3)が公開されているのでご確認ください。

## Static Site Generation のサポート

Next.js では 9.0 から Automatic Static Optimization というコンセプトを打ち出し、`getInitialProps`でデータを取得しない場合はビルド時に HTML ファイルを生成していました。（また、`getInitialProps`でのデータ取得は`next export`で生成した場合であっても、クライアントのルーティング変更時に実行されるため、完璧な静的サイトとは言い難いものでした。）
しかし、データを取得しつつ、HTML をビルド時に生成したいケースが増えてきています。Headless CMS を使ったマーケティングブログがよい例です。そこでコミュニティ内で討論したできたのが本機能です。

Next.js 9.3 では`getStaticProps`と`getServerSideProps`という 2 つのデータ取得方法が用意されています。また、動的なルーティングを実現する際に、パラメータを付与する`getStaticPaths`も追加されています。

- `getStaticProps` ビルド時にデータを取得する
- `getStaticPaths` データに基づいて動的ルーティングを指定する
- `getServerSideProps` **リクエストごとに**データを取得する

後方互換性も担保されており、今までの`getInitialProps`も使うこともできますが、新しい方法が推奨されます。

[公式ブログのリリースノート](https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support)には各メソッドの要点がまとまっています。

またドキュメントも大きく書き直されているので一読をおすすめします。

[Data fetching](https://nextjs.org/docs/basic-features/data-fetching)

## プレビューモードのサポート

Static Generation は Headless CMS から取得するのに役立ちますが、下書き段階には理想的ではありませんでした。
Static Generation で生成されるのは静的なプレビューなため、変更を反映するには再生成する必要があるからです。

そこで用意されたのがプレビューモードです。静的に生成されたページを通して、下書き状態のページを SSR することができます。

[Preview Mode のドキュメント](https://nextjs.org/docs/advanced-features/preview-mode)も用意されているのでそちらをご覧ください。

## ビルトインの Sass サポート

[Next.js 9.2 では Built-in CSS がサポート](https://nextjs.org/blog/next-9-2#built-in-css-support-for-global-stylesheets)されましたが、Next.js 9.3 では Sass のサポートも追加されました。
Built-in CSS と同様に、Global Stylesheet と CSS Modules がサポートされています。簡単なコード例をお見せします。

```jsx
// Global Styles
import "global.scss"
// CSS Modules
// 注意: 拡張子はmodule.scssにすること
import styles from "./Button.module.scss"

const Button = () => {
  return <button className={styles.success}>Save</button>
}
```

CSS Modules ではコード分割も行われるので、global ではなくなるべく CSS Modules の方に寄せるといいでしょう。[^1]

[^1]: 私はお仕事のプロジェクトでも移行しましたが、module.scss では IE 対応のセレクタが壊れて大変でした。

今まで`@zeit/next-sass`を使っていた方は、この機能は自動的に無効化されます。Built-in の Sass に乗り換えたい方は`@zeit/next-sass`を外しましょう。

## 404 ページの静的化

上記で紹介した Automatic Static Optimization というコンセプトはありましたが、404 ページは静的にレンダリングされたページではありませんでした。

今までは`pages/_error.js`においたファイルがエラーページとなっていましたが、Next.js 9.3 からは`pages/404.js`というファイルを置くと 404 ページとして扱われます。
この 404 ページを静的に保つことでエラーページを表示する度にレンダリングされなくなり、サーバーへの負荷が減ります。

こちらもドキュメントがあるので読みましょう！

[Custom Error Page](https://nextjs.org/docs/advanced-features/custom-error-page#404-page)

## まとめ

ここ最近の Next.js は今までとひと味違う動きを見せているので要注目です。

繰り返しにはなりますが、本記事では概要のみを扱っています。詳しく知りたいと思った方は[公式のリリースノート](https://nextjs.org/blog/next-9-3)をご覧ください。
Cordova Mac環境設定の苦労話し

ハイブリッドアプリ作成の元のCORDOVAを以前より研究してしてみたいと思っていましたが、今一つピンと来なかったのでそのままにしていました。今回先ずは環境構築と言う事で取り掛かったら、何と中々モノに出来ず苦労したので、その辺も含め投稿してみました。もしかしたらハイブリッド今更なのかも知れませんが？
先ずはsdkのパスを通す！！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/da69f208-9538-d91b-16b1-ca0f8adc65d0.png" width="70%">

```
vi ~/.bash_profile
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-9.0.4.jdk/Contents/Home
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_241.jdk/Contents/Home
export ANDROID_HOME=/Users/myusername/Library/Android/sdk
export PATH=$ANDROID_HOME/platform-tools:$PATH
export PATH=$ANDROID_HOME/tools/bin:$PATH
```
Android Debug Bridge（adb）コマンドでパスが通った事確認
adb version
android -h
現在のCORDOVAバージョンでは、Xcode10及びandroid studio3+が条件の様です。
cordova環境設定を下記の手順で。
Node.jsのインストール
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/8234d4a6-4142-c396-7cc5-5a5ce2287ce0.png" width="50%">

cordovaのコマンドラインツールをインストール
npm install cordova -g

下記のcommandにてproject生成
cordova create MyApp com.example MyApp
フォルダへ移動
cd MyApp
cordova platform add ios android
cordova build ios
下記の様なエラーが出るのでxcodeでMyApp内のplatformのios更にMyApp.xcworkspaceよりプロジェクト開き
Signing for “MyApp" requires a development team. Select a development team in the project editor.
Code signing is required for product type 'Application' in SDK 'iOS 10.2’
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/bdfa5fe7-3267-e6a6-630c-ba6138101fad.png" width="60%">
Teamを選択設定を実行し再度buildとrunを実行する。
cordova run ios
更にandroid studioを生成
ordova prepare android
cordova build android
上記処理後xcodeまたはandroid studioそれぞれの開発ツールにて開き実行すると
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/856ee1e2-faa8-a138-73c5-6b349b38a531.png" width="50%">
[Rails]rails sの時のエラー

rails sを行なった時のエラーの解消方法を書いて行きたいと思います。
私はこれで直りましたが皆が当てはまるかは分かりません。よろしくお願いします！

##環境
・macOS Catalina
・Rails 5.2.0
・Ruby 2.5.0

## エラー文

```ruby:terminal
$ rails s
Traceback (most recent call last):
	4: from bin/rails:3:in `<main>'
	3: from bin/rails:3:in `load'
	2: from /Users/name/App/Parttime-job/bin/spring:8:in `<top (required)>'
	1: from /Users/name/.rbenv/versions/2.5.0/lib/ruby/2.5.0/rubygems/core_ext/kernel_require.rb:59:in `require'
/Users/name/.rbenv/versions/2.5.0/lib/ruby/2.5.0/rubygems/core_ext/kernel_require.rb:59:in `require': cannot load such file -- bundler (LoadError)

```

##試したこと
パソコンに入っているbundlerとRailsプロジェクトのGemfile.lockに書いてあるbundlerのバージョンが違っていたのでとりあえずそこのバージョンを合わせました。

バージョン確認

```ruby:terminal
$ bundler -v 
```

bundlerバージョン変更
ご自身のbundlerのバージョンに合わせてバージョンを変更して下さい。

```ruby:terminal
$ gem install bundler -v 1.3.0
$ gem uninstall bundler -v 2.1.4
```
そして

```ruby:terminal
$ bundle update --bundler
```

##試したこと(2)
これは私だけかもしれませんがterminalで確認したRubyのバージョンとRailsのGemfileにあるRubyのバージョンが違っていたのでそこのバージョンを合わせました。

インストールするバージョンを確認

```ruby:terminal
$ rbenv install -list
```
バージョンを指定してインストール

```ruby:terminal
$ rbenv install 2.5.0
```
バージョンを確認してインストールできたか確認

```ruby:terminal
$ rbenv versions
```
バージョンを変更

```ruby:terminal
$  rbenv local 2.6.3
```
バージョンを変更したらrehash

```ruby:terminal
$  rbenv rehash
```

以上で私はrails sができました。
 
##最後に
今回、以上の方法でエラーが直りましたがもしかしたら正しい方法ではないかもしれませんが何か役にたったら嬉しいです！
読んで頂きありがとうございました！！
vs codeのBetter Commentsの設定の仕方

vscodeの拡張機能の「Better Comments」を使いたいんですが、
インストール後の設定をどこですればいいかわかりません。
setting.jsonとかに直接書くのですか？

教えてください。

2017年の記事に載ってるのでは古いみたいです。
http://baba-s.hatenablog.com/entry/2017/12/21/210800

よろしくお願いします。
rollup-plugin-babelのmodules:falseがuseBuiltIns:"usage"で効かない

## 概要
rollup + babel の構成。
node_modules以下もbabelに含めたい。
polyfillもしたい。
node_modules以下のjsに対しても、それらが使うものを見て、@babel/preset-envのuseBuildIns:"usage"で自動でcorejsからimportしてほしい。

しかし無理だった。
```Error: 'default' is not exported by ...```エラー

rollup-plugin-babelを使うためには、@babel/preset-envのmodules:falseの設定を入れなければいけない。
しかし、useBuildIns:"usage"を指定した瞬間、(おそらくは)modules:falseが無視され、rollup-plugin-babelが動かなくなる。

諦めてuseBuildIns:"entry"にしたら、動いたとさ。
悲しい。


## versions
rollup v2.0.2
rollup-plugin-babel 4.4.0
rollup-plugin-commonjs 10.1.0
rollup-plugin-node-resolve "5.2.0
@babel/core 7.8.7
@babel/preset-env "7.8.7
core-js: 3.6.4

## 詳細
rollup-plugin-babelで@babel/preset-envの設定をするときは、modules:falseにしないとだめ。なぜなら、commonjsをesmoduleに変換するのはrollupのrollup-commonjsの役目であり、babelの役目ではないから。

```
{
  "presets": [
    ["@babel/env", {"modules": false}]
  ]
}
```

via https://rollupjs.org/guide/en/#babel

> There are a few unusual elements to this setup. First, we're setting "modules": false, otherwise Babel will convert our modules to CommonJS before Rollup gets a chance to do its thing, causing it to fail.


しかしながら、polyfillをするために、useBuiltIns:"usage"をつけてみる

```
{
  "presets": [
    ["@babel/env", {
      "modules": false,
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}
```

すると、Error: 'default' is not exported by ... エラーが出るようになってしまった。modules:falseをつけてないときに出るやつだ。
modules:falseが無効化されているのでは？と仮設を立てた。

こんな事を言っている人がいた

https://github.com/babel/babel/issues/9625#issuecomment-493620080

> Babel can only find used methods in files it transpiles. If you need some polyfills for files Babel doesn't even see (e.g. if you are not transpiling node_modules), you'll need to manually include them (or use useBuiltIns: entry).

> 翻訳: Babelは、使用するメソッドを、トランスパイルするファイルでのみ見つけることができます。 Babelに表示されないファイルにポリフィルが必要な場合（たとえば、node_modulesをトランスコンパイルしていない場合）、それらを手動で含める必要があります（またはuseBuiltIns：エントリを使用します）。

うーむ、つまり node_modulesを含めるbabel設定の場合、node_modulesの先をbabel自身でトランスパイルしないと、useBuiltIns:"usage"の動作はできなく、そのオプションを付けるとmodules:falseを無視してbabelが再びcommonjs変換をしようと張り切るのではないか？

結局それが本当かどうかわからないが、useBuiltIns:"usage"を諦めて、useBuiltIns:"entry"にして、 ```import "core-js";```とentry fileに書いたら治った。

きっとそんな感じなんだろう。

## 私の設定ファイル

- rollup.config.js
- main.js
- dist/
    - main.js
- node_modules/
    - hoge(なにかpolyfillが必要 且つ esnext syntaxで書かれている babelにかけたいやつ)

```javascript:main.js
import hoge from 'hoge'
import 'core-js'

console.log(hoge());
```

```javascript:rollup.config.js
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'

export default {
  input: 'main.js',
  output: {
    dir: './dist',
    format: 'iife'
  },
  plugins: [
    babel({ // .babelrcは使ってない
      presets: [
        [
          "@babel/env",
          {
            modules: false,
            useBuiltIns: "entry",
            corejs: 3
          }
        ]
      ]
    }),
    commonjs(),
    resolve()
  ]
}
```


## 蛇足
私はtypescript派なので、わざわざbabelを使う理由としては、polyfillのuseBuildIns:"usage"の動作が好きだからだけだった。しかしこんな体たらくなのであれば、もはやtsc + babelの多段構成をする理由はないな。もうtscだけで終わらせてしまおう。そう思った。

ﾄﾞｳｼﾃｺﾝﾅﾆｸﾙｼｲﾉ？
Node.jsで簡単にサーバーを立てる

Node.jsでサーバーを立てるモジュールについて書きます。

# 前提条件
- npmがインストールされていること
- package.jsonがあること

# インストール
```shell
$ npm install -D http-server
```

# 使い方
## 設定

`npm run server`コマンドで`http-server`を動かすように定義します。

```json:package.json
{
  "scripts": {
    "server": "http-server -o"
  }
}
```

## 実行
npmコマンドを実行します。

```shell
$ npm run server
```

## 出力結果
```console
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
```

出てきたパスを叩けば現在のディレクトリのファイルを見ることができます。

# 参考文献
この記事は以下の情報を参考にして執筆しました。

- [http-server - npm](https://www.npmjs.com/package/http-server)
【Laravel】カスタムディレクティブを定義し、タイトル補完処理をviewから呼び出す

# 環境
- Laravel Framework 6.14.0

# やりたいこと
以下Railsチュートリアルのように、タイトル補完用のメソッドを定義しviewから直接呼び出したい。
https://railstutorial.jp/chapters/rails_flavored_ruby?version=5.1#sec-custom_helpers

```erb

<title><%= full_title(yield(:title)) %></title>
```

# 事前調査
<font color="Red">※この用途ならヘルパ関数自作するほうが良さそうなので、以下は参考程度にしてください。</font>

公式ドキュメントによると、カスタムディレクティブを定義すればいけそうです。
**処理に変更があった場合、キャッシュの削除が必要**みたいです。面倒くさいですね。

> Blade拡張
https://readouble.com/laravel/6.x/ja/blade.html#extending-blade
>> Bladeではdirectiveメソッドを使い、自分のカスタムディレクティブを定義できます。Bladeコンパイラがそのカスタムディレクティブを見つけると、そのディレクティブに渡される引数をコールバックへの引数として呼び出します。

>> Note: Bladeディレクティブのロジックを更新した後に、Bladeビューのキャッシュを全部削除する必要があります。view:clear Artisanコマンドで、キャッシュされているBladeビューを削除できます。

# 実装
full_titleディレクティブを定義します。
引数が無い場合はサイト名をそのまま返し、引数がある場合は「タイトル | サイト名」の形式で返します。
どうやらPHPタグを返さなきゃいけないようなのでそうします。
（参考: https://www.slideshare.net/ShoheiOkada/laravel-blade-107130164 ）

```php:app/Providers/AppServiceProvider.php

use Illuminate\Support\Facades\Blade;

        Blade::directive('full_title', function ($title) {
            if ($title === "") {
                return "<?php echo 'サイト名'; ?>";
            }
            return "<?php echo $title.' | サイト名'; ?>";
        });
```

一応、ロジックを更新(追加)したのでビューのキャッシュを削除します。

```shell

php artisan view:clear
```

ビューからよしなに呼び出します。

```php

@section('title')
    @full_title('タイトル')
@endsection
```

引数なしでも動きました。

```php

@section('title')
    @full_title()
@endsection
```

動的な値を渡したいときはこんな感じ。

```php

@section('title')
    @full_title($item->id)
@endsection
```
学習記録（２日目）#BeautifulSoupによるスクレイピング

# 学習内容
* BeautifulSoupによるスクレイピング

## BeautifulSoupによるスクレイピング
HTMLやXMLから情報を抽出し解析を行うライブラリ。ダウンロード機能はないので、`urllib`と併用して使う。

以下、BeautifulSoupの基本的な使い方

~~~python
# ライブラリのインポート
from bs4 import BeautifulSoup

html1 = """
<html><body>
    <h1>スクレイピング</h1>
    <p>Webページの解析</p>
    <p>任意の箇所の抽出</p>
</body></html>
"""

# HTMLの解析
soup = BeautifulSoup(html1, 'html.parser')

# 任意の要素を抽出
h1 = soup.html.body.h1
p1 = soup.html.body.p
p2 = p1.next_sibling.next_sibling

print(h1.string)
print(p1.string)
print(p2.string)
~~~
実行結果
>スクレイピング
>Webページを抽出
>任意の箇所の抽出

  
`BeautifulSoup`と`urllib`の併用によるスクレイピング

~~~python
# ライブラリのインポート
import urllib.request as req
from bs4 import BeautifulSoup

url = "https://api.aoikujira.com/zip/xml/1500042"

res = req.urlopen(url)

# urlopen()で取得したデータを解析
soup = BeautifulSoup(res, 'html.parser')

ken = soup.find("ken").string
shi = soup.find("shi").string
cho = soup.find("cho").string

print(ken, shi, cho)
~~~


## 参考文献
参考にした書籍から公開されているGitHubを添付しておきます。
[増補改訂Pythonによるスクレイピング&機械学習 開発テクニック](https://github.com/kujirahand/book-python-scraping)
[Django]フォーム入力画面でメッセージを表示する

# 表示されるメッセージのイメージ

※bootstrapを使用していることが前提です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64293/f947ec0f-2361-4c54-a3be-d1ea3debdef9.png)

# 設定する箇所

* views.py
* settings.py
* html

# views.py

* FormViewクラスを継承し、form_validメソッドをオーバーライド
* messages.success(self.request, 'メッセージを送信しました。')で成功時のメッセージを設定

```py

class InquiryView(FormView):
    template_name = "inquiry.html"
    form_class = InquiryForm
    # success_urlは指定されたurlにリダイレクト（バリエーションに問題がなければ）
    # reverse_lazyでurlを逆引きできる。ハードコーディングは避ける。reverse関数の遅延評価版。
    success_url = reverse_lazy('app_name:inquiry')  # <urls.pyのapp_name>:<ルーティングにつけたname>

    def form_valid(self, form):
        """
        FormViewのメソッドをOverride
        Validationに問題がなければ実行される
        formオブジェクトにユーザの入力値が格納されている
        """
        messages.success(self.request, 'メッセージを送信しました。')

        return super().form_valid(form)

```


# setting.py

* {{ message.tags }} にレベルに応じたメッセージが反映される
* Bootstrapに対応

```py

MESSAGE_TAGS = {
    messages.ERROR: 'alert alert-danger',
    messages.WARNING: 'alert alert-warning',
    messages.SUCCESS: 'alert alert-success',
    messages.INFO: 'alert alert-info'
}
```

# html

```html

    {% if messages %}
    <div class="container">
        <div class="row">
            <div class="my-div-style w-100">
                <ul class="messages" style="list-style: none;">
                    {% for message in messages %}
                    <li {% if message.tags %} class="{{ message.tags }}">
                        {% endif %}
                        {{ message }}
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    {% endif %}
```
Ubuntuで使う言語のインストール方法とか環境構築とか

最近はバックエンド言語毎にVMで環境用意して勉強したりしてて、その環境構築方法の管理を最近はGistでしてるのですが、何となくQittaに。※※但し、Gistは英語で書いてるので。

# environment
- host OS: Windows
- VM: Virtual Box with Vagrant
    - Ubuntu 18.0

[**CUIまたはGUIの仮想環境をUbuntuを使って構築するのはこっち。**](https://qiita.com/OriverK/items/115c0c4d3c25c89327bc)

# Ruby on Rails
## Install latest version
```sh:terminal
# install in one time
sudo apt install autoconf bison build-essential libssl-dev libreadline-dev zlib1g-dev libncurses5-dev libffi-dev libgdbm-dev

# install rbenv
# rbenv is tool to manage a few of ruby versions and enable to change ruby ver. project by project.
git clone https://github.com/rbenv/rbenv.git ~/.rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
source ~/.bashrc
git clone https://github.com/rbenv/ruby-build.git "$(rbenv root)"/plugins/ruby-build

# Install ruby
rbenv install --list
rbenv install 2.〇.〇
rbenv global 2.〇.〇

# Instal yarn
# Rails6 needs webpacker, and Webpacker needs yarn to install
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install yarn

# Install Rails
gem install rails --no-document

# install webpacker
# inner App
rails webpacker:install
```

## Install RubyonRails by "apt install"
```sh:terminal
sudo apt install -y ruby ruby-dev build-essential
sudo apt install yarn

sudo gem install rails
```
- "-y" means "All Yes"
- build-essential contain information about package to build Debian pack.
  - If do not build Debian, build~ is not needed
  - [Reference](https://packages.debian.org/ja/sid/build-essential)

# Nodejs
rails6 uses webpacker, which needs nodejs

```sh:terminal
# first, install nodejs and npm
sudo apt install -y nodejs npm

# install n-package
sudo npm install n -g

# by n-package, install node
sudo n stable

# uninstal old nodejs and npm, and re-login
sudo apt purge -y nodejs npm
exec $SHELL -l

# confirm
node -v
```

# Rust
when discord changed golang to Rust, I just tried this and coded a little.

```sh:terminal
sudo apt install build-essential

# install rust
curl https://sh.rustup.rs -sSf | sh

# add the pass
source $HOME/.cargo/env
```
# Java
```sh:terminal
sudo apt update
sudo apt install git
sudo apt install openjdk-11-jdk

# confirmation
java --version
```

# PHP
# Python
SourceTree Git Flow機能

## GitFlow

![gitflow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70435/b5aba849-d493-6360-e8b1-b2668202bd07.png)

https://qiita.com/KosukeSone/items/514dd24828b485c69a05

----
# GitFlow機能
GitFlow運用を少し便利にする機能。
SourceTree以外にも
- fork
- gitkraken

などにも標準搭載。

----
# GitFlow機能で何が嬉しいのか
- GitFlow初心者の補助
- future(featureのタイポ)を防げる
- マージミスを防げる
- マージしたブランチの削除し忘れを防げる
- バージョンtagの付け忘れを防げる

かもしれない

----
## 初期設定
Shift + Alt + Fを同時押しします。
リポジトリを初期化 をクリック
リポジトリの初期値の設定画面が開きますが、そのままOKをクリックします。

初期化とありますが、gitflowの初期設定をしているだけですのでご安心ください。
リポジトリに影響はしません。

----
## featureブランチの作成
Shift + Alt + Fを同時押しします。
次のFlow操作ウインドウが表示されます。
新規フィーチャーを開始をクリックします。
![new_feature.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70435/ba91b977-cfd4-0895-be45-ebe1b0799eed.png)


----
feature名を入力してOKをクリックします。
(feature/は書かなくてよい！）
![feature_name.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70435/95cb974b-3e81-cf4e-907a-bff36b61a7a8.png)

----
## featureブランチのマージ
Shift + Alt + Fを同時押しします。
フィーチャーブランチを完了をクリックします。
![finish_feature.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70435/ed7e63cb-d696-229c-b5ba-fe5876558cf3.png)

フィーチャー名を選びOKをクリックします。
![finish_feature2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70435/1a75ce32-d15c-1818-beb1-de7b8994a7e0.png)

----
## release作成, masterマージとバージョンタグ付け

----
## releaseを作成
Shift + Alt + Fを同時押しします。
新規リリースを開始をクリックします。
![new_release.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70435/61253008-f8d0-6d8e-8d0c-a5825de41d94.png)

----
## releaseブランチ名 ≒ version名の入力

![version.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70435/4ab60872-1474-0af3-be58-66e738bdb9bf.png)

----
## プロジェクトのバージョン設定を変更
プロジェクトのバージョンファイルを書き換えてコミットします。
![commit_version.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70435/c53b0685-7413-3f79-cb47-24611dbb4df7.png)

----
## リリースの完了と バージョンタグ付け
Shift + Alt + Fを同時押し
リリースを完了をクリックする
![finish_release.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70435/4f045d2b-4f75-5cd7-aed8-94daa9522d9e.png)

----
OKをクリックします。
![finish_release2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70435/93c0e0e2-7dae-868a-67e3-d096b1a60b24.png)

----
# masterにマージ完了
次が完了します。
- releaseをmasterにマージ
- developにもマージ
- バージョンタグ付け
- 不要なブランチ削除
![final.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70435/3bc7227e-6cb8-8a0a-73da-47c47004e00a.png)

----
## 独自ブランチを作るには?
gitflowにないものは作れません
- 「bugfix/hoge」ブランチは作れませんので「feature/bugfix_hoge」で代用してください。
- featureにfeatureを生やすなどもできないので、一度featureを完了してからfeatureを作成してください。
Unity 2019.3.4f1などのAssembly-CSharp.csprojでPackageのアセンブリ参照が行われていない場合

2020/03/25追記
・Open C# Projectを行うときにインターネットに接続する必要がある可能性があります。


こんにちは、Densyakunです。

Unityをアップデートしてゲームを開発していたら、
VSCode（OmniSharp）にて、
一部の参照（すべてUIやEventSystemsなどのPackage）に、
`OmniSharp.MSBuild.ProjectLoader does not exist`
というエラーが出ており、
参照が見つからないようでした。

しかしUnityEngineなどは正常に参照できています。

パスを見るとUnityプロジェクトフォルダ内を参照しようとしており、
Assembly-CSharp.csprojを確認すると、
パスが書かれていませんでしたが、
Unityがcsprojを管理しているため書き換えても直りません。

以前他の問題で参照のエラーが起きていたときの解決策として、
.csprojを削除してから、
Assets>Open C# ProjectまたはProjectタブを右クリック>Open C# Projectで、
.csprojを再生成してみたのですが、直りませんでした。

# 解決
どのバージョンからなのか、いつからかは知りませんが、
私がアップデートしたUnity 2019.3.4f1では、
**Package毎に.csprojファイルが分割されている**ため、
Assembly-CSharp.csprojには、Packageを除いた基本的なものしか参照がありませんでした。

**Edit>Preferences...**でUnity本体の設定（バージョンごとに設定が分かれています）を開き、
**External ToolsのGenerate all .csproj files.にチェックを入れる**ことで、
**すべての.csprojファイルを生成するようにします。**

それから**.csprojを削除して**、
Assets>Open C# Projectまたは**Projectタブを右クリック>Open C# Project**で、
**.csprojを再生成すると直ります。**

バージョンごとにUnityの設定が分かれていること、
新しい設定がオフになっていることにより、
デフォルトでAssembly-CSharp.csprojしか生成しないようになっているため、
このようなことになっていました。

解決はしたのですが、
以前よりOmniSharp（C#拡張機能）の起動時間が、
遅くなりました。

検索しても解決方法が載っておらず、
自分で調べることで解決することができましたので、
記事にしました。
以上です。
chromiumの起動時に「ページを復元しますか？」のダイアログを出さないようにする

https://superuser.com/questions/461035/disable-google-chrome-session-restore-functionality/864918#864918

のやり方を試してみる。

```sh
#!/bin/sh
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/' ~/.config/chromium/Default/Preferences
sed -i 's/"exit_type":"Crashed"/"exit_type":"None"/' ~/.config/chromium/Default/Preferences
exec chromium-browser --check-for-update-interval=31536000 --noerrdialogs --disable-infobars --kiosk https://staging.hec-eye.jp/
```

ネタ元のsedコマンドではマッチさせる文字列にスペースがはいっていたが、Chromium78ではスペースははいっていなかったので、その点が注意。
jqとかでプロパティを書き換えるようにしたほうが確実そうではある。
nanolog, C++11 で python "{}" 記法をサポートした小さいロギングライブラリ

## 背景

* 主にグラフィックス系 C++11 アプリでロギングほしい
  * 演算メインのときではあまり print しないが, データロードとかセーブのときとかにログを出したい
  * デバッグ用にベクトルの値とかをプリントしたい
  * ログ処理速度はそんなに高速である必要はない. しかしコンパイルは早くしたい
  * すごい機能がいっぱい欲しいわけでなく, python の "{}" のような表記が使えれば OK

## 既存ライブラリ

* spdlog https://github.com/gabime/spdlog : "{}" 記法が使える. 今まで 3, 4 年ほどメインで使っているが, テンプレートいっぱい使っているのでコンパイル遅い(実際には spdlog が利用している fmtlib が主にコンパイル遅い. non-header only にするとコンパイル早くなると記述があるが, やっぱりそれでも遅い).
  * あと, なぜか Android NDK r20+ clang で C++14 モードだとコンパイルに失敗する
* glog : ビルドシステムとコードが古臭い. ストリーム記法しかない. 他のサードパーティライブラリが glog 使っていると, メインのアプリと干渉したり, またマクロ名が衝突したりすることがあり面倒になる
  * Ceres solver から抜き出した miniglog https://github.com/tzutalin/miniglog はそこそこいい感じだが, いずれにせよストリーム記法しかなくて不便 

=> 本当に欲しい機能というはそんなにあるわけでないので, 自作しました.

## nanolog

https://github.com/lighttransport/nanolog

```
#include "nanolog.hh"

// logging method
NANOLOG_TRACE("The answer is {}", 42);
NANOLOG_DEBUG("The answer is {}", 42);
NANOLOG_INFO("The answer is {}", 42);
```

こんな感じで使えます.

デフォルトでは自前処理ですが(`{}` を `operator<<` で得た文字列で置き換えるだけ. コンパイル時引数型チェックなどはしない), backend として pprintpp と fmtlib を使えます.

### pprintpp

python の "{}" 表記を実現するのに,

Typesafe Python Style Printf Formatting for C++
https://github.com/tfc/pprintpp 

をバックエンドに使っています.
(fmtlib backend もあります. コンパイルは pprintpp のほうが fmtlib に比べて 4~5 倍は早いです)

printpp も template で "{}" をパースしたりしてコンパイル型チェックしてくれます.
実装がテンプレートバリバリでよくわからない :cry: ので, みなさん是非解析してみてください.

実装的には, AUTOFORMAT マクロで, ("{}", 1) が与えたれたときに, フォーマット文字列を "%d" にコンパイル時に置き換えるというのをしています.

ただ, pprintpp ではいくつか制約があります. TODO にあるように文字列型がうまく扱えません. また対応していない型だと seg fault したりします. うまくいかなければ fmtlib を使うようにしましょう.

### NANOLOG_XXX

`__LINE__`, `__func__` あたりはマクロを使わないと実現できないので, ログ関数のエントリはマクロになっています.

nanolog の内部実装的には,  printf するところだけ mutex で lock_guard 入れて multi-thread safe にしているという単純なものです.

## TODO

* [ ] pprintpp で `const char *` を print すると, 文字列ではなくアドレスが表示されるのを直す
* [ ] 精度はあまり求めないので, 高速な unix epoch time -> 時刻文字列生成を行う(既存のライブラリで, locale を考慮するといろいろ遅くなるみたいな噂を聞いた) 
* [ ] ログが多量に生成されるのを防ぐために, `__FILE__`, `__LINE__` の値を見て, 前回から log 出したあと N 秒内のメッセージは suppress するとか, M 回表示したらそれ以降は suppress するとかの機能を実装する
  * グラフィックスアプリで, pixel ごとに log を出す場合にエラーメッセージが大量に出力されてしまうのを防ぐときなどに役立つ.
欠損値を特定の値で埋める

##欠損値nanを埋めたいときに


###検証準備

```python
#使用モジュール
import numpy as np
import pandas as pd

data=pd.DataFrame(np.arange(12).reshape(3, 4),columns=['col_0', 'col_1', 'col_2', 'col_3'],
                  index=['row_0', 'row_1', 'row_2'])

#Nanを入れる
data.loc['row_0','col_1']=np.nan
data
```

![cap1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403057/4bab3eec-9287-d825-44eb-f8a8506cbd80.png)



###NaNを埋める
```python

#Nanを100で埋める
filldata=data.fillna(100)
filldata
```

![cap2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403057/15984432-7d20-1e97-5e93-f65823389509.png)


できた！

######ちなみにdataを直接書き換えていないので注意
```python
#もとのdataを表示
data
```

![cap3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403057/8c862dd7-8041-f20b-4af4-5c538144d5fc.png)



###参考URL

[Pandasで欠損値処理](https://qiita.com/0NE_shoT_/items/8db6d909e8b48adcb203)

[pandas.DataFrameの構造とその作成方法](https://note.nkmk.me/python-pandas-dataframe-values-columns-index/)

[【NANって何だ？】意味・pythonでの使い方を解説します！](https://www.sejuku.net/blog/68519)
UnityでVisual Studioの自動補完/候補が出ない

##経緯
新しいPCでUnityを始めた際に、VisualStudioで予想変換/自動補完（インテリセンス）が出なくて困っていました。今まで使っていた環境では「g」と入力すれば、「GameObject」が候補に出たのに……

##症状
[こちらの記事](https://qiita.com/AM23Ti/items/b03d7d58ca92890c8d00) を参照しましたが
そもそもソリューションウインドウ上でも更新マーク(\:arrows_counterclockwise:)も表示されず。

##原因
Unity側のC#のエディタがVisualStudioになっておらず
C#スクリプトがUnityのProjectと紐づいていませんでした。
ソリューションファイル(.sln)も作成されていませんでした。

##対応
Unity側のC#のエディタをVisualStudioに設定します。

- [UnityでVisualStudioをデフォルトのエディタに設定する](https://qiita.com/nishiken1235/items/94634a07551fc8d54c0e#)

##結果
無事にインテリセンス（自動補完/候補）が表示されるようになりました。
![gameObject.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563652/687c57ad-82f9-5be9-d163-f6f395cc9acf.png)

以上です。
お疲れ様でした。

##参考
- [UnityでVisual Studioのインテリセンス（自動補完/候補）が出ない](https://qiita.com/AM23Ti/items/b03d7d58ca92890c8d00)
- [UnityでVisualStudioをデフォルトのエディタに設定する](https://qiita.com/nishiken1235/items/94634a07551fc8d54c0e#)
HTMLの大枠

##HTMLの大枠
HTMLの大枠にはheader/div/footerなどがあります。
【例】

```
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Qiita</title>
  </head>
  <body>
    <header>
    </header>

    <div class="contents">
    </div>

    <footer>
    </footer>
  </body>
</html>
```
##＜header＞...＜/header＞
ヘッダーを示す専用の要素です。
##＜div＞...＜/div＞
classセレクタを付与して使用します。
##＜footer＞...＜/footer＞
フッターを示す専用の要素です.
##heightプロパティ
要素の高さを決めるプロパティです。px数や%などで指定することができます。
##widthプロパティ
要素の幅を決めるプロパティです。px数や%などで指定することができます。
【例】

```
.contents {
  height: 400px;
  width: 960px;
}
```
これで高さと幅を指定できます。
プロパティはいろいろあるのでその時々で調べながらやっていきましょう
[参考](http://www.htmq.com/css3/)
##img要素
img要素を使うと、Webサイトで画像を表示させることができます。画像がどこにあるのかという場所を指定するsrc属性、画像が表示されなかった場合に代替テキストなどを表示するためのalt属性を指定して使います。
【例】

```
<img src="image.jp"alt="imagename"class="contents"
```
##form要素
お問い合わせフォームなどを表すブロック要素です。
##input要素
フォームの入力欄や実行ボタンなどを作成することができる要素です。input要素にはtype属性があり、それを指定します。

| type属性 | 用途 |
|:-----------------|------------------:|
| text | １行のテキスト入力欄を作成します |
| checkbox | チェックボックスを複数作成することができます |
| radio | 複数の中から１つしか選択できない、ラジオボタンを作ります |
| submit | 送信ボタンを作ります |
##textarea要素
複数行のテキスト入力欄を作成する要素です。
##value属性
送信ボタンを押したときに、どの値が送られるのかを決めることができます。
##placeholder属性
入力フォームに仮の文字列を入れることができます。
##label要素
フォームのtype属性、例えばラジオボタンとテキストをlabel要素で囲むことによって、文字の部分をクリックしたときもラジオボタンを選択することができます。
##select要素
フォームの選択メニューを表す要素です。選択肢全体を囲みます。
##option要素
メニューの選択肢を作成するときに使用します。option要素で指定する選択肢は、select要素の間に記述します。
【例】

```
        <form>
          <input type="text" placeholder="文字の入力"><br>
          <textarea placeholder="複数行の文字"></textarea><br>
          <label>
            <input type="radio" name="RadioGroup" value="0">男性
          </label><br>
          <label>
            <input type="radio" name="RadioGroup" value="1">女性
          </label><br>
          <select>
            <option value="0">20才未満</option>
            <option value="1">20才以上</option>
          </select>
          <div class="contents">
            おはようございます<br>
            <label>
              <input type="checkbox" name="Checkbox" value="0">
                こんにちわ
            </label>
            <label>
              <input type="checkbox" name="Checkbox" value="1">
                おやすみ
            </label><br>
          </div>
          <input type="submit" value="送信">
        </form>
```
【最小限】 Go ライブラリの公開方法

自作した Go の package を公開する方法を書いていきます。
実運用する package を公開する際は、テストを書いたりしてください。

# 自分の GOPATH のありかを知る

```
$ go env GOPATH
/Users/[username]/go
```

# hello だけを返す package を作成する

```
$ mkdir -p [得たGOPATH]/src/github.com/[username]/hello
$ cd [得たGOPATH]/src/github.com/[username]/hello
$ go mod init github.com/[username]/hello
$ touch hello.go
```

```go
package hello

func Hello() string {
	return "Hello"
}
```


# 公開する

```
$ git init
$ git remote add origin [GitHub上で作成したリポジトリのURL]
$ git add .
$ git commit -m 'Initial commit'
$ git push origin master
```

# 適当なファイルから作成した package を利用できるか確認する

```go
package main

import "github.com/[username]/hello"

func main() {
	println(hello.Hello())
}
```

```
$ go run main.go
Hello
```

利用できることを確認できたら、実際に使えるレベルの package を作っていきましょう😊
ASP.NET CoreでWeb APIのパスにバージョン情報を入れてみた

Web APIを作成することになりました。「とりあえず動くもので良い」という指示が、とても不安です。絶対、仕様変更がたくさん入ります。

というわけで、よくあるAPIバージョンをパスに入れてみることを検討することにしました。参考にしたのは次のURLです。

- [RESTful APIのURI設計(エンドポイント設計) > 6. バージョン番号が含まれたURI](https://qiita.com/NagaokaKenichi/items/6298eb8960570c7ad2e9#6-%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E7%95%AA%E5%8F%B7%E3%81%8C%E5%90%AB%E3%81%BE%E3%82%8C%E3%81%9Furi)

Qiitaに近い`http://qiita.com/api/v2/`な感じのURLを目指すことにします。

# ASP.NET CoreでWeb APIのパスにバージョン情報を入れるには
実は詳細なサンプルがあるので、これに倣います。
- [Versioning via the URL Path](https://github.com/microsoft/aspnet-api-versioning/wiki/Versioning-via-the-URL-Path)

## Web APIプロジェクトを作成する
ASP.NET Core Web アプリケーション > APIで、サンプルを含んだプロジェクトが作成されます。

実行すると、`https://localhost:44376/weatherforecast`をブラウザで起動します。これを変更するには、プロジェクトのプロパティ > デバッグ > 「ブラウザーの起動」の値を設定することで実現できます。

## プロジェクトにAPI Versioning拡張を追加する
おもむろに`services.AddApiVersioning();`を`Startup.cs`の`ConfigureServices`に追加します。

```c#
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
    services.AddApiVersioning();
    services.AddControllers();
}
```

## パス（Route）を書き換える
`WeatherForecastController.cs`の`WeatherForecastController`クラスのパス（Route）を書き換えます。

```c#
[Route("api/v{version:apiVersion}/[controller]")]
public class WeatherForecastController : ControllerBase
{
   ...
}
```

## バージョン番号を設定する
Qiitaのバージョン番号は整数のようですが、好みとしては小数点が入ってる方です。そこでとりあえず、`1.0`を設定してみます。

```c#
[ApiVersion("1.0")]
[Route("api/v{version:apiVersion}/[controller]")]
public class WeatherForecastController : ControllerBase
{
   ...
}
```

ここで実行してみると、`https://localhost:44376/weatherforecast`（ポート番号は違うかもしれませんが）をブラウザで起動し、404エラーになります。が、構わず`https://localhost:44376/api/v1.0/weatherforecast`に接続してみると、正しくJSONデータが表示されるようになります。

## マイナーバージョンを追加する
バージョン`1.1`を追加してみます。

```c#
[ApiVersion("1.0")]
[ApiVersion("1.1")]
[Route("api/v{version:apiVersion}/[controller]")]
public class WeatherForecastController : ControllerBase
{
   ...
}
```

当然、同じメソッド名は使えないので、異なるメソッド名を作成し、`1.1`をマッピングするようです。結果が分かりやすいよう`Range(1, 5)`を`Range(1, 1)`に変更してみました。

```c#
[HttpGet, MapToApiVersion("1.1")]
public IEnumerable<WeatherForecast> GetV11()
{
    var rng = new Random();
    return Enumerable.Range(1, 1).Select(index => new WeatherForecast
    {
        Date = DateTime.Now.AddDays(index),
        TemperatureC = rng.Next(-20, 55),
        Summary = Summaries[rng.Next(Summaries.Length)]
    })
    .ToArray();
}
```

で、`https://localhost:44376/api/v1.1/weatherforecast`にアクセスしてみると、先ほどは5データ返されていましたが、1データのみ返されるようになりました。

成功、ですね。

# 雑感
あまりに簡単でびっくりしました。
Microsoftさんすごい。

- [今回試したソースコード](https://github.com/hydrangeas/Section9)
基本情報で使う１６進数から２進数の変換一覧

## 基本情報技術者試験の午前問題でよく出てくる１６進数を２進数に変換した一覧をメモしておきます。

16進数　　　２進数
0a 　　→   00001010　
0b 　　→   00001110
0c 　　→   00001100
0d 　　→   00001101
0e 　　→   00001110
0f 　　→   00001111

試験までに覚えて時間短縮を目指します！
Windows10でのRuby on Rails6.0 インストール手順（環境構築）

#目的
環境構築で詰まったのでインストール方法をまとめておいた、windows10、Ruby on Rails導入を目指す
1からやれば何もない状態からrails sまでできるはず

#環境
``` 
windows 64bit
``` 

#構築
**１,Rubyインストール**
[Ruby](https://rubyinstaller.org/downloads/)をインストール今回は2.6.5-1(×64)を導入
![Inkedコメント 2020-03-09 223350_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323263/3331fd65-023f-f3db-76bb-ba8eca629574.jpeg)



ダウンロードしてとりあえず全部NEXT
finish押したらコマンドプロンプト(黒い画面)立ち上がるのでエンター

インストールが終わったらもう一回ENTER押してって出てくるのでエンター
バージョン確認するためにwidows + R押して　cmdって打つとコマンドプロンプト開くので
ruby -v
gem -v
って打ってみたりする

``` コマンドプロンプト.
C:\path>ruby -v
ruby 2.6.5p114 (2019-10-01 revision 67812) [x64-mingw32]

C:\path>gem -v
2.6.14.3
```

上記のようなものが入ってればOK
しっかりバージョンを確認して次へ

**2,bundlerインストール**
bundlerっていうRubyのGemって便利道具を整理してくれるものをインストール
詳しく知りたい人は検索

``` コマンドプロンプト.
gem install bundler
1 gem installed

C:\path>bundler -v
Bundler version 2.1.4
```

**3.sqlite3のダウンロード**
[sqlite3](https://www.sqlite.org/download.html)ここから```dll-winx64``` と```tools-win32-x86```をダウンロードし解凍する
![コメント 2020-03-09 231116.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323263/81c6ed3d-dc8a-36e9-65ae-37f037f24a8d.png)

Rubyインストール時全部NEXT押してたらC:\Ruby26-x64\bin　あたりにruby.exeがあるはずなのでそこに置けばOK
なければ頑張って探す
(window + RでC:\Ruby26-x64\binをコピペしてOKでも飛べる)

sqlite3 --versionとコマンドプロンプトに打って下のようなものが出ればOK

``` コマンドプロンプト.
C:\path>sqlite3 --version
3.31.1 2020-01-27 19:55:54 3bfa9cc97da10598521b342961df8f5f68c7388fa117345eeb516eaa837bb4d6

```

**4.Rails導入**
ようやくRails を導入
コマンドプロンプトに`gem install rails`と打つ

``` コマンドプロンプト.
C:\path>gem install rails
～～～
最後
40 gems installed

C:\path>rails -v
Rails 6.0.2.1
```
**5.Git導入**
Gitというコードを書いた時の変更履歴とか残してくれる便利物をインストール
[Git](https://git-scm.com/downloads)

Git忘れるとファイル生成できないものが多いので必ずインストール
設定は人によって違うがとりあえず全部デフォルトでインストールしても問題ない

**6.Node.js導入**
Node.jsについては詳しくは検索してください！
とりあえずインストールしないと動かないのでインストール！
[node.js](https://nodejs.org/en/download/)

左のほうのwindowsマークからダウンロード&インストール
全部NEXTでOK

**7.yarn導入**
パッケージ管理ツール
これも詳しくはggって！
[yarnpkg](https://classic.yarnpkg.com/en/docs/install/#windows-stable)

こちらもインストールwindows でstableであればそのままインストールしてOK

**8.再起動**
とりあえず再起動しましょう
pathが通っていないので再起動しないとうまく動きません。

```コマンドプロンプト.
node -v
git --version
yarn -v
``` 
上記コマンドで入ってれば数字が出てくるのでOK!

**9.rails new→rails s**
コマンドプロンプトを起動し、わかりやすい場所でrails new ○○(ファイル名)をして作ったファイル名の直下に移動しrails s

http://127.0.0.1:3000

上記URLからYay! You’re on Rails!ってでてきたら終わり！お疲れさまでした。

``` コマンドプロンプト.例
C:/path>mkdir sample
C:/path>cd sample
C:/path/sample>rails new TestApp
C:/path/sample>cd TestApp
C:/path/sample>TestApp> rails s
``` 

#まとめ
windowsでのrails導入まとめている記事が少なかったのでまとめてみました。
後半は詳しく説明すると長くなりすぎるため検索お願いします！
最後までできた方、よかったと思った方は、グッドボタンお願いします！
またアドバイス・不明点ありましたらコメントまでお願いします。
よきプログラミングライフをGLHF!
Mac(HomeBrew)でMySQL起動できない時

# 要約
- ググると色々出てくるがどれもダメで、自分の環境の場合はHomeBrewでMySQLインストールする時に参照されるフォルダのアクセス権が軒並み「取得中」でバグってて必要なものがインストールできていなかったのが原因だったので備忘録。

# 直し方
- 下記URLを参考にbrew関連のフォルダのアクセス権チェック。変になってるのを直したら、一度MySQL関連ファイルは全て消す。
  - ※フォルダのアクセス権は「内包している項目に適用」押しても「取得中」バグには対応してないようなので、chownで頑張った。けど、一度「取得中」のユーザーを消してから「内包している項目に適用」なら修復してくれたかもしれない。

`$sudo chown root:admin /usr/local/xxx`
 
- Ref.) どうしよう！困った時のMac上のMySQLのアンインストール＆再インストール、動作確認手順 - Qiita 
https://qiita.com/akiko-pusu/items/aef52b723da2cb5dc596#brew-%E3%81%A7%E5%85%A5%E3%82%8C%E3%81%9F%E3%82%82%E3%81%AE%E3%82%92%E5%89%8A%E9%99%A4%E3%81%99%E3%82%8B

# 余談
- おそらくMojaveからCatalinaに上げた時に変になったっぽいので、出来ればOSのメジャーアップデート時にはクリーンインストールしたいところ。
PHPでスクレイピングその1

# Goutte

https://github.com/FriendsOfPHP/Goutte

PHPで簡単にスクレイピングを行うことができるライブラリーです。

## 導入

コンポーザーでインストール

```
$ composer require fabpot/goutte
```

もしくは上記Githubから.pharファイルをダウンロードしましょう

あとはソース内で

```test.php
require_once './vendor/autoload.php';
```

や

```test.php
require_once 'goutte.phar';
```

のように読み込んであげて、

```test.php
use Goutte\Client;
```

useしてあげるだけでOKです！

## 使ってみる

https://giftpad.co.jp/company こちらのサイトから

赤枠の部分、良い言葉なので是非PHPで取得したいですね

![campany.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290284/13a61723-4035-2243-4079-46d299ac5a19.png)


XPathを確認して、
![xpath.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290284/acf85819-b590-fce2-1af3-c8527d192d21.png)

ソースに反映

```index.php
<?php

require_once 'goutte.phar';

use Goutte\Client;

// Goutteオブジェクトの生成
$client = new Client();

// ページ情報を取得
$crawler = $client->request('GET', 'https://giftpad.co.jp/company');

// タグを指定
$word = $crawler->filter('div#content div section div div div p')->each(function($element){
    return $element->text();
});

echo $word[0];
```

取れました！
![get.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290284/861e1152-f0ff-b56a-d9a1-764bbd1be763.png)

## 総評

- 簡単に導入できて、XPathやタグの指定で直感的にスクレイピングしやすいと感じました。
- 今回は簡単な紹介でしたが、次回は取得したデータをもとにして何かのツールを作ろうと思います。
Android上でAzure Ink Recognizerを使って手書き文字認識する

# はじめに
スマホやタブレットの上で、図形や文字を混ぜ書きしつつも、文字部分に関しては、裏で手書き文字認識した結果をキーワードなりタグとして記録しておき、あとで検索の時に使いたい、なんてユースケースはよくあるかと思います。

そんな時に使えるのが、Azure Ink Recognizerです。ここではAndroid JavaアプリケーションからInk Recognizerを使う方法をご紹介します。

なお、私はInk Recognizerの担当者ではないので、ここでの記述は、とあるサンデーフルスタックエンジニアの独り言であって、特定のベンダーの保証する内容ではありません。

# 事前準備
Azureのアカウントを用意します。Ink Recognizer(本記事執筆時点ではプレビュー)リソースを作成し、手元にキーとエンドポイントを用意しておきます。

# 利用方法
GitHubに上がっている Azure-Samples/cognitive-services-java-sdk-samples を git cloneして、InkRecognitionディレクトリをAndroid Studioで開いて、ビルドします。

 - Ink Recognition SDK Sample (https://github.com/Azure-Samples/cognitive-services-java-sdk-samples/tree/master/InkRecognition)

これだと英語しか認識されないので、日本語(というかデフォルトロケール)で動作するように手を入れます。

```NoteTaker.java
public class NoteTaker extends View {
    ...
    private final String language;
    ...
    public NoteTaker(Context context) throws Exception {
        ...
        language = Locale.getDefault().toLanguageTag();
        displayMetrics = getResources().getDisplayMetrics();
        inkRecognizerAsyncClient = new InkRecognizerClientBuilder()
            .credentials(new InkRecognizerCredentials(appKey))
            .endpoint(destinationUrl)
            .applicationKind(ApplicationKind.MIXED)
            .language(language)
            .buildAsyncClient();
        ....
    }
}
```

こんな感じで日本語の手書き文字も認識されそうなのだが、認識結果は英語のみ。何度見直してもどこに誤りがあるのかわからず、途方に暮れていたものの、ちゃんとソースコードを読み進めていくと、もう一箇所、言語を設定できるポイントがありました、ということでストローク(手書きの一筆一筆)。InkStrokeImplementorのコンストラクタで言語を受け取るようにします。

```InkStrokeImplementor.java
class InkStrokeImplementor implements InkStroke {
    ...
    InkStrokeImplementor(String language) {
        this.strokeId = getNextNum();
        this.language = language;
        this.kind = InkStrokeKind.UNKNOWN;
    }
    ...
}
```

言語を渡す方は次の通り。先ほど紹介したNoteTakerクラスの中で、メンバ変数としてlanguageにシステムの規定言語を納めているので、そのまま渡すようにします。

```NoteTaker.java
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                path.moveTo(x, y);
                stroke = new InkStrokeImplementor(language);
                ...
        }
        ...
    }
```

あとはアプリをビルドすれば、システムの規定言語で入力した文字を認識してくれるようになります。

# おわりに
分かってしまえば、どうってことのない話ですが、MSのサイトにしても、REST形式での実行サンプルはあっても、Java APIを使うようなケースは(このサンプルアプリ以外は)あまり見ないので、同じように不意にハマってしまう方のお役になっていれば、幸いです。
Jetson Nano (Ubuntu 18.04 LTS)にAudacityをインストールする手順

音声認識にトライしようと思い、音源をいろいろと用意しようとして、Windowsで以前使ったことのあるAudacityをJetson Nanoにインストールしました。
いくつかはまった点があるのでメモを残します。

#参考にしたページ
* [本家のwikiの「Building On Linux」](https://wiki.audacityteam.org/wiki/Building_On_Linux)

#aptでインストール
できませんでした。

```shell-session
sudo add-apt-repository ppa:ubuntuhandbook1/audacity
sudo apt-get update
sudo apt-get install audacity
```
audacity-data  (= 2.2.1-1)に依存しているとかなんとか、よくわからない日本語のエラーが出ました。
インストールしようとしているaudacityのバージョンが2.3.3のようなのでバージョンが怪しいし、まぁないものはないんだろうと思い諦めました。

#ソースからインストール
「Instructions (Used by James on bionic)」のところを参考に、ソースからインストールすることにします。
build-essentialやcmakeはインストール済みなので飛ばして、次のライブラリをapt-getでインストールします。

```shell-session
sudo apt-get install libasound libgtk2.0-dev libgtk-3-dev
```
libasoundがないといわれます。libasound2ならあるようです。

```shell-session
sudo apt-get install libasound2 libgtk2.0-dev libgtk-3-dev
```
インストールできたので、引き続きライブラリ類をインストールします。

```shell-session
sudo apt-get install autoconf automake
sudo apt-get install git git-gui gitk
```

wxWidgetsというのが必要で、これはソースからコンパイルしないといけないようです。

```shell-session
git clone --recurse-submodules https://github.com/audacity/wxWidgets/
cd wxWidgets/
mkdir buildgtk
cd buildgtk
../configure --with-gtk
make
sudo make install
sudo ldconfig
```
そこそこ時間はかかりますが、無事インストールできた模様です。

さて、やっとaudacityのインストール手順です。

```shell-session
cd ../..
git clone https://github.com/audacity/audacity
cd audacity/
mkdir build
cd build
../configure --with-lib-preference="local system"
```
ar のオプション"cru"のuは使えないみたいですね。次のようなエラーが出ました。

```shell-session
ar: `u' modifier ignored since `D' is the default (see `U')
```
ARFLAGSを上書きしてもう一度トライします。

```shell-session
AR_FLAGS="cr" ../configure --with-lib-preference="local system"
```

今度はアーキテクチャがわからないと言ってくるので、アーキテクチャを指定します。

```shell-session
AR_FLAGS="cr" ../configure --with-lib-preference="local system" --build=aarch64-unknown-linux-gnu
```

なぜか-msseに対応していないぞと怒られるので、sseを無効にします。

```shell-session
AR_FLAGS="cr" ../configure --with-lib-preference="local system" --build=aarch64-unknown-linux-gnu --disable-sse
```

やっとconfigureが通ったのでmakeします。

```shell-session
make
sudo make install
```

今度も時間がかかりますが、特に問題なく終わります。

最後に起動してみて立ち上がればOK。
デスクトップメニューの一番上のアイコン（アプリケーションレンズ）から「アプリケーションの検索」に"audacity"と入力し、ヘッドホンのアイコンを選択して起動します。

「このバージョンはアルファ版だからパッケージ版をインストールすることをお勧めするよ」といった趣旨のダイアログが表示されるけれども、OKをクリックしてしまえばAudacityがつかえました。
nanorouterでReactのルーティング処理を簡単に自作する

[nanorouter](https://github.com/choojs/nanorouter)というURLパスのパターンマッチングだけをやってくれるライブラリがあるので、それを使ってReactアプリケーションのルーティング部分を自作します。History APIとかそんなものは知らん。

まずはルーティングの実装。
`nextComponent`変数がイミュータブルじゃないのが気になってしょうがない。

```jsx:Route.js
import React from 'react';
import nanorouter  from "nanorouter"

export const Route = routes => {
  const router = nanorouter({ default: '/' })
  let nextComponent = null

  Object.keys(routes).forEach(path => {
    router.on(path, param => { nextComponent = routes[path] })
  })

  router.emit(window.location.pathname)

  return (
    <div className="container">
      {nextComponent}
    </div>
  )
}
```

Routeを使うAppコンポーネント

```jsx:App.js
import React from 'react'
import { Route } from './Route'
import { PageA } from './PageA'
import { PageB } from './PageB'

function App() {
  return Route({
    '/hello': <PageA />,
    '/world': <PageB />,
  })
}

export default App;
```

ルーティングするページふたつ

```jsx:PageA.js
import React from 'react';

export const PageA = () => {
  return (
    <div>This is page A</div>
  )
}
```

```jsx:PageB.hs
import React from 'react';

export const PageB = () => {
  return (
    <div>This is page B</div>
  )
}
```

nanorouterは機能が少なくて使いやすいが、設計がイミュータブルじゃないのが若干微妙。
パスに該当するデータを返す関数みたいな動きをするルータがあればいいんだが。
SageMath - 楕円曲線関連

# この記事について
SageMathを使って楕円曲線関連の計算をするメモ。不定期で更新します。

# 楕円曲線オブジェクトの作成
```
sage: E = EllipticCurve('11a1'); E
Elliptic Curve defined by y^2 + y = x^3 - x^2 - 10*x - 20 over Rational Field
```

`11a1` はCremonaラベルであり、
[Cremonaの楕円曲線データベース](https://raw.githubusercontent.com/JohnCremona/ecdata/master/allcurves/allcurves.00000-09999)
の1行目のエントリ

```
11 a 1 [0,-1,1,-10,-20] 0 5
```

と対応している。`[0,-1,1,-10,-20]` の部分が楕円曲線のWeierstrass方程式の係数
$a_{1},a_{2},a_{3},a_{4},a_{6}$を表す。
Weierstrass方程式は以下：

```math
y^2 + a_{1}xy + a_{3}y = x^3 + a_{2}x^2 + a_{4}x + a_{6}
```

※$a_{5}$が無かったり、添え字の順番が気になるが、AECの3章に説明あり。

今回の`11a1`の各係数を代入すると

```math
y^2 + 0*xy + 1*y = x^3 + (-1)*x^2 + (-10)*x + (-20)
```

となり、SageMathの出力の $y^2 + y = x^3 - x^2 - 10x - 20$ と一致していることがわかる。

# j不変量

```
sage: E.j_invariant()
-122023936/161051
```

# 対応するモジュラー形式

```
sage: M = E.modular_form(); M
q - 2*q^2 - q^3 + 2*q^4 + q^5 + O(q^6)
```

これでEに対応する重さ2のモジュラー形式が取得できる。

```
sage: M.q_expansion(20)
q - 2*q^2 - q^3 + 2*q^4 + q^5 + 2*q^6 - 2*q^7 - 2*q^9 - 2*q^10 + q^11 - 2*q^12 + 4*q^13 + 4*q^14 - q^15 - 4*q^16 - 2*q^17 + 4*q^18 + O(q^20)
```

q_expansion()関数を使えば、任意の次数まで $q$ 展開を行うことができる。

# 有理点を数えてみる

```
sage: E = EllipticCurve(Zmod(2), "11a1"); E
Elliptic Curve defined by y^2 + y = x^3 + x^2 over Ring of integers modulo 2
sage: E.rational_points()
[(0 : 0 : 1), (0 : 1 : 0), (0 : 1 : 1), (1 : 0 : 1), (1 : 1 : 1)]
sage: len(E.rational_points())
5
```

以上より、$\mathbb{F}_{2}$における有理点は5つなので

```math
a_{2} = 2 + 1 - 5 = -2
```

これは上のモジュラー形式の$q^2$の係数と一致している。

同様に

```
sage: E = EllipticCurve(Zmod(3), "11a1"); len(E.rational_points())
5
sage: E = EllipticCurve(Zmod(5), "11a1"); len(E.rational_points())
5
sage: E = EllipticCurve(Zmod(7), "11a1"); len(E.rational_points())
10
```

```math
a_{3} = 3 + 1 - 5  = -1
\\
a_{5} = 5 + 1 - 5  = 1
\\
a_{7} = 7 + 1 - 10  = -2
```

モジュラー形式の$q^3, q^5, q^7$の係数と一致していることがわかる。

`ap()`関数を使えば、もっと簡単に$a_{p}$が求まる。

```
sage: E = EllipticCurve("11a1")
sage: E.ap(2)
-2
sage: E.ap(3)
-1
sage: E.ap(5)
1
sage: E.ap(7)
-2
```

# `11a1`を経由せずに、重さ2、レベル11のモジュラー形式を作成する方法

```
sage: C = CuspForms(Gamma0(11), 2)
sage: C.dimension()
1
sage: C.q_expansion_basis()
[
q - 2*q^2 - q^3 + 2*q^4 + q^5 + O(q^6)
]
sage: C.q_expansion_basis(20)
[
q - 2*q^2 - q^3 + 2*q^4 + q^5 + 2*q^6 - 2*q^7 - 2*q^9 - 2*q^10 + q^11 - 2*q^12 + 4*q^13 + 4*q^14 - q^15 - 4*q^16 - 2*q^17 + 4*q^18 + O(q^20)
]
```

# `11a1`が極小Weierstrassモデルであることの具体例

```
sage: E = EllipticCurve('11a1'); E.j_invariant()
-122023936/161051
sage: R.<x,y> = QQ[]
sage: E2 = EllipticCurve(y^2 - x^3 + 27*E.c4()*x + 54*E.c6()); E2.j_invariant()
-122023936/161051
```

`11a1`を別の楕円曲線(=E2)に変換しても$j$不変量は変わらない。

```
sage: E.discriminant()
-161051
sage: E2.discriminant()
-350572971995136
```

判別式は変わる。

```
sage: factor(E.discriminant())
-1 * 11^5
sage: factor(E2.discriminant())
-1 * 2^12 * 3^12 * 11^5
```

なので、E2の$p$進ノルムより、Eの$p$進ノルムのほうが大きい。

# リンク
* [SageMath](https://www.sagemath.org/)
* [Elliptic Curve Data by J. E. Cremona](https://johncremona.github.io/ecdata/)
HTMLとCSSの基本的なこと

##HTML
ウェブサイトに表示される情報です。
##css
HTMLに記載された情報を装飾する機能です。
##head要素
ウェブサイトの情報や、参照するCSSファイルを記載する部分です。記述した情報は画面上には表示されません。
##body要素
画面上に表示したい情報を記載します。
HTMLはタグで囲みます。例えば<body>記述する内容</body>となります。終了タグには「/」を必ず入れます。
##<!DOCTYPE HTML>
HTML文章であることを宣言する要素です。
##＜html＞...＜/html＞
HTML文章の始まりと終わりを示す要素です。
##＜span＞〜＜span＞
＜span＞～＜/span＞で囲った部分をインライン要素としてグループ化することができるタグです。
##＜meta＞
文章に関する情報を指定する時に使用します。charset="UTF-8"は文字コードを指定するもので、この記述が無いと文字化けしてしまいます。
【例】

```
<meta charset="UTF-8">  #閉じタグはないです
```
##＜title＞...＜/title＞
ウェブサイトのタイトルを記述する場所です。
【例】

```
<title>Qiita</title>
```

```
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Qiita</title>
  </head>
  <body>
  </body>
</html>
```
上記みたいな感じです。
##head要素からCSSを呼ぶ
head要素内に、HTMLとペアになるCSSのファイルを指定します。
【例】

```
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Qiita<</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  </body>
</html>
```
上記でstyle.cssを呼び出せるようにしました。
＜link rel="stylesheet"＞でCSSファイルを指定し、hrefには実際のファイル名を記載します。hrefはリンク先の場所を指定します。
##body要素の中身の記述
【例】

```
〜省略〜
 <body>
    <h1>
      おはよう
    </h1>
    <p>
      こんにちは
    </p>
    <b>
      おやすみ
    </b>
  </body>
〜省略〜
```
上記で記述した文字が出ます。
##＜h1＞...＜/h1＞
文章の見出しを指定します。＜h1＞...＜/h1＞で囲むと文字が太く大きく表示されます。h1〜h6まであり、h1が一番大きくh6になるにつれ文字が小さくなります。
##＜p＞...＜/p＞
文章の段落を表します。
##＜b＞...＜/b＞
文字を太くします。
##ブロックレベル要素
ウェブデザインにおける箱となる要素の事をです。＜h1＞...＜/h1＞や＜p＞...＜/p＞はブロックレベル要素です。
##インライン要素
主には文字の修飾です。＜b＞...＜/b＞インライン要素です。
##cssの記述
基本の形はセレクタ { プロパティ: 値; }となります。
【例】

```style.css
p {
  color: red;
}
```
上記の記述でp要素のこんにちわの色が赤になりました。もしp要素が他にも記述してあったら全ての要素が適応されます。
##class属性
要素に対して名前がつけられます。
【例】

```
<p class="top">
  おはよう
</p>
```
##classセレクタ
class名をセレクタとして使用することができます。記述するときは.クラス名で指定します。
【例】

```
.top {
  color: red;
}
```
これでp要素内のclass="top"の色が赤くなります。
##id属性とidセレクタ
【例】id属性

```
<p id="top">
  おはよう
</p>
```
さっきと違うのはclassがidになっています。
【例】idセレクタ

```
#top {
  color: red;
}
```
さっきと違うのは.が#になっています。
classとidの使いはclassは同じクラス名を複数回使えます。idは複数回使えないので、重要なところに使う感じです。
基本情報２１週目(3月9日)

##目標と結果##

##目標##
•アルゴリズムの構造をしっかりと理解する。
•表計算の勉強(速習言語)p264ページ参照
•独習ゼミを使用する。

##振り返り##

__KEEP__

__TRY__

__PROBLEM__

##次週and more...##
[3/1](https://qiita.com/Comitakato0515/items/e61c8651a41b61c3fe04)
基本情報20週目(3月1日)

##目標と結果##

##目標##

•アルゴリズムでの問題で読解力とコツを身に付ける。
•表計算の問題を解く。
•表計算を理解してから、問題集に挑戦。
振り返り
アルゴリズムを解いては、問題の答えをほんの少しずつ理解出来てきた。残りは、自力で解いてみたいと思います。
__TRY__
一日2時間以上の勉強
__KEEP__
一日1時間勉強
__PROBLEM__
アルゴリズムの理解度を深められない。
次週 and more...

2/24
rsync 逆引きメモ

## rsync
リモート環境とファイルやディレクトリを「同期（sync）する」コマンド。ローカル環境のみでも使用できる。

### dry-run(お試し実行) したい -n
コマンドが意図した通りに動作するのかを事前確認する。
(-v は詳細出力用オプション)

```bash
$ rsync -nv test.txt test2.txt
test.txt

sent 50 bytes  received 19 bytes  138.00 bytes/sec
total size is 19  speedup is 0.28 (DRY RUN)
```

### 帯域制限をしたい --bwlimit
サイズの大きなファイルを同期する時に負荷がかからないようにするため。
この場合、1024 kb/sec

```bash
$ rsync --bwlimit=1024 -v test.txt test2.txt
test.txt

sent 105 bytes  received 35 bytes  280.00 bytes/sec
total size is 19  speedup is 0.14
```

### ディレクトリごと同期したい -a
-a には色々な意味が含まれている。

```bash
$ rsync -av test1 test2
sending incremental file list
test1/
test1/a.txt

sent 128 bytes  received 39 bytes  334.00 bytes/sec
total size is 0  speedup is 0.00
```

### 差分ファイルだけを同期したい -u
a.txt は同期対象になっていないことが分かる。

```bash
$ touch test1/b.txt
$ rsync -uv test1 test2
sending incremental file list
test1/
test1/b.txt

sent 153 bytes  received 39 bytes  384.00 bytes/sec
total size is 0  speedup is 0.00
```

### 同期元で削除したファイルは、同期先でも削除したい --delete
a.txt が削除されていることが分かる。

```bash
$ rm test1/a.txt
$ rsync -av --delete test1 test2
sending incremental file list
deleting test1/a.txt
test1/

sent 89 bytes  received 31 bytes  240.00 bytes/sec
total size is 0  speedup is 0.00
```