OmniAICreator/Qiita-1.07M huggingface dataset:
JavaScriptの基本

#概要
初心者向けにJavaScriptの基本についての記述です。参考になれば嬉しいです。

#JavaScriptとは
Javascript(ジャバスクリプト)とは、プログラミング言語のひとつ。RubyやPHPがサーバーサイドの言語であるのに対し、JavaScriptはクライアントサイドの言語。つまりユーザーから見て目に見える部分のフロントの実装となる。
Javascriptを使用することで実際にユーザーにとっての使いやすいアプリケーションを作ることが出来る。

#デベロッパーツール
デベロッパーツールとは開発者が使うツールで、一般的なブラウザ上にあり、誰でも使用することができる。
これを使うことで下記のことができる。
Elements(エレメンツ) ：Webページに対応するHTMLやCSSの確認
Console(コンソール) ：JavaScriptのコードの実行
使い方：使いたいブラウザ上で右クリック→検証をクリック

#console.log
ブラウザのコンソール上でJavaScriptのコードを表示するメソッド。
console.log()の()に文字列や値をいれることでその値が表示される。

```JavaScript
console.log("Hello World")
```

#変数定義

変数とは文字列や値に名前をつけることで繰り返し使えるようにする機能。
JavaScriptは、変数を定義するのに let, const, var の３つがある。

- let

letは、変数を再代入することが可能な変数定義。正し、再定義は出来ない。

```JavaScript
let greet = "おはよう"
//再代入OK
greet = "こんにちは"

//再定義はエラーとなる
let greet = "おはよう"  
```


- const

constは変数の値を再代入出来ない変数定義。
一度代入したら変更出来ないのは一見不便に思えるかもしれないが、そうすることによって思わぬ変更やエラーを防ぐことが出来る。特にチーム開発の場合、他の人が見て変更してはいけない値だということが一目でわかる。

```JavaScript
const greet = "おはよう"

//再代入はエラーとなる
const = "こんにちは"

//再定義はエラーとなる
const greet = "おはよう"  
```

- var

varは再代入、再定義することが可能な変数定義。だが最近の開発現場ではあまり使われていない。

```JavaScript
var greet = "おはよう"

//再代入OK
var = "こんにちは"

//再定義OK
var greet = "おはよう"  
```


現在は基本的にvarは使われていない為、letまたはconstで変数定義をする。
変わる予定のある値の場合はlet、変わらない値はconstで定義すると良い。

#テンプレートリテラル
テンプレートリテラルとは、Javascriptの構文。
ダブルクオートやシングルクオートの代わりにバッククオートで囲むことで文字列の中に挿入することができる。

テンプレートなし

```JavaScript
const name = "太郎"
const.greet = "おはよう" + name + "さん"

console.log(greet)
//=> おはよう、太郎さん　

```

テンプレートあり

```JavaScript

const name = "太郎"
const.greet = `おはよう、${name}さん`

console.log(greet)
//=> おはよう、太郎さん　

```

例として記述したのは変数定義が少ないが、記述が多くなればなるほどテンプレートリテラルを使用すると記述量が少なくて済む。

以上です！わかりにくいところもあるかもしれませんが、最後まで見て頂きありがとうございました！
【JavaScript】appendChildとinsertBeforeの違い

この記事では、**生成したHTMLの要素をブラウザに表示させるためのメソッド**の
appendChildとinsertBeforeの違いについて解説します。

##この記事でわかること
- appendChildとinsertBeforeの違い
- appendChildの使い方
- insertBeforeの使い方

##appendChildとinsertBeforeの違い
①appendChildと②insertBeforeは、どちらも
生成したHTML要素をブラウザに表示させるためのメソッドです。
さらに、特定の親要素の中に子要素を追加してくれます。
違いはずばり、追加される**場所**です！

#####①appendChild


追加される場所は、親要素の**末尾**です。
つまり指定した要素の閉じタグの直前ですね。

#####②insertBefore
追加される場所は、第2引数で指定した要素の前です。
なので、必ず第2引数を指定してあげる必要がありますよ〜〜

####親要素`parent`の中に、子要素`child`を追加する方法で解説します！
```html
<div class='parent'>
  <div class='child'></div><!--既存の要素-->
  <div class='child'></div><!--既存の要素-->
</div>
```


#appendChildの使い方
書き方：**親要素.appendChild(子要素)**

既存の`<div class='parent'></div>`に、`<div class='child'></div>`を子要素として追加したい場合

```javascript
//親となるdiv要素をとってくる
const parent = document.getElementByClassName('parent');

//追加する要素の作成
const child = document.createElement('div');
child.setAttribute('class', "child");

// 生成したHTMLの要素をブラウザに表示させる
parent.appendChild(child);
```
これが実行されると、以下のように要素が追加されます。

```html
<div class='parent'>
  <div class='child'></div><!--既存の要素-->
  <div class='child'></div><!--既存の要素-->
  <div class='child'></div><!--追加された要素-->
</div>
```

#insertBeforeの使い方
書き方：**親要素.insertBefore(追加する要素, どこに追加するのか)**

例

```javascript
//親となるdiv要素をとってくる
const parent = document.getElementByClassName('parent');

//追加する要素の作成
const child = document.createElement('div');
child.setAttribute('class', "child");

// 生成したHTMLの要素をブラウザに表示させる
parent.insertBefore(child, parent.firstElementChild);
```
これが実行されると、以下のように要素が追加されます。

```html
<div class='parent'>
  <div class='child'></div><!--追加された要素-->
  <div class='child'></div><!--既存の要素-->
  <div class='child'></div><!--既存の要素-->
</div>
```
これで、親要素の中の最初の位置に持ってくることができました。

生成したHTMLの要素をブラウザに表示させる記述ですが、`child`の前に入れてあげたらいいじゃない？と思う方もいらっしゃるかもしれません。でもこの場合、`child`がたくさんあるのでどの`child`か判断できないんですよね。
なので、`parent.firstElementChild`と記述してあげることで、親要素の中身の一番最初に表示させることができます。
`firstElementChild`は、JavaScriptのElementオブジェクトの**最初の子要素を取得するプロパティ**です。

###おわりに
appendChildとinsertBeforeの違いはわかりましたか？
もしわからないことや間違いなどがあれば、コメントでお知らせください🙇‍♀️
プログラミング学習の効率を少し上げる、３つの誰でもできる仕事術

#はじめに
ある日、友達がプログラミングしてる姿を見てて**「こうしたら効率良くなるよ！」**と教えてあげた。

すると思いのほか**「あぁ〜それめっちゃいいや！」**と褒められたのでww
普段から私がやっているプログラミング学習の効率化をご紹介！

※別に大した内容じゃ無いです。:sweat_smile:期待しないでね

#ブラウザは２つ以上を使い分けよう
**皆んなやたらGoogle Chrome好きですよね？？**
好きすぎてずっとGoogle Chromeばかり使っている人は、一度見直してみても良いかも。

**タブが大量に開いていると、どこに何の画面を開いていたか混乱したりするじゃないですか:expressionless:**
だからブラウザを用途に応じて使い分けるといいと思うのです！

例えば私の場合は以下のような感じ:point_down:
**調べたり検索する用→ Microsoft EdgeやSafari**

**webアプリ開発する用→ Chrome**

**webサイト制作→Firefox**

**~~VPN繋いで海外規制を突破して動画視聴→無料VPN搭載のOpera~~**

やっぱデバッグと言えばChromeになりますが、検索したり調べ物するだけならMicrosoft EdgeやSafariで十分かと。

**利点としては**
**・お気に入りやブックマークが多くなりすぎない**
**・タブを切り替えるより、ブラウザを切り替えた方が断然早い**

あと、意外と知らない人多いけどFirefoxはwebデザインをする上では結構便利！
こんな感じで点々の線が表示されるので地味に便利！
![スクリーンショット 2020-10-08 20.28.43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/cf8594b4-5e9f-98c9-abe2-a9a1044fd9e3.jpeg)

これでChromeにブックマークが増えすぎることもタブを開きすぎることもあまりなくなる。

#エディタは２つ以上を使い分けよう
同じエディタを使っていると、複数のプロジェクトを管理しずらくなるかも。。

PCを立ち上げてエディタを開くと、基本的には最後に開いてたファイルたちが開くじゃ無いですか。

そうすると
「昨日はAのプロジェクトを進めていたが、今日はBのプロジェクトをやる」
なんて時、**わざわざまた新しいエディタのウィンドウを開かなくてはいけない。**

しかし、もし「Aはvscode、Bはsublime text」みたいに使い分けていれば、すぐにコーディングに取り組める！

「あの時開いてたあのファイルまた開かないと。。。」なんてことは、少なくできる（かも）

#Qiitaの下書きにリンクを残しておこう
**色々と調べ物してると、参考にしたいwebページがどんどんと出てきて、タブが馬鹿みたい増えていく、、、**

