OmniAICreator/Qiita-1.07M huggingface dataset:
MacBook の発熱を調べてみた

# はじめに

MacBook を使っていると，発熱に悩まされます．
MacBook をはじめとするノート PC の発熱は，CPU パフォーマンスの低下，バッテリー寿命の劣化などを招くので，可能限り避けたいです．
そこで MacBook を冷却する方法をいくつか検討し，実際に温度を計測しました． 

## 送風機による空冷

MacBook の背面に風を当てて冷却する方法です．
今回は，DIGI+製の↓の機材を用いました．
![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528369/9e1c2da2-42c4-4ff4-8348-b0afa193fe77.jpeg)
(出典：https://www.digiplus.online/products/dgp-ncs01.html)


## スタンドによる自然放熱

今回は，Majextand を用いました．
[Majextand](https://kopek.jp/archives/majextand.html) は，ステンレス製の折り畳みスタンドです．
MacBook の背面に粘着テープで貼り付けて使用します．
スタンドを立てることで，外出先でも背面を露出させることができます．

![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528369/85311672-57b9-6252-aeac-56fbb6ee5e6c.jpeg)
(出典：https://kopek.jp/archives/majextand.html)

# 実験

空冷の有無，スタンドの有無，CPU への負荷の有無といった諸条件を変えて温度を計測し，
空冷と自然放熱にどの程度効果があるか確認します．

## 計測方法

### 評価に用いた機材

MacBook Pro (13-inch, 2018, Four Thunderbolt 3 Ports)
プロセッサ：2.7GHz クアッドコア Intel Core i7

### 温度計測

温度の計測には，[iStat](https://bjango.com/mac/istatmenus/)を用います．
下の画像のように，各種パーツの温度や消費電力を監視することができます．

<details><summary>iStat の温度表示</summary><div>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528369/8ab9d512-7cf3-8d50-e923-1be2d8d58b7b.png)

</div></details>

空冷有り，スタンド無し，CPU への負荷あり…といったような諸条件をセットしてから，５分後の温度を計測します．
議論を簡単にするため，今回は 4つの CPU　の平均温度のみを評価することにします．

### Majextand の着脱

粘着テープによるスタンドの着脱は容易ではないため，↓のようにマグネットテープを用いました．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528369/db92e5a2-3cbc-9fc0-97b4-4b653b31c4e7.png)

### CPU の負荷

MacBook の CPU が4コア8スレッドのため，
下記のスクリプトを７回バックグラウンド実行しました．

```bash
yes > /dev/null &
```

### 注意事項

空冷と Majextand を併用する際は，風を効率良く当てるためにスタンドを畳んで計測しました．
したがって，背面の冷却効果はあまり期待できません．
「畳んだスタンドによって空気が遮られてしまい，かえって冷却効率が落ちるのではないか？」[^1]と予想していたので，あえて計測しました．


## 実験結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528369/6fe35893-5790-180e-c6b7-70cd5e3fdc4d.png)

+ 無負荷時，スタンド無しで空冷の有無を比較すると，約11℃平均温度が変わる
+ 無負荷時，空冷無しで スタンドの有無を比較すると，約3℃平均温度が変わる
+ 負荷がある場合，空冷がある場合は，スタンドの有無による差は殆どない[^1]
+ CPU に高い負荷をかけた場合，いずれの冷却手段をもってしても89℃前後で張り付く

# おわりに

今回の結果から，MacBook の温度を下げるには，
CPU に負荷をかけない＞送風機で空冷＞スタンドによる自然放熱
という順序で効果があるようです．
CPU に負荷をかけた計測では，一見すると空冷や自然放熱の効果が無いように見えてしまいますが，これは冷却能力が追いついていないためだと考えられます．
例えば負荷をかける CPU の数を１個，２個…と段階的に増やしつつ計測することで，送風機やスタンドによる冷却能力が確認できるのではないかと予想します．
ここまで読んでいただきありがとうございました．

[^1]: この予想は間違いであることが実験よりわかりました．
アロハな男のエンジニア成長期

初めまして！

プログラミングに関するアウトプット用にこちらのブログ開設しました😄

軽く自己紹介を…
26歳のディズニー・ハワイ大好きな関西人男性です！
夢はディズニーみたいに利用した人に満足・喜びを感じてもらえるようなアプリを開発できる人材になりたいと思います！

これからどうか、よろしくお願いします😆

最後にハワイのディズニーリゾートの写真を1枚だけでも…😂!


![IMG_8484.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699622/ff46765d-ca9f-821b-c013-0b30ed9a8726.jpeg)
MobaXtermを使ってWSLのmatplotlibを描画する

# はじめに

VSCodeやWSL(Ubuntu)をインストールしていくと、特に何も考えずにRemote WSLが入ったりpythonが入ったりして環境が便利に整っていくのは本当に助かります。ただ、matplotlibで描画がされないという問題だけはちょっと作業が必要です。
検索するとVcXsrvを入れて対応している方が多い印象を受けましたが、このためにXServerだけを入れるのはつまらない……
というわけで、気になっていたMobaXtermを使ってみることにしました。

# 環境
* Windows10 Home
* WSL2 / Ubuntu 18.04 LTS

# MobaXtermのインストール
[MobaXtermのページ](https://mobaxterm.mobatek.net/) からFree版をダウンロードします。
Portable版とInstaller版のどちらを選んでもかまいませんが、私はInstaller版で入れました。
インストール時の選択肢はデフォルトのままでよいと思います。

初回起動時はWindows Firewallでブロックされますので、許可してあげてください。

MobaXtermが起動すると当たり前のようにUser sessionにWSLが表示されていました。
これをダブルクリックするとWSLが立ち上がります。すごい！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135441/1ac87850-9efe-118f-8698-a5172fb1a088.png)

# DISPLAY環境変数と接続の設定
X11はDISPLAY環境変数を参照してそこに描画情報を送ります。
WSL上でmatplotlibを使って描画すると、このDISPLAY環境変数を参照してMobaXtermで動いているXServerに描画情報を送ります。
毎回DISPLAY環境変数を設定するのも大変なので、3行目に表示されているYour DISPLAY is set to...のIPを参照して、WSLの.bashrc に設定を加えておきます。
設定するIPアドレスは各々違うと思うので、適宜変更してください。

```bash:~/.bashrc
$ echo 'export DISPLAY=192.168.xxx.yyy:0.0' >> ~/.bashrc
$ . ~/.bashrc
```

また、描画しようとする時にはMobaXtermが「つないで良い？」と聞いてくれます。
毎回聞かれるのが面倒な方はRemote Access Controlを無効にしておきます。
Settings → Configuration → X11 → X11 remote accessを'on demand' から 'full' にします。
他の設定にどんな意味があるか気になる方は[MobaXterm Documentation](https://mobaxterm.mobatek.net/documentation.html)を参照してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135441/0cbf6c33-2401-5aa1-0af9-c7b7b99057f5.png)

# matplotlibで描画してみる
例はめっちゃシンプルな方がいいでしょうということで。
MobaXtermは起動したままにしておいてください。

```python
import matplotlib.pyplot as plt

plt.plot([0, 1], [0, 2])
plt.show()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135441/935b5029-6d51-d83d-dd08-8b64bd036b6d.png)
canvasで図形を描画するメソッドやプロパティなどのメモ

## 準備
```HTML:HTML
<canvas id="canvas" width=400 height=200>
  Canvas not supported.
</canvas>
```
```JS:JS
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");
```

## メソッドやプロパティなど

### 直線を描く

```JS:JS
// 線(直線や曲線)を描き始める前の準備
// 線に関する座標の情報をPathという。
// Pathをリセットする
ctx.beginPath();

// 線を描き始める座標を指定する
ctx.moveTo(x, y);

// 直線を描き終わる座標を指定する
ctx.lineTo(x, y);

// 続けて2本目の直線を書き終わる座標を指定することもできる
// 今回は書きはじめの座標は1本目と共通
ctx.lineTo(x2, y2);

// 線の色
ctx.strokeStyle = 'orange';

// 先の太さ
ctx.lineWidth = 6;

// 上記メソッド・プロパティに基づいて線を描く
ctx.stroke();
```

### 円弧を描く
ラジアンは`Math.Pi / 180 * 角度`などで指定

```JS:JS
ctx.beginPath();

ctx.arc(中心x, 中心y, 半径, 描き始めのラジアン, 描き終わりのラジアン );

this.ctx.stroke();
```

### 四角形を描く

```JS:JS
// 塗りつぶす色
ctx.fillStyle = 'red';
// 四角形を描く
ctx.fillRect(四角形左上のx座標, 四角形左上のy座標, 幅, 高さ);
```
### その他
```JS:JS
原点を移動する
ctx.translate(x, y);

原点を中心に回転する
ctx.rotate(Math.PI / 180 * 角度);
```

```JS:JS
// メソッドやプロパティで設定した座標や
// 線の色・太さなどを記憶する
ctx.save();

// 記憶したものを呼び出す
ctx.restore();
```
```JS:JS
// <canvas>要素の幅や高さを取得する
const width = canvas.widht;
const height = canvas.height;
```

```JS:JS
// ブラウザが<canvas>に対応しているか
// 対応していなければreturnで終了。
// returnは関数内でしか使えないので即時関数で囲むなどする必要がある。

const canvas = document.querySelector('canvas');
if (typeof canvas.getContext === 'undefined') {
  return;
}
```
haml 導入

##hamlとは
Hamlとは、HTMLよりも簡単に書くためのビューテンプレートエンジンです。公式サイトによると「マークアップは美しくあるべき」という原則に基づいて開発されました。Hamlを使用することで、「綺麗に」、「読みやすく」、「生産的に」ビューを作成することができます。

##gem 追記

```ruby:Gemfile
  gem 'haml-rails'
```

bundle installを実行。

##拡張子がerbのファイルをhamlに変換
ターミナルで下記のコマンドを実行すれば一括で変換できます。

```ruby:ターミナル
$ rails haml:erb2haml
```

コマンドを実行すると途中で

```ruby:ターミナル
Would you like to delete the original .erb files? (This is not recommended unless you are under version control.) (y/n)
```
アプリケーションの初期段階であるため、yを選択しましょう。すると、デフォルトで作成されたerbファイル（例えば、application.html.erbなど）がhamlに変換されていることが確認できると思います。


##application.html.hamlを編集

```application.html.haml
!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title ChatSpace
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
  %body
    = yield
```
##mailer.html.hamlを編集

```mailer.html.haml
!!!
 %html
   %head
     %meta{:content => "text/html; charset=utf-8", "http-equiv" => "Content-Type"}/
     :css
       /* Email styles need to be inline */
   %body
     = yield
```

##mailer.text.hamlを編集

```mailer.text.haml
= yield
```

:warning: mailer.html.hamlとmailer.text.hamlは不要なファイルである場合は、削除しましょう。
VSCodeのworkspace storageを削除する

# はじめに
私は競技プログラミングにc++で参加しています。その際にエディタはVSCodeを使っています。
VSCodeは便利ですが、とても重いです。なんで重くなるのかを考察しました。

# 原因
`~/Library/Application Support/Code/User/workspaceStorage`にあるworkspaceStorageが16GBを占めてました。C/C++ extensionが勝手に作業したフォルダごとのjsonファイルを作成しているからです。

# 削除
削除しても問題ないので、削除しましょう

```Shell:
cd ~/Library/Application Support/Code/User/workspaceStorage //workspaceStorageに移動
rm -rf * //workspaceStorage内のフォルダを全て削除
```

# まとめ
VSCodeのworkspaceStorageが重くなる原因を探しました。
コードを書くたびにworkspaceStorage内にjsonファイルが作成されるので、定期的に削除しましょう。
ツイート表示に必要な知識

どうも、ニムです。

本日は、＜ツイートを表示する＞にあたって必要な知識を学びました。

ツイートをの表示を行なっていく際に、データの取り扱いを行います。
取り扱いの基本処理をまとめてCRUDと呼ぶ。
RailsではCRUDを7つのアクションに分割して、処理を実現する。

■　CRUDとは、
〜アプリケーションのデータの取り扱いに関して、基本的な処理の頭文字を並べたものです。
アプリケーションの機能は、この4つの処理を組み合わせながら実装します。
C ：Create　（生成）
R ：Read　　（読み取り）
U ：Update　（更新）
D ：Delete　（削除）

■　7つのアクションとは、
〜CRUDを実現するにためには、それぞれの処理を記述する必要があります。
Railsには、それらのアクションの設定が慣習的に決められており、
様々なアクションが存在します。
index   : 一覧表示
show    : 詳細表示
new     : 生成
create  : 保存
edit    : 編集
update  : 更新
destroy : 削除

これらの7つのアクションのルーティングは、resourcesメソッドを使用することで
一度に設定することが可能です。

■ resourcesメソッド
〜7つのアクションへのルーティングを自動生産するメソッドです。
resourcesの引数に、:tweetsというシンボルを指定すると/tweetsのパスに
対応するルーティングが生成される。
7つのアクション全てのルーティングを設定したことになる。

■ onlyオプション
〜resourcesにオプションとしてonlyを加えると、指定したアクションのみの
ルーティングを自動生産する。

今度は＜レイアウトの整形＞についてです。
複数ページで、同じようなヘッダー・フッターを表示する場合、
各テンプレートファイルにも同じ記述をしないといけないためとても非効率である。
そのため、ページの共通部分はまとめて行きましょう。

■　レイアウトテンプレート
〜アプリケーションのビューファイルの共通部分をまとめたものです。
レイアウトテンプレートにheadの情報やヘッダー、フッターなどの全てのビューで
共通となる部分を記述しておくことで、各テンプレートファイルは個別の見た目を
記述するだけでよくなります。
Railsの場合、application.html.erbというファイルがレイアウトテンプレートになる。

■　application.html.erbファイル
〜Railsのテンプレートに該当するファイルです。レイアウトファイルとも呼ばれる。
application.html.erbはapp/vies/layoutsディレクトリに配置されている。
application.html.erbには、head要素やbody要素がはじめから記述されています。

■　yieldメソッド
〜レイアウトテンプレートに各テンプレートファイルを展開するためのメソッドです。
yieldを記述することで、indexアクションの場合はテンプレートファイルの
index.html.erbの内容が、newアクションの場合は、new.html.erbが
yield記述部分へ展開されるようになります。


したがって、head要素の情報をわざわざ各ページに記載する必要がないのです。
同様の考えで、全ての画面で表示させるヘッダーやフッターなども、このレイアウトテンプレートに
記述すれば各ページに反映されます。


続いて、見た目部分を整える際に必要な知識です。

■　stylesheet_link_tagメソッド
〜読み込むCSSファイルを指定できるヘルパーメソッドです。読み込むためのCSSファイルは
app/assets/stylesheets/というディレクトリに配置します。
application.html.erbのstylesheet_link_tagの引数には、
'application'と書いてあるため、app/assets/stylesheets/ディレクトリ内の
application.cssというCSSファイルを読み込むことを示している。


■　application.cssファイル
〜Railsにはじめから用意されている、CSSファイルをまとめるためのファイルです。
マニフェストファイルとも呼ばれている。

application.cssには、アプリケーション全体に適用するCSSを指定できます。
*=のような特殊な記法に続けて他のCSSファイルなどを指定すれば、
複数のCSSファイルをまとめて読み込むことが可能です。


■　require_tree
〜引数として与えられたディレクトリ以下のCSSファイルをアルファベット順に
すべて読み込むという機能を持ちます。
application.cssには、はじめからrequire_tree .という記述があります。
引数に与えられた.(ドット)は、カレントディレクトリを表すものです。


これらの役割を理解することで、ツイートを表示する際に役立ちます。
今後もアウトプットを行なってまいります。

最後まで読んでいただき、ありがとうございます。

ニム
AWS SAA学習  １分でSQS

#よく聞かれる問題
AWS  SAAについて勉強中なのでよく聞かれる問題についてメモです。アウトプットすることによって覚えることが目的です。
違っていたら申し訳ないです。
##Q.1 メッセージ重複しておくっれてくるけどなんで？
A.メッセージを送信した後に削除していない可能性あるよ〜明示的に削除しましょう。
##Q.2 ショートポーリングとロングポーリングの違いについて
A. ショートポーリングが空のメッセージをたくさん送るから注意
ロングポーロングに設定すれば、待ち時間が発生する分空のメッセージが減ります。
##Q.3 標準キューとFIFOの違いについて
A. 標準キューは順番を守らない！
FiFOは順番を守る！
jest: command not foundというエラー


上記のエラーが出たということは「jest」というフレームワークがないよ！！ということを意味してます。

下記コードで解決です。

```bash
$ npm install jest --save
```


参考
[Jestでテストを書こう！]
(https://tech.bitbank.cc/lets-test-by-jest/)
「ログイン済みのユーザーのみがページにアクセスできるようにしたい!!」Nuxt.jsでアクセス制御を行う


##1.環境
Vue.js 2.6.11
npm 6.14.7
Nuxt.js 2.11.0
firebase 8.6.0

##2.方向性

Vue.jsでVueXを使ってアクセス制御の構築にめっちゃ時間がかかってるエラです。


今はNuxt.jsを使いながらVueを触っているのですが、アクセス制御をするなら、`VueXで状態管理をしながら、layout/default.vueでユーザーの有無をmountedで確認して、ユーザーがいない場合layout/default.vueの<Nuxt />という部分を非表示にする`という方法があるみたいです。

ナビゲーションガードと言うやり方もあるみたいなのですがNuxt.jsでそれはできないとのこと。
うーん何でなんでしょう??
詳しいことは知らね。

ただ上記のやり方を実行する上でいくつか基本的なことを理解しておかなければいけないみたいです。

##3.VueXとはなんぞや

こちらの記事がわかりやすかったので引用させてもらいます。
[【Nuxt.js】Vuexまとめ編：はじめる前に、簡単理解！]
(https://note.com/aliz/n/n6f4a42bce5b5)

VueXには大事な要素が4つあります。

>順番に
・state: data保管庫
・getters: stateの情報を取得
　　　　　別gettersの呼び出しも可能
・actions: storeの上書き以外の処理や非同期通信
　　　　　別actionsの呼び出しも可能
・mutations: stateの上書き(代入)
となります！
actionsとmutationsが
methodsのような役割をしています。


##4.実践

……というわけで早速実践してみました。

```layout/default.vue
<script>
import Header from "@/components/Header"

export default {
  components: {
    Header,
  },
  mounted() {
    this.$fb.auth().onAuthStateChanged((user) => {
      if (user) {
        // 通常のページが表示される処理を書く
      } else {
        // サインインページが現れるような処理を書く
      }
    })
  },
}
</script>
```


```store/users.js
// 現在のストアオブジェクトの状態
export const state = () => {
  return {
    users: [],
  }
}

// ストアの状態は、ミューテーションによってのみ変更される。
// ミューテーションはタイプとハンドラを持ち、ハンドラ関数は直接実行することができない。
// 実行するためには、store.commitをタイプを指定して呼び出す必要がある。
// また、ハンドラ関数は非同期処理を行なってはならない。
export const mutations = {
  ADD_USER(state, user) {
    state.users.unshift(user)
  },
  LOAD_USER(state, users) {
    state.users = users
  },
}

// FireStore からデータを読み込むための、action
export const actions = {
  async getUsers({ commit }) {
    const db = this.db
    const result = await db.collection("users").get()
    commit(
      "LOAD_USER",
      result.docs.map((d) => d.data())
    )
  },
}
```

……ということで、`layout/default.vue`の以下の部分を修正していきます。

```layout/default.vue
<script>
  mounted() {
    this.$fb.auth().onAuthStateChanged((user) => {
      if (user) {
        // 通常のページが表示される処理を書く
      } else {
        // サインインページが現れるような処理を書く
      }
    })
  },
</script>
```


##5.結論

……とつらつらと書いてきましたが、結局ココまで書いてわかりませんでした。

またわかったらつらつらと書いていきます。
our local changes to the following files would be overwritten by checkout

```
error: Your local changes to the following files would be overwritten by checkout:
	app/build.gradle
	app/src/main/AndroidManifest.xml
	app/src/main/java/com/memory/memory_kotlin/MainActivity.kt
	build.gradle
Please commit your changes or stash them before you switch branches.
error: The following untracked working tree files would be overwritten by checkout:
	app/src/main/java/com/memory/memory_kotlin/Tasks.kt
Please move or remove them before you switch branches.
Aborting
```

https://qiita.com/konweb/items/061475d6376db957b3c4

作業中のソースを一旦コミットする
AtCoderでPythonを使用する際の注意点

<a href="https://atcoder.jp/contests/dp/tasks/dp_b">Educational DP Contest B - Frog 2</a>で、以下コードでどうしてもTLEになるケースがあり、PyPyで提出したところあっさりACとなる。
後々調べてみると、同じアルゴリズムでも使用言語によってはACとなるケースがあるとのこと（<a href="https://qiita.com/maebaru/items/5a557da848115bb5bb0f">参考</a>）。
PyPyで実装されていないライブラリを利用するケース以外は、PythonユーザはPyPyを選択した方がよさそう。
ただ、結構メモリを食うので注意が必要。
Frog1で試してみたところ、同じソースで4倍程メモリを食っている。

|言語|メモリ|
|---|---|
|Python(3.82)|20524 KB|
|PyPy3 (7.3.0)|84904 KB|

```Python
import sys

sys.setrecursionlimit(250000)
input = sys.stdin.readline

def main():
    n, k = map(int, input().split())
    h = list(map(int,input().split()))

    cost = [sys.maxsize]*n
    cost[0] = 0
    for i in range(0,n):
        for j in range(1, k + 1):
            if (i+ j>= n):
                break
            abs_ = abs(h[i] - h[i+j])
            if cost[i+j] >cost[i] + abs_ :
                cost[i+j] = cost[i] + abs_
    print(cost[n-1])
main()
```
UbuntuにChromeをインストールする手順

動作確認済み環境

- Ubuntu 18.10 日本語 Remix
- Ubuntu 20.04 LTS 日本語 Remix
- Ubuntu 22.04 LTS 日本語 Remix

---

公式
https://www.google.com/intl/ja_jp/chrome/
[Chromeをダウンロード]から、.debファイルをダウンロード。

右メニューバー-[ファイル]-[ダウンロード]から.debファイルを右クリック-[別のアプリケーションで開く]-[ソフトウェアのインストール]-[選択]-承認-インストール完了。

画面左下[アプリケーションを表示する]からChromeを起動。右メニューのアイコンを右クリックして[お気に入りに追加]。


---

「Ubuntu Chrome」で検索するとわざわざ手動でリポジトリを設定していくつかのコマンドを実行する手順を紹介している記事が多いが、公式サイトのdebファイルをインストールすれば手動でやるメリットはないので公式サイトからインストールしよう。
DockerをWSL2でInstallメモ(【前編】WSL2を入れるまで) ※公式Doc通りにいかなかった編

# 環境
Windows10 Pro

# 手順
[MS公式手順]

## WSL2の有効化
### 条件チェック
> バージョン 1903 以降、ビルド 18362 以上に更新された Windows 10 を実行している。

→OKでした。(後述)

### WSL有効化　※powershell管理者権限
```
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
```

### 仮想マシンプラットフォームオプション有効化　※powershell管理者権限
```
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
```

→完了したら、**再起動**。

### WSL 2 を既定のバージョンとして設定　※powershell管理者権限
```
wsl --set-default-version 2
```
```
コマンドラインオプションが無効です --set-default-version
```

あれ？

> wsl --set-default-version の結果が無効なコマンドである場合は、「wsl --help」と入力してください。 --set-default-version が表示されない場合は、お使いの OS によってサポートされていないことを意味しているため、バージョン 1903、ビルド 18362 以上に更新する必要があります。

とのこと。

```
winver 
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600686/761b7e11-e870-ca1d-4c87-938315280222.png)

**あれ？**

とりあえず、Windows Updateしてバージョンを上げてみた。
![ver2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600686/c727f681-52be-01c3-db6b-35e6ab641c00.png)

```
PS C:\WINDOWS\system32> wsl --set-default-version 2
WSL 2 を実行するには、カーネル コンポーネントの更新が必要です。詳細については https://aka.ms/wsl2kernel を参照してください
WSL 2 との主な違いについては、https://aka.ms/wsl2 を参照してください
```
進んだ！

### カーネルバージョンアップ
https://aka.ms/wsl2kernel
→記載の通り実施

```
PS C:\WINDOWS\system32> wsl --set-default-version 2
WSL 2 との主な違いについては、https://aka.ms/wsl2 を参照してください
```

うまくいったよう。


### Linuxディストリビューションのインストール
https://aka.ms/wslstore
→Ubuntuを選択


### インストール後起動
ユーザ初回作成

### 確認
```
PS C:\WINDOWS\system32> wsl -l -v
  NAME      STATE           VERSION
* Ubuntu    Running         2

```

→完了！




# 参考
[MS公式手順] 

[MS公式手順英語版]

[MS公式手順]:https://docs.microsoft.com/ja-jp/windows/wsl/install-win10
[MS公式手順英語版]:https://docs.microsoft.com/ja-jp/windows/wsl/install-win10

https://dev.classmethod.jp/articles/docker-desktop-for-windows-on-wsl2/

https://dev.classmethod.jp/articles/how-to-setup-wsl2/

https://aka.ms/wsl2kernel
第5章 レイアウトを作成する

#5.1 構造を追加する

■application.html.erb
全てのページのレイアウトのテンプレート。

■link_toヘルパー
link_to A,Bで使う。
Aに文字列、BにURLを記載する。
最終的にBは「_path」という記載になる。

■image_tagヘルパー
image_tag　A,Bで使う。
Aに画像のURL、Bにオプションを記載できる。
railsでは画像をapp/assets/images/に置かなければならないようだ。

■Bootstrap
CSSのフレームワーク。
これはこれでどの記述がどうなるのか知識として入れておかなければならないようだ。

■パーシャル
見た目が美しくないモノ、繰り返し登場するものをまとめたもの。
<%= render  'パーシャルのファイルパス'%>で呼び出す。
パーシャルはアンダーバーから始まる名前を付ける。
見た目に関するものなので、置き場はView。Layoutに置くのが一般的なようだ。

#5.2 Sassとアセットパイプライン

#5.3 レイアウトのリンク
■_path書式
get  '/help', to: 'static_pages#help'と書くと
help_pathが使えるようになる。

■assert_select "a[href=?]", about_path
リンクに対するテストは"a[href=?]"で書く。

■rails generate controller Users new
users_controllerとnew.html.erbを作成する。
これはユーザー登録ページになる。
Docker HubのVaultをサーバーモードで使う際にハマった時のメモ

- 公式サイト: https://hub.docker.com/_/vault

`Running Vault in Server Mode` に記載されている以下のコマンドでは、ホストから接続可能なコンテナを起動できませんでした。

```shell
docker run --cap-add=IPC_LOCK -e 'VAULT_LOCAL_CONFIG={"backend": {"file": {"path": "/vault/file"}}, "default_lease_ttl": "168h", "max_lease_ttl": "720h"}' vault server
```

- 解決した情報: https://github.com/hashicorp/vault/issues/441#issuecomment-123362274

# ポイント（だと考えるところ、認識誤りだったら済みません。ご指摘いただけると助かります。）

- TLSを無効
- tcpのアドレスを `0.0.0.0:8200` へ変更

それから、上記コマンドだとコンテナのポートを公開していないので`-p`オプションでホストに公開する必要があります。
また、上記コマンドだと以下の警告ログが出力されました。

```
[WARN]  no `api_addr` value specified in config or in VAULT_API_ADDR; falling back to detection if possible, but this value should be manually set
```
そのため、`VAULT_LOCAL_CONFIG`の中で`api_addr`を指定するか、`VAULT_API_ADDR`でVault APIのアドレスを指定する必要があります。

上記をふまえて、最終的なコマンド例が以下になります。

# ホストからアクセス可能なサーバーモードで起動する場合のコマンド例

```shell
docker run --cap-add=IPC_LOCK -e 'VAULT_LOCAL_CONFIG={"backend": {"file": {"path": "/vault/file"}}, "api_addr": "http://127.0.0.1:8200", "listener": {"tcp": {"address": "0.0.0.0:8200", "tls_disable": "true"}}}}' -p 8200:8200 vault server
```

以上です。
【VBA】コンボボックスの値でボタンの有効無効を変える

##ボタンの有効無効
ボタンのプロパティ（__Enabled__）を値次第でTrueかFalseに切り替えます。
コンボボックスではなくテキストボックスやチェックボックスでも使えますが今回は
[【VBA】ユーザーフォムのコンボボックスのリストに重複を省いて値を追加する](https://qiita.com/KaoTechBlog/items/1873683b76d4a804d911)で作ったコンボボックスを使って、コンボボックスの値が空白の時はボタンが押せないようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700414/c0ac67b8-b462-b8d7-b00e-cfc0a82b4b8d.png)

ユーザーフォムに以下のコードを書きます。

```
Private Sub cmbDate_Change()
    If cmbDate.Value <> "" Then   'コンボボックスの値が空白じゃないときは
        btnDone.Enabled = True '決定ボタン有効
    Else
        btnDone.Enabled = False '決定ボタン無効
    End If
End Sub
```
実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700414/34eca0ab-a47b-7c6a-77e0-35eed9ebf58d.png)

##ワタシ流こだわり
こだわりって言うか癖なんですがIf文書くとき
If cmbDate.Value <> "" Then
のように「空白じゃないときは～」という書き方します。

```
Private Sub cmbDate_Change()
    If cmbDate.Value = "" Then   'コンボボックスの値が空白なら
        btnDone.Enabled = False '決定ボタン無効
    Else
        btnDone.Enabled = True '決定ボタン有効
    End If
End Sub
```
このほうが分かりやすい人多いんですかね？:sweat_smile:
バックパッカー体験の社会学

#バックパッカー体験の社会学を読む
##経緯
私は大学でアドレスホッパーに関する研究をしています。先日beBitの川上さんと偶然お話しする機会がありまして、その後facebookで紹介してくださっていたので、早速ポチりました。ボチボチ読み進めていこうと思います。
【macOS Catalina 10.15.6】MacにVirtualBoxがインストールできない時の対処

###環境
macOS Catalina 10.15.6
VirtualBox 6.1.14

###症状
インストールできない！

###原因と対処

ダウンロードしたファイルを実行したらインストール用の下の画面が表示されます。VirtualBox.pkgをダブルクリックしたらあとはぽんぽんぽんでインストールできる！...はずが何度やってもインストールできません出したとさ。

![_Volumes_VirtualBox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668402/e873d88f-eab3-0ac1-1abc-eb420fb56f64.png)


どうやら原因はmacのセキュリティ設定でブロックされるみたい。つまり、ブロックしないで許可をしてあげればいいのだが、自動で表示されず、自分で表示しないといけないみたい。

［システム環境設定］>[セキュリティとプライバシ]>[一般]の画面を開くと下の方に、

`開発元”Oracle America, Inc."のシステムソフトウェアの読み込みがブロックされました`とあります。
そして右に`許可`というボタン。

知らんまにブロックされてて、許可も自動的に表示してくれないらしい。


![セキュリティとプライバシー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668402/553a35cb-7868-870a-70af-bee92a9af031.png)

左下の鍵マークをクリックしたら許可ボタンを押せるようになるので、許可をしてあげればメッセージが消えます。


###許可をしたらダウンロードからやり直して同様の手順で無事にインストール

インストーラをゴミ箱に入れてなければ改めて開けば今度はうまくいくはずです。
Dockerのbindmount及びtmpfsを使ったデータ管理(個人的備忘録)

##bind mountを使用したデータ管理
volumeとは違い、ホストのユーザーが管理しているファイルやディレクトリをコンテナ上にマウントするもの。こちらも同一のファイルやディレクトリを複数のコンテナにマウントすることができる。ユーザーが管理している領域なので、基本的にはマウント元のファイルやディレクトリは事前に用意しておき、そのパスを指定してコンテナにマウントする。プロジェクトのソースコードや設定ファイルなどをホストに置いておき、それをマウントすることにより、ホスト側でファイルを編集しながら動作を確認することができる。

##-vを使用し、カレントディレクトリ上のディレクトリをコンテナにbind mountする
```haml
-# "$(pwd)"でカレントディレクトリ上のsourceディレクトリ(存在しない)をマウントしている。
$ docker run -itd --name bind-test1 -v “$(pwd)”/source:/app nginx
$ ls
source
```
-v を使用した場合はディレクトリが存在しない場合に、自動的にホスト上にディレクトリが作成される。

##--mountを使用した場合
```haml
-# “$(pwd)”/source2で存在しないディレクトリをマウントしている。
$ docker run -itd —-name bind-test2 —mount type=bind,source=“$(pwd)”/source2,target=/app nginx
```
Typeをbindに指定。カレントディレクトにはsource2というディレクトリは存在しない状態で実行する。この場合エラーが発生する。--mountの場合はsourceのディレクトリが存在しない場合はエラーになる。これによって誤って、空のディレクトリをマウントしてしまうことを避けることができる。bind mountの状態はvolumeと同様に、コンテナの詳細情報を表示することで確認できる。

##コンテナのMountの確認
```haml
-# bind-test1の詳細確認
$ docker inspect bind-test1 
"Mounts": [
            {
                "Type": "bind",
                "Source": "/home/docker/source",
                "Destination": "/app",
                "Mode": "",
                "RW": true,
                "Propagation": "rprivate"
            }
        ],
```
Type,Source,Destinationでそれぞれ確認することができる。デフォルトで読み書き可能な状態でマウントされる。bind mountではbindするディレクトリで、マウント先のディレクトリやファイルが隠れてしまうことに注意する。重要なファイルやディレクトリをbindで覆ってしまった場合、コンテナが正常に動作しなくなる恐れがある。bind mountでも読み取り専用でマウントすることができる。


##tmpfsを使用したデータ管理
ホストのメモリの領域をコンテナにファイルシステムとしてマウントする。メモリ上にデータが置かれるためdockerホストがシャットダウンされたり、コンテナが停止した場合はデータが消えてしまう。用途としては永続的なデータを置くのではなく一時的に保持しておくようなデータの置き場所に使用し、消えてしまっても問題ないデータを置く。キャッシュや、ワンタイムパスワードなど。オプションでマウントサイズを制限することもできる。

##--mountを使用した場合
```haml
-# 例
$ docker run -itd --name tmptest --mount type=tmpfs,destination=/app nginx
```
tmpfsを使う場合、typeにtmpfsを指定する。デフォルトではマウントサイズは無制限でメモリが足りなくなった場合は、swapが使われることになる。マウントサイズはオプションの指定で制限することができる。

```haml
-# 例
$ docker run -itd --name tmptest2 --mount type=tmpfs,destination=/app,tmpfs-size=500000000,tmpfs-mode=700 nginx
```
マウントサイズを500MBに設定して、ファイルモードを700に設定した。
【Flutter】No Firebase App '[DEFAULT]' has been created - call Firebase.initializeApp()の対処法


FlutterのFirebaseサンプルコードにて。
> https://codelabs.developers.google.com/codelabs/flutter-firebase/#3

## 症状
Firebaseのcloud_firestoreパッケージバージョンを、

```
dependencies:
  flutter:
  cloud_firestore: ^0.14.0+2  // ^0.13.0+1からアップデート
```

上記のようにアップデートすると、以下のエラーが発生しました。

```
════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following FirebaseException was thrown building MyHomePage(dirty, state: _MyHomePageState#ef74c):
[core/no-app] No Firebase App '[DEFAULT]' has been created - call Firebase.initializeApp()
```

## 対処法：初期化する

`Firebase.initializeApp();`を追加。

```dart
 Widget _buildBody(BuildContext context) {
    Firebase.initializeApp(); // new
    return StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection('baby').snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) return LinearProgressIndicator();

        return _buildList(context, snapshot.data.documents);
      },
    );
  }
```
警告の通りですね。

サンプルコードでは、以下の箇所も修正必要でした。

```dart
 Record.fromSnapshot(DocumentSnapshot snapshot)
//      : this.fromMap(snapshot.data, reference: snapshot.reference);
      : this.fromMap(snapshot.data(), reference: snapshot.reference);  // new
```


## 発展：初期化完了後に処理したい場合

こちらで説明されております。

> https://firebase.flutter.dev/docs/overview/#initializing-flutterfire

以下はStatefulWidgetの場合。
`_initialized`を使って初期化が完了しているかを確認します。

```dart
class MyAuthPage extends StatefulWidget {
  @override
  _MyAuthPageState createState() => _MyAuthPageState();
}

class _MyAuthPageState extends State<MyAuthPage> {
  
  bool _initialized = false;
  bool _error = false;

  // Define an async function to initialize FlutterFire
  void initializeFlutterFire() async {
    try {
      // Wait for Firebase to initialize and set `_initialized` state to true
      await Firebase.initializeApp();
      setState(() {
        _initialized = true;
      });
    } catch (e) {
      // Set `_error` state to true if Firebase initialization fails
      setState(() {
        _error = true;
      });
    }
  }

  @override
  void initState() {
    initializeFlutterFire();
    super.initState();
  }

（省略）
```
## 追記：main()の先頭で初期化しちゃう場合

`main()`を`Future<void> main() async`にして対応します。

```dart
Future<void> main() async {
  await Firebase.initializeApp();
  runApp(MyApp());
}
```

ただし、これだけだと、以下のエラーが出ると思います。

```
If you're running an application and need to access the binary messenger before `runApp()` has been called (for example, during plugin initialization), then you need to explicitly call the `WidgetsFlutterBinding.ensureInitialized()` first.
```

要約すると、「`runApp()`の前にプラグインの初期化を行う場合は、はじめに `WidgetsFlutterBinding.ensureInitialized()` を実行する必要がある」とのこと。

`WidgetsFlutterBinding.ensureInitialized()`は、最初に初期化することを保証することをFlutterに通知します。

最終的には、以下でOK。

```dart
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}
```

参考:[[Flutter] WidgetsBindingとは何か？](https://qiita.com/kurun_pan/items/04f34a47cc8cee0fe542)
仮想通貨の特徴

応用情報技術者平成30年春期 午前問80

資金決済法で定められている仮想通貨の特徴はどれか。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/79ffcfe4-fb43-3fb3-b285-352541febbb0.png)


１、仮想通貨
ブロックチェーンという分散型台帳技術を基盤にして開発された、物理的な実体のないディジタル通貨です。暗号化やハッシュなどの暗号理論を利用しているので「暗号通貨」とも呼ばれます。仮想通貨はインターネットの取引所を通じて他者および法定通貨と交換でき、店舗によっては決済手段として利用できる所もあります。

国が発行し価値を保証する法定通貨とは異なり、仮想通貨には中央銀行的な管理主体が存在しません。

２、金決済法では仮想通貨を以下のように定義しています。
・物品を購入し、若しくは借り受け、又は役務の提供を受ける場合に、これらの代価の弁済のために不特定の者に対して使用することができ、かつ、不特定の者を相手方として購入及び売却を行うことができる財産的価値であって、電子情報処理組織を用いて移転することができるもの

・不特定の者を相手方として前号に掲げるものと相互に交換を行うことができる財産的価値であって、電子情報処理組織を用いて移転することができるもの

・仮想通貨交換業は、内閣総理大臣の登録を受けた者でなければ行ってはならないと定められています。これは外国の事業者であっても同様です。

・日本国内から外国へ国際送金をするのは銀行を経由する必要はありません。
　※仮想通貨は電子データであり、実際にウォレットに仮想通貨が保管されているわけではありません。ウォレットにより管理されている「秘密鍵」「公開鍵」「アドレス」というもので仮想通貨の送付が可能となります。


**仮想通貨の送金手順**
GMOコインを例にして仮想通貨の送金手順を見ていきましょう。基本的に取引所からの送金の手順は他社と大きな差はありません。

1.GMOコインにログイン
2.「入出金」から仮想通貨を選択
3.「銘柄選択」から送付したいコインを選択
4.「送付」→「新しい宛先を追加する」と選択し、送付先情報を登録
5.「数量」を入力後「2段階認証」をおこない完了



参照：

https://www.ap-siken.com/kakomon/30_haru/q80.html#:~:text=%E8%B3%87%E9%87%91%E6%B1%BA%E6%B8%88%E6%B3%95%E3%81%A7%E5%AE%9A%E3%82%81,%E3%81%AE%E7%89%B9%E5%BE%B4%E3%81%AF%E3%81%A9%E3%82%8C%E3%81%8B%E3%80%82&text=%E6%97%A5%E6%9C%AC%E5%9B%BD%E5%86%85%E3%81%AE%E4%BA%8B%E6%A5%AD%E8%80%85,%E8%B2%A1%E7%94%A3%E7%9A%84%E4%BE%A1%E5%80%A4%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82


どうやって送るの？仮想通貨の送金を分かりやすく解説
https://mall.moneyforward.com/articles/41#%E4%BB%AE%E6%83%B3%E9%80%9A%E8%B2%A8%E3%82%92%E9%80%81%E9%87%91%E3%81%99%E3%82%8B
第六回Try English LT! for engineers 発表資料まとめ

# Try English LT! for engineersとは？

エンジニア向けの英語のみのLTイベントを行なっています！
毎回、LTのスピーカー募集してます！エンジニア向けの内容であればテーマは自由です。
英語でLTをやるとなると、中々ハードルが高く、 参加者が海外の人ばかりだと、なおさら難しく感じると思います。
ちょっと自信はないけど、 英語のLTにチャレンジしてみたいという人にぜひ発表してもらいたいです。
英語が好きなエンジニア同士で交流できるイベント運営ができればと思っています。

第六回イベントページ
https://try-english-lt.connpass.com/event/184047/

## 発表資料
・ShoheiKai さん
Introduction of Kano Model
狩野モデルでフィードバックを整理した話
https://speakerdeck.com/show60/introduction-of-kano-model

・kanpou0108 さん
What is a Closure in JavaScript
JavaScriptにおけるクロージャとは何か
https://docs.google.com/presentation/d/1W4mb5D1Gdsz9jekfwryYj95fNnMNGfpPH8APLgDitus/edit#slide=id.g9265a312a3_0_16

・szskr さん
The Joy of Comment
https://drive.google.com/file/d/127rao6JzzifaGIU78KE57is1xZy6ANz8/view

・Mikihiro Saito さん
Let’s develop app with react and recoil
Reactで話題のRecoilを使ってみた
https://www.slideshare.net/ssusera082dd1/reactrecoil?ref=https://try-english-lt.connpass.com/event/184047/presentation/

・bunta fujikawa さん
OSS Document Translation
OSSのドキュメント翻訳について
https://docs.google.com/presentation/d/1Lr35qc0L3QPYQdw12aRuEQyIxxKzDXEQuxzAum1IcRU/edit#slide=id.p

・noel さん
Push Notifications with Web App
小規模Webアプリにプッシュ通知を実装する旅路
https://www.slideshare.net/noelchris3/push-notifications-238249077?ref=https://try-english-lt.connpass.com/event/184047/presentation/

・Iqbal さん
Technology selection in your software project
https://drive.google.com/file/d/1FkjMGbZBmj1VF-w6XAkV3UXT6egET3QJ/view?usp=sharing
canvasのgetContext("2d")って何

canvasのgetContext("2d")について調べたのでメモ。


- HTMLとJavaScriptで図形を描画するには`<canvas>`要素を用いる。

- `<canvas>`要素は`getContext()`メソッドを持つ。

- `getContext()`メソッドは、グラフィックを描画するためのメソッドやプロパティをもつオブジェクトを返す。

- `getContext()`メソッドに引数"2d"を渡して実行すると、2Dグラフィックを描画するためのメソッドやプロパティをもつオブジェクトを返す。

- 引数を`"webgl"`とすると3Dグラフィックを描画するためのメソッドやプロパティをもつオブジェクトを返す。

```html:HTML
<canvas id="canvas"></canvas>
```

```js:JavaScript
// canvas要素を取得
const canvas = document.getElementById('canvas');
// canvas要素が持つgetContext()メソッドを実行し、
// グラフィック描画のためのメソッドやプロパティを
// 持つオブジェクトを取得する。
// 引数を"2d"とすることで2Dグラフィックの描画に
// 特化したメソッドやプロパティを持つオブジェクトを取得し、
// 定数ctxに格納する。
const ctx = canvas.getContext("2d");

// 定数ctxに格納したオブジェクトがもつプロパティやメソッドは
// ctx.プロパティ名、ctx.メソッド名() で呼び出せる

// 描画する色を指定するプロパティflillStyle
ctx.fillStyle = 'black';

// 四角形を描画するメソッドfillRect()
ctx.fillRect(15, 10, 150, 100);
```





## 参考
[Canvas API - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API)
[CanvasRenderingContext2D - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D)
[getContext() メソッド(キャンヴァス操作に必要な"文脈オブジェクト"を与える) - <canvas>要素リファレンス](https://www.marguerite.jp/Nihongo/WWW/RefCanvas/getContext.html#ABOUT)
[Canvas.getContext() - キャンパスに描画するコンテキストを取得](https://syncer.jp/javascript-reference/canvas-getcontext)
[HTML5 canvas.getContext("2d") リファレンス](http://memopad.bitter.jp/w3c/html5/html5_ref_canvas.html)
[Canvasの使い方－Canvasリファレンス](http://www.htmq.com/canvas/002.shtml)
komposeでdocker-compose.yamlからkubernentesのマニュフェストファイルを生成する


## 参考
https://kompose.io/


## インストール

```
curl -L https://github.com/kubernetes/kompose/releases/download/v1.19.0/kompose-linux-amd64 -o kompose
chmod +x kompose
sudo mv ./kompose /usr/local/bin/kompose

```

## サンプルファイル

```
wget https://raw.githubusercontent.com/kubernetes/kompose/master/examples/docker-compose-v3.yaml -O docker-compose.yaml
```

```docker-compose.yaml
version: "3"

services:

  redis-master:
    image: k8s.gcr.io/redis:e2e 
    ports:
      - "6379"

  redis-slave:
    image: gcr.io/google_samples/gb-redisslave:v1
    ports:
      - "6379"
    environment:
      - GET_HOSTS_FROM=dns

  frontend:
    image: gcr.io/google-samples/gb-frontend:v4
    ports:
      - "80:80"
    environment:
      - GET_HOSTS_FROM=dns
    labels:
      kompose.service.type: LoadBalancer
```

## 変換

```
kompose convert
```

出力

```
INFO Kubernetes file "frontend-service.yaml" created 
INFO Kubernetes file "redis-master-service.yaml" created 
INFO Kubernetes file "redis-slave-service.yaml" created 
INFO Kubernetes file "frontend-deployment.yaml" created 
INFO Kubernetes file "redis-master-deployment.yaml" created 
INFO Kubernetes file "redis-slave-deployment.yaml" created 
```

Warningなど出た場合は手動で変換してあげれば良い
プログラミングを始めようと思った理由

プログラミングを学習し始めて、３週間が経ちました。。。

始めまして。私はニムです。２３歳。某企業の会社員💪です。!

![693C4192-99C0-4782-91E9-6FB19361A79F_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703180/34be532a-4a63-517c-8413-31d7e4163e65.jpeg)


私がプログラミングを始めようと思った理由を話していきたいと思います。

首都圏で働かれている方は、何度も思ったことがあるかと思います。

通勤時の異常な程の電車の混み具合を😭

私は元々、鹿児島の田舎出身でまっっったり過ごしてきましたが、

東京で働くようになり、
初めての通勤ラッシュ🚃の光景は、戦争をしているのかと思うほど激しいものでした。

東京で働き始めてから1年が経ち、場所を問わない働き方を考えていくようになりました。

その時に出会ったのが、プログラミング💻です。

プログラミングを調べていくうちに、プログラミングの可能性の大きさに魅力を感じ、

勉強を始めることにしました。✍️

冒頭にも言いましたが、プログラミングの勉強をはじめて３週間余りです。

今後は、アウトプット用だけでなく、近況なども綴って行きたいと思います。

自分が選択した道を正解にしていけるようスキル・知識を積み上げて行きます。

![8FFFC3AF-8B60-4A05-B096-986F08127655_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703180/466cc4c9-de25-930b-4624-f8595cc1fe21.jpeg)

今後ともよろしくお願い致します！！！！！！！！！！！！！！！！
Djangoのforms.pyでhtmlのclass属性を設定する方法

## やりたいこと

**forms.py**でテンプレートへ表示させるフォームを書いたときに、合わせて**htmlタグ**に設定される**class属性**を指定したい。

```python:forms.py
class Form(forms.Form):
    sample = forms.IntegerField(label="hoge")
```

このままだと以下のように出力され、**input**タグへ**class属性**を設定出来ない。

```html
<input type="number" name="sample" required="" id="id_sample">
```

## 解決策

**forms.py**で**\_\_init\_\_**メソッドをオーバーライドする。

```python:forms.py
class Form(forms.Form):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['sample'].widget.attrs['class'] = 'クラス名'

    sample = forms.IntegerField(label="hoge")
```

注意点として以下の2つが上げられる。

* self.fields['**sample**']で指定する名前を、フィールドインスタンス（forms.IntegerField）を格納した変数名（**sample**）とする
* \_\_init\_\_メソッドをオーバーライドしているので、**必ず親クラスの\_\_init\_\_メソッドを呼ぶ**（呼ばないと親クラスforms.Formの\_\_init\_\_メソッドが呼び出されず、適切な初期化が行われない可能性がある）

## 使用するとき

**forms.py**でフォームを定義したときに、見た目を**css**で調整したいときに使う。

## 参考

stackoverflowの質問
https://stackoverflow.com/questions/401025/define-css-class-in-django-forms

参考にした回答
https://stackoverflow.com/a/401057

質問者
https://stackoverflow.com/users/22306/ashchristopher

回答者
https://stackoverflow.com/users/22306/ashchristopher
SCNPlaneに画像を貼り付ける

##SCNPlaneについて
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/8a77da05-d1ed-1e60-9777-9a4e13a48531.jpeg">

SCNPlaneはデフォルトでx軸に並行な向きで作成されます。ARなどで使うときはwidth=0.05くらいがいいかと思われます。
参考[公式リファレンス](https://developer.apple.com/documentation/scenekit/scnplane)

<img width="400" alt="スクリーンショット 2020-09-05 15.26.36.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/678751f1-1dd3-29f6-a049-b0acb9afafe7.jpeg">

##ソースコード

```Swift
var plane1 = SCNNode()

self.plane1.geometry?.firstMaterial?.diffuse.contents = UIImage(named: "rect1")
self.plane1.eulerAngles = SCNVector3(-90.degreeToRadians,0,0)
```

水平面に並行にするためには90度回転させます。
この時90度ではなく-90度としているのは,SCNPlaneはy>0の向きに画像が貼り付けられるからです。
Webページを改ざんー処罰の対象とする法律（刑法、特定商取引法、不正競争防止法、プロバイダ責任制限法　のどっち？）

応用情報技術者平成30年春期 午前問79

企業のWebサイトに接続してWebページを改ざんし，システムの使用目的に反する動作をさせて業務を妨害する行為を処罰の対象とする法律はどれか。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/ea28943f-ff6c-13c4-b25b-c4ce3995926e.png)


１、刑法
刑法234条の2「電子計算機損壊等業務妨害罪」により処罰の対象：
・「Webページを改ざんする」などコンピュータや電磁的記録を破壊して業務を妨害する行為
・DoS攻撃によるサービス妨害
・メールボムによるメールサーバ妨害
・業務で使用するコンピュータやデータの破壊
など

※DoS攻撃（ドスこうげき、英: Denial-of-service attack）は、情報セキュリティにおける可用性を侵害する攻撃手法のひとつ。 ウェブサービスを稼働しているサーバやネットワークなどのリソース（資源）に意図的に過剰な負荷をかけたり脆弱性をついたりする事でサービスを妨害する。

※DDoS攻撃（Distributed Denial of Service attack）は、トロイの木馬などのマルウェアを使って複数のマシンを乗っ取った上で、DoS攻撃を仕掛ける攻撃手段です。

DDoS攻撃は通常のDoS攻撃と違い複数のIPを使って行われるので、攻撃対象により大きな負荷をかけることができます。
簡単に説明するとDoS攻撃の進化版となりますね。


２、特定商取引法は、下記特定商取引を公正にし、購入者等の利益を保護することを目的とする法律：
・「訪問販売」
　※最も一般的な訪問販売は、消費者の住居をセールスマンが訪問して契約を行うなどの販売方法です。そのほか、喫茶店や路上での販売、またホテルや公民館を一時的に借りるなどして行われる展示販売のうち、期間、施設等からみて、店舗に類似するものとは認められないものも訪問販売に該当します。

・「通信販売及び電話勧誘販売に係る取引」
　※通信販売：たとえば新聞や雑誌、テレビ、インターネット上のホームページ（インターネット・オークションサイトを含む）などによる広告や、ダイレクトメール、チラシ等を見た消費者が、郵便や電話、ファクシミリ、インターネット等で購入の申込みを行う取引方法をいいます（ただし、「電話勧誘販売」に該当する場合は除きます）
　※電話勧誘販売：事業者が電話をかけて勧誘を行い、その電話の中で消費者からの申込み（または契約の締結）を受けた場合だけでなく、電話をいったん切った後、郵便、電話等によって消費者が申込みを行った場合でも、電話勧誘によって消費者の購入意思の決定が行われた場合には、「電話勧誘販売」に該当します。

・「連鎖販売取引」など
　※具体的には、「この会に入会すると売値の３割引で商品を買えるので、他人を誘ってその人に売れば儲かります」とか「他の人を勧誘して入会させると１万円の 紹介料がもらえます」などと言って人々を勧誘し（このような利益を「特定利益」といいます）、取引を行うための条件として、１円以上の負担をさせる（この 負担を「特定負担」といいます。）場合であれば「連鎖販売取引」に該当します。


３、不正競争防止法は、不正競争の防止を目的として設けられた法律：
・事業者間の公正な競争と
・国際約束の的確な実施を確保する


４、プロバイダ責任制限法は、インターネットでのウェブページや電子掲示板などへの投稿のように不特定多数の者が閲覧する通信について、
・プロバイダ等の「損害賠償責任の制限」および、
  ※損害賠償責任の制限：特定電気通信による情報の流通により他人の権利が侵害されたときに、関係するプロバイダ等が、これによって生じた損害について、賠償の責めに任じない場合の規定を設けるものです。

・それらの通信で損害を被った者に与えられる「発信者情報の開示請求権」を定めた法律です。
　※発信者情報の開示請求権：特定電気通信による情報の流通により自己の権利を侵害されたとする者が、関係するプロバイダ等に対し、当該プロバイダ等が保有する発信者の情報の開示を請求できる規定を設けるものです。

参照：
https://www.ap-siken.com/kakomon/27_aki/q80.html

訪問販売
https://www.no-trouble.caa.go.jp/what/doortodoorsales/

通信販売
https://www.no-trouble.caa.go.jp/what/mailorder/

電話勧誘販売
https://www.no-trouble.caa.go.jp/what/telemarketing/#:~:text=%E3%80%8C%E9%9B%BB%E8%A9%B1%E5%8B%A7%E8%AA%98%E8%B2%A9%E5%A3%B2%E3%80%8D%E3%81%A8%E3%81%AF,%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E3%81%84%E3%81%84%E3%81%BE%E3%81%99%E3%80%82

インターネット上の違法・有害情報に対する対応（プロバイダ責任制限法）
https://www.soumu.go.jp/main_sosiki/joho_tsusin/d_syohi/ihoyugai.html

DoS攻撃・DDoS攻撃とは？
https://cybersecurity-jp.com/security-measures/18262
雰囲気でEventBridge使ってたらS3PutでECSタスク起動するチュートリアルで詰まった件

# 前提
ぜんぜんわからない。俺は雰囲気でAWSをやっている。

# この記事の内容
[チュートリアル: ファイルが Amazon S3 バケットにアップロードされたときに Amazon ECS タスクを実行する](https://docs.aws.amazon.com/ja_jp/eventbridge/latest/userguide/eventbridge-tutorial-ecs.html)を斜め読みして、  
S3 PutでECSタスク起動しようとしたら詰まったので、最初からちゃんとやった。
そして、やっぱりチュートリアルは真面目にするべきだと反省した。

# 作業メモ
1. 単純なコンテナが欲しかったので、[ECSタスクでHello Worldしてみた
](https://ap-northeast-1.console.aws.amazon.com/ecs/home?region=ap-northeast-1#/firstRun)を参考に、コンテナを準備  
2. 1.が終わったら、[チュートリアル: ファイルが Amazon S3 バケットにアップロードされたときに Amazon ECS タスクを実行する
](https://docs.aws.amazon.com/ja_jp/eventbridge/latest/userguide/eventbridge-tutorial-ecs.html)を進める。
3. チュートリアルにしたがってポチポチ雰囲気で進める。
サブネットIDはecs->クラスタ->default->sample-app-serviceの詳細を見て入力。
4. S3に適当なファイルをアップ
5. 動いてる！
6. EventBridge > イベント > ルール > test-ruleでイベントパターン見れる。
7. が、別のS3バケツに変更すると動かないorz。
8. 結局、S3バケツのプロパティにオブジェクトレベルのログ記録ってのがあって、それが有効になってないと駄目だった。  
最初に選んだのはたまたまオブジェクトレベルのログ記録しているバケツだった


## あとがき
次はCLIやろう。
[JAWS-UG CLI専門支部 #167R EventBridge入門 (旧Events)
](https://jawsug-cli.connpass.com/event/187254/) = タイムリー！！
【Firestore】Rubyでコレクションをwhere条件で抽出してレコード削除

## 概要
RubyでFirestoreのAPIを使用する際、指定したコレクションのうちwhere条件に当てはまるものだけ削除したい場合どうすればいいのか、というのをまとめました。

## 前提など
* RubyでFirestoreのAPIを使用するため環境設定やクエリの投げ方などは、[こちら](https://googleapis.dev/ruby/google-cloud-firestore/latest/file.AUTHENTICATION.html)のドキュメントや[RailsからFirestoreをいじりたい](https://qiita.com/yuki0101/items/aa414de0d4a0d1d76869)を参考にしてます。
* 今回はbatchの仕組みを使用します。batchでの更新は500件が限界だそうなので、その点も考慮してみます。JavaScriptでの実装ですが[FirestoreでCollectionを削除する](https://qiita.com/superman9387/items/e9e258d92b2fab627a51)が参考になります。
* Rubyでのbatchの仕様は[こちら](https://googleapis.dev/ruby/google-cloud-firestore/latest/Google/Cloud/Firestore/Batch.html)のドキュメントを参考にしています。

## 実装サンプル
```sample.rb
def delete_sample
  # firestoreオブジェクトの取得
  firestore = Google::Cloud::Firestore.new
  # 削除対象のdoc配列格納用
  doc_array = []
  # コレクションの取得
  col_ref = firestore.col 'sample_collection'
  # コレクションの抽出条件
  query = col_ref.where 'category', '==', 'test'
  query.get do |r|
    # 対象のdocを配列に格納
    doc_array.push r.ref
  end
  # 500個までしか削除できないことを考慮
  document_index = 0
  batch_index = 0
  # バッチで削除
  while document_index < doc_array.size
    firestore.batch do |b|
      # 501個目のindexで中断
      break if batch_index == 500

      b.delete doc_array[document_index]
      document_index += 1
      batch_index += 1
    end
    batch_index = 0
  end
end

```
Cypressを使った良く使う処理をまとめる方法

## Cypressを使った共通処理のまとめ方
CypressというE2Eテストの自動化を支えてくれるツール[^1]があります。
Cypressをインストールし、初期設定を行うと、以下のようなフォルダ構成になっているかと思います。

```
cypress.json        
cypress
├── integration     
│   └── test_spec.js
├── plugins
│   └── index.js
└── support
    ├── commands.js
    └── index.js
```

今回は、この中の<code>cypress.json</code>と<code>commands.js</code>を使って共通化しておきたいことを記載していきます。

## cypress.json
以下のように、<code>json</code>ファイル内に、共通化しておきたいパラメータやURLなどを置いておきます。
自動テストを適用するのは、開発環境かと思います。その中であまりないかもしれませんが、一時的にドメインを変えて
自動テストを実行したりする時のために様々なファイルの中にあるURLやパラメータを書き換えないためにもここに記しておきます。

```json:cypress.json
{
    "baseURL":"https://google.com",
    "UserName":"TOKITA OUMA",
    "Something":"Anything"
}
```
実際には、以下のように呼び出して使うことが可能です。[^2]

```js:test_spec.js
const baseURL = Cypress.env(baseURL);
```

ユーザー氏名やパスワードなど特定のユーザーを用いた動作の確認においては、動作ファイル内に置くよりも
共通化したパラメータに記載しておく方が変更が少なくて済むという点でも有効です。

## command.js
自動テストを書いていると、複数の経路のテストの中で共通の処理がいくつも出てくると思います。
頻繁に使う処理であれば、モジュールとして置いておくことでテストのコードを短くできるということと
手動テストの自動化という点では、UIの変更など壊れやすさもあるため一々複数ファイルを修正するよりもメンテナンスが
楽になるというメリットもあります。

実際には、以下のように指定して作成することが可能です。[^3]

```js:command.js

Cypress.Commands.add('doSomething', (name) => {
  cy.get('a').contains(name).click()
  cy.get('a).type('something')
})
```

## 最後に
WEBアプリにおいては頻繁に挙動や仕様変更がある中で既存機能や画面に対する回帰テストのコストは
上がってくるかと思います。限られたケースであっても自動化しておくことでテスター自身のみならず構築する
エンジニアにとってもリリース後に不具合を出すよりかは良いかと思います。

もちろん自動テストによりテスト工数が下がるとは必ずしも言えませんが、効率的に探索テストを行えたりなど
より本質的な品質保証に向き合えるのではないかと考えています。

というわけで今回は、Cypressを用いた自動テストにおける共通処理のまとめ方でした。
Cypressに関してより良いやり方などあれば教えていただけると幸いです。

それでは、また。

[^1]: https://www.cypress.io/
[^2]: https://docs.cypress.io/api/cypress-api/env.html#Syntax
[^3]: https://docs.cypress.io/api/cypress-api/custom-commands.html#Syntax
【Access VBA】AccessからExcelを操作する方法

`本記事のコードはAccess 2013で記述しています。`

Accessとは
---
**Microsoft**が提供する**データベース管理ソフト**です。データベースとは、大量のデータを整理して蓄積し、必要なときにすぐに取り出せるように管理しているシステムのことを言います。データを表（テーブル）として管理する「リレーショナルデータベース」方式のひとつです。`SQL`の知識がなくてもテーブル操作ができるのが大きな特徴といえます。
Accessに関して詳しく知りたい方は、以下リンクをご覧ください。
[Microsoft Access](https://www.microsoft.com/ja-jp/microsoft-365/access)


AccessからExcelを操作しようと思った理由
---

私の部署では業務管理システムにAccessが採用されています。
報告書作成から担当情報の閲覧等までPC業務の大半はこのシステムを介して行われます。
故に、このシステムからなんでも操作できた方がユーザー的にはありがたい。
Accessは先ほど記述した通り、Microsoft製のアプリケーションなので、
先日記事で投稿した、「[Excel VBAと出会ったきっかけ](https://qiita.com/takiyaS/items/28ce5d36f5786807d13f)」のExcelVBAプログラムもコードコピペするだけで、Accessにそのまま組み込めるのではないかと天才的に閃いた。



さっそくやってみた
---
UIにコマンドボタンをテキトーに一つ置いてクリックイベントでコードをコピペして実行、、、

**が、全然ダメ！ 圧倒的エラー！！！**

当たり前だが、**`"ExcelVBA = AccessVBA"`**とはいかないらしい、、、


本題(操作方法)
---
茶番はここまでにしておこう（笑）
AccessからExcelを操作する場合、まずExcelアプリケーションを起動させオブジェクト変数に格納する必要がある。

```AccessVBA:AccessVBA
    Dim objExcel As Object, objWb As Object, objWs As Object
    Set objExcel = CreateObject("Excel.Application")
    Set objWb = objExcel.Workbooks.Open("ブックのパス")
    Set objWs = objWb.Worksheets("シート名")
```
変数に格納するのは`objExcel`だけでもいいが、
上記のようにブックやシートも変数に格納した方がスマートだろう。

オブジェクト変数を格納したらまずやるべきことがある。

```
    objExcel.Visible = True     'エクセル可視(True)/不可視設(False)
```
**Excelの可視化設定をTrueに返す**ことだ。

**"Accessではデフォルトの設定でExcel起動時の可視化設定がFalseになっている。"
つまり、タスクバーにもどこにもExcelが表示されず、目視ではExcelが起動しているかどうかもわからない。**
プログラムを実行してエラーが起きた場合、プログラムで作成したブックを削除しようとしても、PC上ではブックが開いた状態なので削除できないみたいなことが起こりうる。
**プログラムが狙い通り動くまでは可視化にしておくのが無難だろう。**


本線に戻ろう。

```
    objWs.cells(1, 1).Select　'A1セルを選択
    objWb.Save　'ブックを閉じる
```
シートを操作する場合は`objWs`、ブックを操作する場合は`objWb`を先頭につける。

一連の処理が終了したら、

```
    Set objWs = Nothing
    Set objWb = Nothing
    objExcel.Quit　'Excelを終了
```
オブジェクト変数を解除し、Excelを終了する。

注意点
---
本題の部分を押さえていれば基本的に問題はない。
しかし、`Access VBA`では、`Excel VBA`でデフォルトで使えるメソッド等が使えないことも少なくない。一つ例を挙げると、表の最終行を取得するのによく使われる`.End(xlDown)`の**`xlDown`**は、Accessではサポートされていない。
>
＜**対処法**＞どちらか一方をすればOK
・ツール⇒参照設定で **`Excel "" Object Library`**を追加する
・**`xlDown`**に代替する数字を入れる（以下リンク参照）
　https://docs.microsoft.com/ja-jp/office/vba/api/excel.xldirection
>
MAMPのMySQLサーバーに接続する方法

MAMPの中のMySQLに、ターミナルでどう入るのか躓きましたのでメモしておきます。 

下記コマンドで該当ディレクトリに移動します。私は、Applicationsの前に`/`を付けていなかったために、ホームのApplicationsとコンピュータが認識して、そこにはMAMPはないため「見つからない！」という事態に陥ってまぁまぁ時間をロスしました。`/`をお忘れなきよう。

```terminal
$ cd /Applications/MAMP/Library/bin
````
次にMySQLにログインします。なぜかはよく分からないのですが、`./`という相対パスを付けないと`commande not found`と言われてしまい、先に進めませんでした。ここが今回の躓きポイントでした。

```terminal
$ ./mysql -u root -p
````
これを実行するとPWを聞いてきますが、パスワードは[MAMPのトップページ](http://localhost:8888/MAMP/?language=English)に書いてあります。PCのパスワードではないです（←私がやったミス）。また、別途MAMPのパスワードを変更している場合は、そのパスワードを入力するようです。

パスワードが合っていれば下記のような画面になります↓
プロンプトが`mysql>`に変わると、MySQLサーバーに接続できたことになります。
![sl.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645077/5e2f7a91-92b7-31dd-c839-10834f4b5af5.png)



ちなみに、MySQLを抜けたい時は下記コマンドです。

```terminal
$ exit
```


以上です。もしなにかご指摘あればよろしくお願い申し上げます。
cloudfrontとnuxt-spaのキャッシュとかの設定


- 403エラー時、/index.htmlを返す
src/pages/hoge.vue
を
https://moge/hoge
でアクセスするため


- behaviorsのキャッシュ設定
キャッシュするように設定する、デフォルトでわりとOK


- index.htmlのキャッシュを無効にする
jsとかcssは毎回ファイル名が変わるので、キャッシュされてても問題無し。
index.htmlだけキャッシュクリアする。

index.htmlをno-cacheでアップするパターン
aws s3 sync dist/ s3://bucket-name/prefix --include "index.html" --cache-control "no-cache"

キャッシュリセットするパターン
aws cloudfront create-invalidation --distribution-id XXXXXXXXXX --paths '/index.html'
Webエンジニア未経験の女が自社内開発企業に転職するための指針

#今回の記事の目的
Railsエンジニアとして未経験のわたしが自社内開発企業に転職するための目標や実践することなどを書いていき、それが少しでも参考になればと思い今回記事にさせて頂きました。

###自社内開発企業に転職したい理由
「Webエンジニアになりたい！」と初めて思ったときには「自社内開発」「受託開発」「SES」などの概念がわからず当たり前のように就職した会社のサービスの制作に携われると思っていました。でも開発の業務内容の違いや事業内容の違いなどを知り改めて考えたときに「わたしが本当にしたいことってなんだろうか？」と思ったときにWeb系の自社内開発企業のエンジニアが一番わたしが求めるものと一致していると感じたことが大きな理由でした。

###未経験でもできること

即戦力として求められる自社内開発企業で未経験のわたしでもできることがなんなのか考えたときに**自走力をつける**ことが大切なことだと知りました。もし採用する企業様の立場になって考えたときに「自分で考えて実装できるエンジニア」と「誰かに教えてもらえないとできないエンジニア」なら当然前者を選ぶことは明白だろうと考えたからです。

###自走できるエンジニア
できるだけ自分の力で達成したい目的を実現するためにわたしが必要だと考えたことは**「検索力」や「エラー解決力」**が大切だと考えました。そのためメンターなどに頼らないでエラー文などは自分の頭で順序立てて考えてなるべく自分で解決できるように学習を心がけています。

過去にエラー解消についての記事も投稿したのでぜひご覧ください。(※自身投稿記事)
[【初心者向け】エラーになったときのストレスにならない解決方法](https://qiita.com/chisaki0606/items/8c443e3f9ba58ed82192)

###脱コピペプログラミング！ロジックを組み立てて実装できるエンジニアに
わたしがWebエンジニアになるために、そしてエンジニアになってからさらに上達し会社に貢献しサービスを成長させていくためにできることを考えたときに**コピーペーストでシステムを組むプログラミング**では限界があるのではないかと考えました。

わたしは現役のエンジニアの方がどんなふうにプログラムを組み立てて実装しているか調べてみたところ、参照にする記事がドキュメントや公式のマニュアルをメインにしていることを知り、**体系的にプログラミングを理解していてそれをロジックを組み立てて実装している**ことを知りました。そのため現在はQiitaなどを参考にしながら掲示板アプリが作成できるほどのスキルはありますがRailsをもっと深掘って学習していきたいと考えています。

###現場での開発を意識したスキルの習得を
自社内開発企業の方たちがどんな人材を求めているか考えたときに予め**現場を意識した開発技術が前提として備わっていることが必要**だと思いました。そのためWeb系企業で採用されやすい傾向のある開発環境やインフラなどを調べたときに**Dockerによる開発環境の構築とそれによる開発**と**AWSへデプロイする技術**が必要だと思いました。

###Web開発技術そのものの学習
Web開発について多くの知識がないままRubyやRailsなどを用いたWebアプリ開発の学習を行っていたためWeb開発に対しての知識が不足していたと痛感しました。そのため書籍で通勤時間などを利用して効率良く開発技術を学びます。

○参考にする書籍
**「Webを支える技術 -HTTP、URI、HTML、そしてREST」**
![51OSBZvAxGL._SX351_BO1,204,203,200_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/874d760b-aa4c-7cbe-2408-b72c87ced866.jpeg)




#「現在のわたし」と「これからの目的」
現在はRailsによる掲示板アプリなどの簡易的アプリの開発は卒なくこなせる状態にあります。しかしまだまだ自走力やロジックを組み立ててプログラムを実装できる力などが不足していると考えているのでもっともっと邁進していきたいです。
###現在のわたし(2020年9月時点)
○RailsによるCRUDなどの簡易機能の実装やアプリの作成が可能
○Dockerの開発環境の構築と開発が可能
○Git(GitHub)によるソースコード管理を行える
○Herokuを用いてサービスを公開することが可能

■参照記事(※自身投稿記事)
[DockerでRuby on Railsの開発環境を構築](https://qiita.com/chisaki0606/items/a4b42af5c4735c94057a)
[Dockerで作成したWebサイトをHerokuでデプロイする方法](https://qiita.com/chisaki0606/items/18ca9e16376ca08adf0f)
[GitHubの大まかな全体的な操作方法](https://qiita.com/chisaki0606/items/f4149259fc27a33f5f83)

###これからの目的(2020年9月時点)
○AWSへデプロイすることができるようになる
○プログラムをロジックを組み立てて実装できるようになる
○調べるときは基本的にRailsドキュメントや公式のマニュアルを参照して理解できるようになる

#まとめ
拝読して頂きありがとうございます。わたしはまだまだスキルが足りず本当に毎日勉強をしないといけないなぁと日々痛感しています。その中で同じように未経験でどうしたら転職できるほどのスキルを身に付けることができるのか日々考えている方がいるのではないかと思い、まだ転職活動中ではありますがぜひわたしの考えていることなどを共有できたらと思い今回この記事を書かせて頂きました。

ぜひわたしのこの記事がお役に立てることができましたら幸います。わたしのポートフォリオも公開しておりますのでぜひご覧ください。
[Chiaskiのポートフォリオ](https://chisaki0606.wixsite.com/mysite/gallery)
ubuntu:keyboard mapping:swap

###1. Examine Default Mapping
```bash:terminal
xmodmap -pke
```
###2. Write Code
```bash:script
# clear meta key mappings
clear shift
clear control
clear mod1

# swap key mappings
keycode  50 = Alt_L NoSymbol Alt_L
keycode  62 = Control_R NoSymbol Control_R
keycode  64 = Shift_L Meta_L Shift_L Meta_L
keycode  77 = KP_Delete KP_Delete KP_Delete KP_Delete
keycode 119 = Hiragana Hiragana Hiragana

# activate new meta key mappings
add control = Control_L Control_R
add mod1 = Alt_L Alt_R
add shift = Shift_L

```

###3. Run
```bash:terminal
xmodmap script
```
XcodeでiOSアプリを開発実機にビルドするやつ

1. Teamを作っておく  
Xcode > Preferences... > Accountsタブ > [Manager Certificates...]ボタン
![img00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703998/9307f9f0-d93d-a4bd-2012-3d8ebd71fd2a.png)

1.  Teamの設定  
target > Setting & Capabilities のTeam をさっき作ったやつに
 ![img01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703998/62ed3531-779b-9d99-1103-fd90c412b55c.png)

1. 端末を繋いでRan!

端末のOSバージョンとかXcodeのバージョンが古いとアップデートしろって言われるね。