OmniAICreator/Qiita-1.07M huggingface dataset:
Android Push通知のアイコンを作成 ＋ 設定

#はじめに
Androidのプッシュ通知には、アイコンを設定する事が推奨されています。

が、
**「プッシュ通知用のアイコン、どうやって作るの？」**
**「そのアイコンはどうやって設定するの？？」**

といった事が、[こちらの公式ドキュメント](https://developer.android.com/guide/topics/ui/notifiers/notifications?hl=ja)では非常にわかりにくかった・・・

なので、この記事でまとめることにする。

#プッシュ通知のアイコンを作成
[こちら](https://documentation.onesignal.com/docs/customize-notification-icons)より
>Android 5以降、OSは、アプリがAndroid API 21+をターゲットにしている場合、小さな通知アイコンをすべて白に強制します。正しいアイコンを作成しないと、ほとんどの場合、ステータスバーにベルまたは白一色のアイコンとして表示されます。

と書かれてある。

**つまり、通知バーに出てくるアイコンは白黒じゃ無いとダメってことだ。**
![notification-area_2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/25ea3416-08a7-00e2-acc5-84661bee3d17.png)

##白黒アイコンを作る

「どうやって白黒にするよ？」って問いに答えるには、アイコンによって様々なので、、、笑

あくまで私の例だが、[IconFnder](https://www.iconfinder.com/search/?q=phone&from=navbar&price=free)からまずは白黒のアイコンを複数取る。
そこから適当にパワポとかで合体させて、アイコンを完成させる。

まぁやり方は何でもいいのだが、次は背景を透明にする必要がある。
私がいつも使うのは[Peko Step](https://www.peko-step.com/tool/alphachannel.html)と言うサイト。
ここで黒以外を透明にする。

これでアイコンは完成！

##白黒アイコンをプッシュ通知用のサイズにする
[Android Asset Studio](http://romannurik.github.io/AndroidAssetStudio/index.html)にアクセスし、**Notification icon generator**を選ぶ。

次に**Image**を選択し、作成した白黒のアイコンを選択。
<img width="402" alt="スクリーンショット 2020-01-01 21.21.18.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/bc0a8626-613e-00f4-b7de-342cb88856a8.jpeg">

ダウンロードするとこんな感じで複数のアイコンがゲットできる。

<img width="405" alt="スクリーンショット 2020-01-01 21.23.56.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/15809da7-6d1f-2fe5-5246-f75ae8759e68.jpeg">

#Androidのmipmapフォルダにアイコンを配置
配置先はどうすれば良いのかイマイチわからないが、とりあえず`mipmap-`フォルダに入れることにした。

`app/src/main/res/mipmap-`の各解像度？のフォルダへ。

`drawable-hdpi/アイコン画像` → `mipmap-hdpi/アイコン画像`

みたいな感じで移す。

[【Andorid】アプリアイコンは「mipmap-」というリソースディレクトリに入れるのがいいらしい](https://qiita.com/operandoOS/items/53b0f2074a806aacd290)

#AndroidManifestで設定
`app/src/main/res/AndroidManifest.xml`を開き設定する。

```xml:AndroidManifest.xml
 <application>
     <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/アイコンの名前" />
    </application>
```

**※アイコンの名前に拡張子は不要！**
仮にアイコン画像のファイル名が`push_icon.png`だったしよう。
その場合は以下のようにする。

```xml
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/push_icon" />
```

このミスで私はビルド失敗しました。。。


#最後に
アプリを閉じた状態でプッシュ通知を送り、こんな感じで表示されれば問題なし！

![Screenshot_20200101_173232.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/757c3ff4-072e-23d6-c17f-2748dd835807.jpeg)
タスク管理こそが新人を助ける【クソアプリ作成】

# イントロダクション

### 壮大な釣り

すみません。タイトル詐欺です。

### タスク管理っていうけど、新入社員には何をどうしたら良いかがわからんよね。

この時期になると思い出します。
とある会社の入社前に「課題出すわ〜w作ってこいやw」と言われたことを。
タスク管理ってなんけ？って新入社員がこっそり使えるアプリを作ったので、使ってみてほしいです。

### 忙しい人のために

Proxyなどで大変な環境の人でも通信なしで個人タスクを管理できるアプリ作ったで、使ってもらえたら幸いですわい。
https://task-eru.web.app/

# 作成した目的

### Angular触りたかった

技術的好奇心を満たすため。
ただ、どうせなら作ったものを使ってもらいたいじゃない。

### 技術的な自己満話

フロントエンドにAngular
DBにlocalstorageとIndexedDB
localstorageにタスクのJSONを格納し、
IndexedDBで添付ファイルを保存できるようにしています。

主な使用ライブラリ
- Angular-Material
　用途：デザイン面楽したい
- crypto-js
　用途：localstorageの暗号化
- dexie
　用途：IndexedDBを使いやすくしたい
- frappe-gantt
  用途：ガントチャート簡単に使いたい（イマイチ使い切れないので、あくまで自己満）
- sortablejs
  用途：Angular-CDKのドラッグ・アンド・ドロップモジュール待てなかったから使った。あと、タスク名をどうしてもコピペしたい用途があったので、タスク名以外のパーツにドラッグできるようにしたかった。（後者はやりようによってはできそー）
- 他
　いつか解説する


### 新人is忙しい

新人って業務で手一杯なのにやること沢山で大変だと思います。
自分もそうだったので。
その中で自分の仕事のリズムやルーチンを見つけてくれってのが多数だと思います。
よく言われる「仕事は遅くても良いから確実にやれ」を楽にするのにタスク管理は一つの手段だと思います。
付箋などで管理しているのもありですが、よくある割り込み時があった時に、楽にできる方が良いですよね。
んでもってタスク管理に良いものを探すべきですが、使って良いソフトなどにも制限があったり結構ギチギチよね。

### 大手ITベンダあるある　を突破したい

やりたいこととやれることのギャップがあると思っております。
具体的には、、、
・Proxyがあって制限で見えぬサイト多数。
・外部サービスはセキュリティ上、自由に使えない。
・ブラウザはプリインストール縛り。

ま、そりゃそういうもんだと思うしかないですよね。
ネットが使えないところだってあるのでそれは避けられないです。

ならそれを回避しつつ、情報漏洩とか避けられるようなアプリがほしいよね。（年末にあった都市伝説番組の彼の口調が乗り移っているんだ）

# アプリの特徴

### 誰でも使えるようにする
・EdgeやChromeで使用できます。
・LocalStorageとIndexedDBを用いてブラウザに情報を残し、外部通信を一切しない
・metaタグなど含めてProxyに引っかからないように作成（検索にも引っかからない本来ならイケテナイアプリ）

### タスク管理に特化したいんじゃ
・Trelloなどはタスクの名前しか表に出ないのでシンプル過ぎるので、もっとこのタスクに対して俯瞰的に見たい。きっと使い方で変えられるんだけどね。

### 使い方と詳細な機能
#### 使い方
1. ボードという単位で仕事内容などで管理するものを作成ください。
2. リストで「Todo、Doing、Done」などの横並びで確認したいタスク単位を作成してください。
3. タスクで１つの作業を作成してください。

#### 機能
1. タスクやリストは二重線の「＝」をドラックすれば移動できます。
2. タスクの計画時間やいつまでに完了させるかなどは三重線の「≡」をクリックしてくる詳細を押せば設定できます。
3. タスクを完了させるには上記で書いた詳細の他にCompleteでも可能です。
4. タスクにタグをつけることも可能です。タグの色は手動で「white/black/green/yellow/blue/red」を入力してください。（サボった）
5. 個人設定などで最後に見ていたボードを表示するかどうかなどの設定や全体のバックアップ等ができます。
6. 検索も全ボードからできます。
7. アーカイブタスクとアクティブタスクで別れています。アーカイブタスクを復活させることも可能ですし、アーカイブタスクを削除することも可能です。
8. タスクの複製も可能です。
9. リスト内のタスクを一括編集することも可能です。
10. 今日のタスクもMenuから全ボードを横断して確認ができます。
11. 簡易的なガントチャートも見れます。

### 既知（キチ）バグ
凄まじいいほどの勢いで公開する。後悔はしていない。
・リスト作成後にそのボード内にタスクを１つでも作らないとリスト自体が保存されない。（破滅的）
・ガントチャートをクリックするとページ再読み込みが走る。（編集画面を出そうとしたのですが、諦めたw）

# 最後に
いつかソースコードも公開したいです。まだリファクタリングが終わっていないのですが。。。
Angular楽しい。
次はAngular+NestJS+GraphQL+NoSQLで時間管理・共有のアプリを作成します。
と思ったけど、最近お小遣い帳つけ始めたので、お小遣い帳オレオレアプリ作ることにした。
【Unity】iPhone/simulator iosビルド設定

以下の設定を変更してからビルドする

File > Build Settings > Player Settings

iPhoneで検証したい時
`Architecture ARM64`
<img width="588" alt="iphone_debug.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258078/4c67f017-4b65-cc88-a45f-6f61d2b4f0bb.png">

simulatorで検証したい時
`Target SDK`
<img width="586" alt="simulator_debug.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258078/e2f0e567-016d-5c26-eace-6e39e82a5448.png">
ネットワークエンジニア視点のAWS VPC内Network構成

  Network構成図でモヤモヤする事があります。
例えば、この構成。
https://docs.aws.amazon.com/vpc/latest/userguide/VPC_NAT_Instance.html
<img width="626" alt="Screen Shot 2020-01-02 at 14.18.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200070/042d60ba-1d1a-ee48-683d-2c832f234eb4.png">
PrivateからNAT経由してInternetに出る場合、及びPublic Subnetから
Internetに出る場合、線が一本はどうも変な感じがします。
通信経路考えると、こうなのではないかなと。
赤の部分。
<img width="637" alt="Screen Shot 2020-01-02 at 14.21.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200070/fce93713-7da0-17fc-f487-8316789706e2.png">
まあ、セカンダリアドレス使ってるから線は一本でOK!って考え方もありますが、
ネットワークエンジニアとしては通信経路を考えてしまうので、赤線がある方が落ち着きます:sweat_smile:。
またRoute Tableでnext hopが0.0.0.0/0 igw-idになってますが、図だと"Router"がnext hopでは？
とか変なとこが気になってしまう:cold_sweat:。
及び"Router"と"Internet Gateway"間がL3なら、ここのアドレスはどうなっているの？とか。
Raspberry Pi + Minecraft Pi Edition で Hello World

## 概要

- Raspberry Pi + Raspbian 環境で動作する Minecraft Pi Edition 
にて、Python 用ライブラリ mcpi を使って Hello World を表示する

## 今回の環境

- Raspberry Pi 3 Model B
- Raspbian GNU/Linux 10 (buster) 
- Python 2.7
- Minecraft Pi Edition v0.1.1 alpha
- mcpi 0.1.1 (Minecraft Pi Edition API Python Library)

## Minecraft Pi Edition とは

Minecraft Pi Edition は Raspberry Pi でのプログラミング学習用に開発された Minecraft の無料版。

## Minecraft Pi Edition と mcpi のインストール

Raspbian にはおそらく最初からインストールされているが、無い場合は apt または apt-get コマンドで minecraft-pi パッケージをインストールする。

```
$ sudo apt install minecraft-pi
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています                
状態情報を読み取っています... 完了
minecraft-pi はすでに最新バージョン (0.1.1-6) です。
```

Python の mcpi パッケージ (Minecraft Pi Edition API Python Library) も一緒にインストールされていると思うが、無い場合は pip コマンドでインストールする。

```
$ sudo pip install mcpi
Looking in indexes: https://pypi.org/simple, https://www.piwheels.org/simple
Requirement already satisfied: mcpi in /usr/lib/python2.7/dist-packages (0.1.1)
```

```
$ pip show mcpi
Name: mcpi
Version: 0.1.1
Summary: API for Minecraft Pi
Home-page: http://pi.minecraft.net/
Author: Mojang
Author-email: UNKNOWN
License: UNKNOWN
Location: /usr/lib/python2.7/dist-packages
Requires: 
Required-by: 
```

## Minecraft のワールドに Hello World を表示する

Minecraft Pi Edition を起動し、

![minecraft-pi-edition-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/d8ed28b5-9a04-382b-268b-1ec2926e1e28.png)

ワールドを生成して入っておく。

![minecraft-pi-edition-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/0dea2026-c4c7-87d7-c5d8-e00c4f59835b.png)

以下のソースコードを保存して、

```hello-minecraft.py
from mcpi import minecraft
import mcpi.block as block

mc = minecraft.Minecraft.create("localhost")
pos = mc.player.getPos()
basex = int(pos.x) + 0
basey = int(pos.y) + 6
basez = int(pos.z) + 0

data = [
  "#  # ### #   #    ##   #   #  ##  ###  #   ### ",
  "#  # #   #   #   #  #  # # # #  # #  # #   #  #",
  "#### ### #   #   #  #  # # # #  # ###  #   #  #",
  "#  # #   #   #   #  #  # # # #  # # #  #   #  #",
  "#  # ### ### ###  ##    # #   ##  #  # ### ### "
]

for y, line in enumerate(data):
  for x, c in enumerate(line):
    if c == "#":
      mc.setBlock(basex + x, basey - y, basez, block.DIAMOND_BLOCK.id)
```

実行すると、

```
$ python hello-minecraft.py
```

ダイヤモンドブロックによる HELLO WORLD が出現する。

![minecraft-pi-edition-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/ae6af4b4-16b3-fd97-62fc-c4561ccc6977.png)

## 参考資料

- [Pi Edition \| Minecraft](https://www.minecraft.net/en-us/edition/pi/)
- [Getting Started with Minecraft Pi \- Introduction \| Raspberry Pi Projects](https://projects.raspberrypi.org/en/projects/getting-started-with-minecraft-pi)
- [マインクラフト － Raspberry Pi公式ドキュメントを日本語訳](http://igarashi-systems.com/sample/translation/raspberry-pi/usage/minecraft.html)
- [GitHub \- martinohanlon/mcpi: Minecraft: Pi Edition API Python Library](https://github.com/martinohanlon/mcpi)
- [\<Stuff about="code" /\>: Minecraft](https://www.stuffaboutcode.com/p/minecraft.html)
- [\<Stuff about="code" /\>: Minecraft API](https://www.stuffaboutcode.com/p/minecraft-api-reference.html)
「Formtastic::UnknownInputError Unable to find input class Input」の対処法

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

#Formtastic::UnknownInputError Unable to find input class Input

このエラーが起きた状況は、Active Adminで作成したユーザー管理画面において編集機能を追加するために
actionsに:editを追加した所、発生しました。

```app/admin/users.rb
actions :index , :show , :edit
```

こちらの解決方法は、Issueに書いてあり。
[Formtastic::UnknownInputError Unable to find input class Input · Issue #4178 · activeadmin/activeadmin · GitHub](https://github.com/activeadmin/activeadmin/issues/4178)

```
Yes sandy's hack works and should be done by rails g active_admin:install IMHO!
Basically the class needs to be there otherwise no edit's and no updates are possible...
Works fine on rails 5.0.6 and activeadmin 1.1.0...
I put this file in /admin dir, this works and it's a more logical place for me.

app/admin/inet_input.rb with following content:
#put this in app/admin/inet_input.rb so that edit/update of resources work with activeadmin
class InetInput < Formtastic::Inputs::StringInput
end
```

adminフォルダーにinet_input.rbファイルを作成し、中身をこの様に記述すると解決できました！

```app/admin/inet_input.rb
class InetInput < Formtastic::Inputs::StringInput
end
```
開発中のcommit履歴を全部消してからリリースしたい


[monwrap](https://www.npmjs.com/package/monwrap)というMongoDBラッパーをNPMで公開しました。
公開前にtravisCIでテストを行うのですが、MongoDBを使ったテストは初めてなので`.travis.yml`(設定ファイル)の書き方がよくわからない。でもGitHubに上げてみないとCIテストができない。  
そんなわけでゴミコミットが増えてしまうのを見越して、コミットログが汚れない方法を探ってみました。

## 1. 別ブランチに退避する

最終的に公開するのが`master`ブランチの場合、一旦別のブランチに退避します。masterブランチは後で作り直す為に削除します。

```
git checkout -b dev
git branch --delete master
```

警告が出てdaleteできない場合は`git branch -D master`で強制削除できます。自己責任でお願いします。

## 2. GitHubにpushして作業する

CIの動作確認など、GitHubにpushして作業します。ローカルだけでコミット履歴を消したい時はこの作業は不要です。

## 3. commit履歴のないmasterブランチを切る

```
git checkout --orphan master
git commit -m "Initial Commit"
git push -u origin master

git branch --delete dev
git push --delete origin dev
```

### git checkout --orphan master

masterブランチを作りつつcheckoutを行いますが、`--orphan`オプションを指定するとcommitを引き継がないブランチになります。

### git commit -m "Initial Commit"

`--orphan`オプションでcheckoutするとファイルがステージングされた状態になりますのでそのままcommitします。

### git push -u origin master

masterをトラッキングブランチに設定しつつpush

### git branch --delete dev

不要になったブランチを削除

### git push --delete origin dev

リモート(GitHub)のdevブランチも削除します。しかしここでエラー。

```
To github.com:mick-whats/mongo.w.git
 ! [remote rejected] dev (refusing to delete the current branch: refs/heads/dev)
```
GitHubの**Default branch**がdevブランチになっているので削除できないようです。

githubのsettings → branches から**Default branch**をmasterに変更すると成功しました。


## 参考

- [git のコミット履歴をすべて消す（現時点の状態の1コミットだけにする） \- Qiita](https://qiita.com/okashoi/items/6b1a8ca9a4b001200167)
- [Git のトラッキングブランチの確認と設定方法 \- yu8mada](https://yu8mada.com/2018/08/11/how-to-confirm-and-set-up-tracking-branches-in-git/)
OWASP Mobile Top10：Insecure Data Storage

# OWASP Mobile Top10
 OWASPが公表されているモバイルアプリの脆弱性上位10位までを公表しています。
 上位のM1~M10までがあります。

# 個人用翻訳メモ

![Insecure Data Storage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354810/2ca3ee2e-ba73-172a-25a3-85b75ea007f4.png)

# 自身の個人ブログ
[個人のポートフォリオ](https://techport.work/jp/)
ネットワークエンジニア視点のAWS Transit Gateway

 これはどこからどう見ても、MPLS VPN (勝手な想像)
<img width="1156" alt="Screen Shot 2020-01-02 at 13.52.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200070/2b78d70b-8e47-738c-2be1-c1595430af3a.png">
経路の重複は許してないのでrd値は同一かな。
中の設定はこうなってるような。
!
ip vrf Development
 rd 1:1
 route-target export 100:100
 route-target import 400:400
 route-target import 500:500
!
ip vrf Testing
 rd 1:1
 route-target export 200:200
 route-target import 400:400
 route-target import 500:500
!
ip vrf Shared
 rd 1:1
 route-target export 400:400
 route-target import 100:100
 route-target import 200:200
 route-target import 500:500
!
ip vrf VPN
 rd 1:1
 route-target export 500:500
 route-target import 100:100
 route-target import 200:200
 route-target import 400:400
!
Light GBM のパラメータ・チューニング

## はじめに
この記事では、LightGBMのパラメータについてまとめていきます。[公式ドキュメント](https://lightgbm.readthedocs.io/en/latest/Parameters-Tuning.html#)を日本語訳しただけですが、参考になれば幸いです。(LightGBM自体の話も随時更新していきたいと思います。)

## 重要な３つのパラメータ

#### `max_depth`
使用する木の深さを指定します。`num_leaves`というパラメータと一緒に考えていきます。

#### `num_leaves`
モデルの複雑さを決めるパラメータになります。理論的には、2^(`max_depth`) が良いみたいですが、実務的には、2^(`max_depth`)よりも小さい値が良いみたいです。**`max_depth`を7に指定した場合は、`num_leaves`は70~80くらいに指定したらいいのでは？と書いてありました。**

#### `min_data_in_leaf `
オーバーフィット(過学習)を防ぐために、重要なパラメータになります。トレーニングデータのサンプル数と`num_leaves`の値によって決めようと書かれてます。大きいサンプル数を扱う場合は、数百から数千くらいの値が良いみたいです。

## 最後に
綺麗にまとまっている[サイト](https://www.codexa.net/lightgbm-beginner/)見つけました。こちらも是非一読を！
Google colaboratory


Gmail、Google ドライブ、Google keep,Google ドキュメント.. 

Googleは無料で、便利なサービス提供してくれていますが

その仲間として、colaboratory というサービスがあります。

クラウド版のJupiterNoteBookで、無料で
pythonを実行することができます。

個人的には、とても面白いサービスだと思います


使い始めて、2ヶ月くらいなのです。まずいたところ、改善出来たところを共有できればと思い投稿しました。




★プログラム実行
・コードを追加する度、＋ボタンで、入力する行を追加。
・YouTUBEの再生ボタンみたいなアイコンを押す。

Tera Term　で、シェルコマンドを実行するのに比べると
微妙に、思考を妨げられるので、面倒くさいなと思っていました。

shift+Enterで、プログラムの実行と、次のコマンド入力行が自動追加されます。
断然、楽になりました。


★OSコマンド
大抵のOSコマンドは 頭に!をつけると、実行できます。

例） 
!pwd
!pip install **
!apt-get install **


なぜか　!cd はコマンドがうまく動作いない
%cd だと、問題なく動作しました。


★editor
vi でファイルを編集することは出来ません。

ちょっと不便ですが、 %%writefile　コマンドで、ファイルの上書きは可能です。

コマンド !cat file1
結果     abc

コマンド %%writefile file1
        abcd
結果     なし

コマンド !cat file1
結果     abcd


多少、不便なところはありますが、pythonの書籍を読みながら
pythonの動作確認（pandas,matplotlib,seaborn)をしたり、
pythonのコード練習をする用途であれば、十分すぎる環境です。
An error occurred while installing mysql2 (0.5.2), and Bundler cannot continue. Make sure that `gem install mysql2 -v '0.5.2' --source 'https://rubygems.org/'` succeeds before bundling.と出てきたときの対処法②

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

#bundle installを実行した際に起きた出来事
このエラーは、ごくたまに遭遇するのですが、mysql2がインストールしてる際に上手くインストールできない場合に発生するみたいです。


```apache
An error occurred while installing mysql2 (0.5.3), and Bundler cannot continue.
Make sure that `gem install mysql2 -v '0.5.3' --source 'https://rubygems.org/'` succeeds before bundling.

In Gemfile:
  mysql2
         run  bundle binstubs bundler
Could not find gem 'puma (~> 3.11)' in any of the gem sources listed in your Gemfile.
         run  bundle exec spring binstub --all
bundler: command not found: spring
Install missing gem executables with `bundle install
```

エラーで言われている通りに、以下のコマンドを実行したのですが...

```apache
$ gem install mysql2 -v '0.5.3' --source 'https://rubygems.org/'
```

変わらず同じエラーが...
解決策を調べて試していた所、そもそもちゃんとmysqlが動かないことを確認

```apache
$ mysql.server start
Starting MySQL
.. ERROR! The server quit without updating PID file (/usr/local/var/mysql/XXXXXXXX.local.pid).
```

まずは、mysqlをスタートさせようとしたがこちらもエラーが直らないので
この記事を参考に再インストール！

[mysqlがどうしても起動しない - Qiita](https://qiita.com/_natsu_no_yuki_/items/ae4c94187093e4ab3cdc/)

記事の通りに　/usr/local/var/mysql も削除し

```apache
$ sudo rm -rf /usr/local/var/mysql
$ brew uninstall mysql
$ brew install mysql
```
で、試してみると…

```apache

mysql.server start
Starting MySQL
 SUCCESS! 
```

成功し、試しにbundle install もした所こちらも成功した！
そもそも、ちゃんとsqlが動いてなかったのが原因かもしれないです。
ROSでRealSenseを真面目に動かしてみる

#Jetson＋D435i＋T265でSLAMやってみたい
先のエントリーで、セットアップまでできて、それっぽく動かしてみました。
試行錯誤しながら順番に動かしてみることにします。
ターミナルを２つ立ち上げて実行。

```
roslaunch realsense2_camera rs_t265.launch
rostopic echo /tf
```
自己位置推定の結果が吐き出されます。
![Screenshot from 2020-01-02 13-05-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328520/23e9cfc1-4b48-6d2c-5084-a40942d55f61.png)

Rvizに出力するにはDEMOを動かしたらOKです。

```
roslaunch realsense2_camera demo_t265.launch
```

#SLAM
こちらのページを参考に、SLAMをやってみます。
[RealsenseでSLAMをする。](https://qiita.com/k65c1/items/0d9039c021ecbb26b04e)

```
roslaunch realsense2_camera rs_aligned_depth.launch 
roslaunch rtabmap_ros rtabmap.launch rtabmap_args:="--delete_db_on_start" depth_topic:=/camera/aligned_depth_to_color/image_raw rgb_topic:=/camera/color/image_raw camera_info_topic:=/camera/color/camera_info

```
![Screenshot from 2020-01-02 14-07-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328520/6b826869-b35b-3da2-c987-2a3e2891ada8.png)

SLAMはできているみたいですが、右半分は更新されずに背景の残骸になっています。

別のデモを動かしてみます。

```
roslaunch realsense2_camera opensource_tracking.launch
```
こちらのページが参考になります。

[RealsenseでSLAM, visual odometry](https://qiita.com/kei_mo/items/27b87cefc2d029c3db51)

![Screenshot from 2020-01-02 14-28-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328520/060e0c84-a549-eff2-c5dd-0dc5bf76a555.png)

他にも、モータを動かす参考に、JetBotもあります。
[JetBot](https://github.com/dusty-nv/jetbot_ros)

私と同じくSLAMを動かそうとしている人もいます。
ちょっと調べると、参考になりそうなサイトを発見。
[【7Days自由研究】Visual SLAMとROSを使えるようになる話 Day-5](https://ensekitt.hatenablog.com/entry/visualslam5)

[ORB-SLAM2 with Realsense D435](https://qiita.com/nindanaoto/items/00622c6a500fe0f15c8c)

[RealSense D435 (ROS)](https://qiita.com/idev_jp/items/bcf198a22599294ab976)

#ROSの使い方を整理
理解しないままSLAMを呼び出ししようとしても時間の無駄ですので、もう少し整理することにします。
そもそもやりたいことは、D435iで周辺をマッピングし、T265で自己位置推定。
それができるようになれば適当なROSのスクリプトを書いてラジコンが走らせられます。

REALSENSE_ROSのドライバに添付のlaunchファイルを使うと、ぞろぞろトピックが吐き出されます。
うまいこと吐き出したトピックを捕まえて処理することができれば良いのです。
先程、T265のトピックはかんたんに捕まえることができました。
D435iはどうでしょう。

試しにサンプルを実行して、どうなっているかを確認します。

```
roslaunch realsense2_camera opensource_tracking.launch
```

実行するとこんな感じ。
設定はこんな感じ。
PointCloud2>Topic = /voxel_cloud
MapCloud>Topic = /rtabmap/mapData
![Screenshot from 2020-01-02 23-24-40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328520/39d82a3c-fa19-640a-777a-97c4e128378c.png)

ノード間の関係性をグラフ化して表示する。

```
rosrun rqt_graph rqt_graph 
```
![rosgraph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328520/8545baee-800c-d7ed-710f-323f52d98c7b.png)

この接続をうまいこと組み替えたら、いい感じになる？

[続き](https://qiita.com/t_kumazawa/items/d7fffe5dc9a046bb8776)
Octaveについて

#前提
Couseraの「Machine Learning」を受講していた。
講義の課題に Octave という言語を用いるが、文法がよくわからない。
そこで、書き方などをメモ代わりに残そうとしたものである。



###文法
- 行列にones(m×1ベクトル)を加えたいとき
`X = [ones(m,1), X];`



- 答えのデータを0,1に直したいとき
（例　手書きの文字の判別したい、
y(答えデータ)は2,4,1…など一桁の数で5000×1ベクトル、Y(欲しい行列)は0,1で表された5000×10行列）
`Y = zeros(m,num_labels);  % 5000 x 10
for i = 1:m
  Y(i,y(i)) = 1;
end`
① 最初に入れ物をつくる（欲しい行列の全要素が0であるもの）
② Yの1行ごとにyと対応する列に1を当てはめる
③ ②を5000行まで繰り返す
![ex4_nncostfunc.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502157/97cd9e0b-3178-f4be-78eb-d75af00ebadd.jpeg)



- ベクトルに要素を追加したいとき
`a = [];  # 入れ物を作成
a = [a ; 2]  # a = [2]
a = [a ; 3]  # a = [2;3] 2×1ベクトル`


- 行列において、各列（行）を足し合わせてベクトルにしたいとき
例）3×2行列(a)を3×1にしたい 
`sum(a,2)`
行を1つにしたい（縦に縮めたい）ときは sum(a,1) 
列を1つにしたい（横に縮めたい）ときは sum(a,2)


- ベクトルの中で最小の値と番号を求める
`[value, idx] = min(vecotr)`


- find関数の使い方
`find(v == 3)`
ベクトルvの中で、3の値の番号を探す
JavaScriptのオブジェクトには、2つ意味がある

### 概要

JavaScriptの世界で、「オブジェクト」は重要なキーワード。であると同時に、指し示す範囲が曖昧で、よく観察すると文脈によって少し違う意味で使われていたりする。この違いを整理してみたい。

ざっくり言うと、オブジェクトには広義のオブジェクトと狭義のオブジェクトがある（これは正式な呼び方ではない）。一般にオブジェクトというときは広義の意味で使われていることが多いが、チュートリアルなどでは最初に狭義の方が出てくるケースもよくあるので、初心者のうちはややこしいと思う。

2つの意味をそれぞれ簡潔にまとめると、以下のようになる。

**広義のオブジェクト：プロパティとメソッドを持つデータ構造（データと機能をひとまとめにしたもの）**

**狭義のオブジェクト：連想配列、Objectオブジェクト**

図で書くと、こんな感じ。

![Group 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229718/ef20d6c9-eb56-a5e2-d3de-93f92578d466.png)

つまり、広義のオブジェクトの中にStringオブジェクトやArrayオブジェクトなど、いろいろな種類があって、その一つが狭義のオブジェクトであるObjectオブジェクトという構図になっている。日常的な例でいうと「ごはん」という言葉に広義のごはん（食事）があって、その中に狭義のごはん（炊いた米）が含まれるというのと似ているかも。

### 広義のオブジェクト

それぞれのカテゴリについて詳しく見ていくと、まず広義のオブジェクトは以下のような共通点を持つデータ構造のことと言える。

#### `new`キーワードで作れる

よく使われるのは`new Date()`でDateオブジェクトを作るというもので、たとえば、現在日時を表す`d`という変数を作りたいなら

```js
const d = new Date();
```

とすればいい。

また、これと同じように

```js
const str = new String('hello');
```

として`str`というStringオブジェクト（≒ 文字列）を作ることができる。この書き方で文字列を作るのは推奨されていないが、単に`const str = 'hello';`と書く代わりに、このような表現もできることは覚えておいていいと思う。

#### 続けて`.プロパティ名`や`.メソッド名`と書くと、値や関数にアクセスできる

例として、

```js
const arr = [24, 18, 35];
```

のような配列があった場合を考えよう。配列はArrayオブジェクトとも呼ぶことができて、上の`[24, 18, 35]`の部分は`new Array(24, 18, 35)`とも書ける。そして、この配列（= Arrayオブジェクト）の要素数の情報は`length`プロパティとしてアクセス可能になるので

```js
arr.length
```

とすれば、`arr`にいくつ要素が格納されているか調べられる。

また、上の例で作った`d`の3分後を表すDateオブジェクトが欲しいときは、分の値を設定する`setMinutes()`メソッドと分の値を取得する`getMinutes()`メソッドを使って

```js
d.setMinutes(d.getMinutes() + 3);
```

と書けばいい。

### 狭義のオブジェクト

一方、狭義のオブジェクトつまりObjectオブジェクトは、上で説明した一般的なオブジェクトの機能に加えて、いくつか独自の機能を兼ね備えたオブジェクトを指す。

最も特徴的なのは、オブジェクトを作るときに

```js
{suzuki: 47, sato: 38}
```

のように波括弧`{}`とセミコロンを使って、自分でプロパティを設定できる点かと思う。Objectオブジェクトは、このようなプロパティの名（上の例でいうと`suzuki`や`sato`）をキーとして、プロパティの値（上の`47`や`38`）にアクセスできることから、連想配列とも呼ばれている。

ただ、Objectオブジェクトは広義のオブジェクトの一つでもあるので、Dateオブジェクトなどと同じように`new`キーワードを使って生成できたりする。たとえば、

```js
const obj = new Object();
```

とすると、

```js
const obj = {};
```

と書いたのと同じ意味になる。`new Object()`も`new Array()`などと同様に使う機会は少ないが、以上のような例から、Objectオブジェクトも配列（= Arrayオブジェクト）も広い意味で「オブジェクト」の仲間、という感覚が掴めればよいと思う。

ちなみに、JavaScriptのObjectオブジェクト（= 連想配列）に当たるデータ構造には、他の言語だともう少し分かりやすい名前がついていることが多く、たとえばRubyにはハッシュ、Pythonにはディクショナリという概念がある。JavaScriptにも、そういう用語があったらもっと分かりやすい気がするのだけど…。
cscの作法 その15 ファイルダイアログ

#概要

cscの作法、調べてみた。
ファイルダイアログやってみた。

#サンプルコード

```
using System;
using System.Windows.Forms;
using System.Drawing;

class form1: Form {
	form1() {
		Text = "open";
		ClientSize = new Size(200, 200);
		Button btn1 = new Button();
		btn1.Location = new Point(50, 50);
		btn1.Text = "test";
		btn1.Click += btn1_Click;
		Controls.AddRange(new Control[] {
			btn1
		});
	}
	void btn1_Click(object sender, System.EventArgs e) {
		string fileContent = string.Empty;
		string filePath = string.Empty;
		using (OpenFileDialog openFileDialog = new OpenFileDialog())
		{
			openFileDialog.InitialDirectory = "c:\\";
			openFileDialog.Filter = "txt files (*.txt)|*.txt|All files (*.*)|*.*";
			openFileDialog.FilterIndex = 2;
			openFileDialog.RestoreDirectory = true;
			if (openFileDialog.ShowDialog() == DialogResult.OK)
			{
				filePath = openFileDialog.FileName;
				MessageBox.Show(filePath);
			}
		}
	}
	[STAThread]
	public static void Main() {
		Application.Run(new form1());
	}
}




```

以上。
【2020年1月】新年明けたらMacに"Zsh使うからな！"って言われた。

# 新年明けて、VSCode開けました。すると・・・？

年末に macOS を Catalina にアップデートしておりました。そして年が明けてからVSCodeを開いてみると、以下のような警告が出てきました。

```sh
The default interactive shell is now zsh.
To update your account to use zsh, please run `chsh -s /bin/zsh`.
For more details, please visit https://support.apple.com/kb/HT208050.
```

何やらご案内が出ておりまして、リンクを開くと・・・？

- [zsh を Mac のデフォルトシェルとして使う - Apple サポート](https://support.apple.com/ja-jp/HT208050)

お〜。Catalina からはデフォルトでzshを使うようになったのね。。でも、VSCodeのターミナル、**bash**なんだよね・・・ということでその辺りをサクッと調べてみました。

## zsh ってなんだ？

`zsh` ってシェルの一種なのはわかるけど、Bashとどう違うのか・・・？ということでいろいろ調べてみると**なんだか凄そう**っていうことはビンビン伝わってきます。

- [Catalinaでデフォルトシェルが「zsh」に変わる、bashとの違いは?](https://news.mynavi.jp/article/osxhack-241/)
- [第1回　zshで広がる世界：zshで究極のオペレーションを｜gihyo.jp … 技術評論社](http://gihyo.jp/dev/serial/01/zsh-book/0001)

## 設定の引越しが必要らしい。

bashの時に使用していた`.bash_profile`やら`.bash_rc`が読みこまれなくなったのでそこで使用していた設定などはお引越しが必要な模様です。

- [新macOS Catalina が zsh を標準にするって聞いたので Mojave のまま移行してみた](https://qiita.com/tkooler_lufar/items/66e8fa451185e812a33a#%E8%A8%AD%E5%AE%9A%E3%81%AE%E7%A7%BB%E6%A4%8D)

こちらの設定は上記のページにお譲りいたします。

## VSCode のターミナルを変更

このままで VSCode では `/bin/bash` が設定されておりますので、`/bin/zsh` に設定を変えましょう。
settings.jsonにて以下の設定を追加します。

```json:setting.json
...
    "terminal.integrated.shell.osx": "/bin/zsh"
...
```

これで設定を保存し、ターミナルを開くと・・・

```zsh
 % 
```

と、`%` のプロンプトが出ました！これで無事にZshへ入門できました。

*VSCodeではRemote SSHばっかりしてるから、ほとんど関係ないんだけどね・・・*
cscの作法 その14 fizzbuzz

#概要

cscの作法、調べてみた。
練習問題やってみた。

#練習問題

fizzbuzzをファイルして。

#サンプルコード


```
using System;
using System.IO;
using System.Windows.Forms;
using System.Drawing;

class form1: Form {
	form1() {
		Text = "fizzbuzz";
		ClientSize = new Size(300, 300);
		Button btn1 = new Button();
		btn1.Location = new Point(50, 50);
		btn1.Text = "test";
		btn1.Click += btn1_Click;
		Controls.AddRange(new Control[] {
			btn1
		});
	}
	void btn1_Click(object sender, System.EventArgs e) {
		int i;
		string res = "";
		for (i = 1; i < 100; i++)
		{
			if (i % 15 == 0)
			{
				res += "fizzbuzz ";
			}
			else if (i % 5 == 0)
			{
				res += "buzz ";
			}	
			else if (i % 3 == 0)
			{
				res += "fizz ";
			}
			else
			{
				res += i.ToString() + " ";
			}
		}
		StreamWriter sw = new StreamWriter("fizzbuzz.txt", false);
		sw.Write(res);
		sw.Close();
		MessageBox.Show("write ok");
	}
	[STAThread]
	public static void Main() {
		Application.Run(new form1());
	}
}





```

以上。
cscの作法 その13 StreamReader

#概要

cscの作法、調べてみた。
ファイル読み込みやってみた。

#サンプルコード

```
using System;
using System.Windows.Forms;
using System.Drawing;
using System.IO;
using System.Text;

class form1: Form {
	form1() {
		Text = "file";
		ClientSize = new Size(200, 200);
		Button btn1 = new Button();
		btn1.Location = new Point(50, 50);
		btn1.Text = "test";
		btn1.Click += btn1_Click;
		Controls.AddRange(new Control[] {
			btn1
		});
	}
	void btn1_Click(object sender, System.EventArgs e) {
		string file = "test.txt";
		string res;
		StreamReader reader = new StreamReader(file);
		res = reader.ReadToEnd();
		MessageBox.Show(res);
	}
	[STAThread]
	public static void Main() {
		Application.Run(new form1());
	}
}
```

以上。
【Angular】`[routerLink=""]`を使ってパスの階層を一つ下げたい

## はじめに
この記事はAngularにおけるルーティングで、パスの階層を下げるのにわざわざ「[Router.navigate](https://angular.io/api/router/Router#navigate)」を使わずに`routerLink=""`を使ってシンプルにできるよという記事。

## どうやるか
`routerLink=".."`とするだけ。

## どんな時に使えるのか
データの「一覧画面」と「詳細画面」があり、次のようなやりとりをする。
![名称未設定ファイル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316318/88a74ef7-4854-c17a-811c-3a6d17d92865.png)
この中で⑤をシンプルに実現するのに使える。

## 参考
- [go back using routerLink](https://stackoverflow.com/a/51288683)
暇すぎて画像ダウンロードツールを作ってみた話

年末年始暇ですね。

暇つぶしに何か作ろうと思ったんですが、何も思いつかず。。。
普段AngularやNestJSでTypescriptばっかり書いてますが、たまにはJavascriptでも書いてみようと思いました。

とりあえずWebページのスクレイピングってやったことないからJavascriptで書いてみるかーということでしょうもないツールを作ってみました。

（2022/03/05追記）
GUI版も作りました

https://qiita.com/teracy164/items/784a20e37bb0b8846435

# 作ったもの

WebページのURLを指定すると、そのページ内のimgタグの写真をすべてダウンロードするコマンドラインツールです
[img-downloader](https://github.com/teracy55/img-downloader)


## 使い方

- nodeコマンドで`img-downloader.js`を実行します
- 引数に対象のWebページURLを指定します

```
npm install
node img-downloader.js {web-page-url}
```

## 結果

- `output/{YYYYMMDDhhmmss}`ディレクトリに画像が出力されます


## 実行例

以下のページから画像を取得してみます
https://www.irasutoya.com/2018/12/blog-post_676.html

```
node img-downloader https://www.irasutoya.com/2018/12/blog-post_676.html
```

 ↓　実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/12345c6e-b66b-6edd-7614-b6297488b2a7.png)

　↓　出力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/73e56163-b95c-f6ce-1e19-cd6ccbb613cc.png)

指定したページ内の全画像をとってくるので、ロゴやバナーの画像なんかの意図しない画像も取れてしまうのが難点です。。。


# 技術的な話

すごいシンプルなJavascriptで書いてます。
ほんとはスクレイピングも自前でやろうかと思ったんですが、めんどくさくなってscraperjs使っちゃいました。。

## 使ってるパッケージ

- [fs](https://www.npmjs.com/package/fs)
    - ファイルの入出力用パッケージ
- [request](https://www.npmjs.com/package/request)
    - HTTPリクエスト用パッケージ
- [scraperjs](https://www.npmjs.com/package/scraperjs)
    - Webページのスクレイピング用パッケージ


## スクレイピング

scraperjsを扱うためのUtilクラスを作りました。
`getTargetImgURl()`で指定URLからimgタグのsrc属性をピックアップします。

```utils/scraper.util.js
class ScraperUtil {
    getTargetImgUrl(pageUrl) {
        return this.scrape(pageUrl, ($) => {
            return $('img').map(function () {
                return $(this).attr('src');
            }).get();
        });
    }

    scrape(pageUrl, fnScraping) {
        return new Promise((resolve, reject) => {
            scraperjs.StaticScraper.create(pageUrl)
                .scrape(($) => fnScraping($))
                .then(items => resolve(items))
                .catch(err => reject(err));
        });
    }
}
```

簡単にスクレイピングできて良いですね。


## 画像のダウンロード

src属性に指定された値によってダウンロード方法が変わります

### URLの場合

- requestパッケージで画像データをGET
- GETしたデータをfsパッケージのwriteFileSyncでファイル出力
    - ファイル名はURLから取得

### BASE64データの場合

`data:image/xxx～`で始まる文字列の場合、BASE64データが指定されていると判断し、以下のように出力しています。

- str.match()で`data:image/xxxx;base64,`を抽出
- 上記で抽出した文字列を除いた文字列（画像データ）をBASE64デコード
    - ブラウザ上でないとwindow.atobは使えないため、Bufferを使ってデコードしています
- fsパッケージのwriteFileSyncでファイル出力
    - ファイル名は`raw{cnt}.{type}`で出力
    - typeは上記で抽出した文字列の画像タイプ（xxxxの部分）を指定


# 最後に

休みボケの中で適当に書いているため、突っ込みどころ満載なコードになってしまいましたが、良い暇つぶしになりました。

Typescriptだと型とかきっちりしてて書いてる途中でエラーに気付けますが、Javascriptだと実行してようやく気付くことが多いので、久々だと意外と難しいですね（笑）

（追記）
Googleの画像検索の結果一括保存したかったのにできてないので、気が向いたらアップデートしていこうかと思います。
set -uを指定したシェルスクリプトで未指定を許容する

`set`で`-u`オプションを指定しておくと、未指定のまま変数を使うのを避けられるので便利です。
ただ、以下のように明示的にエラーメッセージを出したい場合もあります。

```shell:test.sh
#!/bin/bash
set -u

if [[ -z "$1" ]]; then
  echo "no arg" >&2
  echo "Usage: ..."
  exit 1
fi

# 省略...
```

しかし、`-u`が適用されるため自前でのチェックができません。

```
bash-3.2$ ./test.sh 
./test.sh: line 4: $1: unbound variable
```

次のように一時的に無効にすれば対応できますが、コードの状態が増えるし、戻し忘れのリスクもあります。

```shell
#!/bin/bash
set -u

set +u # 一時的にuオプションを無効にする
if [[ -z "$1" ]]; then
  # 省略...
fi
set -u # 戻す
```

では、どうするか？
デフォルト値を利用することで、`-u`オプションのチェックを回避することができます。
[Man page of BASH](https://linuxjm.osdn.jp/html/GNU_bash/man1/bash.1.html)
> ${parameter:-word}
デフォルトの値を使います。 parameter が設定されていないか空文字列であれば、 word を展開したものに置換されます。そうでなければ、 parameter の値に置換されます。

`word`を指定しなければデフォルトに空文字が入るため、自前で空文字チェックができます。

```shell
#!/bin/bash
set -u

if [[ -z "${1:-}" ]]; then
  # 省略...
fi
```
結果

```
bash-3.2$ ./test.sh 
no arg
Usage: ...
```

## 参考
* [bash スクリプトの先頭によく書く記述のおさらい | Money Forward Engineers' Blog](https://moneyforward.com/engineers_blog/2015/05/21/bash-script-tips/)
* [Man page of BASH](https://linuxjm.osdn.jp/html/GNU_bash/man1/bash.1.html)
[Rails][bootstrap]css→SCSSへ変更する方法

Bootstrapのロジック整理のため投稿です。
CSS→SCSS(Sass)への変更方法についてまとめていきます。

>rails new

の直後では、デフォルトでapp/assets/stylesheets/application.cssが読み込まれる仕様になっています。


そこで手順は、以下の流れになりそうです。

>①app/assets/stylesheets/application.css を削除
>②app/assets/stylesheets/application.scssを作成
>③Gemfileにbootstrapを追加→bundle install
④app/assets/stylesheets/application.scssにインポート

具体的に見て行きましょう！

①app/assets/stylesheets/application.css を削除


```
$　rm app/assets/stylesheets/application.css
```

②app/assets/stylesheets/application.scssを作成

③Gemfileにbootstrapを追加→bundle install

```Gemfile.
  gem 'bootstrap'
```

```
$ bundle install
```

④app/assets/stylesheets/application.scssにインポート


```application.scss
@import "bootstrap";
```
CodePen試してみた - HTML+JavaScriptでナンプレつくってみた

CodePenが面白そうだったのでやってみた。
※JavaScriptについては、ほぼ素人です。テキトウにコード書いているのであまりマネしないようにおねがいします。

# ナンプレつくってみた

つくってみたナンプレの仕様：
・盤面は固定（オリジナル。解が１個に定まるように適当に作った。）
・画面遷移したり閉じると初期化されます

~~※まだEdgeでしか動作確認していません。~~
タブレットだとキー入力できない…

<p class="codepen" data-height="500" data-theme-id="default" data-default-tab="result" data-user="kob58im" data-slug-hash="NWPaoBr" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="NWPaoBr">
  <span>See the Pen <a href="https://codepen.io/kob58im/pen/NWPaoBr">
  NWPaoBr</a> by kob58im (<a href="https://codepen.io/kob58im">@kob58im</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 参考サイト
+ [codepenでウェブ開発入門](https://qiita.com/InoueDaiki/items/1ee988d8e1f43bc205de)
+ [Qiitaで記事にCodePenが埋め込めるようになりました - Qiita](https://qiita.com/Qiita/items/edae7417214c8e957f54)
+ [keyboard event](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)
+ [onclick](https://q.hatena.ne.jp/1146461240)
React Native 事始め - 環境構築 Android

# はじめに
最近 React Nativeはじめました。React NativeはFacebookが提供しているマルチプラットフォームアプリケーションフレームワークです。React Nativeでは開発方法が以下の二種類に分かれます。

* React Nativeを用いた方法
* Expoを用いた方法

React Nativeは通常の開発と同様でiOSの場合はipa、Androidの場合はapkファイルを作成します。しかしExpoの場合は、expo.ioに配布されたアプリケーションを参照する事で機能が実現されます。

<img width="700" alt="スクリーンショット 2019-12-29 12.23.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85182/cddfbc64-a408-8f86-2dfc-0898a36460cf.png">


今回はReact Nativeを用いた方法を行います。Mac PCで必要なツール、ライブラリをインストールして、Android端末でReact Nativeのサンプルアプリを動作させます。

# 環境構築手順
Android Studioは、Homebrewはインストールされている前提とします。以下のページに書かれている手順を進めて行きます。https://facebook.github.io/react-native/docs/getting-started

<img width="598" alt="スクリーンショット 2020-01-01 10.52.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85182/b459d7bc-f30f-e09b-e22f-2a9e84e07883.png">


```bash
$ brew install node
$ brew install watchman
$ brew tap AdoptOpenJDK/openjdk
$ brew cask install adoptopenjdk8
```

サンプルアプリの雛形を作成します。下記コマンドを呼び出すと様々なライブラリがダウンロードされるので、暫く時間がかかります。

```bash
$ npx react-native init AwesomeProject
```

途中でCocoaPadsのインストールについて問い合わせがありました。

```bash
? CocoaPods (https://cocoapods.org/) is not installed. CocoaPods is necessary for the iOS proj
ect to run correctly. Do you want to install it? Yes
```

Androidの実機を接続してデバッグ可能か事を確認して下さい。それから以下のコマンドを実行するだけで、Android端末でアプリケーションが起動しました。とても簡単です。

```bash
$ npx react-native run-android
```
EC2 Image Builderのコンポーネントをサクッと作る

# はじめに

Image Builder試してみたけど、インストールしたいパッケージのComponentsがない。
このためにドキュメント調べるのか。。メンドイ
ってなった事はないだろうか？私はある。

# AWSのComponentsをベースに作る

AWSで用意してあるComponentsをベースに、ちょっと変えるだけ。
単純にインストールするだけなら難しくない。

## 1. ベースのComponentsをコピペ

Componentsに`python-3-linux`という物があるので、それを使うといい。

```yaml
name: Python 3
description: Install the latest version of Python 3.
schemaVersion: 1.0
phases:
  - name: build
    steps:
      - name: InstallPython3
        action: ExecuteBash
        inputs:
          commands:
            - sudo yum install python3 -y

  - name: validate
    steps:
      - name: ValidatePython3
        action: ExecuteBash
        inputs:
          commands:
            - |
              if type -P python3 &>/dev/null; then
                  echo "The python3 command exists."
              else
                  echo "The python3 command does not exist. Failing."
                  exit 1
              fi

              python3 --version
              if [[ $? == 0 ]]; then
                  echo "python3 was successfully invoked."
              else
                  echo "python3 could not be invoked. Failing."
                  exit 1
              fi
```

## 2. インストールしたいものに合わせる

Gitをyumでインストールしてみる。

```yaml
# Python 3となっている箇所を変える
name: Git
description: Install the latest version of Git.
schemaVersion: 1.0
phases:
  - name: build
    steps:
      # Python3となっている箇所を変える
      - name: InstallGit
        action: ExecuteBash
        inputs:
          commands:
            # インストールコマンドを入れる
            - sudo yum install git -y

  - name: validate
    steps:
      - name: ValidateGit
        action: ExecuteBash
        inputs:
          commands:
           # python3となっている箇所を変える
           - |             
              if type -P git &>/dev/null; then
                  echo "The git command exists."
              else
                  echo "The git command does not exist. Failing."
                  exit 1
              fi

              git --version
              if [[ $? == 0 ]]; then
                  echo "git was successfully invoked."
              else
                  echo "git could not be invoked. Failing."
                  exit 1
              fi
```

これだけ！
あとはコンポーネントに反映して、パイプライン作ってテストすれば良い。

# 補足

`python-3-linux`は、単に最新バージョンをインストールして確認するだけだが、他にも処理を入れるなら以下あたりが参考になりそう。

- バージョン判定を行う  
  php-7_3-linux
- systemctl enableする  
  docker-ce-linux

ドキュメントは以下にある。
https://docs.aws.amazon.com/imagebuilder/latest/userguide/managing-image-builder-console.html#image-builder-application-documents

# EC2 Image Builderとは（一応説明）

AMI作成を自動化してくれるツール（パッケージインストール等をやってくれる）。

[Developers.IO:EC2のイメージ作成を劇的に効率化するEC2 Image Builderが発表されました！ #reinvent](https://dev.classmethod.jp/cloud/aws/ec2-image-builder/)
[Qiita:EC2 Image Builder を触ってみました。](https://qiita.com/kaba-chan/items/fe57169f0144789cdd21)
<meta name="viewport" content="">のコピペから脱却

こんにちは。
下記のコードは身近なものではないだろうか？

```html
 <meta name="viewport" content="width=device-width, initial-scale=1">
```
恥ずかしながら今までは***viewport***をコピペしていたので理解を深めるために書こうと思う。


#Viewportとは？
> A viewport is a polygon viewing region in computer graphics.　[Wikipedia](https://en.wikipedia.org/wiki/Viewport)

つまり、コンピュータ画像の中の表示領域のことである。
具体例としてあげるなら、PCであるWebサイトを開いた場合とスマホで開いた場合では、
コンテンツの場所が違ったり、縮小されてだけだったり、壊れていたり・・・・など様々だと思う。
そのようなモバイル端末にWebサイトを対応させる時に上記のコードを利用するのだ。

それでは、この***viewport***の**content**の中で指定できるものを見ていこう。

- width
- height
- initial-scale
- minimum-scale
- maximum-scale
- user-scalable
- etc ・・・


| 値 | 設定可能値 | 説明 |
|:-:|:-:|:-:|
| width  | 正の整数または **device-width**  | ウェブサイトを描画したいビューポートの幅をピクセル数で定義する。 |
| height  | 正の整数または **device-height**  | ビューポートの高さを定義する。どのブラウザーでも使用されていません。 |
| initial-scale  | 0.0 から 10.0 までの、正の数値 | デバイスの幅 (ポートレートモードでの device-width またはランドスケープモードでの device-height) とビューポートの寸法との比率を定義する。|
| minimum-scale | 0.0 から 10.0 までの、正の数値  | ズームの最大値を定義します。この値は minimum-scale と同じまたはより大きくしなければなりません。そうではないときの動作は未定義です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。 |
| maximum-scale  |0.0 から 10.0 までの、正の数値  | ズームの最小値を定義します。この値は maximum-scale と同じまたはより小さくしなければなりません。そうではないときの動作は未定義です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。  |
| user-scalable  | yes または no | no を設定すると、ユーザーはページのズームができなくなります。既定値は yes です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。|

[MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta)から引用


この中でもよく使う***width***と***initial-scale***を見ていきたい。
### width
viewportの横幅をピクセル単位で指定する。
初期値は**960px**で、指定できる範囲は**200px〜10000px**。
***device-width***は、横幅がデバイスの横幅となるように指定される。

## initial-scale
初期倍率を設定する。
width=device-widthとしてinitial-scaleを指定しない場合は、自動的にinitial-scale=1となる。


簡単のように見えて、理解をして使うことは大切ですよね。





# 参考文献
[W3C](https://drafts.csswg.org/css-device-adapt/#viewport-meta)
[MDN web docs](https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta)
[HTML クイックリファレンス](http://www.htmq.com/tutorial/23_2.shtml)
BEM記法：独自ルールの設定


#BEMの基本的なルール
BEM記法に関しては既にたくさんの記事がありますので。そちらを参照下さい。

[一番詳しいCSS設計規則BEMのマニュアル](https://qiita.com/Takuan_Oishii/items/0f0d2c5dc33a9b2d9cb1)
[HTML・CSSの設計にBEMを取り入れてみよう！](https://tech-dig.jp/bem-css-html/)

#BEMの問題点
- 基本的な命名規則に従うだけでは、クラス名が統一感を欠きやすい。（クラス名から直感的にサイト構造をイメージしづらくなりやすい）
- サイト規模が大きくなった際、重複しないクラス名を考えるのに時間がかかる。


#独自ルールの設定
基本的な命名規則に従うだけではなく、独自にルールを設定することで直感的にサイト構造をイメージできるようになる。（同時に、場当たり的にクラス名を考える時間も省略できる。）

##Block
１．セクションのクラス名を接頭辞にする。

~~~html
<section class="top-sec">
    <div class="top-contents">
        <h2 class="top-contents__title">タイトル</h2>
    </div>
</section>
~~~

／／　理由：ブロックが属しているセクションがスグにわかる。且つ、クラス名の重複を防ぐ。

２．`<div>`に与えるクラス名を決めておく(`<div>`専用のクラス名を用意する)。

~~~html
<section class="top-sec">
    <div class="top-bottom">
        <div class="top-bottom-contents">
            <p class="top-bottom-contents__text">テキスト</p>
        </div>
    </div>
</section>
~~~

／／　理由：contents / box, upper / bottom, up / down , right / left など、`<div>`専用のクラス名をあらかじめ決めることで、クラス名に統一感が生まれる。

３．`<ul>`の様に子要素を必ず含むhtmlタグは、そのままクラス名として使用する。

~~~html
<section class="price-sec">
    <ul class="price-ul">
        <li class="price-ul__li">1,000yen</li>
        <li class="price-ul__li">2,000yen</li>
        <li class="price-ul__li">3,000yen</li>
    </ul>
</section>
~~~
／／　理由：`<ul>`や`<table>`は親要素に必ず何らかのブロック要素を持つ(接頭辞にセクション名が付く)ため重複する可能性は低く、あえてクラス名を考える必要はない。

##Element
１．あらかじめhtmlタグに対応したクラス名を決めておく。

~~~html
<section class="flow-sec">
    <div class="flow-upper">
        <h3 class="flow-upper__title">タイトル</h3>
    </div>
    <div class="flow-bottom">
        <img src="img/www.jpg" alt="" class="flow-bottom__img">
        <p class="flow-bottom__text">テキスト</p>
    </div>
</section>
~~~

／／　理由：`<p>`は「text」、`<img>`は「img」のように決めておけば直感的にhtml構造を把握でき、クラス名を考える手間も省ける。

##Modifier
Modifierに関しては独自ルールを設定していません。

#まとめ
以上、ちょっとしたルールですが、独自ルールを定めず闇雲にクラス名を付与していくとスタイリングする際に混乱しやすいので、自分が運用しやすいルールをあらかじめ設定しておくと良いのかもしれません。
[HTMLのみ]ブラウザのformで次の入力欄にカーソル移動させる

# Androidで入力欄が連続していると面倒臭い
![Screenshot_20200102_104447_com.android.chrome.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377322/2b06ab10-a733-211d-00a9-3375cd564857.jpeg)

会員登録のときとか、formに次々と情報を入れなければならないとき、***Androidにもタブキーが欲しい***と思うほど入力欄の移動が面倒臭い。

でもなんだか確定キー(Enterキー)の表示が変わってて、欄を移動できるときがある。
どうもIMEの違いではなさそうだ。GbordでもATOKでもShimejiでも移動できる。
ブラウザの違いでもない。ChromeでもFirefoxでもYahooブラウザでも移動できる。
ソースを開いてみるとjavascriptは埋め込まれてない。

…どういうことなの。

# 普通はカーソル移動できない
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="tomoyatakagawa" data-slug-hash="BaywvgE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="カーソル移動しないform">
  <span>See the Pen <a href="https://codepen.io/tomoyatakagawa/pen/BaywvgE">
  カーソル移動しないform</a> by tomoyatakagawa (<a href="https://codepen.io/tomoyatakagawa">@tomoyatakagawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

buttonのtypeがsubmitかbuttonかの違いか？
そういうわけでもないみたい…

# カーソル移動した

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="tomoyatakagawa" data-slug-hash="vYEevoa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="カーソル移動するform">
  <span>See the Pen <a href="https://codepen.io/tomoyatakagawa/pen/vYEevoa">
  カーソル移動するform</a> by tomoyatakagawa (<a href="https://codepen.io/tomoyatakagawa">@tomoyatakagawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

2つ目の試行でカーソルが移動した。
なんと&lt;input&gt;群を&lt;form&gt;で囲んだだけ！
HTML5から&lt;input&gt;を&lt;form&gt;に入れなくても良くなったけど、ちゃんと入れればそれなりの動作をしてくれるものなんですね。

## 対応ブラウザ
全てはちゃんと調べていないのですが、2020年1月現在の最新ブラウザなら動くと思います。
(2016年のChromeでは動きませんでした)


## ちなみに背景として
会社で脱・紙記録をしようとしているんですが、使っている記録用紙の記入欄の数が半端なくて、デジタル化したところでめちゃめちゃ入力しづらかったんです。せめてカーソルが自動移動すればなと思ったんですが、既製品のシステムなのでjavascript入れると他の機能と衝突しそうで、簡単な方法が無いか探していました。

なので一般の方が使うWebサイトでなく、社内で使うシステムで使用ブラウザを指定できる場合などに使える方法だと思います。
linux mono アンインストール

#monoの存在を確認
```
dpkg -l | grep mono

```


#削除
```terminal:どっちでもOK
その１
sudo rm -rf usr/lib/mono /usr/local/bin/mono /usr/local/etc/mono /usr/local/lib/mono

その２
sudo apt remove --purge --auto-remove mono-runtime
```

# 無くなったか確認
```
dpkg -l | grep mono
```
ネットワークエンジニア視点のAWS Direct Connect2

 ネットワーク構成に関して

色々な記事を見るに、多分ここのInterfaceはこんな感じ。
<img width="975" alt="Screen Shot 2020-01-02 at 10.21.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200070/83ebd52e-489b-b01e-ec96-8870dc23e8b2.png">
とすると気になるのはAWS側の構成で、こんな感じになっているのではないかと。
<img width="962" alt="Screen Shot 2020-01-02 at 10.22.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200070/7696cf9c-c521-e387-c1ef-c6988eaf45a7.png">
確実に分かっているのが、Customer GatewayとVirtual Private Gatewayにアタッチした
Private Interface間でBGP Peeringしている事。
及びTrunk, Accessの考えが合ってて尚且つ"AWS Direct Connect Routers"が”**Router**”なら
図の赤色部分は"L3"になってそうだけど、この赤色部分の経路情報をCustomer Gatewayに渡している
設定が見当たらない。
この赤色部分が"AWS Direct Connect **Switches**"だったらスッキリするんだけど、
ここは何かあるのかなあ。
[Windows10] Vagrant 2.2.6 と Virtualbox 6.1でうまくvagrant up ができなかった時の対処法

# はじめに
正月早々、自宅のWindows10 PCのソフトアップデートをしたところ、この問題に遭遇しました。
Macで同様の問題に遭遇されている方がいらして、[こちらの記事](https://qiita.com/shuu1222/items/7a6d04172363be44025c)を発見。Windows10上でパスの読み替えが必要だったので、差分のみ投稿させていただきます。
エラーの内容も全く同じだったので、その辺も割愛しています。

# ファイルパスの読み替え
ファイルパスは以下の読み替えで、無事`vagrant up`が成功するようになりました。

Mac: `/opt/vagrant/embedded/gems/2.2.6/gems/vagrant-2.2.6/plugins/providers/virtualbox/driver/meta.rb`
Windows10: `C:\HashiCorp\Vagrant\embedded\gems\2.2.6\gems\vagrant-2.2.6\plugins\providers\virtualbox\driver\meta.rb`

Mac: `/opt/vagrant/embedded/gems/2.2.6/gems/vagrant-2.2.6/plugins/providers/virtualbox/driver/version_6_1.rb`
Windows10: `C:\HashiCorp\Vagrant\embedded\gems\2.2.6\gems\vagrant-2.2.6\plugins\providers`

Mac: `opt/vagrant/embedded/gems/2.2.6/gems/vagrant-2.2.6/plugins/providers/virtualbox/plugin.rb`
Windows10: `C:\HashiCorp\Vagrant\embedded\gems\2.2.6\gems\vagrant-2.2.6\plugins\providers\virtualbox\plugin.rb`

# 最後に
元記事の方には助けられました。ありがとうございます。
複数のPDFを1つのドキュメントに結合する方法

PDF形式は1990年代にリリースされました。ファイル交換プロセスを統一し、インストールされているソフトウェアやオペレーティングシステムから独立させることを目指しています。他の形式と比較して、PDFは元のドキュメント構造を変更せずに維持します。 PDFを使用すると、他のプログラムで印刷または開いたときにファイルがどのように見えるかを心配する必要がありません。

職場では、ファイルの処理または管理、共有、レビューとデータ取得のための送信のために、すべてのデータが1か所にあることがよくあります。上記の理由のいくつかのために、私たちはすべて複数のPDFファイルを1つのファイルにマージすることを望んでおり、これらのファイルをマージすることが職場でデータを処理および配布する最も効果的な方法です。しかし、これらのAdobe PDF文書をどのようにマージするのかという疑問が生じます。複数のPDFを1つのPDFに結合する多くのオンラインソリューションを見つけましたが、ファイル番号とファイルサイズに関して一定の制限があります。したがって、私の仕事の問題を解決し、より多くの人が迂回するのを避けるために、あなたが毎日の作業負荷の一部として電子文書を扱う数百万人である場合、最も簡単な方法を共有し、それを注意深く読んでください、それはあなたのニーズを満たすことができるため、そして最も重要なことには、あなたはペニーを費やす必要がないからです。

複数のPDFファイルを無料でマージする方法は？ Sanpdfマージソフトウェアを使用する理由無料であるため、1ペンスを費やす必要はなく、インターフェイスは操作が簡単で、ソフトウェアは非常に小さく、メモリをほとんど消費せず、ほとんどコンピューターのスペースを必要としません。プロセスはシンプルで直感的で、2分以内に完璧な結果が得られます。
Adobe PDFをマージするには：
1、ブラウザーを開き、「Sanpdf」と入力して公式Webサイトのホームページに入り、「ダウンロード」ボタンをクリックします。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560346/7272e00c-b1ec-f2f8-7e03-b833edfc6f8a.png)
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560346/870a8338-fde0-5172-30c2-40d26cb8679b.png)

2、ダウンロードが完了したら、ダウンロードしたファイルを開き、SanPDFクライアントのインストールを開始します。 必要なインストールパスを選択するか、スタートメニューフォルダを作成するかどうかを選択できます。 [インストールの開始]をクリックします。 インストールが完了すると、デスクトップにSanPDFアイコンが表示されます。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560346/bc20e31c-8815-6b93-2821-196944e65691.png)
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560346/a0d5c5a4-5757-d65b-dd92-17ad3fa71fcc.png)
3、インストールが完了したら、Sanpdf PCを開きます。 PDFファイルをマージする必要があるため、「pdfマージ」機能をクリックします。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560346/2374e44d-86d9-68a9-7fbd-e1486aeb9932.png)
4、PDFマージ機能オプションを開いた後、次に、このインターフェイスが表示されます
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560346/ffb3100e-1862-2e8e-6813-230e6481f149.png)
5、右上隅に3つの異なる色のボタンがあります。[リストの追加]をクリックして、ファイル選択インターフェイスに入り、マージするPDFファイルを選択します。 ファイルを選択すると、選択したファイルがマージ待ちのキューに表示されていることがわかります。 ディレクトリを保存するか、デスクトップに保存するかを選択することもできます。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560346/415af8e3-f0ce-d7f7-f69d-74d525ea18bc.png)
6、「マージ」をクリックして、ファイルのマージを開始します。 マージが完了すると、選択した保存場所にMergeという名前のファイルが表示されます。 これはマージされたファイルです。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560346/ea805dff-9d29-830a-9983-f21938e4e944.png)

Sanpdfを使用すると、複数のファイルをマージして1つのコンパクトなPDFに整理できます。 よく整理されたプロジェクト情報のコレクションを同僚に提供します。 持って行って〜

1、送信する電子メールの添付ファイルを減らします。 PDFまたはその他のファイル形式を単純化されたファイルにマージします。 プロジェクト情報（スプレッドシート、Webページ、ビデオを含む）をPDFファイルまたはPDFパッケージに結合し、簡単に共有、アーカイブ、またはレビュー用に送信できます。

2、外出先で結合して整理します。 任意のブラウザーからPDFファイルを簡単にマージし、ファイルをPDFにマージします。 iPadまたは携帯電話では、PDFドキュメントのページを並べ替えたり削除したりすることもできます。

3、SanPDFは、複数のドキュメント形式、電子書籍、およびドキュメント形式の変換をサポートするリーダーです。
cscの作法 その12 時計

#概要

cscの作法、調べてみた。
練習問題やってみた。

#練習問題

時計を作れ。

#写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/55f48620-5221-6331-e41d-4b4ecd247928.png)


#サンプルコード


```
using System;
using System.Windows.Forms;
using System.Drawing;

class form1: Form {
	Label la1;
	form1() {
		Text = "Timer";
		ClientSize = new Size(300, 200);
		la1 = new Label();
		la1.Location = new Point(50, 50);
		la1.Text = "test";
		Controls.AddRange(new Control[] {
			la1
		});
		Timer timer = new Timer();
		timer.Interval = 1000; 
		timer.Tick += new EventHandler(timerTick);
		timer.Start();
	}
	void timerTick(object sender, EventArgs e) {
		la1.Text = DateTime.Now.ToString("HH:mm:ss");
	}
	[STAThread]
	public static void Main() {
		Application.Run(new form1());
	}
}




```

以上。