OmniAICreator/Qiita-1.07M huggingface dataset:
picoCTF 2019 what's a net cat? - Points: 100

#問題

https://2019game.picoctf.com/problems

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/4f3db12a-f084-a758-4f0f-396b75388ff6.png)

#解いてみた

ncでつなげてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/859a3f55-80c3-b3d3-c60f-1d12b10897d8.png)

つなぐ練習問題でした。
Linux一般ユーザーがTABキーや矢印キー押しても補完機能が動作しない

# はじめに
Dockerを使うとよく遭遇するのでここで共有させていただきます。
<sub>2021/03/11: ターミナルでコマンドを編集する時に知っていると便利なコマンドを追加

## 一般ユーザーがTABキーや矢印キー押しても補完機能が動作しない
Linuxで一般ユーザーでログインした時に**矢印キー**や**TABキー**を押下しても**コマンドの候補が表示されない**場合があります。そのような場合は、作成したユーザーのシェルがbashではなくshになっている可能性があります。

UNIX系では、「**/etc/passwd**」というファイルにユーザー情報が格納されます。
このファイルの１行が１人のユーザに該当する情報です。また、各行はさらに「：（コロン）」で区切られており、以下の意味を持ちます。

```bash
ユーザ名:パスワード:ユーザ番号:グループ番号:コメント:ホームディレクトリー:シェル
```

#### 対策
もし、TABキーや矢印キー押しても思った通り動作しなかった場合は、そのユーザーの情報を確認します。例えば、「dakc」というユーザーでログインした時に発生した場合は、以下のコマンドで「dakc」の情報を確認します。

```bash
# cat /etc/passwd |grep dakc
dakc:x:1092:1092::/home/kc:/bin/sh
```
最後に見たらわかりますが、シェルが**/bin/bash**ではなく、**/bin/sh**になっています。


このままターミナルからbashを実行してもいいですが、これが一時的なものなので、以下のコマンドを実行します。

```bash
# chsh -s /bin/bash dakc
```
<font color="blue">-sの意味は、ユーザのシェルを新たに 指定したシエルにする意味です。
(--shellでもOK)

上記の方法で/etc/passwdの中身を確認するとシェルがbashに変わったのが確認できるかと思います。もし、似たような事で困っていたら、まずユーザーの情報を調べてみてください。

# 知っておくと便利
ターミナルでコマンドを編集する時によく使うコマンドを下記のページにて紹介しています。
https://qiita.com/_dakc_/items/e603f277ec4135c4cfee
[VSCode]macOSでC/C++のデバッグができなくなった時の対処法

#デバッグができない
かなしい😢