なんて現象は、日々プログラミングに励んでいるQiitaユーザーなら日常茶飯事かと！！:grinning:

試行錯誤に励んでいる間にあら寝る時間！

明日見ようと開いていたページをブックマークに！！


でもちょっと待って！
**その「明日見ようと開いていたページ」のURL、Qiitaのメモ用下書きに残しておくのはどうですか？？**

それならブックバークが大量に溢れる事なく、次の日Qiitaの下書きを見るだけで昨日の続きに取り掛かる事ができる（かも）

#最後に
以上、私が普段から何気なくやってる事でした〜:relieved:
ImportError: Missing optional dependency 'xlrd'. Install xlrd >= 1.0.0 for Excel support Use pip or conda to install xlrd.となったときの対応方法

- 環境
    - macOS Catalina バージョン10.15.7
    - Python 3.8.5
    - pandas 1.1.3

# 事象 : Pandasをつおうとしたら怒られた

```bash
Traceback (most recent call last):
  File "/Users/ponsuke/tryPython/main.py", line 7, in <module>
    book = pd.read_excel(excel_file, sheet_name=None, header=None)
  File "/Users/ponsuke/tryPython/venv/lib/python3.8/site-packages/pandas/util/_decorators.py", line 296, in wrapper
    return func(*args, **kwargs)
  File "/Users/ponsuke/tryPython/venv/lib/python3.8/site-packages/pandas/io/excel/_base.py", line 304, in read_excel
    io = ExcelFile(io, engine=engine)
  File "/Users/ponsuke/tryPython/venv/lib/python3.8/site-packages/pandas/io/excel/_base.py", line 867, in __init__
    self._reader = self._engines[engine](self._io)
  File "/Users/ponsuke/tryPython/venv/lib/python3.8/site-packages/pandas/io/excel/_xlrd.py", line 21, in __init__
    import_optional_dependency("xlrd", extra=err_msg)
  File "/Users/ponsuke/tryPython/venv/lib/python3.8/site-packages/pandas/compat/_optional.py", line 110, in import_optional_dependency
    raise ImportError(msg) from None
ImportError: Missing optional dependency 'xlrd'. Install xlrd >= 1.0.0 for Excel support Use pip or conda to install xlrd.

Process finished with exit code 1
```

```py:main.py
import pandas as pd

# ...省略...
if __name__ == '__main__':
    excel_file = 'Book.xlsx'
    book = pd.read_excel(excel_file, sheet_name=None, header=None)
```

## 原因 : Pandasにはxlrdが必要なのにインストールしていないから