##エラーメッセージは様々
**Unable to create 'launch.json' file inside the '.vscode' folder (Cannot read property 'length' of undefined).**
だとか
いざデバッガが走り出してもBreakpointでストップしないだとか
[ここ](https://github.com/microsoft/vscode-cpptools/issues/3829)にとりあえずの対処法がありました

##解決法
- VSCodeの拡張[CodeLLDB](https://marketplace.visualstudio.com/items?itemName=vadimcn.vscode-lldb)を入れる
2. 以下のコマンドを実行

```bash
mkdir .vscode
touch .vscode/launch.json
touch .vscode/tasks.json
```

- jsonファイルをそれぞれ編集

```tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "clang++ build active file",
      "type": "shell",
      "command": "clang++",
      "args": ["${fileBasename}", "-o", "${fileBasenameNoExtension}.out", "-g"],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}
```

```launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "clang++ build and debug active file",
      "type": "lldb",
      "request": "launch",
      "program": "${fileDirname}/${fileBasenameNoExtension}.out",
      "args": [],
      "cwd": "${workspaceFolder}",
      "preLaunchTask": "clang++ build active file"
    }
  ]
}
```
- **⌘ + Shift + b**でコンパイル
- あとは通常通り 

##おわりに
根本的原因等誰かわかりましたら教えてください...

##追記
「macOS Catalinaへの更新時にデバッグできなくなった時の対処法」としていましたが、未だにこの問題があるようなのでタイトルを更新しました。
Edgeの開発者ツールが空白で表示される場合の対処法

# Edgeの開発者ツールが空白で表示され、リセット・修復・再インストールでも直らない場合

Edgeを開いた状態または閉じた状態のどちらかで、以下のコマンドをPowerShellで実行する。
（どちらでうまくいったのかは失念しました）

```
Add-AppxPackage -register “C:\windows\SystemApps\Microsoft.MicrosoftEdgeDevToolsClient_8wekyb3d8bbwe\AppxManifest.xml” -DisableDevelopmentMode -Confirm:$false
```

参考
[stackoverflow:Microsoft Edge F12 Developer Tools don't open](https://stackoverflow.com/questions/32500709/microsoft-edge-f12-developer-tools-dont-open)

[Edge showing blank developer toolbar](https://developer.microsoft.com/un-us/microsoft-edge/platform/issues/18153935)
※MSのサイトはリンク切れ
【Xamarin】C#でAndroidアプリを作ってみる 6 (簡単なアニメーション)

#概要
前回：[C#でAndroidアプリを作ってみる 5 (見栄えの調整)](https://qiita.com/plusM/items/167db1a10dfce1c1ef52)
今回は、干支×星座算出結果表示に簡単なアニメーションを追加します。
生年月日選択→待機アニメーション→算出結果表示という流れです。

# アニメーションさせる画像を追加する
「Resources\drawable」に画像を追加します。
この画像ファイル名をstar.pngとします。
activity_main.xmlに、以下のImageViewを追加します。

```xml:activity_main.xml
    <ImageView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/star_image" 
        android:src="@drawable/star"
        android:visibility="gone"/>  
```

「visibility="gone"」で表示領域を確保せずに非表示にしています。

# アニメーションを定義する
ソリューションエクスプローラーの「Resources」で右クリックし、追加→新しいフォルダを選択します。
フォルダ名を「anim」とします。
更に、「Resources\anim」で右クリックし、追加→新しい項目を選択します。
XMLファイルを選択します。
![xml追加.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/d11d9e7c-6011-27e4-fe3e-418c77f83838.png)
ファイル名は「wait_animation.xml」としました。追加ボタンを押下します。
コードは以下の通りです。

```xml:wait_animation.xml
<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/accelerate_interpolator">
  <translate android:duration="800"
             android:fromXDelta="0%p" 
             android:toXDelta="100%p"
             android:fromYDelta="0%p"
             android:toYDelta="100%p"/>
</set>
```
左上から右下に移動するアニメーションです。 

# アニメーションを開始する
アニメーションを開始するために、MainActivityに以下のコードを追加します。

```cs:MainActivity.cs
using Android.Views.Animations;

・・・省略・・・
        // 星の画像
        ImageView starImage;
・・・省略・・・

        protected override void OnCreate(Bundle savedInstanceState)
        {
            ・・・省略・・・
            starImage = FindViewById<ImageView>(Resource.Id.star_image);
        }

        /// <summary>
        /// 結果を表示する
        /// </summary>
        private void DisplayResults(DateTime time)
        {
            // 星画像を表示する
            starImage.Visibility = Android.Views.ViewStates.Visible;

            // アニメーション開始
            var waitAnimation = AnimationUtils.LoadAnimation(this, Resource.Animation.wait_animation);
            starImage.StartAnimation(waitAnimation);

            // アニメーション完了イベント
            starImage.Animation.AnimationEnd += (sender, e) => {

                // 星画像を非表示にする
                starImage.Visibility = Android.Views.ViewStates.Gone;

                selectedDateLabel.Text = time.ToString("yyyy年MM月dd日")
                            + $"\r\nあなたは、{GetEto(time.Year)}年 {GetSeiza(time.Month, time.Day)}です。";
            };              
        }
```

日付選択処理(DateSelectButton_Click)を以下のように変更します。

```cs:MainActivity.cs
        /// <summary>
        /// SELECT DATEボタン押下時の処理
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void DateSelectButton_Click(object sender, System.EventArgs e)
        {
            var frag = DatePickerFragment.NewInstance(DisplayResults);
            frag.Show(FragmentManager, DatePickerFragment.TAG);
        }        
```
# 実行してみる
![kbuce-rq1zu.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/7c2316e7-11bc-37dd-cc4d-c99cbaef2261.gif)

# まとめ
今回は、簡単なアニメーションを追加するところまでを行いました。
次回は、未定です。
Rails: validates:  指定した値の時だけ複数カラムでuniquenessを制約を掛ける方法備忘録




# ケース
一つのfugaに対して紐付く複数のhogeの内、is_piyoがfalseであれば幾らでも登録できるが、trueのものは一つしか登録できないようにしたい

# コード

```ruby:app/models/user.rb
class Hoge < ApplicationRecord
  belongs_to :fuga

  validates :is_piyo,
            inclusion: { in: [true, false] },
            uniqueness: { scope: :fuga_id,
                          conditions: -> { where(is_piyo: true) }}
end
```
【Prosessing】MISSION01. タイプライタープログラム 【★✩✩✩✩】

#タイプライターを作ろう

LESSON01.1~LESSON01.3の内容を使って、タイプライターを作りましょう。
[LESSON01.1](https://qiita.com/Fukube_Keisuke/items/e3b6eed0ce5b6cfc5fd3)
[LESSON01.2](https://qiita.com/Fukube_Keisuke/items/59ddfba0371536dc140e)
[LESSON01.3](https://qiita.com/Fukube_Keisuke/items/7cf18bf70aa1e21b5c54)
![GIF.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493679/a8d331b1-6ca5-fde5-82fc-6a78fb3cf2b9.gif)

結果の例はこんな感じですが、完全にこのようにならなくてもいいです。

#プログラムの条件

- キー入力した文字が出ること
- 押されたキー分文字が出ること

だけです。もし文字が潰れてしまったり、重なって表示されてしまうようだったらメンターに聞いて解決策を聞こう！
非同期通信(Ajax)の自分用メモ

# 非同期通信(Ajax)
1. ビューファイル上でイベントを発火させる
2. イベントを検出する(sample.jsのl. 1)
3. $.ajaxでコントローラを指定して値を渡す

---
### 雛形
```js:sample.js
$("要素指定").on("イベント指定", function(){
  // 変数定義

  $.ajax({
      type: 'HTTPメソッド',    // type, urlの組でアクションを指定
      url: 'アクションに対応するurl',
      data: { キー: 値 }, 
      dataType: 'json'
  })
  
  .done(function(変数){
  //処理を記述
  
  })
})
```
- 1行目の要素はテキストフィールド(input要素など)

---
### ```$.ajax``` 内のキーとバリュー
ajaxのリクエストに関する設定を行う
- type:とurl: で値を渡したいコントローラーとアクションを指定する
- data: サーバーへ送信するデータ
- dataType: jsonで非同期通信を実装するので"json"
- FormDataを使うときは以下の設定を追加
  - processData: false,
  - contentType: false

(渡された値の確認は送信先のコントローラでbinding.pryをする)

---
jbuilderは上のアクションの名前にする```console.log(JSON.stringify())```でjsonを確認できる

---
### ```.done```
doneの第一変数には`data`を渡す。これはjbuilderで定義されたもの。
  - 要素を追加
  - 要素を削除
### ```.fail```
なぜ初心者がプログラミングにつまずくか。

私は未経験でSEになりました。

どなたもプログラミングを始める時は未経験だと思いますが、なぜガシガシ書けるようになるのか。つまずかなかったのでしょうか。

逆に、私がプログラミング出来ない！と壁にぶつかった経験からなぜ人々は簡単に習得出来ないのか考えました。



① 英語だから
これは大きいと思います。
日本人は英語が苦手です。英語だから難しいと思う潜在意識が働いて、勝手に難しいと思い込んでしまいます。それとか、初見で意味がわからなかったり。。。
とにかく、英語アレルギーが働くことがプログラミング苦手意識に繋がると思ってます。

②作りたいものとかけ離れた見た目(エディタに映るソース)だから
プログラミングを始める人は、だいたいの方が、作りたいものがあるor仕事のためかと思います。
作りたいのは、ここのボタンを押して、こうなる！とかイメージがあっても、書くものはごちゃごちゃの英語ですからね。。。

③イメージが湧かないから
とにかく、イメージ出来ない。
日本語の説明を読んでも分からない。
むしろ、日本語の説明を読むとより分からない。


④技術書が分厚すぎるから
鈍器そのもの、と言っては過言だけど、分厚すぎる。
(そもそも、プログラミングはイメージを言語化したものなのに、その言語化されたものを文章におこすとややこしくなるのは目に見え。。。)


⑤文法出来てもオブジェクト指向で蹴躓く
③にも書きましたし、④にも書きましたが、イメージ湧かないのに、イメージ湧かないオブジェクト指向を文章化されたら頭ぐちゃぐちゃになってもおかしくない。




以上、5点が浮かびました。
これらをクリアする方法は、もう少し私がレベルアップした際にまとめたいと思います。

ps.この5点を逆手にとることがポイント？と今は思ってます。
【Prosessing】LESSON01.3 text();テキストを画面に表示する方法 【★✩✩✩✩】

#text();

文字を自分のプログラムの中に表示させたい場合text();を使います。書き方としては、text(文字列型,数値型,数値型,数値型,数値型);の順番で入れていきます。もっと具体的に書くと、text("文字",表示させるx座標,表示させるy座標,表示横幅,表示縦幅);の順番で書きます。もし「aaa」という文字を「x座標100,y座標200,横幅200,縦幅100」で書きたい場合は、


```java:fukube.pde
void setup(){
  size(1000,500);
  text("aaa",100,200,200,100);
}
void draw(){

}
```

と書きます。

表示させる文字はこういった方法でも決められます。

```java:fukube.pde
String John="aaa";
void setup(){
  size(1000,500);
  text(John,100,200,200,100);
}
void draw(){

}
```

#文字に色をつける

文字に色を塗りたい場合はfill(色)を使います。詳しくは[ここ](https://qiita.com/Fukube_Keisuke/items/7295989c792c6d998010)の記事を参考にしてください。


```java:fukube.pde
void setup(){
  size(1000,500);
  fill(0,0,255);
  text("aaa",100,200,200,100);
}
void draw(){

}
```
#テキストのサイズ

テキストの大きさを変えたい場合はtextSize(数字);と書くとそれ以下の文字の大きさが数字のサイズになります。

```java:fukube.pde
void setup(){
  size(1000,500);
  textSize(35);
  text("aaa",100,200,200,100);
  textSize(50);
  text("bbb",100,400,200,100);
}
void draw(){

}
```

#文字のモードtextAlign()

文字を指定した範囲のどの場所から表示させるかを設定することもでき、textAlign(モード);というものがあります。
設定をしていない場合はデフォルトでは、textAlign(LEFT,TOP);となっていて、左上端から文字が出現されるようになっています。モードには、横方向の設定である「LEFT」、「CENTER」、「RIGHT」と縦方向の設定である「TOP」、「BOTTOM」、「CENTER」、「BASELINE」があります。

```java:fukube.pde
void setup(){
  size(1000,500);
  textSize(35);
  textAlign(CENTER,CENTER);
  text("CCC",100,200,1000,500);
}
void draw(){

}
```

##MISSION01に続く

[MISSOIN01](https://qiita.com/Fukube_Keisuke/items/41ace9b13be3cf068fe8)
EvernoteAPIを使ってPythonでノートを作ってみる

前回
・[Evernote デベロッパートークンを入手する。](https://qiita.com/positive_023/items/4895afb65d2bf8a50b33)
でEvernoteのデベロッパートークンを入手したので、Spyderからノートブックとノートの作成をしようと思います。
この記事は[The Evernote SDK for Python Quick-start Guide](http://dev.evernote.com/doc/start/python.php)のCommonTaskを参考に作成しています。



まずはSpyderを起動します。
過去に[python2.7の仮想環境を作成](https://qiita.com/positive_023/items/12746e9ad9fec746e993)しているので、その環境下で作成します。

Spyderはanakonda prompt から conda activate py27と入力した後、Spyderと入力し、Spyderを起動してもいいですし、既にこの環境で起動したことがあればスタートメニューのanacondaのフォルダにSpyder(py27)というショートカットができているのでそこから立ち上げてもよいです。(便利ですね)

立ち上げたSpyderに以下のプログラムを打ち込んで保存します。

The Evernote SDK for python Quick-start Guideには以下の様な記述がありますが、これをこのまま打ち込んでもプログラムは動きません。

```php
noteStore = client.get_note_store()
note = Types.Note()
note.title = "I'm a test note!"
note.content = '<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE en-note SYSTEM "http://xml.evernote.com/pub/enml2.dtd">'
note.content += '<en-note>Hello, world!</en-note>'
note = noteStore.createNote(note)
```

###まず、evernoteAPIを読み込みます。

```php
# coding:utf-8
from evernote.api.client import EvernoteClient
import evernote.edam.type.ttypes as Types
```

###次にEvernoteクライアントを呼び出します。

```php
client = EvernoteClient(token='ここにデベロッパートークンを記載します')
```


###ノートを設定します。
ここからThe Evernote SDK for python Quick-start Guideに記載されているプログラムを使います。

```php
noteStore = client.get_note_store()
note = Types.Note()
note.title = "I'm a test note!"
note.content = '<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE en-note SYSTEM "http://xml.evernote.com/pub/enml2.dtd">'
note.content += '<en-note>Hello, world!</en-note>'
note = noteStore.createNote(note)

```


以下の全てつなげたものを、Spyderを立ち上げ入力し、Evernote_New_note_create.pyという名前で保存します。

```php:Evernote_New_note_create.py
# coding:utf-8
from evernote.api.client import EvernoteClient
import evernote.edam.type.ttypes as Types
client = EvernoteClient(token='ここにデベロッパートークンを記載します')
noteStore = client.get_note_store()
note = Types.Note()
note.title = "I'm a test note!"
note.content = '<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE en-note SYSTEM "http://xml.evernote.com/pub/enml2.dtd">'
note.content += '<en-note>Hello, world!</en-note>'
note = noteStore.createNote(note)
print('note created')
```
Spyderで実行して、右下のコンソールにnotecreatedと表示されるとノートは作成されているはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273281/01a41566-c84f-e580-e337-6295b8535e9a.png)


###evernoteにログインして確認してみる
ここで、evernoteにログインしてノートが作成されたか確認してみようとしたが、自分のEvernoteアカウントと、開発用のアカウントのメールアドレスを同じにしてしまったので、開発用アカウントに入ることができなくなったが、以下の方法で入ることができた。

[Developer Tokensのページ](https://dev.evernote.com/doc/articles/dev_tokens.php)を開く。

Sandboxをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273281/1fdcd260-bb56-800d-9c6a-378ce1ffae91.png)


右上のノートに移動をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273281/62b85954-8191-bf4c-988b-552c5a5c68b8.png)

すると、開発用のevernoteにログインできて、上記で作成した「I'm a test note!]という名前のノートが作成されており、「Hello,world」とノートの中に記載されているのがわかる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273281/7d5efcad-8fc7-6b76-1f96-70ba3bad6e22.png)
【小ネタ】terminalからエラーメッセージをググる

ターミナルで実行する際にエラーが出た時、ブラウザを起動して検索するプロセスでとても億劫になっていたのでターミナルから検索したい文字を入力すると自動でブラウザが開いて検索してくれるsomethingを作りました。
これでエラーが出たときに気負う事なく検索ができるようになります。
小ネタ程度のものなので、コピペして必ず動くとは言えないほどガバなコードです。
フローだけ参考にして、よかったら自作してみてください。

# 詳細
コマンドライン引数に検索したいワードを入力し、実行することで入力したワードを検索します。
検索結果は、ブラウザが起動して表示されます。
使用したブラウザは、safariです。
数行で書けます。

#コード
```python:search.py
import webbrowser, sys

url = 'https://www.google.com/search?client=safari&rls=en&q={}&ie=UTF-8&oe=UTF-8'
search = ' '.join(sys.argv[1:])
webbrowser.open_new_tab(url.format(search))

```
実行する際の、python search.py hoge の python search.pyを環境変数にします。

```terminal:terminal
$ echo export google=python\ search.pyのフルパス >> ~/.bash_profile
$ source .bash_profile
```
これで簡単にターミナルから検索ができるようになりました。

```terminal:terminal
$ $google hoge
```
#感想
大したものではないですがこの程度のもので効率が上がるならええやん。と思いました。
pipを使おうとして「TypeError: 'module' object is not callable」が出た場合の対処方法メモ

正確な発動条件が定かではないですが、ubuntu18.04にpipを手動インストールし、pyenvで環境構築した際にタイトルのエラーが発生したので、解決できた方法をメモします。

# 現象
上記条件で、pyenvで作成したpython環境でpipを実行しようとすると次のエラーが出て動かない。

```sh
>> pip
Traceback (most recent call last):
  File "/home/dev-user/.pyenv/versions/3.6.7/bin/pip", line 11, in <module>
    sys.exit(main())
TypeError: 'module' object is not callable
```

# 解決方法

pyenv環境で次のコマンドでpipインストールを再実行したところ解決。

```sh
curl -kL https://bootstrap.pypa.io/get-pip.py | python
```

# あとがき

エラーメッセージで検索すると、aptでpipをアップデートしている記事や、pip install pip==18.0などでversionを戻している記事などはあったのですが、直接的な解法にたどり着くのに時間がかかったのでメモを兼ねて記事にしました。
Invalid block tag on line 19: 'endblock'. Did you forget to register or load this tag?が出てきたら

Invalid block tag on line 19: 'endblock'. Did you forget to register or load this tag?

というエラーが出てきたが直前の
{% block content % }
で%と}の間にスペースがあったため、Djangoがtagを読み取ってくれなかったからであった。スペースをなくしたら解決した。
【Python】datetimeオブジェクトのタイムゾーンを一行で変更する(JST <=> UTC)

何番煎じかわかりませんが、(タイムゾーン指定のない)シンプルな日時文字列から、入力と出力のタイムゾーンを指定して変換結果を得るコードのメモになります。

utcとの差分9時間を加減すれば処理できるのですが、ちゃんと?、'UTC'、'Asia/Tokyo'などとタイムゾーンを指定して変換したい場合のコードです。

日付関連の用語に慣れていないので、もし誤用などありましたらご指摘ください。

# 使っているライブラリ

```Python
import datetime
import pytz
```

# JSTの日時文字列をUTCに変換する

```Python
# 文字列から(タイムゾーン情報を持たないnaiveな)datetimeオブジェクトを作成する
datetime_obj = datetime.datetime.strptime("2019-10-28 13:00:00", "%Y-%m-%d %H:%M:%S")

# 変換(JST -> UTC)
utc_datetime_obj = pytz.timezone('Asia/Tokyo').localize(datetime_obj).astimezone(pytz.timezone('UTC'))

# 結果を確認
print(utc_datetime_obj.strftime("%Y-%m-%d %H:%M:%S"))
# (9時間前の時刻が表示される)
# 2019-10-28 04:00:00
```

## やっていること

### datetimeオブジェクトを作成

日時文字列とその書式情報から、タイムゾーン情報を持たないnaiveなdatetimeオブジェクトを作成

```Python
datetime_obj = datetime.datetime.strptime("2019-10-28 13:00:00", "%Y-%m-%d %H:%M:%S")
```

### datetimeオブジェクトにタイムゾーン情報を付与

作成したdatetimeオブジェクトに(JSTの)タイムゾーン情報を付与してawareなdatetimeオブジェクトを作成

```Python
jst_datetime_obj = pytz.timezone('Asia/Tokyo').localize(datetime_obj)
```

### astimezoneでUTCに変換

```Python
utc_datetime_obj = jst_datetime_obj.astimezone(pytz.timezone('UTC'))
```


# (逆) UTCの日時文字列をJSTに変換する

```Python
# この文字列をUTCに見立てて処理する
# 文字列から(タイムゾーン情報を持たないnaiveな)datetimeオブジェクトを作成する
datetime_obj = datetime.datetime.strptime("2019-10-28 13:00:00", "%Y-%m-%d %H:%M:%S")

# 変換(UTC -> JST)
jst_datetime_obj = pytz.timezone('UTC').localize(datetime_obj).astimezone(pytz.timezone('Asia/Tokyo'))

# 確認
print(jst_datetime_obj.strftime("%Y-%m-%d %H:%M:%S"))
# (9時間後の時刻が表示される)
# 2019-10-28 22:00:00
```
初心者によるプログラミング学習ログ 139日目

# 100日チャレンジの139日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

139日目は、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>139日目<br><br>udemyでjavascript学習<br><br>疲れていたのあんまりすすまず<a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/javascript?src=hash&amp;ref_src=twsrc%5Etfw">#javascript</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E3%81%A4%E3%81%AA%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアとつながりたい</a> <a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1187113515997253632?ref_src=twsrc%5Etfw">October 23, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Ink Recognizer REST API を使用してデジタル インクの認識アプリを作成する

今回は比較的新しい Ink Recognizer を使用して、手書きで書いた文字を認識するアプリを作成してみようと思います。

#Ink Recognizer をデプロイする
Azure Portal から Ink Recognizer をデプロイします。新しいリソースの作成で、「Ink」と入力すると出てくるので、任意の名前を付けてデプロイします。この記事を執筆時点ではまだプレビュー版でした。(2019/10/26時点)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/6d86dec2-f7c1-01aa-47e0-b5ad0e96d86e.png)
デプロイが終わり構築されたリソースのページ移動すると、API に接続するための Key が表示されています。後程使用するのでこれをメモしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/e60864da-355b-a2e0-caea-346bc9b3ae48.png)


#サンプルコードを GitHub よりデプロイする
Microsoft の GitHub にサンプルコートがあります。今回はそれを使用してアプリを作成します。
https://github.com/Azure-Samples/cognitive-services-REST-api-samples

任意のローカルディレクトリに上記の GitHub コードをデプロイし、Ink Recognizer のアプリがあるディレクトリに移動します。

```
git clone https://github.com/Azure-Samples/cognitive-services-REST-api-samples
cd SampleCode\cognitive-services-REST-api-samples\javascript\InkRecognition\javascript-app\src
code .
```

これを実行すると、Visual Studio Code が立ち上がります。

#API Key を入力する
config.js の該当の箇所に最初にコピーしたサブスクリプションキーを入力します。

```config.js
SERVER_ADDRESS = "https://api.cognitive.microsoft.com";
ENDPOINT_URL = SERVER_ADDRESS + "/inkrecognizer/v1.0-preview/recognize";
SUBSCRIPTION_KEY = "ここです！！！！";

// Languages for user to try
LANGUAGE_TAGS_TO_TRY = ["en-US", "de-DE", "en-GB", "fr-FR", "hi-IN", "ja-JP", "ko-KR", "zh-CN"];

// Window.devicePixelRatio could change, e.g., when user drags the window to a display with different pixel density,
// however, there is no callback or event available to detect the change.    
// In this sample, we assume devicePixelRatio doesn't change.
PIXEL_RATIO = window.devicePixelRatio;
MILLIMETER_PER_INCH = 25.4;
PIXEL_PER_INCH = 96;
MILLIMETER_TO_PIXELS = PIXEL_PER_INCH / (MILLIMETER_PER_INCH * PIXEL_RATIO);
PIXEL_TO_MILLIMETERS = MILLIMETER_PER_INCH * PIXEL_RATIO / PIXEL_PER_INCH;
```

サンプルコードの中にはあらかじめエンドポイントの URL がセットされていますので、そこは変更する必要はありません。
ここまでで一応 InkRecognizer のサンプルコードの設定が完了です。

#実際に動かしてみる
sample.html を任意のブラウザで開いてみましょう。開くと二つの空のボックスが表示されます。左側のボックスが字を書くところで、右側のボックスが InkRecognizer が認識した JSON を返すところです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/6ed65d62-c088-288f-cc8f-912245c996f5.png)


実際に「Hello」と手書きで書いてみました。右側のボックスには認識された JSON コードが返ってきていました。中身を見るとちゃんと「hello」と認識されていることが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/6d24b73f-f67f-8937-cc64-f8c4869451f8.png)

#さいごに
今回は初めて InkRecognizer を使用してみましたが、API のように非常に簡単に扱うことができるので、色々使い道はあるかなと思いました。次回の記事では日本語をどれくらい認知できるのかどうかについて探求しようと思います。
##参考 URL
InkRecognizer Cognitive Service JavaScript Sample
https://github.com/Azure-Samples/cognitive-services-REST-api-samples/tree/master/javascript/InkRecognition/javascript-app
ネットワーク#1：覚えた技術を日々書き留める

### BuffaloのルーターとPCでローカルネットワークを作るために設定画面を表示

①ルーターの電源を入れ、ルーターについている切り替えボタンを
「ROUTER」「MANUAL」に切り替える
(MANUALに切り替えていないと、設定画面に表示されない項目があったりして
やり直しになってしまうかもしれないので注意)

②ルーターとPCをLANケーブルでつなぐ
(インターネットには接続しない)

③ブラウザを開き、192.168.11.1にアクセス

④「ネットワークにつながってないよ～」というような
画面が表示されるので、ブラウザのURLを「http://192.168.11.1」にしてもう一度
アクセス。

④設定画面へのログイン画面が表示されるので、ユーザー名とパスワードを入力

⑤ログインできる
railsでfaviconを３ステップで実装してみた

## STEP1
下記ファイルに<%= favicon\\\_link\\\_tag('favicon.ico') %>を追加する

~~~html:application.html.erb
<!DOCTYPE  html>

<html>
<head>
  <title>Sample</title>
  
  <%=  favicon\_link\_tag('favicon.ico') %>//この１行を追加する
  
  </head>
  
  [省略]
~~~
## STEP2
下記のサイトでアイコンにしたい画像を変換する
 https://ao-system.net/favicon/
**favicon.ico**が生成される
## STEP3
**assets/assets/images**配下に**favicon.ico**ファイルを設置する
<img width="348" alt="スクリーンショット 2019-10-28 21.17.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487723/b159467b-3987-9f8f-4ebd-0c9690bbf8bb.png">


あとはサーバーを再起動すれば実装されています!!
初めてのプログラミングをＣ＃で始める人に勧めたいＰＣ

なるべくいいスペックにしましょう
Visual Studio はそれなりに重いです
ReSharperというツールの仕様もお勧めしたいので

CPU intel製がお勧め、i7かi9せめてi5、コスパが良くないのでi3はだめ、だったら廉価なセレロンとか最近あまり見かけなくなったAMDとかの方がまし

4コア以上

HDDでは無理です
容量少なめでもSDDです

メモリーは多い方がいいです
純正は高いので、メモリー交換が簡単な機種を選びあとで交換した方が安くつくかも
32GBできれば64Gb

間違っても、Appleは買わないよう
できるという意見もありますが、いろいろ手間だし、ダメなこともあります
【Prosessing】LESSON01.2 void keyPressed(){     } キーを押したら【★✩✩✩✩】

#キーボード入力

キーボードのキーを押すと図形が移動したり、色が変わったり、なにかしらの動きをさせるゲームはよく見ます。Processingでは多くの場合「void keyPressed()」を使います。もし、なにかしらのキーを押したら〇〇する。という感じで使うのが主流です。keyPressedの中に「keyが〇だったら」のif文を追加すると、指定したキー入力をした時だけ、〇〇するというプログラムにすることもできます。

```java:fukube.pde

void setup(){
//ここにはvoid keyPressed()は書かない
  size(1000,500);
}
void draw(){
//ここにはvoid keyPressed()は書かない
}
void keyPressed(){
 println("何かしらのキーが押された");
}
```

#キーの指定

キーの指定の方法はif文を使います。ただ、キーボードには三種類のキーが存在していて、a,b,cなどのアルファベットと、「ENTER」や「BACKSPACE」などのキー、「↑↓→←」や「Shift」などのキーコードがあります。アルファベットや「ENTER」などのキーはLESSON01.1で出てきた「key」を利用し、if(key=='〇'){}などと書きます。キーコードの場合は、キーコードが押された、かつ、〇〇のキーが押されたという二段階のif文を書かなければなりません。if((key==CODED)&&(keyCode==UP)){}など。スペースキーの場合は「key==' '」でOK。

```java:fukube.pde

void setup(){
  size(1000,500);
}
void draw(){

}

void keyPressed(){
  if(key=='a'){
    println("aが押された");
  }
  if(key==CODED){
    if(keyCode==UP){
      println("上キーが押された");
    }
  }
}
```


#void keyPressed(){}を使って変数の値を変えてみよう

キーボード入力を使って変数の値を変えてみよう。変数の型はなんでもいいから、自分で設定したキーを押したらどんなことが起きるようにしたいか考えてプログラムを作ってみよう。例）Aキーを押した分だけ、変数iの値が1ずつ増えていく。Bキーを押したら10ずつiの値が増えていくなど。メンターに見せてみよう。

##LESSON01.3に続く

[LESSON01.3](https://qiita.com/Fukube_Keisuke/items/7cf18bf70aa1e21b5c54)
【Xamarin】C#でAndroidアプリを作ってみる 5 (見栄えの調整)

#概要
前回：[C#でAndroidアプリを作ってみる 4 (画面作成2)](https://qiita.com/plusM/items/36f2493d83181d642eae)
今回は、デフォルトのままのコントロールの見栄えを整えます。

# Buttonに画像を表示する
SELECT DATEボタンの背景に画像を表示します。
ソリューションエクスプローラーの「Resources\drawable」を選択します。
右クリックでメニューを表示し、追加⇒既存の項目を選択します。
![ソリューションエクスプローラ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/1d58babe-0eda-3778-2f1f-a75d194546f1.png)
画像ファイルを選択して追加します。以降、ファイル名を仮にbutton.pngとします。

Buttonのtextを、Resources\values\strings.xmlに定義します。
ついでに、app_nameも変更してタイトルを変えます。

```xml:strings.xml
<resources>
    <string name="app_name">干支×星座算出アプリ</string>
    <string name="action_settings">Settings</string>
    <string name="date_select_button">誕生日を選択してね！</string>
</resources>
```

activity_main.xmlのSELECT DATEボタンを以下のように変更します。

```xml:activity_main.xml
    <Button
        android:text="@string/date_select_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="25px"
        android:minHeight="25px"
        android:id="@+id/date_select_button"
        android:background="@drawable/button"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10px"
        android:gravity="top"/>
```
「layout_centerHorizontal="true"」で水平方向の真ん中にします。
「layout_marginTop="10px"」で上に余白を作ります。
「gravity="top"」で文字を上に移動します。

実行してみると、下図のようになります。
![Button.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/9d70d7da-cf61-8151-70ee-a262244c9db9.png)

# 算出結果のラベルを見やすくする
算出結果の文字を大きくして、真ん中に表示します。
TextViewを以下のように変更します。

```xml:activity_main.xml
    <TextView
        android:id="@+id/selected_date_label"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_below="@id/date_select_button"
        android:gravity="center"
        android:textSize="24sp" />
```
「gravity="center"」で文字を真ん中に移動します。
「textSize="24sp"」で文字サイズを設定します。

実行してみると、下図のようになります。
![算出結果の位置.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/1da3024e-eb76-3ead-fd16-8182ebdf06dc.png)

# まとめ
今回は、見栄えを改善するところまでを行いました。
次回は、算出結果を表示する際に、簡単なアニメーションを追加します。
次回分はこちら⇒[C#でAndroidアプリを作ってみる 6 (簡単なアニメーション)](https://qiita.com/plusM/items/3df5ba35cc751c7c5519)
Visual Studioをインストールしてみよう「for windows」



2019年9月30日現在の公式ドキュメントはこちら

https://docs.microsoft.com/ja-jp/visualstudio/install/install-visual-studio?view=vs-2019

公式ページはこちら

https://visualstudio.microsoft.com/ja/vs/

まずは、公式ページから
Visual Studio のプルダウンからお好みのエディションを



今回は、コミュニティー版を指定してみましょう
いきなり
「Visual Studio をダウンロードいただきありがとうございます」
の画面ですが、ファイルのダウロードが始まります。

ダウンロードが完了したら
ダウンロードフォルダーへ移動して、ファイルのプロパティーを確認しましょう
ダウンロードされたファイルをマウスで右クリックするとコンテキスメニューが表示されるので
一番下の「プロパティー」をクリック

プロパティシートが開くので、一番下の
「セキュリティー」のところのチェックボックスの許可するにチェックをしてＯＫボタンをクリックしてください

そののち、ダウンロードしたファイルをダブルクリック！
アカウントの許可を求めるダイアログが表示された場合は「ＯＫ」で

インストール確認ダイアログが出るので
![vsistall.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503965/e2ced17d-901e-2a1c-e6e8-e7b1a4180ebb.png)

続行をクリック

まずは、インストーラーのインストール

終わったら、インストーラーが起動します
とりあえず、にチェックをつけておきましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503965/2d5dc80c-078f-3929-190e-7d1715f99749.png)

インストールをクリックします

インストールが始まります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503965/f77afde1-c19a-64ea-5b72-fc039db921c2.png)

インストーラーは、Windowsのメニューに登録されるので、必要に応じて
あと、欲張って使わないものまでインストールちゃうと、UpDateの時間が長くなりますよ!
クリップボードの履歴を参照するには

#Windows10にはクリップボードの履歴を参照する設定があった

今日のハイライトをメモで残しておく
コピーした後に、うっかり他のものをコピーしたときなどに便利

##手順

###クリップボード設定を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265588/ea027489-7ab7-fbcf-69ab-fcf03ecff652.png)

###クリップボードの履歴を有効にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265588/ba1be48a-a89b-9e3d-6cdf-440b43903645.png)

###WindowsキーとVキーを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265588/61bdb0ee-84f0-a222-38e8-9bf8cffbfbd2.png)

###選択して貼り付ける

おわり
PHPで例外発生中に例外スローすると例外チェーンになる

タイトルの通りですが、PHPで例外発生中に例外スローすると、新たな例外に以前の例外が登録されます。

以前の例外は`getPrevious()`で辿ることができます。

```php
<?php

try {
    try {
        throw new Exception("foo");
    } finally {
        throw new Exception("bar");
    }
} catch (Exception $e) {
    var_dump($e->getMessage()); // "bar"
    var_dump($e->getPrevious()->getMessage()); // "foo"
}
```

## catchブロックでは明示的に以前の例外を登録しないとチェーンにならない

ただし、上のような状況はfinallyブロックでしか起きません。catchブロックに入ったタイミングで例外は解消されるので、catchブロックで例外スローしてもチェーンにはならないのです。

catchブロックで同じことをしたい場合、Exceptionのコンストラクタ第三引数にキャッチした例外を渡せば同じことになります。

```php
<?php

try {
    try {
        throw new Exception("foo");
    } catch (Exception $e) {
        throw new Exception("bar", 0, $e);
    }
} catch (Exception $e) {
    var_dump($e->getMessage()); // "bar"
    var_dump($e->getPrevious()->getMessage()); // "foo"
}
```

## 所感

普段PHPを使っている人でもまず知らない挙動だと思ったので紹介してみました。

言語実装者の気持ちはわかるけど、そもそもfinallyブロックで例外発生するコード書くの良くないでしょとか、勝手に以前の例外を登録するんかいとか、色々ツッコミどころがあってモヤモヤしますね。
DeepChemでScaffoldSplitterを使った場合にValueError: No molecule providedが発生した話

#はじめに

DeepChemでScaffoldSplitterを普通に使ったところ、掲題のエラーが発生したので調べたときのメモ

#環境
- python 3.6
- deepchem  2.2.1.dev54
- rdkit 2019.03.3.0  

#現象
splitterにScaffoldSplitterを指定して意気揚々とCross-Validationをやろうとしたら、deepchem.data.CSVLoaderでcsvファイルを読み込もうとした時に、以下エラーが発生。

```
  File "C:\Users\XXX\AppData\Local\conda\conda\envs\yyy\lib\site-packages\rdkit\Chem\Scaffolds\MurckoScaffold.py", line
108, in MurckoScaffoldSmiles
    raise ValueError('No molecule provided')
ValueError: No molecule provided
```

# 原因と解決策
エラーログを元に色々見たところ、deepchem.splits.splitters.pyの870行目に以下を発見。

```python

 for ind, smiles in enumerate(dataset.ids):
      if ind % log_every_n == 0:
        log("Generating scaffold %d/%d" % (ind, data_len), self.verbose)
      scaffold = generate_scaffold(smiles)
      if scaffold not in scaffolds:
        scaffolds[scaffold] = [ind]
      else:
        scaffolds[scaffold].append(ind)
```
dataset.idsからsmilesとってんじゃん。CSVLoaderでid_fieldを明示的に指定した場合は、そこにはsmilesは格納されないわけだから、そのフィールドをsmilesと勝手に判断し、molに変換したらそりゃー、'No molecule provided'が発生するよ。
といっても、こんなファイル修正しようがないのでScaffoldSplitterを使う場合は、CSVLoaderのid_fieldsは指定しないようにしましょう。
そうすると、id_fieldにsmiles_fieldsの値が設定されるっぽいので、結果オーライです。
id_fieldが何に使われてるか知らんけど、まあ今のところ大丈夫っぽい。

```python
loader = dc.data.CSVLoader(tasks=[args.target_col],
#                              id_field=args.id_col, #　ここはコメントオフにしよう。
                               smiles_field=args.smiles_col,
                               featurizer=featurizer)
```

# おわりに
OSSを使う場合は、適度にソースも見ながら、うまく付き合うことが大事ということで。。。　
以上、取り急ぎご報告まで失礼します。
【rails】かんたんログイン機能導入方法



現在railsでポートフォリを作成中ですが、よりスムーズに使っていただきたいためにこの機能を導入しました。  
若干手抜き感が否めないですが、一応使えます。

***これはdivise導入済みで進めていきます。***


####まずはテストユーザーで新規登録します。
```
name:テストユーザー
email:test@example.com
password:testtest
```
ログインを簡単にする機能なのでまずは登録ないと始まりません。

####view側を編集
もともと`views/devise/sessions/new.html.slim`というファイルがありますが中身を真似て、
`views/devise/sessions/_testuser.html.slim`というファイルを作ります。

```_testuser.html.slim

    h2
      | かんたんログイン
    = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
      .field
        =f.hidden_field :email ,value: "test@example.com"
        =f.hidden_field :password ,value: "testtest"
      .actions
        = f.submit "かんたんログイン"
```
このように書いて`views/devise/registrations/new.html.slim`に

```new.html.slim
.......
= render 'devise/sessions/testuser'
```
これで新規登録画面にかんたんログインボタンが表示されるようになります。

####編集ボタンを隠す
私の場合は`views/users/show.html.slim`にユーザー詳細画面がありますがテストユーザーのみ編集ボタンをを隠したいと思います

```show.html.slim
.....
 - unless @user.email == "test@example.com"
  = link_to "edit",edit_user_registration_path
```
**これではurlに直接打ち込むとアクセスできてしまうのが注意です。**

####deviseに対応したコントローラーを導入
`$ rails g devise:controllers users`

####ルーティングの編集
userのコントローラーを作ったので、そこにアクセスするようにルーティングを編集します。

```routes.rb

  devise_for :users, controllers: {
    registrations: 'users/registrations'
  }
```
####コントローラー内を編集
テストユーザーを編集、削除されてほしくないので制限する。

```registrations_controller.rb

......
before_action :forbid_test_user, {only: [:edit,:update,:destroy]}
......

  private
  def forbid_test_user
      if @user.email == "test@example.com"
        flash[:notice] = "テストユーザーのため変更できません"
        redirect_to root_path
      end
  end
.......
```
これによりかんたんログイン機能ができるようになります。
参考:[【学習アウトプット2】離脱率を下げる！かんたんログイン機能の実装](https://qiita.com/Gachi/items/4fe69c8efcb6a9c26ca5)
Longan nanoでBad Apple!!をさくっと再生する

Longan nanoはSipeed社が販売している、GigaDevice社製のRISC-VチップであるGD32VF103CBT6を搭載している、格安開発ボードです。
ボード、OLEDディスプレイ（160x80)、アクリルケース付きで1000円以下です。
いいのか、こんな値段で。
日本では、秋葉原のラジオデパートのShigezoneと秋月電子が取り扱っています。
仕様などは[Sipeedのページ](https://longan.sipeed.com/en/)を参照してください。

公開されているサンプルである、Bad Apple!!の再生を実行してみます。
環境はWindowsです。

余談：SipeedだとOLEDって書いてるけど、秋月だとIPSって書いてるんだよなぁ…どっちが本当なんだろうなぁ

#ドライバのインストール
今回はDFUモードでファームウェア書き込みしますので、DFU用のドライバをインストールします。
[ここ](http://dl.sipeed.com/LONGAN/Nano/Tools/GD32_MCU_Dfu_Tool_V3.8.1.5784_1.rar)から、ファイルをダウンロードして解凍します。

GD32 MCU Dfu Drivers_v1.0.1.2316というフォルダと、GD32 MCU Dfu Tool_v3.8.1.5784ができますので、まずはDriversのほうを開きます。
OSが64bit環境の人は「x64」、32bit環境の人は「x86」のドライバをインストールします。
イントール時は、管理者として実行しましょう。

#ファームウェア（実行プログラム）の書き込み
書き込みは、GD32 MCU Dfu Tool_v3.8.1.5784のフォルダに入っている「GD32 MCU Dfu Tool.exe」を使います。
まずはToolを立ち上げましょう。

立ち上げたら、Longan nanoをPCのUSBポートに繋ぎましょう。
つなぐときにコツが有り、Longan nanoをＤＦＵモードにしないといけません。
USBを繋ぐ前にボード上のBOOT0ボタン(USB TYPE-Cポートを下にして右側)を押しながらUSBを繋ぎます。
繋いだらBOOT0ボタンは押しっぱなしのままで、もう一つのボタンRESETボタン(USB TYPE-Cポートを下にして左側)をちょっと押してすぐ離し、その後BOOT0ボタンから離します。

Longan nanoがDFUモードになるとToolの「DFU Device」のところに「GD DFU DEVICE 1」という表示が出てくるはずです。
出なかったらDFUモードに入れなかったということなので、再度USBケーブルを外してやり直してください。

一度DFUモードになるのが成功すれば、2回目以降はUSBを繋ぐときにBOOT0ボタンだけ押していればDFUモードで繋がるようになります。

無事に認識されたら、ファームウェアを書き込みましょう。
Bad Apple!!のサンプルファームウェアは[ここ](http://dl.sipeed.com/LONGAN/Nano/Firmware/badapple_demo.zip)からダウンロードします。

ダンロードしたら解凍します。
　badapple_demo.bin
　logo.bin
　bmp.bin
の3つのファイルがあると思います。
badapple_demo.binが書き込むファームウェアになります。

toolの「Download APP program file」の中の「open」ボタンを押して、badapple_demo.binを指定しましょう。
「Verify After Download」にチェックを入れておくと、書き込んだあとに書き込んだものとファイルを比較してくれます。
OKボタンを押すと、ウィンドウ下部の「Realtime Status」のところが進んでいき、100%になれば書き込み完了です。

この状態で、一度longan nanoを取り外して再度繋いでみましょう。今度はDFUモードでなくてOKです。
そうすると書き込んだbadapple_demo.binが走ります。

OLED画面には「no card found!」という文字が表示されていると思います。
現時点ではこれで正解です。

#データ入りmicroSDカードの用意
microSDカードを用意します。
私は古いSandiskの1GBのmicroSDカードを使用しましたが、問題なく認識しています。

先程ダウンロードしてきた、Bad Apple!!のサンプルの中の、
　logo.bin
　bmp.bin
をmicroSDカードにコピーします。
logoが最初に表示されるもので、bmpが動画データ(というか、静止画の寄せ集め。2190枚)です。

longan nanoをUSBから外して、microSDカードを差し込み、もう一度USBに繋ぎましょう。

最初にSipeedのロゴが表示され![IMG_0322.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129938/de087284-cd31-1341-f560-ac43be1aeaa1.jpeg)

続いてBad Apple!!が再生されましたか？![IMG_0320.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129938/1d032795-589c-427c-6fbb-fd225b9f4631.jpeg)

自分でも動画データを作ってみたのですが、設定が違ったのか赤色の部分にゴミがありましたｗデータを作るほうが難しいかもしれないですｗ![IMG_0325.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129938/1fddba75-8d4b-50dd-4fbf-0156129f11d3.jpeg)


以上は、Sipeedが用意してくれている[Longan nanoのページ](https://longan.sipeed.com/zh/)にすべて書かれています。
ただ、現在は英語の情報はスペックしか無く、LチカやBad Apple!!サンプルについては中国語の情報となります。

---
いかがでしたでしょうか。
今後、多くの人がこのLongan nanoを手にし、多くの有益な使い方が発表されることでしょう。
その時、binファイルを公開してくれたらこの方法で書き込むことが可能となります。
【Prosessing】LESSON01.1 変数と変数の足し算（String型とchar型） 【★✩✩✩✩】

#String型の変数とは

文字をプログラミング中に使いたい場合には、String型（文字列型）やchar型（文字型）の変数を使います。Processingで文字列を使いたいときは、「"〇〇"」のようにダブルクォーテーションで文字列を囲います。

```java:fukube.pde
String kimura="ABCD";
String nakai="aiueo";
String katori;
void setup(){
  size(1000,500);
  katori="いろはに";
}
void draw(){

}
```

#char型の変数とは

char型はString型とは違い複数の文字を入れることはできず、一文字ずつしか入れられない変数の型となっています。String型とは違いchar型に文字を入れたい時は「'〇'」を入れましょう。

```java:fukube.pde
char inagaki='S';
char kusanagi='m'
char mori;
void setup(){
  size(1000,500);
  mori='p';
}
void draw(){

}
```


#キーボードで打った文字「key」

キーボードで最後に打った文字（char型）を検出する方法に「key」というものがあります。次のプログラムを実際に作って見て確認しましょう。

```java:fukube.pde
char kimura;

void setup(){
  size(1000,500);
}
void draw(){
  kimura=key;
  println(kimura);
}
```


#String型とchar型の足し算

String型とchar型は足し算ができます。ただし、足した結果は文字列のString型にしか入れられません。String型にchar型を入れることはできるけど、char型にString型は入れることができないということです。

```java:fukube.pde
char kimura;
String nakai;
String katori="kimura = ";
void setup(){
  size(1000,500);
}
void draw(){
  kimura=key;
  nakai=katori+kimura;
  println(nakai);
}
```

##LESSON01.2に続く

[LESSON01.2](https://qiita.com/Fukube_Keisuke/items/59ddfba0371536dc140e)
初めてのVisualStudioでプロジェクト作る人に

プロジェクト
プログラムを作る一式を収める箱
もう少し大きい箱にソリューションがあります

詳しくは公式で(https://docs.microsoft.com/ja-jp/visualstudio/get-started/tutorial-projects-solutions?view=vs-2019)

Visual Studio を起動します
インストールが済んでいればメニューから起動できます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503965/9b75b2d3-718c-8f3e-92ec-517f5b48a86d.png)
「新しいプロジェクトの作成」をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503965/36b2fb0f-033b-40c5-a6fd-492ef8f4b619.png)
まずは、コンソールアプリケーションを作ってみましょう
「コンソールアプリ(>NET Core)」をクリックして選んでから
次へのボタンをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503965/0d09e62b-cb2d-1efa-e27e-6f342257c21e.png)
作成ボタンをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503965/dff99df5-5cb0-0ac3-c653-db167cfecc49.png)

実行ボタンを押すと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503965/d6250291-42d5-c182-8cbe-4d57ffda0ee1.png)

Hello World! と 出力されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503965/e815360a-7789-9145-dbf7-615a21a4b46b.png)
第０章 C#でプログラムをする前準備

目次だよ

はじめます(https://qiita.com/CsharpTan/items/255b755ceede89cbb77a)


Ｃ＃プログラム向きのＰＣ(https://qiita.com/CsharpTan/items/2e943e6e696dd7eec7ba)
まあ、windows10で

Visual Studioをインストールしてみよう「for windows」(https://qiita.com/CsharpTan/items/242dc5fccf4c713a47f88)
とりあえず

初めてのVisualStudioでプロジェクト作る人に(https://qiita.com/CsharpTan/items/255b755ceede89cbb77a)
djangoでTemplateDoesNotExist が出たら

Djangoでwebサイト作りの練習をしていたところ上記のエラーが出た。
アプリ内のディレクトリのurls.py やviews.py ではimportができていたので困ってググったところ、プロジェクトのディレクトリ内のsettings.pyでの

```python:django.py 
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR, "templates"],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
```
でDIRのtemplatesが間違えていてtemplateであった。単純なミスだがプロジェクトのsettings.pyにミスが起きることを確認した
クエリで Project Euler Problem 1

## 【序文】
単なる思い付き。取り合えず [Problem 1](http://odz.sakura.ne.jp/projecteuler/index.php?cmd=read&page=Problem%201 "Problem 1 - PukiWiki") を解いてみる。
> Problem 1 「3と5の倍数」
10未満の自然数のうち, 3 もしくは 5 の倍数になっているものは 3, 5, 6, 9 の4つがあり, これらの合計は 23 になる.
>
> 同じようにして, 1000 未満の 3 か 5 の倍数になっている数字の合計を求めよ.

## 【環境】
| SQLServer | SQLCMD |
| ---- | ---- |
| 2017 | 14.0.1000.169 |
設定はデフォルト。

## 【計算で求める】
これは連続する自然数の和の変形なので以下。

```SQL
PRINT ((3 + 999) * (999 / 3) + (5 + 999 / 5 * 5) * (999 / 5) - (15 + 999 / 15 * 15) * (999 / 15)) / 2;
GO

233168
```

SQLServer では整数の割り算は商になる仕様なので、`999 / 5 * 5` で 999 以下の最大の 5 の倍数を求めている。

```SQL
PRINT 999 / 5 * 5;
GO

995
```

他の DB言語では仕様が異なるものがあり（Oracleとか）、5 で割って 5 を掛けたら元の 999 に戻ってしまったでござる、ということもあるので注意。
DB の方言の違いはこういった細かい箇所にも及んでいる。

999 が 3 の倍数であることは自明なので、3 の倍数の総和を求める箇所ではそのまま当てはめている。

## 【クエリで求める 1】
実装例は以下。

```SQL
DECLARE @Src    INT = 3;                -- 3 の倍数生成用
DECLARE @Dst    INT = 5;                -- 5 の倍数生成用
DECLARE @Max    INT = 999;              -- 上限

;WITH [CTE_Src]([Val]) AS (             -- 3 の倍数列挙CTE
    SELECT @Src
    UNION ALL
    SELECT [Val] + @Src FROM [CTE_Src]
    WHERE   [Val] + @Src <= @Max
)
, [CTE_Dst]([Val]) AS (                 -- 5 の倍数列挙CTE
    SELECT @Dst
    UNION ALL
    SELECT [Val] + @Dst FROM [CTE_Dst]
    WHERE   [Val] + @Dst <= @Max
)
, [CTE_Union]([Val]) AS (               -- 3 の倍数と 5 の倍数のマージCTE
    SELECT [Val] FROM [CTE_Src]
    UNION
    SELECT [Val] FROM [CTE_Dst]
)
SELECT SUM([Val]) FROM [CTE_Union]      -- 合計取得
OPTION (MAXRECURSION 0)
;
GO

-----------
     233168

(1 行処理されました)
```

問題をそのままクエリに起こしているだけなので特に説明は不要だろう。
綺麗に当てはまるし。
DB とは`集合`がベースとなっていることが良くわかる。意外とその認識がない人が多いようだけど……。

## 【クエリで求める 2】
単純化すれば以下も。

```SQL
DECLARE @Src    INT = 3;
DECLARE @Dst    INT = 5;
DECLARE @Max    INT = 999;

;WITH [CTE_Src]([Val]) AS (             -- 1 ～ @Max 列挙CTE
    SELECT 1
    UNION ALL
    SELECT [Val] + 1 FROM [CTE_Src]
    WHERE   [Val] < @Max
)
SELECT SUM([Val]) FROM [CTE_Src]        -- 3、5 の倍数を抽出して合計を得る
WHERE   [Val] % @Src = 0
    OR  [Val] % @Dst = 0
OPTION (MAXRECURSION 0)
;
GO

-----------
     233168

(1 行処理されました)
```

単純でコードも短くなったけど、ループ数は増えてしまうから、こちらの方が効率は悪い、ということになるのかな？　誤差の範囲だろうけど。
というか、こうした単純なレコードをガチャポンで生成してくれる組み込みの機能があればもっと楽になるんだけど。Oracle の `CONNECT BY`句みたいな。
【Unity】UnityにVivox導入してみた【Sound】

# Vivox ってな～に？
![vivox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65257/fda5bd67-4599-0c39-ccce-f41ab1993c11.png)
https://www.vivox.com/partners
PUBG, Fortnite, LoL, R6S, WoT, など世界的に売れている超有名ゲームで用いられている
テキスト/ボイスチャット提供ミドルウェアです。
2018年9月頃よりインディーデベロッパーでも無償で使えるようになりました（一部条件有）

日本国内ではほとんど導入事例を聞きませんが、現在ボイスチャットを導入するなら
間違いなくこれという状態なので知っておいて損は無いでしょう。


# Vivox 導入フロー
## アカウント作成まで
1. 公式サイト(https://developer.vivox.com/) に行ってSDKを手に入れる心構えをする(ここ大事)
2. 氏名とメールアドレスを登録
   (ちゃんと確認用メールが届いているかチェックしよう)
3. 組織を入力
4. 組織の審査を待つ

## 審査通過後～SDK 取得まで
1. Planを設定
   基本的にはFreePlanでOK, 商用の場合は条件をよく読みましょう
![vivox_plan.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65257/f01f078d-1993-a47c-fc1f-5c0c562c10bb.png)

2. Sandbox アプリケーションを作成
    ![vivox_dashboard.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65257/ff02af96-db99-65c2-b903-5382c4d12a4c.png)

3. アプリケーションの詳細設定
  最悪間違えてもあとでアプリの編集から再設定できるので必要最低限で大丈夫です
![vivox_make_app_01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65257/0035713c-c102-bc21-55ce-c478de404e57.png)
  今回はUnityでの開発なのでUnityを選択してリリースに必要なプラットフォームを選択しましょう
![vivox_make_app_02.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65257/6ef02c39-b0a4-f442-eab2-66c17ba63eae.png)


4. 左側メニューのDownloadからSDKを選択
  ![vivox_sdk.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65257/89842d69-5b89-1f54-8c73-a36a7d604f0f.png)
  Android を選択していますが、UnitySDKを選択すると中にStandalone用とAndroid用とiOS 用のSDKがUnityPackageとして入っていました。とても優しいですね。
5. DLしてきたzip ファイルを解凍するとUnityCustomPackageがあるのでこれをUnityProject側にImport

## ドキュメントについて
ReadMeには「ナレッジベースの～」という説明がありますが、日本語化UIだと場所がよくわからないので説明します。
1. Developperページのところのドキュメントを選択
2. バージョンを選択
3. General Unity を選択
![vivox_doclink.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65257/27c13ac0-73f4-076a-3b3a-2e7f377cc86a.png)
4. [ドキュメントページ](https://docs.vivox.com/v5/general/unity/5_1_0/Default.htm#Unity/UnityFirstSteps.htm%3FTocPath%3DUnity%7C_____1)へ移動
5. Vivox Core Unity: Developer First Stepsを見ながら初期設定を行う

## Unityプロジェクト側の初期設定
カスタムパッケージをImport後からの手順です。
1. Assets/Vivox/Samples/TanksUnityGameSample/Scenes/MainScene.unity を開く
2. VivoxのDevelopperPortalからDashBoard 内にある先ほど作ったアプリを選択
3. InspectorにあるVivoxVoiceManager にWebページに乗っているパラメータをセット
   (画像はセキュリティの都合上値を一部非表示しています)
  ![vivox_app_config.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65257/48325f48-2060-36dc-0ddf-3f4fc2d8f4f9.png)
![vivox_config.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65257/e427cf4a-7df5-1dda-103a-81dc6210194a.png)
4. Unity側のBuildSettingsにSceneを設定してビルド
![vivox_buildSettings.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65257/cacfa0ea-3dc0-1f58-193a-e993cde88fac.png)


# まとめ
だらだらやって2~3時間でボイスチャット/テキストチャットが動きました。
Pixel3, Oculus Go, UnityEditor(PC)間で簡単にボイチャが出来るのは驚くべきことで、
謳い文句の**36時間以内にボイスチャットが動く**はあながち間違いじゃないなと思いました。


今回は導入フローまでですが、**製品版で使うには別途審査**があったりしますが、
導入ハードルの低さや性能部分に関しては文句なしといったところでしょうか。
WSLにcoq-jupyterをインストールする

記事の内容が古くなったので書き換えます。

Windows11のWSL(Ubuntu 22.04)で、JupyterLab上でCoqが使えるようにする。

# 1. WSL2(Ubuntu 22.04)のインストール

自前の環境では素直にインストールできなかったので、作業手順をまとめる。

## 1-1. Ubuntuのインストール

PowerShellを起動し、コマンド`wsl --install`を実行する。
途中でユーザ名とパスワードの入力がある。

```PowerShell
PS> wsl --install
インストール中: Ubuntu
Ubuntu がインストールされました。
Ubuntu を起動しています...
Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: kioto （ユーザ名を入力）
New password:　（パスワードを入力）
Retype new password:　（上記と同じパスワードを入力）
passwd: password updated successfully
Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

Welcome to Ubuntu 22.04.2 LTS (GNU/Linux 5.15.90.1-microsoft-standard-WSL2 x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage


This message is shown once a day. To disable it please create the
/home/kioto/.hushlogin file.
PS>
```

## 1-2. ネットワークの設定

インストール直後、DNSの設定が正しくないことが原因でaptコマンドでネットワークエラーが発生することがある。その場合は、以下の手順を実施する。

ネットワークエラーの原因は、`/etc/resolv.conf`のnameserverの設定が正しくないためであるが、このファイルはWSL2が自動で生成している。
ここで`/etc/resolv.conf`のファイル情報を見てみる。

```bash
$ ls -l /etc/resolv.conf
lrwxrwxrwx 1 root root 20 May  7 17:42 /etc/resolv.conf -> /mnt/wsl/resolv.conf
$ ls -l /mnt/wsl
docker-desktop/  docker-desktop-data/  resolv.conf
```

このように、元は`/mnt/wsl/resolv.conf`にあるものがシンボリックリンクされていることが分かる。

**(1) resolv.confの自動生成を抑制させる**

ネットワークエラーの原因は、`/etc/resolv.conf`のnameserverの設定が正しくないためであるが、このファイルはWSL2が自動で生成している。まずは、この自動生成を抑制させる設定を行う。

vi等のエディタを使用して、`/etc/wsl.conf`に以下の行を追加する。

```
[network]
generateResolvConf = false
```

**(2) /etc/resolv.confを作り直す**

シンボリックリンクを削除して、vi等のエディタで新規に作成する。

```bash
$ sudo rm /etc/resolv.conf
$ sudo vi /etc/resolv.conf
```

ファイルの内容は以下の通り。`8.8.8.8`は適当なDNSサーバを指定する。

```
nameserver 8.8.8.8
```

pingなどで外部ネットワーク接続を確認する。

```bash
$ ping www.google.com
PING www.google.com (142.251.222.36) 56(84) bytes of data.
64 bytes from nrt13s72-in-f4.1e100.net (142.251.222.36): icmp_seq=1 ttl=55 time=10.8 ms
64 bytes from nrt13s72-in-f4.1e100.net (142.251.222.36): icmp_seq=2 ttl=55 time=9.87 ms
64 bytes from nrt13s72-in-f4.1e100.net (142.251.222.36): icmp_seq=3 ttl=55 time=15.3 ms
...
```

# 2. ソフトウェアのインストールと初期化

以下のコマンドを実行する。最初に一度実行しておくだけでよい。

```
sudo apt update
sudo apt upgrade -y
sudo apt install -y python3-pip coq jupyter-core
echo "PATH=~/.local/bin:\$PATH" >> ~/.bashrc
. ~/.bashrc
pip3 install --upgrade pip
pip3 install jupyterlab coq-jupyter
python3 -m coq_jupyter.install
jupyter lab --generate-config
jupyter lab password  # 対話形式でパスワードを設定
```

# 3. JupyterLabの起動

以下のコマンドを実行する。

```
jupyter lab
```

* Windows上のブラウザからhttp://127.0.0.1:8888/lab にアクセスすると、Jupyterのログイン画面が表示
* パスワード入力画面になるので、上記で設定したパスワードを入力すると入れる

# 4. 付録

## チュートリアルの取得

Coqのチュートリアルをcloneでとってくる。そのディレクトリ下でjupyterを起動すると便利。

```
git clone https://github.com/maruyama097/coq-tutorial.git
cd coq-tutorial
jupyter lab
```

以上
IEでCSSプロパティのinitialとunsetを指定するとスタイルが崩れてしまう時の解決法


CSSのプロパティの `initial` や `unset` はIE11に対応していないためスタイルが崩れてしまいます。
詳しくはこちら([initial](https://developer.mozilla.org/ja/docs/Web/CSS/initial) [unset](https://developer.mozilla.org/ja/docs/Web/CSS/unset))を参照してください。
この記事ではこの問題に対処するために代表的なプロパティごとの解決法を書きます。

# 解決法
## margin/padding/width/heightの場合
 `auto` の記載を追加することでIEに対応できます。

```sample.css
.block {
  margin: initial;
  /* IE対応のために追加する */
  margin: auto;
}
```


## line-height/font-weight/font-styleの場合
 `normal` の記載を追加することでIEに対応できます。

```sample.css
.block {
  line-height: initial;
  /* IE対応のために追加する */
  line-height: normal;
}
```