> Excelファイルを読み込むためには、xlrdパッケージもインストールする必要があります。
> [Python Pandasを使ってExcel読み込みと書き込み | アールエフェクト](https://reffect.co.jp/python/python-pandas-excel)

### 対応 : xlrdをインストールする
```bash
% pip install xlrd
Collecting xlrd
  Downloading xlrd-1.2.0-py2.py3-none-any.whl (103 kB)
     |████████████████████████████████| 103 kB 3.0 MB/s 
Installing collected packages: xlrd
Successfully installed xlrd-1.2.0
```
アソシエーション（１対多）！！

# アソシエーションって何？？:information_desk_person_tone1:

**簡単に説明するとモデルを利用したテーブル同士の関連付けのことですね。
テーブル同士で関連付けておき、一方のモデルからもう一方のモデルに
アクセスできるようにするためということですね。**

<font color="Crimson">＊今回は、「１対多」のアソシエーションの説明になります。
アソシエーションには、「多対多」・「１対１」もありますのでそれは
別の機会でご紹介します。
</font>

# 関連付けを行う理由
**Railsでは、「関連付け(アソシエーション: association)」とは2つの
Active Recordモデル同士の繋がりのことですね。**

2つモデルの間には関連付けを行なう必要がありますが、
その理由を知っていますか？

**それはですね、関連付けを行う事でコードの共通操作をより
シンプルで簡単にできるからなんです。**

言葉で説明されてもわからないと思いますのでイメージしやすいように
アソシエーションはこういうことだよって言う画像を下記に載せておきますね。

####例：アソシエーション(1対多）
![アソシエーション.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762918/8b0541d5-ad2b-c75e-468f-bea93d1e423b.png)

上記の例は、皆さんがよくお使いになられているSNS等をイメージして
もらえるとわかりやすいのではないでしょうか。
「Aさん」が自分だとするならば「投稿１」・「投稿４」は自分が投稿した物
ということになりますね。
これだとイメージがしやすいのではないでしょうか！？笑

次は、実際にどうやって記述するかを説明していきます。

#アソシエーション定義の際に使用するメソッド

記述する時に使用するメソッドを紹介していきます。


###has_manyメソッド

**Userモデルの視点で考えると、あるユーザーの作成した投稿は複数個ある状態です。
つまり、1人のユーザーは複数の投稿を所有しています。**

先ほどの画像を見ていただくと「Aさん」は「投稿１」・「投稿４」を
複数個所有している状態ですよねということになりますね。

**この状態のことをhas manyの関係といい、
今回の場合は「User has many Tweets」の状態であると言えます。**

　　　***　　 「User has many Tweets」
　　　　(Aさん　has many　投稿１・投稿４）***

この関連付けをするため、userと他のモデルとの間に「1対多」のつながりがあることを示すのが**<font color="DarkCyan">has_many</font>**メソッドです。

下記の画像を見ると何を説明されているのかわかりやすいと思います。

![has many.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762918/5cca6fa3-d115-9ce6-2116-42558af69ab8.png)

###belongs_toメソッド

**1つの投稿は、1人のユーザーが投稿したものです。
つまり1つの投稿を複数人が投稿できないため、投稿は必ず1人のユーザーに所属します。**

上記で載せた画像で言うと、「投稿１」は「Aさん」が投稿した物だよね。
つまり、「投稿１」と同じ投稿を「Bさん」とかは投稿できないから
「投稿１」は「Aさん」に所属している状態だよねということです。

**この状態のことをbelongs toの関係といい、今回の場合は「Tweet belongs to User」の状態であると言えます。**

                   「Tweet belongs to User」
            　     (投稿１　belongs to　Aさん） 

Tweetモデルと他のモデル（User）との間に「1対1」のつながりがあることを示すのが**<font color="DarkCyan">belongs_to</font>**メソッドです。

![belongs_to.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762918/64fa4815-b3d6-2902-6f85-d42e58215a11.png)

今回、記述する上で必要なメソッドは揃いました。
では、実際に記述していきましょう！！

# アソシエーションの定義方法

今までの説明を参考にして頂き、あとはイメージしたできたものを
記述していくだけですね！
今回の例、モデル名はUserモデル・Tweetモデルでいきたいと思います。

最初にUser（Aさん）のモデルから例を載せていきます。

```例:models/user.rb
class User < ApplicationRecord
  
  has_many :tweets
end
```

書き方としましては、 has_many :モデル名（複数形）　になります。
どうして複数形になるかと言いますと、User（Aさん）は所有している
投稿（投稿１・４）が複数個あるためです。

Userモデルへの記述はこれで以上です。

それでは最後に、Tweet（投稿）のモデルの例を載せていきます。

```例:models/tweet.rb
 
  belongs_to :user
end
```
書き方としましては、 belong_to :モデル名（単数形）　になります。
一つの投稿を所有しているのは、一人のUser（Aさん）のため
単数形になります。

これで、TweetモデルとUserモデル間のアソシエーションができましたね。
#まとめ

**１.アソシエーションとは、モデルを利用したテーブル同士の関連付けのこと**

**2.belongs_toメソッドとは、モデルと他のモデルが「１対１」の関連付けの
場合に使用するメソッドで、従属する関連になること**

**3.has_manyメソッドとは、モデルと他のモデルが「１対多」の関連付けの
場合に使用するメソッドで、所有する関連になること**

***今回は、「１対多」のアソシエーションについて説明させていただきました。
また、アソシエーションには「１対１」・「多対多」もあるのでそれはまた
別の機会にご説明できればと思います。
わかりにくいかもしれませんが、「１対多」のアソシエーションが
どのようなものかわかって頂けたら嬉しいです。***

####ありがとうございました!
GitHubの公式のドキュメントのGitHub Docsがオープンソースになった

[GitHub公式ブログ(英語)](https://github.blog)で、GitHubの公式ドキュメントサイトがオープンソースになったと[アナウンス](https://github.blog/2020-10-07-github-docs-are-now-open-source/)されていました。

2020年7月にリニューアルして立ち上げた [docs.github.com](https://docs.github.com) が対象となっており、そのソースは下のレポジトリに公開されてす。([CC-BY license](https://github.com/github/docs/blob/main/LICENSE))

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=github&repo=docs)](https://github.com/github/docs)

また、ドキュメントの右側に、"Make a contribution" ボタンが追加されており、このボタンを押すとそのまま Markdown形式の元のファイルを編集してPRを送ることができるみたい。

もちろん、いきなりPRではなく issue を立てるということもOK。
詳しい貢献方法については、[こちらの公式文書(英語)](https://github.com/github/docs/blob/main/CONTRIBUTING.md)を。


このレポジトリはドキュメントの中身のMarkdown以外のコードもちゃんと含まれていて、
先日[紹介記事](https://qiita.com/ymd_h/items/63d9105cd0429317bd6f)を書いたCode ScanningのCodeQLを利用するActionsの[YAMLファイル](https://github.com/github/docs/blob/c7847dc1b17750aa3a67e862752a612437e9dcce/.github/workflows/codeql.yml)もばっちりありました。

GitHubだし、Pagesみたいに Markdownで書いてJekyllで静的サイトを作ってるのかなと、勝手に思ってましたが、[server.js](https://github.com/github/docs/blob/c7847dc1b17750aa3a67e862752a612437e9dcce/server.js) みたいな、サーバーサイドっぽいコードもあって、ちょっとびっくりしました。


記載によるとGitHub Docsのチームはpre-production (一般公開前) な内容は、公開レポジトリと定期的に同期させているプライベートレポジトリ上で作業をしているとのこと。
（そうしないと発表会と同時にドキュメントが準備万端でサービスインすることができませんよね。）


これで、「Web UIのみのマニュアルしか公開されていない」「ファイルベースで設定するための仕様が記述されていない」なんていう状況が変わっていけばいいですね。
もちろん、日本語訳がよくわからんなんて状況も多々ありますが有志によってどんどん良くなっていくといいですよね・・・と思いましたが、[今は翻訳記事への貢献は受け付けていない](https://github.com/github/docs/blob/c7847dc1b17750aa3a67e862752a612437e9dcce/translations/README.md)ようです。残念。

GitHubのドキュメントを読んでいて、ここもっとこうすればいいのにって思ったら、ぜひPRを書いてみてください！

# 余談

先日同じく[アナウンス](https://github.blog/changelog/2020-10-01-the-default-branch-for-newly-created-repositories-is-now-main/)されたばかりだったと思いますが、このレポジトリはすでに master でなはく main ブランチに名称変更済みでした。
pip でエラー：　There was a problem confirming the ssl certificate


環境
OS Name	Microsoft Windows 10 Enterprise
Python 3.8.3
pip 20.1.1
今日の日付 2020-10-8


会社のパソコンで pip で Python パッケージをインストールしたら、
```pip install analytics-mayhem-adobe
```
__There was a problem confirming the ssl certificate__
というエラーが出てしまいました。


```pip install --trusted-host pypi.org --trusted-host files.pythonhosted.org analytics-mayhem-adobe```
のように、したら、無事にパッケージをインストールできました。


---------------
エラー全文
Could not fetch URL https://pypi.org/simple/analytics-mayhem-adobe/: There was a problem confirming the ssl certificate: HTTPSConnectionPool(host='pypi.org', port=443): Max retries exceeded with url: /simple/analytics-mayhem-adobe/ (Caused by SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate (_ssl.c:1108)'))) - skipping
ERROR: Could not find a version that satisfies the requirement analytics-mayhem-adobe (from versions: none)
ERROR: No matching distribution found for analytics-mayhem-adobe
Could not fetch URL https://pypi.org/simple/pip/: There was a problem confirming the ssl certificate: HTTPSConnectionPool(host='pypi.org', port=443): Max retries exceeded with url: /simple/pip/ (Caused by SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate (_ssl.c:1108)'))) - skipping
文字コード

##はじめに
atcoderの勉強をしていて少しためになったことをまとめたいと思います

##ASCII
みなさん文字コードについてご存知でしょうか？Wikipediaによると
> 文字コードとは、コンピュータなどの電子媒体において、文章を画像などの図形データとしてではなくテキストの形式で扱う場合に、その各文字（単一の文字でない場合もある）に対して持っているコードのことである。(wikipedia)

とあります。簡単に言うとコンピュータ上で文字を表現するためのルール(コード)みたいなものです。種類としては

| 文字コード | 用途 | 情報量 |
|:-----------|:------------:|:------------:|
| ASCII       |     アルファベット、数字を表すコード   | 7ビットのコード         |
| SJIS     |  日本語を表現できるコード     |  16ビットのコード   |
| EUC-JIS      | UNIX系で日本語を表現するためのコード      | 16ビットのコード   |
| Unicode   | 世界中の文字を表すコード | 16～21コード  |
| UTF-8  | 一番ポピュラーなコード、ASCIIと互換性がある|  3バイト |

これくらいです。UTF-8が見たことある人が多いのではないでしょうか

##Atcoder146 B - ROT N
>問題文
英大文字のみからなる文字列Sがあります。また、整数Nが与えられます。Sの各文字をアルファベット順でN個後の文字に置き換えた文字列を出力してください。ただしアルファベット順でZの1個後の文字は A とみなします。

この問題を解く際に上のASCIIの考えを用いました。

```python:test.py
N = int(input())
S = input()
def change():
    s=[]
    for i in range(len(S)):
        m = ((ord(S[i])-ord("A")+N) % 26)
        s.append(chr(m+ord("A")))
    return "".join(s)
print(change())
```
糞コードなのは勘弁してください(笑)ここで一番大切なのは
`ord()`と`chr()`の関数です。この関数はASCIIで書かれた文字や数字をあらかじめ割り当てられた数字や文字に変換してくれる関数です。[ASCIIコード]:http://www12.plala.or.jp/mz80k2/electronics/ascii/ascii.html
例えば"A"という文字はASCII文字コードによると**65**になります。また関数を用いると
```chr("A")```という風に書きます。逆に数字をASCIIに割り当てたいなら```ord(65)```という風になります。
##終わりに
文字コードについてはいろいろとあるので勉強してみると面白いですね！！
HTMLでcanvasを使うと図形を描ける

#プログラミング勉強日記
2020年10月8日
HTMLで画像に置き換えることなく図形を描くことができることを知ったのでまとめる。

#canvasタグとは
　図形を描くためにはpngやjpegなどの画像に置き換えることやFlashなどのプラグインデータを埋め込むことが一般的であったが、HTML5から2Dのグラフィックスを描く、`<canvas>`要素が追加された。canvasを使用することで、標準のHTMLとJavaScriptだけでグラフやゲームグラフィックスなどの図形を表示できるようになった。

#書き方
　canvasタグは以下のように書く。

```html:書き方
<canvas id="id名" width="canvasの横幅" height="canvasの縦幅">
</canvas>
```
　しかし、図形はこれだけでは表示されない。HTMLの部分とJavaScriptをid名で関連付けて、描く図形を指定する。JavaScriptの部分では描く図形を指定する前にまずキャンパスを使うための準備が必要になる。

```js:描画コンテキストの取得
var canvas = document.getElementById("id名");
var context = canvas.getContext("2d");
```
　描画コンテキストの取得の1行目では`getElementById`メソッドを使って、HTML文書内でid名を指定した要素をの部分を参照している。（これで取得したオブジェクトにcanvasという名前を付けている。）
　このcanvasに対してキャンバスにアクセスするためのメソッドである`getContext`メソッド(canvasを操作するときには必ず必要)を実行している。
　2行目では、`getContext("2d")`でコンテキスト名を指定している。現在ではこのメソッドでは`2d`のみがサポートされている。canvasを使って平面図形を描くときには`2d`を指定する。

　これだけでも大丈夫だが、canvasをサポートしていないブラウザをステイすると、描画コードの部分をif文で囲んでおくとなおよい。

```js:描画コンテキストの取得
  var canvas = document.getElementById("id名");
  if (canvas.getContext) {
    var context = canvas.getContext("2d");
    // 図形を描くコードを記述
}
```

#サンプルコード
　以上を踏まえて実際に線と四角、円を描画する。

```html:サンプルコード
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>線</h1>
    <canvas id="line" width="100" height="100"></canvas>
    <h1>四角</h1>
    <canvas id="rectangle" width="100" height="100"></canvas>
    <h1>円</h1>
    <canvas id="circle" width="100" height="100"></canvas>
    <script type="text/javascript">
    //読み込み時に実行する
    onload = function() {
      /* 線を引く */
      var line_canvas = document.getElementById("line"); 
      var line_ctx = line_canvas.getContext("2d");
      line_ctx.beginPath();
      // 開始位置に移動する
      line_ctx.moveTo(20, 20);
      // 線を引く
      line_ctx.lineTo(80, 80);
      line_ctx.closePath();
      line_ctx.stroke();
      /* 四角を描く */
      var rect_canvas = document.getElementById("rectangle");
      var rect_ctx = rect_canvas.getContext("2d");
      rect_ctx.beginPath();
      // 四角を描く
      rect_ctx.strokeRect(20, 20, 60, 60);
      /* 色の付いた円を書く */
      var cir_canvas = document.getElementById("circle");
      var cir_ctx = cir_canvas.getContext("2d");
      // 塗りつぶす色を指定する
      cir_ctx.fillStyle = 'blue';
      cir_ctx.beginPath();
      // 円を描く位置を決める
      cir_ctx.arc(50, 50, 40, 0, Math.PI * 2, false);
      // 実際に円を書く
      cir_ctx.fill();
    }
    </script>
  </body>
</html>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/a7663aae-16a0-3414-292b-d10578710dfe.png)



#参考文献
[canvasタグで図形を描く](http://www.htmq.com/html5/006.shtml)
[図形が描ける！HTML5のcanvasの書き方【初心者向け】](https://techacademy.jp/magazine/12576)
[WordPress] 特定の文言が含まれる投稿のリストを作成したい

WordPress で特定の文言が含まれる投稿のリストを作成したい時ってありますよね。
wp-cli を使って、こんな感じのシェルスクリプトを作ってやれば、なんとなく CSV ができます。

```
#!/bin/bash
KEYWORD="${1:-ハナクソ}"
TABLE=$(wp eval 'global $wpdb;echo $wpdb->posts;')
POSTS=$(wp db search "${KEYWORD}" ${TABLE} --one_line --table_column_once | grep ${TABLE} | awk -F ':' '{print $3}' | sort | uniq)
echo "ID,post_date,post_title,permalink,post_type,post_status"
for POST in ${POSTS} ; do
  wp eval "\$post=get_post(${POST}); if (\$post->post_status !== 'inherit') { echo \$post->ID.','.\$post->post_date.','.\$post->post_title.','.get_permalink(${POST}).','.\$post->post_type.','.\$post->post_status.\"\\n\"; }"
done
```
webpack + firebase 環境で「Error: Can't resolve '@firebase/firestore'」になった時の対応

# はじめに

webpack の `resolve.alias` をよく使う場合に遭遇するんじゃないかなってエラーの対処?法です。
firebase を使い始めて躓いた点を Qiita に残しておきます。

この躓きで時間浪費した。。
firebase に関わらず同じエラーになる人世界に1人はいるんじゃないだろうかってお気持ちで書いてますが
多分みんなすぐ解決してる(or こんな事しない)んやろなぁって不安に思いながら手を動かしています。。

# どんな時に発生したのか？

import がある時、自分の場合は

* import 時に `../../foo/bar` となるのが好みじゃない
* alias は `@foo` みたいな名前でまとまりごとに alias を作る

みたいな事を普段考えています。
(`@components` `@repositories` みたいな)

firebase を使い始めたときも同じことを考えていました。

firebase を組み込んで firestore を使う場合は、

```ts
import firebase from 'firebase'
import firebaseConfig from './firebaseConfig'

const firebaseApp = firebase.initializeApp(firebaseConfig)
const db = firebaseApp.firestore()

export default db
```

みたいなのを書くと思いますが、
このファイルパスへの alias を `@firebase` としてしまうと、

```
ERROR in ./node_modules/firebase/dist/index.cjs.js
Module not found: Error: Can't resolve '@firebase/firestore' in '/(省略)/node_modules/firebase/dist'
```

みたいに firebase の main ファイルで module not found エラーを吐きます。

# 原因

これは、 firebase JS SDK の各コンポーネントが、 `@firebase/firestore` や `@firebase/auth` みたいな名前になっていて、 firebase がそれらを参照しており、 それらを bundler が alias と認識してしまうのだと思っています。(多分。。！！)

本来は `node_modules/firebase/firestore` や `node_modules/firebase/auth` などを `require('@firebase/firestore')` みたいに読み込んでいるのですが、
自分の alias で設定している path を見に行ってそうという感じ。。
(※ import は ESM, require は CJS)

[firestore component](https://github.com/firebase/firebase-js-sdk/tree/master/packages/storage)
[firebase main](https://github.com/firebase/firebase-js-sdk/blob/master/packages/firebase/src/index.ts)

# 解決した方法

`@firebase` という alias を諦めました。。
別の名前で alias をつけると問題なく解決してくれるようになりました。

# 最後に

webpack わからなすぎてこれで良いのかわからない。。
多分変に alias 使わなければ良いんだろうなーという感触。

ディレクトリ構成とかいい感じにクリーンにしとけば、 alias 使わなくても気にならないようになるんかなー。。
実際のところ 「Add import statement」 -> ... みたいにするから気にしすぎ感も(WebStorm)
Spacemacsで79文字目がどこなのか目印を表示させる

Pythonの[PEP8 - Maximum Line Length](https://www.python.org/dev/peps/pep-0008/#id19)のように、79文字を超えて入力したくないから79文字目に目印がほしい、となることがある。

`.py`ファイルを開いた時だけ目印を出すようにしてみる。

---

Emacsが26の場合は `fci-mode`を使う。ちょうど79文字目の列に線が引かれて、わかりやすくなる

```emacs-lisp:.spacemacs(抜粋)
(defun dotspacemacs/user-config ()
  (add-hook 'python-mode-hook
            (lambda ()
              ;; 79文字制限の表示
              (setq-default fill-column 79)
              (fci-mode 1)))
)
```

---

Emacsが27の場合は `display-fill-column-indicator`を使う ( `fci-mode`が使えなかった :innocent: )

cf. [new display-fill-column-indicator-mode in emacs 27](https://github.com/syl20bnr/spacemacs/issues/12884)

```emacs-lisp:.spacemacs(抜粋)
(defun dotspacemacs/user-config ()
  (add-hook 'python-mode-hook
            (lambda ()
              ;; 79文字制限の表示
              (setq-default display-fill-column-indicator-column 79)
              (setq-default display-fill-column-indicator-character ?\N{U+007C})
              (setq display-fill-column-indicator t)))
)
```

`display-fill-column-indicator-character` (目印に使う文字)の指定がまさかの文字コードなのでナニコレ感しかない。
たとえばUnicodeで `|`を使う場合は `U+007C`。

cf. [Using fill-column-indicator for Characters Per Line limit](https://tatrix.org/emacs/fill-column-indicator/)
初心者が窓でubuntuを使いrails環境を整える

#はじめに
私は初心者でWSLとはなんぞや？？から始めたレベルでしたがなんとか環境を整えることに成功したので後発者のために備忘録として残して置くことにする
今回はubuntuというWSLを使用してrails環境を整えることを目標にしていた。
初心者の私には難解だったエラーについては以下の通りである。

#いきなりrbenv install 2.7.0で躓く
右も左もわからない状態のためインストール方法を調べ、以下のサイトに辿り着いた。
https://railsgirls.jp/install#setup_for_windows_without_wsl
ステップ１はインストールのみだったのでサクサク進み、環境整備もすぐ終わるかと思ったのもつかの間、ステップ２の４段階目で躓いてしまった。
具体的にいうと

```
rbenv install 2.7.0
```

で躓いてしまったのだ。
INSTALL　FILLEDと表示されエラーらしき事象が発生していることはわかる。
調べていくうちにパッケージが不足していることがわかり、以下のコードを実行したところ解決することができた

```
sudo apt-get install git-core zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev software-properties-common libffi-dev nodejs yarn
```

#rails serverで躓く
先のrbenv install 2.7.0も苦労して乗り越えrailsも入り、ついに終わるかと思ったが、そう人生はうまく行かないものである。
ゴールは目前なのにまたもやエラーが画面に現れた。
webpackerが見当たらないというのだ。そこで

```
rails webpacker install
```
を実行するとまたもやエラーが。。。

```
bin/rails:3:in `load'
bin/rails:3:in `<main>'
(See full trace by running task with --trace)
```
rails webpacker installをインストールするのにファイルの何かがおかしいらしい。
そこで更に調べたところyarnなるものを入れた状態でインストールしないとだめとのことなので

```
# Node.jsをインストールする
sudo apt install -y nodejs npm
sudo npm install n -g
sudo n stable
sudo apt purge -y nodejs npm
exec $SHELL -l
# yarnをインストールする
rails yarn install
# webpackerをインストールする
rails webpacker install
```
とすることでエラーが解決できた

#最後に
ここまで簡単そうに書いているがこの２つの問題を解決するのに一週間かかっている。
なにも知らない初心者がエラー文からなにが求められているのか理解して調べ、適切なコマンドを入力することがどれだけ難しかったことか。。。
今後も今回のエラーを教訓にして問題解決力を向上させていきたい。。。
[WIP] flutter + webviewはやめとけ

## はじめに

最近で新規アプリ開発と言えば、flutterも有力な選定になるのでは無いでしょうか？
特にスタートアップなどスピードが求めれる場合には強力な武器になると思います。
また、それぞれのネイティブコードを使用すれば、アプリの管理コストがかかる為、flutterに置き換えたり、アプリ自体を閉じる企業もあるそうです。

かく言う自分も今回flutterでアプリ開発をしました。
webでアプリ自体はすでに資産として完成したので、それらを用いるために、webviewを採用しました。
今回はメインとしてwebview_flutterと言うgoogle公式プラグインについて言及します。

ですが、ここに大きな罠がありました。。

ここから自身の考察を述べますがあくまで一意見として呼んで下さい。

## TL;DR

**flutter + webview はやめとけ**

## flutterでwebviewってどこまで開発進んでるの？
flutter + webviewを採用するに辺り、公式の開発がどこまで進んでるかですが、結論から言うと
**「webviewがメインコンテンツの場合だと使い物にならない」**
です。

メインコンテンツの場合と言っていますが、例えば「利用規約や会社概要をwebviewにしたい」程度であれば問題はありません。

しかし、メインコンテンツ(cmd系のユーザーからのアクションがある物)では向いていないと言い切れます。


**ネイティブのwebviewで開かれない**
まず多くのバグの原因にもなっている「ネイティブのwebviewで開かれない」ですが。
swfitやkotlinでwebveiwクラスを使用するとsafari,chromeで開かれます。
つまり、ブラウザに近しい環境で開く事が出来ます。

これがflutterでは利用する事が出来ません。
なので弊害としてまだ数多くのバグが存在しています。
公式のレポジトリには多くのissueが報告されています。
となると当然iosとandroidで異なる挙動をしやがります。。

**公式プラグインがバグだらけ**
パフォーマンスも悪い、機能も少なすぎる、言いたい事は多いですが、特に困ったのがios側で権限を求めるダイアログとwebveiw_flutterを組み合わせると、WebViewクラスのbuildが呼ばれない事です。
厳密にはbuildが呼ばれないと言うよりWebViewクラスのライフサイクルで最初に呼ばれるonWebviewCreated()があるのですが、ここでコールバック関数を呼ぶことでwebviewを制御するコントローラを手に入れる事が出来ます。
しかし、これが呼ばれないのでリカバリする方法が無いのでブランク画面になってしまいます。
自分はここだけflutter_webview_pluginを使用する事で回避しました。

**Cookie, LocalStorage**
cookieの問題はいくつかあります。
容量、set, getがデフォルトで出来ない、持続されない。
localstorageはメインで使用してないのですが、恐らく無いです。。

ここから各プラグインのデメについて言及します。

## webview_flutter
- iosでcookieが維持されない
- iosでpermissionを求めるダイアログと組み合わせるとブランクページになる

## flutter_webview_plugin
- webviewを操作するコントローラがシングルトンなのでマルチプルなユースケースに使えない
- widget treeに統合されていない為、画面の領域の最大を使用する（z-indexが最大）

## flutter_inappwebview
- 個人の開発で不安(ただ割と機能豊富で一番使える)
【初心者向け】カーソルを手（👆）の形にする方法 ＆ 他のカーソルたち8個（画像付き）

# どうも7noteです。カーソルの矢印を指の形に変更する方法と、それ以外にもこんなものに変更できる。

どうも7noteです。
この記事は以下へ引っ越しました。

https://naruweb.com/coding/c/
Ruby で浮動小数点数の整数乗をするマイクロベンチマーク

# これはなに？

[Ruby 3.0 で x ** 2 が速くなった件](https://qiita.com/scivola/items/b14b038eead48da409ed) を読んで、マイクロベンチマークしたくなったのでマイクロベンチマークした。

実用性とかそういう視点には立っていない。

# 測定対象とか

ruby は、2.7.2 と 3.0.0-preview1。
環境は macOS Catalina 10.15.6。2.2 GHz クアッドコアIntel Core i7。

# 何を測るか

例えば `x` の 11乗を計算するとして。
以下のような方法がある。

|名前|計算方法|
|:--|:--|
|`x**n`|`x**11`|
|`x*x*...*x`|`x*x*x*x*x*x*x*x*x*x*x`|
|`use variables`|`z=x*x;y=x*z*z;x*y*y`|
|`use '**2'`|`((x**2)**2*x)**2*x`|

最初の２つはいいとして。
`use variables` は、掛け算の回数を減らす努力をまあまあした感じの計算をする。
全力で減らす努力をしたわけではないので、例えば 27 の場合は「`z=x*x*x;y=z*z;z=x*y*y;x*z*z`」の7回になっている。
全力だとたぶん「`z=x*x*x;y=z*z*z;y*y*y`」の6回になるんだけど、まあサボった。

最後のは、`**2` をたくさん使って計算する。

x は `3.0` にした。
指数は 2〜32 を試した。
指数の値が小さいと、 `x**n` と `use '**2'` は同じだし、 `x*x*...*x` と `use variables` も同じだったりする。

# 結果

グラフはいずれも Iteration per second なので、上が速い。
片対数グラフ注意。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6854/86146ca8-611e-98fd-8d5a-3f976bda29d6.png)

10乗ぐらいまでは `use variables` が速そう。
16乗ぐらいまでは `use variables` と `x**n` が抜きつ抜かれつ。
それ以上は `x**n` が速い。

グラフを見ると、 `x**3` か `x**4` ぐらいまでは特別扱いしたほうが良さげに見えるけど、どうだろう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6854/fbf72a56-82be-154e-f82d-668109d3b8be.png)

`x**n` を見ると、 3.0.0-preview1 で `**2` を特別扱いしている感じがよく分かる。
Laravel フレームワーク [アプリケーションの設定~アプリ作成]

Lalvel導入後からアウトプットしていきたいと思う。

# アプリの設定
フレームワークを活用するとこの様に必要なファイルを自動生成してくれます。

.env ファイルには環境に依存するような設定値を書いておいて、 config フォルダにあるファイルからは .env ファイルに書かれた値を参照するといった使い方をします。
![スクリーンショット 2020-10-08 14.53.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663122/e6f4d12f-e5d4-7798-aaa5-8fc832c1360f.png)

## db設定
.envフォルダの中の
DB_CONNECTION がデフォルトで mysql なのですが、今回 SQLite を使うので
DB_CONNECTION=sqliteにしました。
![スクリーンショット 2020-10-08 14.57.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663122/c3be9d97-c958-6b7c-e7b5-d2ff5b3d634a.png)

## config フォルダ
config フォルダにはいくつかのフォルダがありますが、まずは全体の設定をする app.php をみてあげましょう。
![スクリーンショット 2020-10-08 15.02.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663122/408098ef-f7cd-6e5e-a796-b0a7451f5fb7.png)
例えばこちらの意味ですが、 app に関しては env の APP_NAME に値が設定されていたらそれを、値が設定されていなかったら Laravel を使いなさいという意味になります。

#アプリ作成
バージョン指定ありの場合
composer create-project --prefer-dist laravel/laravel="5.5.*" アプリ名
バージョン指定なし
php composer.phar create-project --prefer-dist laravel/laravel　アプリ名
[ServiceNow] Annotation を多言語対応にする方法

ServiceNow のフォーム上、フィールドのラベルは、Field Labels で設定することで多言語対応にできます。
セクション名は、Translated Name / Fields で sys_ui_section の caption で、英語に対する翻訳をいれることで多言語対応にすることができます。
Annotation については、以下の Docs の記事にある通り、Messages を使って多言語対応にできます。
https://docs.servicenow.com/bundle/paris-platform-administration/page/administer/form-administration/concept/c_FormAnnotation.html
gs.getMessage を使って、Messages から取り出すようにするのですが、書き方が少し特殊ですので、ここで紹介しておきます。
「$」と「{}」を使って以下のように書くとgetMessageが Annotation で使えて、多言語対応ができるようになります。

```
${gs.getMessage('Message_Key')}
```
自分の環境で検証してみましたが、以下のキャプチャのように英語、日本語を出し分けすることができました。

英語モードの画面：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/756088/e14bc3a9-715a-c921-ae04-1dd4ce480974.png)

日本語モードの画面：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/756088/9b282331-7885-ad88-c1b9-4c10cdcab93a.png)

以上です。
Spyderをタスクバーにピン留めしたい

# 概要
Pythonの統合開発環境でSpyderを使うとき
いちいち検索で「Spyder」と打つのがだるい…
タスクバーに固定したくてもできない悩み

Spyderって何？？って人は[こちら](https://techacademy.jp/magazine/22343)

# 悩み
Spyderをタスクバーにピン留めする
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763295/3a6ca957-b393-ea11-83f8-73d93dca3de1.png" width=33%>

SpyderからPythonに切り替わった？！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763295/4d93d02b-1bcf-97a1-32f4-27f2552a2375.png" wigth=40%>

Spyderを消した後、Pythonを押しても反応が無い　←**今ここ**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763295/b689beca-bb5e-6248-e1ad-ad118b7c0c2d.png" wigth=40%>

# 解決方法
Spyderに右クリックして[タスクバーにピン留めする]
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763295/9b8b366d-828e-e5a5-0be8-b9410dacbf7b.png" wigth=10%>

タスクバーにピン留めできた！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763295/7b247c92-9103-1b5e-f24d-54201a5e3950.png" wigth=40%>

Spyderをクリックしたらちゃんと出てきた！
でもSpyderが２つもあるのが**少し気になる**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763295/a67e07c9-cb28-0cd6-f8c2-aa5f95d5eb51.png" wigth=40%>


# まとめ
Spyderをタスクバーにピン留めすることができた！
意外にも単純な作業だった

Spyderが２つもある理由は次回調べようかな…

# 参考
[[windows10]タスクバーにピン留めできないアプリに対処する](https://sevenb.jp/wordpress/ura/2015/11/17/windows10%E3%82%BF%E3%82%B9%E3%82%AF%E3%83%90%E3%83%BC%E3%81%AB%E3%83%94%E3%83%B3%E7%95%99%E3%82%81%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AB%E5%AF%BE%E5%87%A6%E3%81%99/)
[C++] 日付時刻とタイムゾーンの取得の仕方

**全体もくじ**
⇒https://qiita.com/tera1707/items/4fda73d86eded283ec4f

# やりたいこと

C++アプリ起動中に、タイムゾーンをWindowsの設定画面から変えたら〇〇をする、みたいな処理を作るために、`localtime_s()`を使って、

```cs
    localtime_s(&tmv, &t);
    wcsftime(wstr, sizeof(wstr)/sizeof(WCHAR), L"%z", &tmv);//→「+0900」のような文字列を出力
```

で採れる文字列が、タイムゾーンの変更時に変わったら〇〇する、という作りにしようとしたが、それだとタイムゾーンの設定を変えても出力文字列が変更についてこなかった。

例えば、**「(UTC+09:00)大阪、札幌、東京」**の時には、上のコードで**「+0900」**と取れていて、タイムゾーンを**「(UTC+10:00)ウラジオストク」**に変更して同じ処理を行うと、「+1000」を期待するが、そうはならず、**「+0900」**のままだった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/828a9b50-f2db-1463-e3f2-4747a761b6d1.png)
**※アプリを一回落として、再度同じ処理を行うと、変更後のタイムゾーンの文字列になる様子。**

アプリ起動中のままでタイムゾーン変更したときに、それを知れる方法を知りたい。

# 前提

下記を使用。

- VisualStudio2019
- ISO C++17 標準 (std:c++17)

# やり方

結果として、下に挙げた「UTCからローカル時間を取得①(タイムゾーン変化を検出可能)」のやり方で、変化を検出できた。
一応、その前にやっていたやり方も「UTCからローカル時間を取得②(タイムゾーン変化を検出できない)」で挙げておく。

## UTCからローカル時間を取得①(タイムゾーン変化を検出可能)

この処理を実装したアプリ(プロセス)が起動中に、タイムゾーンの変更をしても
値が追従する。

```cpp
// UTC時間取得用
SYSTEMTIME stutc;
// ローカル時間取得用
SYSTEMTIME stlocal;
// 現在のWindowsのタイムゾーン情報を取得
TIME_ZONE_INFORMATION tzi;
GetTimeZoneInformation(&tzi);
// UTC時間を取得
GetSystemTime(&stutc);
// UTC時間をWindowsのタイムゾーン設定に合った現地のローカル時間に変換
SystemTimeToTzSpecificLocalTime(&tzi, &stutc, &stlocal);
// UTCからの差(分単位)を取得し符号反転
int wBias = -(tzi.Bias);
int wBiasHour = wBias / 60;
int wBiasMin = wBias % 60;

printf("%04d/%02d/%02d %02d:%02d:%02d%+03d:%02d\n", stlocal.wYear, stlocal.wMonth, stlocal.wDay, stlocal.wHour, stlocal.wMinute, stlocal.wSecond, wBiasHour, wBiasMin);
```

出力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/09b64ad0-e792-3725-7818-3d081698937d.png)
→アプリを起動したままでも、タイムゾーンを変更すると、そのタイムゾーンに合わせて出力も変わる。


## UTCからローカル時間を取得②(タイムゾーン変化を検出できない)

この処理を実装したアプリ(プロセス)が起動中に、タイムゾーンの変更すると、値がついてこない。(変更前の時刻のままになる)

```cpp
auto t3 = time(nullptr);
auto tmv3 = tm();
//auto error3 = gmtime_s(&tmv3, &t3);  // UTC時間を取得
auto error3 = localtime_s(&tmv3, &t3); // ローカル時間(タイムゾーンに合わせた時間)を取得

char buf[256] = { 0 };
strftime(buf, 256, "%Y/%m/%d %H:%M:%S%z\n", &tmv3); \\ tmを文字列に変換
printf(buf);
```

出力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/cb102fb4-3b33-4543-8426-b96d38a60219.png)
→アプリを起動したままだと、タイムゾーンを変更しても、そのタイムゾーンに合わせて**出力は変わらない**。

# 参考

GetTimeZoneInformationの公式
https://docs.microsoft.com/ja-jp/windows/win32/api/timezoneapi/nf-timezoneapi-gettimezoneinformation

GetSystemTimeの公式
https://docs.microsoft.com/ja-jp/windows/win32/api/sysinfoapi/nf-sysinfoapi-getsystemtime

SystemTimeToTzSpecificLocalTimeの公式
https://docs.microsoft.com/ja-jp/windows/win32/api/timezoneapi/nf-timezoneapi-systemtimetotzspecificlocaltime

localtime_sの公式
https://docs.microsoft.com/ja-jp/cpp/c-runtime-library/reference/localtime-s-localtime32-s-localtime64-s?view=vs-2019

strftimeの公式
https://docs.microsoft.com/ja-jp/cpp/c-runtime-library/reference/strftime-wcsftime-strftime-l-wcsftime-l?view=vs-2019

①のやり方を見つけるきっかけページ
http://kwikwi.cocolog-nifty.com/blog/cat13582138/index.html
Django でとりあえずstatic参照するメモ

# 概要

- Djangoでとりあえずstaticファイルを参照します
- 公式ドキュメントはありますのでそれを見るのが正しいです
    - https://docs.djangoproject.com/en/3.1/howto/static-files/
- が、難しいことは考えず、簡潔にメモしておきます

# 前提

- Ubuntu 20.04.1 LTS on WSL2
- Python 3.9.0
- Django 3.1.2

# ディレクトリ構成

プロジェクト直下の `static/css/style.css` を参照します

```
myproject
├── manage.py
├── myproject
│   ├── settings.py
└── static
    └── css
        └── style.css
```

# 設定

`INSTALLED_APPS` と `STATIC_URL` はデフォルトで設定されていると思います

```python:settings.py
INSTALLED_APPS = [
...(snip)
    'django.contrib.staticfiles',   # デフォルトで設定されている
...(snip)
]

STATIC_URL = '/static/'   # デフォルトで設定されている

# 追加する部分
STATICFILES_DIRS = [
    BASE_DIR.joinpath('static'),
]
```

# 確認

`myproject/static` 内が参照対象となっています

```
$ python manage.py findstatic css/style.css
Found 'css/style.css' here:
  /home/user/myproject/static/css/style.css
```

# テンプレートの記述

```html:templates/index.html
{% load static %}

...(snip)
<link rel="stylesheet" href="{% static "css/style.css" %}">
```
FlutterでWidgetを画像にしてSNS等にシェアする方法

この記事では、手軽に「Widgetを画像にしてSNS等にシェアする」方法をご紹介します（背景のカレンダーは関係ありません）。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164020/b759e708-be3e-f89b-f614-03f2393970af.png" width=300>


## 画像にしたいWidgetを作成
画像にしたいWidget(仮にWidgetAとします)を、`RepaintBoundary`で囲みます。そして、後でkeyを使ってこの`RepaintBoundary`を探して取得する必要があるので、keyをつけておきます。convertWidgetToImageKeyは`convert_widget_to_image_key.dart`でグローバル変数として宣言しておきます。

x_widget.dart

```dart
import 'package:flutter/material.dart';
import 'convert_widget_to_image_key.dart';

return RepaintBoundary(
  key: convertWidgetToImageKey,
  child: WidgetA(), // 画像にしてシェアしたいWidget
);
```

convert_widget_to_image_key.dart

```dart
import 'package:flutter/material.dart';

final convertWidgetToImageKey = GlobalKey();
```

ここで注意しておくべきなのは、WidgetAが高さを持たない場合です。例えばColumnを使っている場合、うまく画像にすることができません。そういうときは、`Container(height: １００, child: WidgetA())` のようにしてContainerで囲んで高さを指定しましょう。同じように、背景色を持たない場合はbackgroundColorを指定しましょう。


## Widgetを画像にする

`GlobalKey`を使ってWidgetを探し出し、そのWidgetが`RenderRepaintBoundary`なら画像化してくれます。

widget_to_image_converter.dart

```dart
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';

class WidgetToImageConverter {
  Future<ByteData> exportToImage(GlobalKey globalKey) async {
    final boundary =
        globalKey.currentContext.findRenderObject() as RenderRepaintBoundary;
    final image = await boundary.toImage(
      pixelRatio: 3,
    );
    final byteData = await image.toByteData(
      format: ui.ImageByteFormat.png,
    );
    return byteData;
  }
}
```

## シェアのロジック
[flutter_esys_share](https://pub.dev/packages/esys_flutter_share)を使います。おそらく、現状画像をシェアするならこのライブラリが一番有力かと思います（2021年12月20日現在は[share_plus](https://pub.dev/packages/share_plus)でもできるようです）。結構前からメンテされていないのが心配ですが、普通に使えます。

share_provider.dart

```dart
import 'package:esys_flutter_share/esys_flutter_share.dart';
import 'package:flutter/material.dart';

class ShareProvider {
  Future<void> shareImageAndText(
      String text, GlobalKey globalKey) async {
    final bytes = await WidgetToImageConverter().exportToImage(globalKey);
    await Share.file(
        'shared image', 'share.png', bytes.buffer.asUint8List(), 'image/png',
        text: text);
  }
}
```

## シェアボタン
適当にボタンを使って`ShareProvider().shareImageAndText(key)`を呼べば、シェアのボトムシートが出てきます。

```dart
import 'package:flutter/material.dart';
import 'convert_widget_to_image_key.dart';

IconButton(
  onPressed: () {
    ShareProvider().shareImageAndText('test', convertWidgekToImageKey);
  },
  icon: const Icon(
    Icons.share,
  ),
);
```

たったこれだけです！簡単！
意外とこれを実装していないアプリは多いので、差別化になるかもしれません。
jquery基本

jQuery

https://stand-4u.com/web/javascript/jquery-method.html

↑jqueryのメソッド集

クリックすると背景色が変わる

```.js
$(function(){
  $(".hoge").click(function(){
    $(this).css("background-color", "blue")
  });
```


Cssとの合わせ技

```.js
$(function(){
  $('.wrapper').click(function(){
    $(this).addClass("remove")
  });
});
```




メソッドチェーン

```.js
$(function(){
  $(".hoge").click(function(){
  	$(this).css('color', 'red').slideUp();
  });
});
```


Htmlを複数行挿入する

```.js
$(function(){
var listCode = '<ul id="menu">' +
'<li>ホーム</li>' +
'<li>製品案内</li>' +
'<li>会社概要</li>' +
'<li>お問合せ</li>' +
'</ul>';
  $('.wrapper').click(function(){
    $('.plus').css('color', 'blue').html(listCode).fadeOut(10000)
  });
});
```
Ubuntu 20.04でSpotifyをsnapから入れて起動オプションを確認する

[UM300](https://www.amazon.co.jp/dp/B08CRQ33X8)という銀色の豆腐を購入して具を32GBに入れ替え(32GB/512GB)、Windows 10を設定して使い心地を味わったものの満足するはずなく、GpartedしてUbuntu 20.04を入れて住み替えました。いまはBecky!でメールをまとめて取得してアーカイブする以外ほとんどlxdeにいます。そして在宅24時間のうち17時間くらい触ってます。その、のめり込む環境はまず音楽から。Spotify導入のさわりの話です。

##環境
```
$ cat /etc/issue
Ubuntu 20.04.1 LTS \n \l
```
```
$ snap --version
snap    2.46.1+20.04
snapd   2.46.1+20.04
series  16
ubuntu  20.04
kernel  5.4.0-48-generic
```

##導入
```
$ sudo snap install spotify
```
###導入確認
```
$ spotify --version
Spotify version 1.1.42.622.gbd112320, Copyright (c) 2020, Spotify Ltd
```

##起動
```
$ /snap/bin/spotify --username=your-registered-email-address --password=yours-corresponding
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159724/c0a2c0c0-bab0-93f2-443f-d40eb0adb363.png)
非常によいですね。ちょうどGet Wildがかかっていました。

###Cache Directory
```
$ pwd
/home/nekoneko/snap/spotify/common/.cache
```
デフォルトだとここになります(/home/${user}/app-name/common/でわりかしsnap共通かな)。また、手元での動作未確認ですがこの後に引用するオプションで指定できるようです。実はこれをramdisk(tmpfs)に持っていこうかと思い、ざっと見回したのが話の発端です。

###起動オプション
```
$ spotify --help
```
>Usage: Spotify <options>
>Options which take arguments must be given in the form --option=argument. Supported options include:
>
>--cache-path=<path>
>	Use as root for the cache directory.
>
>--help
>	Show publicly available flags.
>
>--log-file=<path>
>	Save log output to file (extension needs to be '.log').
>
>--minimized
>	Start the app with the window minimized. Only works on Windows.
>
>--mu=<value>
>	Start with a special cache directory. Allows you to run multiple clients at the same
> time. Value can be anything (will be used as part of the cache name).
>
>--password=<password>
>	Use to automatically sign in on startup. Use together with `--username`.
>
>--show-console
>	Show more log output.
>
>--trace-file=<path>
>	Save a trace file to this path.
>
>--uri=<uri>
>	Start the client normally, but automatically navigate to the URI when initialized.
>
>--username=<username>
>	Use to automatically sign in on startup. Use together with `--password`.
>
>--version
>	Output the version of the app.

以上およそ10項目の設定が可能です。

##締めに代えて
Windows版とまったく変わりのない使用感です(Spotifyが)。動作も軽い。僕の場合のWindowsとの違いは、sizerでウィンドウサイズを800x600とかに固定にして使っていたのが、Ubuntuではまだその方法がわからないことくらい(できない？手間かかる？)。それも手で変えればいいし、全く何の不満もない。回し者乙！でした。snapかわいいよsnap おやすみなさい。🐾
ransackでORやANDを明示的に書きたいとき

## ransackとは？
検索用のgem。そのテーブルや関連するテーブルのカラムでの検索をお手軽に実装できる。
https://github.com/activerecord-hackery/ransack
ただ、複雑な検索条件やカラム以外の条件で絞り込みたい場合は少し工夫が必要。

## 今回やりたいこと
ある要素たちについては `AND` で、残りの要素たちについては `OR`で検索したい。
クエリは以下のようになる。

```SQL
SELECT DISTINCT sample_models.* 
  FROM sample_model 
    WHERE (sample_models.column_1 = '202001' AND sample_models.column_2 = '松村北斗') 
      AND ( sample_models.column_3 = 'ジェシー ' OR sample_models.column_4 = '田中樹' ) 
    ORDER BY sample_models.id ASC
```

## 解決策：検索条件のhashを生成する
```
group = {
          "0" => {
                   m: "and",
                   column_1: "202001", 
                   column_2: "松村北斗"
                 }, 
          "1" => {
                   m: "or",
                   column_3: "ジェシー", 
                   column_4: "田中樹"
                 }
        }
```

```Ruby
# 結果
SampleModel.search(g: group).result
```

groupに代入したhashを工夫することで、グルーピングやAND、ORの条件を自分の好きなように操ることができる。
便利！ただ、可読性が下がったりこういったイレギュラーなことをする場合は勉強するコストがかかるので、初めからransackから外れた検索条件もりもりになることが分かっている場合は無理にransackに合わせず自前でクエリ書く方がいい気がする。
【Nuxt.js/Vue.js】 複数行の文字を省略して末尾を三点リーダーにする方法 (IE11も対応)

# 目次
・[3点リーダー対応について](#3点リーダー対応について)
・[cssでの3点リーダー対応](#cssでの3点リーダー対応)
・[Nuxt.js/Vue.jsでの3点リーダー対応](#nuxtjsvuejsでの3点リーダー対応)
・[demo](#demo)

## 3点リーダー対応について
スマホなどのでは特段気にせずにcssのみで対応ができますが、IE11ではcssのみでは対応できず、jsなどを別途実装しないと対応しきれないですが、Nuxt.js/Vue.jsでは簡単に対応可能でしたのでその辺りをサクッと紹介したいと思います。


## cssでの3点リーダー対応
cssでの対応としては

```html:plane_txt
<p class="lineClamp">cssのみでテキストが3点リーダーになるけどIE11では対応しとらんよ。</p>
```

```css:css_only_line_clamp
.lineClamp {
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
```
この内容で対応できちゃいますね。

でも、先ほども話したようにIE11では対応してないのです・・・
~~IEはもう無視するという選択もありかと。~~

## Nuxt.js/Vue.jsでの3点リーダー対応
さて、本記事の本題になります。
Nuxt.js/Vue.jsでの対応は高さや幅で3点リーダーにするcssのやり方とは別で文字数で3点リーダーにします。
コードとしては下記になります。

```vue:Nuxt.js/Vue.js_version_line_clamp
<template>
 <div class="contents">
   <h2>Nuxt.js / Vue.js version line clamp</h2>
   <div class="textBox">
     <p>dataでtextを入れる version</p>
     <p>{{ text | omittedText }}</p>
   </div>
   <div class="textBox">
     <p>直接文字を入れる version</p>
     <p>{{ 'ここに文字をいれてみるよ' | omittedText }}</p>
   </div>
   <div class="textBox">
     <p>20文字以上で３点リーダー version</p>
     <p>{{ 'ここに文字をいれてみるよ。さて、どこまで表示されるかな。' | omittedText20 }}</p>
   </div>
 </div>

</template>

<script>
export default {
 data () {
   return {
     text: "0123456789101112",
   }
 },
  filters: {
    omittedText(text) {
     // 11文字目以降は"…"
     return text.length > 10 ? text.slice(0, 10) + "…" : text;
    },
    omittedText20(text) {
     // 20文字目以降は"…"
     return text.length > 20 ? text.slice(0, 20) + "…" : text;
    }
  },
}
</script>

<style lang="scss" scoped>
  .textBox {
    & + & {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 2px solid #ddd;
    }
    p {
      margin: 0;
    }
  }
</style>
```

filterとsliceを使って3点リーダー処理をしています。

filterに関しては、
{{ }} Mustache構文内にfilter名をパイプ記号( | )で繋げます。

あと、sliceに関しては、
指定文字を抜き出します。
今回は10文字目まで(0〜9)を表示と20文字目まで(0〜19)を表示を試しています。

sliceは、
指定番号〜後ろの指定番号より前を抜き出します。
slice(2) = 2番目〜を抜き出す。
slice(0, 10) = 0番目〜9文字目までを抜き出す。
となります。

```ts:filters
 filters: {
   omittedText(text) {
     // 11文字目以降は"…"
     return text.length > 10 ? text.slice(0, 10) + "…" : text;
    },
    omittedText20(text) {
      // 21文字目以降は"…"
       return text.length > 20 ? text.slice(0, 20) + "…" : text;
    }
  },
```

とこのような実装で文字制御ができ指定箇所で3点リーダーにできます。
最後にdemoを残しておきます。

## demo
<p class="codepen" data-height="600" data-theme-id="light" data-default-tab="js,result" data-user="miyawash" data-slug-hash="NWrWmwN" style="height: 124px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Nuxt.js / Vue.js version line clamp">
  <span>See the Pen <a href="https://codepen.io/miyawash/pen/NWrWmwN">
  Nuxt.js / Vue.js version line clamp</a> by miyawash (<a href="https://codepen.io/miyawash">@miyawash</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
deviseでユーザー登録ができない時に疑うところ6点

#どこまでやったか
- deviseをインストール
- モデルを作成
- マイグレーションファイルにカラムを追加
- form_withでf.labelとf.text_fieldにusersテーブルのカラム名を入れてフォームを作成した

この状態でフォームに入力してもデータベースに保存されない場合のチェックリストです。
usersテーブルに存在するカラムが何なのか詳しくは省略します。

# 1. バリデーション
モデルで変な制約をかけていないかみてみましょう。

```ruby:user.rb
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
         validates :name, presence: true
         validates :profile, presence: true
         validates :occupation, presence: true
         validates :position, presence: true
```

# 2. migrationファイルの制約
テーブル作成の際に変な制約をかけていないかみてみましょう。

```ruby:devise_create_users.rb
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""
      t.string :name
      t.text :profile
      t.text :occupation
      t.text :position
```
# 3. ストロングパラメーター
deviseはストロングパラメーターが使用できないので、代わりにdevise_parameter_sanitizerを使用しますね。
私はカラムがひとつ抜けてていました。見直しましょう。
具体的には、emailのカラムを許可するのを忘れていたのですが、ターミナルで実行した時この画像のように、emailの後にROLLBACKされていたので何かその辺が怪しいなと気がつきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693815/787d15e2-b40b-1e63-c429-6da00c298e36.png)


```ruby:application_controller.rb
class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  private
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [ :email, :encrypted_password, :name, :profile, :occupation, :position])
  end
end
```



# 4. アソシエーション
テーブルを一つしか作成していない状態なら関係ありませんが、複数テーブルがある場合はhas_many　複数形,blongs_to　単数系、など
# 5. passwordのカラム名
最終的にはこれが原因でした。
deviseでのusersテーブルのカラム（デフォルトではencryped_password）ですが、form_withのパスワードとパスワード再入力では、それぞれカラム名をpassword、password_confimationと記述しないといけません。これはpasswordとpassword_confimationが同じかどうかをチェックし、同じならばencryped_passwordに暗号化した文字列を返すという機能がdeviseに実装されているからです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693815/4a74a38d-63bb-4108-ec66-106fb2ebc93d.png)

###間違い
```ruby
        <%= form_with model: @user, url: user_registration_path, local: true do |f| %>

        <div class="field">
          <%= f.label :encryped_password, "パスワード（6文字以上）" %><br />
          <%= f.password_field :encryped_password, autocomplete: "new-password" %>
        </div>

        <div class="field">
          <%= f.label :encryped_password, "パスワード再入力" %><br />
          <%= f.password_field :encryped_password, autocomplete: "new-password" %>
        </div>
以下略
```
###正解
```ruby
        <%= form_with model: @user, url: user_registration_path, local: true do |f| %>

        <div class="field">
          <%= f.label :password, "パスワード（6文字以上）" %><br />
          <%= f.password_field :password, autocomplete: "new-password" %>
        </div>

        <div class="field">
          <%= f.label :password_confirmation, "パスワード再入力" %><br />
          <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
        </div>
以下略
```

#6. データベース可視化ソフトが原因
以前別のところで発生しましたが、データベースを可視化しているソフトを（私の場合はSequel Pro）再起動したら実は保存されていた、なんてこともあり得ますので確認ください。

以上
Linear層から出した分散共分散行列をMultivariateNormalに渡すときに ~ is zero, singular U のエラーが出る

# やったこと
pytorchはv1.5.1を使用．
Linearの出力を(x, y, vxx, vyy, vxy)として，分散共分散行列を作りMultivariateNormalに渡す．

```python
fc = nn.Linear(n, 5)
output = fc(x)
mean = output[:2]
vxx, vyy = nn.Softplus()(output[2:4])
vxy = output[-1]

covariance_matrix = torch.zeros(2, 2)
covariance_matrix[0, 0] += vxx
covariance_matrix[0, 1] += vxy
covariance_matrix[1, 0] += vxy
covariance_matrix[1, 1] += vyy

dist = MultivariateNormal(mean, covariance_matrix)
 ```

# RuntimeError: cholesky_cuda: For batch 0: U(6,6) is zero, singular U. 
MultivariateNormalでは分散共分散行列をコレスキー分解しているため，正定値行列を与える必要がある．このままではcovariance_matrixが正定値行列であることを保証していないので上記エラーが起こる．

# 解決法: コレスキー分解後の下三角行列を渡す．

```python
fc = nn.Linear(n, 5)
output = fc(x)
mean = output[:2]
a, c = nn.Softplus()(output[2:4])
b = output[-1]

L = torch.zeros(2, 2)
L[0, 0] += a
L[1, 0] += b
L[1, 1] += c

dist = MultivariateNormal(mean,  scale_tril=L)
```

>scale_tril (Tensor) – lower-triangular factor of covariance, with positive-valued diagonal

とあるので対角成分の$a, c$はsoftplusで正の値にしている．

分散共分散行列にするときにはコレスキー分解

```math
\Sigma = LL^{T}
```

に従い，

```python
covariance_matrix = np.dot(L, L.T)
```

とすればよい．
プロジェクト管理ツールplanioを使い始めてみました

#プロジェクト管理ツール

10/15に勉強会主催するにあたって、やっぱりタスク管理ツールが必要だなと
これまで仕事ではtracやRedmineをメインに使い、昨年からMicrosoft365のPlannerも使い始めました。

一人プロジェクトとはいえ、これまでガントチャート型が使い慣れてます。今主流はカンバン型のようですが。
両方を使える無料クラウドツールはないかと調べたところ

planioというものを発見しました。
紹介記事はこちら　https://redmine.jp/hosting/

使用感などレポートしていきます。

まず、1時間も満たない時間ですが、RedmineやTrac使ったことのある人は取説読まずに直感的に使いこなせるでしょう。
ビデオ会議機能もあるようです。