Mac ネイティブのGitからHomebrewでインストールしたGitに切り替えた話

March 15, 2020, 4:59 pm

≪ Previous: 【初心者向け】今度こそわかるDI〜DIの基礎とSpringにおけるDI〜

目的

Git本体のバージョン管理をHomebrewで行いたくていろいろやった話をまとめる
書いている内容は単純にHomebrewでGitをインストールして使用するものと変わらない

実施環境

項目	情報
OS	macOS Catalina(10.15.3)
ハードウェア	MacBook Pro (16-inch ,2019)
プロセッサ	2.6 GHz 6コアIntel Core i7
メモリ	16 GB 2667 MHz DDR4
グラフィックス	AMD Radeon Pro 5300M 4 GB Intel UHD Graphics 630 1536 MB

実施方法概要

HomebrewでGitのインストール
パスを通し
バージョン確認

実施方法詳細

HomebrewでGitのインストール
1. 下記コマンドを実行してHomebrewをインストールする(すでに実施済みの場合は飛ばす。)
```
$/bin/bash -c"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
2. 下記コマンドを実行してHomebrewでGitをインストールする。
```
$brew install git
```
パス通し
1. 下記コマンドを実行してHomebrewのgitのパスを通す。(X.XX.XはみなさんのHomebrewでインストールしたgitのバージョン)
```
$echo"export PATH=/usr/local/Cellar/git/X.XX.X/bin:$PATH">> ~/.bash_profile
```
2. 下記コマンドを実行して.bash_profileを再読み込みする。
```
$source ~/.bash_profile
```
バージョン確認
1. 下記コマンドを実行してGitのバージョンがHomebrewでインストールされたものになっているのか確認する。
```
$git --version>git version X.XX.X
```

↧

[Rust] とりあえずHello World!してみた

March 15, 2020, 5:36 pm

≫ Next: 簡素なtodoリストをjavascriptで作る

≪ Previous: Mac ネイティブのGitからHomebrewでインストールしたGitに切り替えた話

会社の人が学ぶ価値がすごいと言っていたので、
とりあえず Hello World! してみました。

インストール

curl --proto'=https'--tlsv1.2 -sSf https://sh.rustup.rs | sh

こんなのが表示される。

Welcome to Rust!

This will download and install the official compiler for the Rust
programming language, and its package manager, Cargo.

...

Current installation options:


   default host triple: x86_64-apple-darwin
     default toolchain: stable
               profile: default
  modify PATH variable: yes

1) Proceed with installation (default)
2) Customize installation
3) Cancel installation

デフォルトの1を選択する。

Rust is installed now. Great!

To get started you need Cargo's bin directory ($HOME/.cargo/bin) in your PATH
environment variable. Next time you log in this will be done
automatically.

To configure your current shell run source $HOME/.cargo/env

完了！

動作確認

source$HOME/.cargo/env
rustc --version

rustc 1.42.0 (b8cedc004 2020-03-09)

OK！

Hello World!してみる

ファイルを用意してrustcコマンドでコンパイルする。

hello.rs

fnmain(){println!("Hello World!");}

rustc hello.rs

出力されたバイナリファイルを実行する。

./hello

すると、、、

Hello World!

簡単！！！

まとめ

実行環境の構築はびっくりするほど簡単でした。
学習コストは高いがそれに見合うものがある
とのことなので挑戦してみようかと思います。

参考

https://www.rust-lang.org/ja/learn/get-started

↧

簡素なtodoリストをjavascriptで作る

March 15, 2020, 5:39 pm

≫ Next: 画像に鳥がいるかどうかの判別

≪ Previous: [Rust] とりあえずHello World!してみた

はじめに

こんにちは。javascript初学者のたけしです。
javascriptで自分なりにtodoリストを作成したので、備忘録とアウトプットを兼ねて投稿します。
全てのコードを自分でググりながら書いたので、わかりにくい箇所やもっと良いやり方があるかもしれませんが私と同じような初学者の方の参考になれば幸いです。

作成の流れ

まずはtodoリストに追加したい機能を洗い出していきました。
機能の洗い出しの方法は前回私が投稿した記事を参考にして頂ければと思います。
「JavaScript初学者の私がFizzBuzzアプリを自作して学んだこと」

今回私が洗い出した機能
・入力された値の読み取り
・追加ボタンを押すことで入力された内容を追加する
・追加した内容にボタンを追加する(作業中・完了ボタンのことです)
・作業中・完了をボタンを押すことで切り替える
・ラジオボタンを押すことでリストの表示を切り替える
・削除ボタンを押すことでリストから削除する
・入力したら中身のテキストがクリアされる
・何も入力していない状態では機能が作動しない

以上となります。

最初から全てを洗い出していた訳ではありませんが、作っている最中にこれもつけよみたいな感じで継ぎ足していくのもいいと思います。
イメージがあるとわかりやすいと思うので、完成品のイメージを載せておきます。

htmlをまずは書いていく

まずはざっとhtmlで必要なものだけ書いていきました。
参考程度に載せておきます。

html

<!DOCTYPEhtml><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <h2>新規タスクの追加</h2>
  <input type="text" id="newtasc">
  <button id="add">追加</button>

  <ul class="radio">
    <li>
      <input type="radio" id="r1" name="list" value="1" checked><label for="r1">全て</label>
    </li>
    <li>
      <input type="radio" id="r2" name="list" value="2"><label for="r2">作業中</label>
    </li>
    <li>
      <input type="radio" id="r3" name="list" value="3"><label for="r3">完了</label>
    </li>
  </ul>

  <h1>TODOリスト</h1>
  <section>
    <ul id="list">
    </ul>
  </section>

  <script src="js/main.js"></script>
</body>
</html>

cssも表示の切替などに必要なので載せておきます。

css

.radio{display: flex;}.radioli{list-style: none;margin-right: 15px;}button{background-color: whitesmoke;padding: 5px15px;}.wrap{display: flex;flex-flow: row;}.divoneli{margin-right: 50px;}.btntwo{margin-right: 20px;}.none{display: none;}

JavaScriptを書いていく

htmlで骨組みを作り終わったら早速javascriptを書いていきました。

コードを読みやすくするために最初に全てのコードを載せますが、後から一つずつどういう理由で書いたのか説明していきます。

JavaScript

'use strict';{//値を読み取るletnewtasc=document.getElementById('newtasc');//入力された値をリストに追加するletadd=document.getElementById('add');add.addEventListener('click',()=>{if(newtasc.value!==''){//TODOリストに表示するletlist=document.getElementById('list');//div要素を作成letwrapper=document.createElement('div');wrapper.className='wrap';letdivone=document.createElement('div');letdivtwo=document.createElement('div');//作成した要素に追加①list.appendChild(wrapper);wrapper.appendChild(divone);wrapper.appendChild(divtwo);//li.button要素の作成②letli=document.createElement('li');li.className='divoneli';letbtnone=document.createElement('button');btnone.innerHTML='削除';btnone.className='btnone';letbtntwo=document.createElement('button');btntwo.innerHTML='作業中';btntwo.className='btntwo';//②を①に追加wrapper.insertBefore(li,divone);wrapper.insertBefore(btnone,divtwo);wrapper.insertBefore(btntwo,btnone);//inputで読み取った値を表示li.innerHTML=newtasc.value;//作業中・完了ボタンの切替btntwo.addEventListener('click',()=>{if(btntwo.innerHTML==='作業中'){btntwo.innerHTML='完了';}else{btntwo.innerHTML='作業中';}});//削除ボタンを押すと削除されるbtnone.addEventListener('click',()=>{list.removeChild(wrapper);});//チェックボックスの表示の切替letall=document.getElementById('r1');letworking=document.getElementById('r2');letdone=document.getElementById('r3');//作業中working.addEventListener('click',()=>{if(btntwo.innerHTML!=='作業中'){wrapper.classList.add('none')}else{wrapper.classList.remove('none')}});//完了done.addEventListener('click',()=>{if(btntwo.innerHTML!=='完了'){wrapper.classList.add('none');}else{wrapper.classList.remove('none')}});//全てall.addEventListener('click',()=>{wrapper.classList.remove('none');});document.getElementById('newtasc').value='';}});}

入力された値を読み取る

まずは入力された値を読み取るための変数を作ります。

JavaScript

letnewtasc=document.getElementById('newtasc');

inputタグからid属性を取得しています。
変数newtasc.valueで入力された値を読み取ることができます。

追加ボタンを押すことで入力された値を追加する

ボタンを押した時に関数を実行して欲しいので、タグのid属性を取得し、addEventListnerを使います。

JavaScript

letadd=document.getElementById('add');add.addEventListener('click',()=>{

入力した値の表示

ボタンを押すことで値を追加していけるようにしたいのですが、その追加した値の横に作業中・完了のボタンを追加したいのでDOMを扱っていきます。
DOMとは簡単に言うと、HTMLをJavaScriptから操作するものです。
DOMの使い方などに関する説明についてはここでは割愛し、私がどのような意図で要素を作っていったのかだけ説明していきます。

私はリストの横にボタンを表示したかったので、flexboxを使うためにdivをdivで囲むようにしました。

JavaScript

//div要素を作成letwrapper=document.createElement('div');wrapper.className='wrap';letdivone=document.createElement('div');letdivtwo=document.createElement('div');

下のコードで作ったdiv要素にボタンを追加しています。

JavaScrip

//作成した要素に追加①list.appendChild(wrapper);wrapper.appendChild(divone);wrapper.appendChild(divtwo);//li.button要素の作成②letli=document.createElement('li');li.className='divoneli';letbtnone=document.createElement('button');btnone.innerHTML='削除';btnone.className='btnone';letbtntwo=document.createElement('button');btntwo.innerHTML='作業中';btntwo.className='btntwo';//②を①に追加wrapper.insertBefore(li,divone);wrapper.insertBefore(btnone,divtwo);wrapper.insertBefore(btntwo,btnone);

ボタンの切替

ボタンの切替(作業中・完了)のために再度addEventListenerを使います。
if文を使って、現在のボタンの表示によって、ボタンのhtmlの書き換えをinnerhtmlでしています。

JavaScript

btntwo.addEventListener('click',()=>{if(btntwo.innerHTML==='作業中'){btntwo.innerHTML='完了';}else{btntwo.innerHTML='作業中';}});

削除ボタンを押すとリストから削除される

ボタンを押したときにリストから削除したいので、こちらでもaddEventListenerを使い、追加した要素を取り除くことでリストから削除しています。

JavaScript

btnone.addEventListener('click',()=>{list.removeChild(wrapper);});

ラジオボタンを押すことでリストの表示を切り替える

ここが一番苦労して色々書いては消してを繰り返してやっと機能を追加できたところです（笑）

まず、ラジオボタンをクリックしたときに関数を実行したいので、ラジオボタンのid属性を取得し、addEventListenerを使っていきます。
ただし、今回のtodoリストではラジオボタンの選択肢が3つあるので、それぞれでaddEventListenerを使いました。
if文でボタン(作業中・完了)のinnerhtmlを調べて、classをつけたり外したりすることで表示を切り替えています。

JavaScript

//チェックボックスの表示の切替letall=document.getElementById('r1');letworking=document.getElementById('r2');letdone=document.getElementById('r3');//作業中working.addEventListener('click',()=>{if(btntwo.innerHTML!=='作業中'){wrapper.classList.add('none')}else{wrapper.classList.remove('none')}});//完了done.addEventListener('click',()=>{if(btntwo.innerHTML!=='完了'){wrapper.classList.add('none');}else{wrapper.classList.remove('none')}});//全てall.addEventListener('click',()=>{wrapper.classList.remove('none');});

おわりに

ここまで読んで頂きありがとうございました。
読みにくい箇所やわかりにくい箇所などあったと思いますが、少しでも参考になれば幸いです。
長くなってしまいましたが、ここでおわりにしたいと思います。

あ！最後にもっとこうした方がいいよってアドバイスして頂ける方がいらっしゃいましたらぜひお願い致します！

↧

画像に鳥がいるかどうかの判別

March 15, 2020, 6:06 pm

≫ Next: IT業界の歩き方

≪ Previous: 簡素なtodoリストをjavascriptで作る

はじめに

kerasを使って、画像に鳥が含まれているかどうか判定します。
鳥は止まっているときと飛んでいるときでは全くフォルムが異なり、色も様々で、背景と同化しやすいので、他の生き物に比べて判別が難しいのではないかと思い、題材として鳥を選びました。

本当はスクレイピングで入手した画像にアノテーションをする方法で進めていたのですが、非常に苦戦してしまっているので、まずは前回と同じような方法でやってみます。

画像の収集

鳥が写っている画像と写っていない画像をそれぞれ約100枚ずつ集めました。アップで写っているものから、遠くで飛んでいる画像まで幅広く集めました。

プログラム

インポート

importkerasfromkeras.modelsimportSequentialfromkeras.layersimportDense,Dropout,Flattenfromkeras.layersimportConv2D,MaxPooling2DfromkerasimportbackendasKfromkeras.preprocessing.imageimportarray_to_img,img_to_array,load_imgimportnumpyasnpimportmatplotlib.pyplotaspltfromPILimportImageimportosimportrandom,math

学習データの前処理

batch_size=128epochs=16category_num=2img_rows=256img_cols=256loaded_array=np.load("bird.npz")x=loaded_array['x']y=loaded_array['y']x=x.astype(np.float32)importrandomnum=[]foriinrange(217):num.append(i)random.seed(1234)random.shuffle(num)random_x=[]random_y=[]foriinnum:random_x.append(x[i])random_y.append(y[i])random_x=np.array(random_x)random_y=np.array(random_y)random_x/=127.5random_x-=1

学習データとテストデータに分ける

p=0.8split_index=int(len(x)*p)x_train=random_x[0:split_index]y_train=random_y[0:split_index]x_test=random_x[split_index:len(x)]y_test=random_y[split_index:len(x)]

AIのモデルを定義

model=Sequential()model.add(Conv2D(32,kernel_size=(3,3),activation='relu',input_shape=(256,256,3)))model.add(Conv2D(64,(3,3),activation='relu'))model.add(MaxPooling2D(pool_size=(2,2)))model.add(Conv2D(64,(3,3),activation='relu'))model.add(MaxPooling2D(pool_size=(2,2)))model.add(Conv2D(32,(3,3),activation='relu'))model.add(MaxPooling2D(pool_size=(2,2)))model.add(Conv2D(32,(3,3),activation='relu'))model.add(MaxPooling2D(pool_size=(2,2)))model.add(Dropout(0.25))model.add(Flatten())model.add(Dense(128,activation='relu'))model.add(Dropout(0.5))model.add(Dense(5,activation='softmax'))model.compile(loss=keras.losses.sparse_categorical_crossentropy,optimizer=keras.optimizers.Adadelta(),metrics=['accuracy'])

モデルの構造

Total params: 887,621
Trainable params: 887,621
Non-trainable params: 0

モデルの学習

history=model.fit(x_train,y_train,batch_size=batch_size,epochs=epochs,verbose=1,validation_data=(x_test,y_test))

実行結果

Train on 152 samples, validate on 39 samples
Epoch 1/16
152/152 [==============================] - 0s 3ms/step - loss: 0.7060 - acc: 0.7105 - val_loss: 0.6270 - val_acc: 0.6923
Epoch 2/16
152/152 [==============================] - 0s 3ms/step - loss: 0.5161 - acc: 0.7895 - val_loss: 0.6391 - val_acc: 0.7179
Epoch 3/16
152/152 [==============================] - 0s 3ms/step - loss: 0.4950 - acc: 0.7566 - val_loss: 0.8009 - val_acc: 0.6154
Epoch 4/16
152/152 [==============================] - 0s 3ms/step - loss: 0.5938 - acc: 0.6776 - val_loss: 0.5763 - val_acc: 0.7949
Epoch 5/16
152/152 [==============================] - 0s 3ms/step - loss: 0.5269 - acc: 0.7697 - val_loss: 0.5721 - val_acc: 0.7692
Epoch 6/16
152/152 [==============================] - 0s 3ms/step - loss: 0.4931 - acc: 0.7566 - val_loss: 0.6643 - val_acc: 0.6667
Epoch 7/16
152/152 [==============================] - 0s 3ms/step - loss: 0.6636 - acc: 0.6974 - val_loss: 0.6254 - val_acc: 0.6923
Epoch 8/16
152/152 [==============================] - 0s 3ms/step - loss: 0.4320 - acc: 0.7961 - val_loss: 0.6124 - val_acc: 0.7949
Epoch 9/16
152/152 [==============================] - 0s 3ms/step - loss: 0.5349 - acc: 0.7500 - val_loss: 0.6818 - val_acc: 0.5897
Epoch 10/16
152/152 [==============================] - 0s 3ms/step - loss: 0.5050 - acc: 0.7961 - val_loss: 0.6286 - val_acc: 0.7692
Epoch 11/16
152/152 [==============================] - 0s 3ms/step - loss: 0.4667 - acc: 0.7829 - val_loss: 0.7403 - val_acc: 0.6667
Epoch 12/16
152/152 [==============================] - 0s 3ms/step - loss: 0.4203 - acc: 0.7961 - val_loss: 0.8192 - val_acc: 0.7179
Epoch 13/16
152/152 [==============================] - 0s 3ms/step - loss: 0.3978 - acc: 0.8355 - val_loss: 0.6761 - val_acc: 0.7436
Epoch 14/16
152/152 [==============================] - 0s 3ms/step - loss: 0.4731 - acc: 0.7895 - val_loss: 0.7102 - val_acc: 0.7436
Epoch 15/16
152/152 [==============================] - 0s 3ms/step - loss: 0.4996 - acc: 0.7829 - val_loss: 0.7735 - val_acc: 0.6667
Epoch 16/16
152/152 [==============================] - 0s 3ms/step - loss: 0.4655 - acc: 0.7697 - val_loss: 0.6601 - val_acc: 0.7436
CPU times: user 3.91 s, sys: 1.38 s, total: 5.28 s
Wall time: 7.31 s

学習済みモデルをテストする

defpredict_one_image(image):fig,(axL,axR1)=plt.subplots(ncols=2,figsize=(10,4))img=np.copy(image)img+=1img*=127img=img.astype(np.uint8)img=np.reshape(img,(img_rows,img_cols,3))axL.imshow(img)img=np.copy(image)img=np.reshape(img,(1,img_rows,img_cols,3))res=model.predict(img,batch_size=None,verbose=0,steps=None)axR1.bar(range(category_num),np.reshape(res,(-1,)))axR1.set_xticks(range(category_num))fig.show()foriinrange(len(x_test)):predict_one_image(x_test[i])

0 = 鳥がいない、1＝鳥がいる　を表しています。
鳥がアップで写っているものは比較的１が強く出ていますが、遠くで飛んでいる画像だと１と2の差が少なくなっています。
写真によっては背景の景色と鳥が同化しているものも多くあり、それも精度が低かった要因の一つだと思います。

最後に

今回は前回の感情の画像認識と同様の方法でやりましたが、あまり良い精度にはなりませんでした。アノテーションを使ったやり方のほうがもう少し精度が上がると思うので、なんとかエラーを改善して完成させたいと思います。

↧

IT業界の歩き方

March 15, 2020, 6:42 pm

≫ Next: 【Qiita】記事で挿入した画像に枠線をつける方法

≪ Previous: 画像に鳥がいるかどうかの判別

IT業界の歩き方なんて、Qiitaのユーザー層には必要ないかなと思っていたのですが、これからエンジニアを目指す人に見て欲しいです。やプログラミング初心者のために簡単用語説明を見るに、そうでもないのかと思ったので、非IT業界の方向けに作ったYoutube動画の内容を記事化しました。

初心者エンジニアの方が勉強するのにQiitaを活用するのは良いことですね。

↓動画はこちら

IT業界見取り図

一口にIT業界と言っても多岐にわたるので、どんな分野があるのか一枚絵でまとめてみました。

※「うちの業界載ってません」などありましたらごめんなさい。

システム開発のプロセス

エンジニアをやっているとシステム開発というと「要件定義からリリースまで」ですが、その上に企画や要求定義があります。
日本では要求定義は蔑ろにされていますが、プロジェクトの成否を決める大きな要因の一つはこの要求定義だと個人的には思います。

業種と守備範囲

システム開発のプロセスにおいて、各業種がどう関わっているかを一枚絵にしています。UXの重要度が上がり、最近ではコンサル、広告代理店（マーケター）、UXデザイナーの仕事がダダ被りになっていますね。

業種と技術要素

今度は業種毎にシステム開発のプロセスのどのフェーズに携わるのかを、最近（あるいは昔から今でも）幅を利かせている技術要素とともにまとめました。

最後に

無理やり一枚絵にまとめているので詳細は他に譲りますが、非ITの方、これからエンジニアとしてやっていきたいという方への概要説明などに使ってもらえれば幸いです。

あと業界中の人的なここはこうでしょ的なツッコミも頂ければ幸いです。

↧

【Qiita】記事で挿入した画像に枠線をつける方法

March 15, 2020, 8:02 pm

≫ Next: 【Qiita】表（テーブル）の書き方

≪ Previous: IT業界の歩き方

【Qiita】記事の画像に枠線をつける方法

画像を挿入するときに、枠線がないとどこからどこまでが画像かわかりにくい。

⇛　表形式(テーブル)をうまく使うことで枠線をつけられる

記述方法

| ![image.png](URL)| |:--|

＜ポイント＞

2行で記述
1行目：「|」(パイプ)で画像のソースコードを挟む
- 画像のソースコード「![image.png](URL)」
  - [ ]の中は[ファイル名.拡張子]：例[example-picture.JPG]
2行目：|:--|
- 「-」の数は2つ以上

ソースコードの例

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/9c4e0aa5-69a5-d717-d1d8-af8611bf0498.png)||:--|

ソースコードが長いのでややこしく見えるが、やってることはシンプル。
①「｜」で挟む
②「|:--|」をつけるだけ

画像への枠適用：実例

枠がない場合

↓↓↓ここから画像↓↓↓

↑↑↑ここまでが画像↑↑↑

背景白だと、境目がわからない、、

↧

【Qiita】表（テーブル）の書き方

March 15, 2020, 9:14 pm

≫ Next: Step Functionsを使ってみる

≪ Previous: 【Qiita】記事で挿入した画像に枠線をつける方法

【Qiita】表（テーブル）の書き方

Qiitaの記事に表を挿入するときのルール

＜ポイント＞

使う記号は「|」「:」「-」「」(半角スペース)の4つ
- 「|」表の枠
- 「|:--|」「|--:|」「|:-:|」のいずれかが2行目に必須
  - 「|:--|」左寄せ
  - 「|--:|」右寄せ
  - 「|:-:|」中央寄せ
- 「-」か「」(半角スペース)でソースコードを見やすくできる（スペーサー）
  - テキストの寄せ方で使える場所が異なる　→　「-」のみで調整するのが無難
枠の中に画像を入れられる
- 参考ページ(画像に枠線を付ける方法)
枠の幅は最大のセルの長さに合わせ自動調整
- 自分で幅をいじれない
- ソースコードの中では見やすく整えられるが、表示には適用されない
自動補完機能で枠組みが簡単に作れる
- 列数x行数　（行数は：表題行を除く空白行の数）
- ４列２行の表→　「4x2」と入力すると補完に「テーブルを挿入」が表示される
  - 各表題には１～の整数が入る

1	2	3	4

表の書き方と注意点を実例で解説

目次
１.左寄せ
２.右寄せ
３.中央寄せ
４.複数列
５.自動補完による枠組みの作成（★簡単）

表の書き方（左寄せ「|:--|」）

項目名
AAAAA
bbbbb
12345
AAbb12345678

書き方①

|項目名||:------------------||AAAAA||bbbbb||12345||AAbb12345678|

書き方②

|項目名||:--||AAAAA||bbbbb||12345||AAbb12345678|

書き方③

|項目名||:--||AAAAA||bbbbb||12345||AAbb12345678|

①、②、③は同じ表示になる。

2行目に「|:--|」が必須
①「-」は2個以上であれば何個でもOK
②「-」のあとに半角スペースを設置するのでもOK
③「|:--|」のみでもOK　※2列以上の場合に見にくくなる
※「-」と「」の組み合わせはNG　(例：「|:----- -----」 )

表の書き方（右寄せ「|--:|」）

項目名
AAAAA
bbbbb
12345
AAbb12345678

書き方①

|項目名||------------------:||AAAAA||bbbbb||12345||AAbb12345678|

書き方②

|項目名||--:||AAAAA||bbbbb||12345||AAbb12345678|

書き方③

|項目名||--:||AAAAA||bbbbb||12345||AAbb12345678|

書き方④

|項目名||--:||AAAAA||bbbbb||12345||AAbb12345678|

①、②、③、④は同じ表示になる。

「--:」があれば、半角スペースは前後どちらに入っても問題ない。
　　└両サイドにあってもOK（③）

表の書き方（中央寄せ「|:-:|」）

項目名
AAAAA
bbbbb
12345
AAbb12345678

書き方①

|項目名||:-----------------:||AAAAA||bbbbb||12345||AAbb12345678|

書き方②

|項目名||:-:||AAAAA||bbbbb||12345||AAbb12345678|

書き方③

|項目名||:-:||AAAAA||bbbbb||12345||AAbb12345678|

①、②、③は同じ表示になる。

※中央寄せの場合「-」は「:」の間に書く
※または「:-:」のあとに半角スペースを続ける
|:-----------------:|　OK
|:-:                       |　OK
|:-:----------------|　NG
|:-:--------           |　NG
|:-           :|　NG 　

表の書き方（複数列）

右上ヘルプに記載されている事例

Left align	Right align	Center align
This	This	This
column	column	column
will	will	will
be	be	be
left	right	center
aligned	aligned	aligned

書き方①

|Leftalign|Rightalign|Centeralign||:-----------------|------------------:|:------------------:||This|This|This||column|column|column||will|will|will||be|be|be||left|right|center||aligned|aligned|aligned|

書き方②

|Leftalign|Rightalign|Centeralign||:--|--:|:-:||This|This|This||column|column|column||will|will|will||be|be|be||left|right|center||aligned|aligned|aligned|

①、②は同じ表示になる。
スペーサーが適切に設置されていないと見にくい

自動補完による表枠組みの作成

自動補完機能で枠組みが簡単に作れる

列数x行数　（行数は：表題行を除く空白行の数）
- 4列２行の表→　「4x2」と入力すると補完に「テーブルを挿入」が表示される
- 各表題には１～の整数が入る
配置デフォルトは中央寄せ
※上限は行列ともに「10」まで　（１０以上は手動で付け足し）

4列２行の表

1	2	3	4

ソースコード

|1|2|3|4||:-:|:-:|:-:|:-:|||||||||||

10列10行の表

1	2	3	4	5	6	7	8	9	10

ソースコード

|1|2|3|4|5|6|7|8|9|10||:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

ページ上部に戻る

↧

Step Functionsを使ってみる

March 15, 2020, 9:08 pm

≫ Next: Qiitaにyoutube動画を埋め込む方法

≪ Previous: 【Qiita】表（テーブル）の書き方

社会人一年目のtkg-70です。
誕生日記念に初投稿します。（嘘です、たまたまです。）
今回、業務でAWSのStep Functionsを使う機会がありまして、せっかくなので自分の勉強のためにも記事を書いてみようと思いました。
Step Functonsを使うにあたり、押さえたほうが良いところと躓いたところをまとめていこうと思います。（また、自分が使うときのためにも）

Step Functionsとは

うまく説明できる気がしないので、AWSの公式を貼っておきます。
https://docs.aws.amazon.com/ja_jp/step-functions/latest/dg/welcome.html
ざっくり、作成した複数のLambdaを、一連の流れとして動かせるものって思ってます。

Step Functionsの作成

Step FunctionsはAmazon ステートメント言語を用い、JSONの形式でワークフローを書いていきます。
コードスニペットの生成のプルダウンにテンプレが一通り乗っており、モーダルで表示してくれるので、それをコピペして改変すれば書いていくことができます。
ワークフローを書き上げると、自動でビジュアルコンソールにフローチャートを作成してくれます。（自分で書いたワークフローが視覚的にわかるので、ありがたかったです。）

私が書いたコードはこんな感じ↓（LambdaのARNはテンプレのままなのでエラーでてます。）

{
  "Comment": "A Hello World example of the Amazon States Language using Pass states",
  "StartAt": "LambdaA",
  "States": {
    "LambdaA": {
      "Type": "Task",
      "Resource": "arn:aws:lambda:REGION:ACCOUNT_ID:function:FUNCTION_NAME",
      "Parameters": {
        "S3Bucket": "xxxxxx",
        "filePath": null
      },
      "OutputPath": "$",
      "Next": "eventParamChoice"
    },
    "eventParamChoice": {
      "Type": "Choice",
      "Choices": [
        {
          "Variable": "$.filePath",
          "StringGreaterThan": "0",
          "Next": "startShellProcess"
        },
        {
          "Not": {
            "Variable": "$.filePath",
            "StringGreaterThan": "0"
          },
          "Next": "FailedState"
        }
      ],
      "Default": "FailedState"
    },
    "startShellProcess": {
      "Type": "Parallel",
      "InputPath": "$",
      "OutputPath": "$",
      "Next": "SucessState",
      "Branches": [
        {
          "StartAt": "LambdaB",
          "States": {
            "LambdaB": {
              "Type": "Task",
              "Resource": "arn:aws:lambda:REGION:ACCOUNT_ID:function:FUNCTION_NAME",
              "InputPath": "$",
              "OutputPath": "$",
              "End": true
            }
          }
        },
        {
          "StartAt": "LambdaC",
          "States": {
            "LambdaC": {
              "Type": "Task",
              "Resource": "arn:aws:lambda:REGION:ACCOUNT_ID:function:FUNCTION_NAME",
              "InputPath": "$",
              "OutputPath": "$",
              "End": true
            }
          }
        },
        {
          "StartAt": "LambdaD",
          "States": {
            "LambdaD": {
              "Type": "Task",
              "Resource": "arn:aws:lambda:REGION:ACCOUNT_ID:function:FUNCTION_NAME",
              "InputPath": "$",
              "OutputPath": "$",
              "End": true
            }
          }
        }
      ]
    },
    "FailedState": {
      "Type": "Fail"
    },
    "SucessState": {
      "Type": "Pass",
      "End": true
    }
  }
}

Step Functionsの書き方

Step Functionsの一つの処理の書き方の例は下記の通りです。

"処理の名前": {
  "Type": "Task",
  "Resource": "arn:aws:lambda:REGION:ACCOUNT_ID:function:FUNCTION_NAME",
  "Parameters": {
    "S3Dir": "xxxxxxxxx",
    "filePath": null
  },
  "OutputPath": "$",
  "Next": "eventParamChoice",
  "Catch": [
    {
      "ErrorEquals": [
        "States.ALL"
      ],
      "Next": "FailedState"
    }
  ]
},

このソースに書いてあることの意味について説明していこうと思います。

Type

Typeの状態によってその処理でできることが変わります。上記のTaskの状態は、Lambdaを実行することができます。状態は他にもいくつかあります。
使用できるTypeの状態：

Choice（受け取った値から処理を分岐させることができる）
Wait（待機できる）
Succeed（実行を正常に停止する）
Fail（実行を失敗として停止する）
Parallel（複数のLambdaを並列実行できる、Parallelで書いた処理が一括りの処理として実行される）
Map（同じ処理に複数の値を渡し、動的に実行できる）

Resource

Task状態で使えるフィールドです。LambdaのARNを指定できます。

Parameters

Task状態で使えるフィールドです。Lambdaに渡す値をJSON形式で記述できます。
Lambdaに渡す値を記述できるのはParametersだけではありません。
実行時に、渡す値を記述し、InputPathのフィールドを使うことでLambdaに値を渡すこともできます。

OutputPath

Task状態で使えるフィールドです。次の処理に渡す値を指定できます。
例えば、上記の記述でLambdaに渡した値がそのまま帰ってきた場合、$.S3Bucketと指定すれば、次の処理に渡されるのは{"S3Bucket": "xxxxxx"}のみになります。

次に実行する処理の名前を指定します。

Catch

Lambdaで起きたエラーをcatchするときに使うフィールドです。ここではStates.ALL（States.Runtimeを除くすべてのエラー）をcatchした時、FailedStateの処理に移ります。（書かなくても大丈夫です）

基本のTask状態の説明をしましたが、Typeと受け渡しをする値に気をつけておけば、他のTypeもフィールドを調べながら書いていくことができると思います。
Type状態の公式ガイドのリンク貼っときます。（これみれば、フィールドはだいたいわかる）
https://docs.aws.amazon.com/ja_jp/step-functions/latest/dg/concepts-states.html

Step Functonsで躓いたこと

Step Functionsを使うにあたって、Parallel状態のエラー処理の記述に躓きました。どのように書くと、どのように実行されるかがわからなかったため、複数書いて実行してみました。

Parllel でのエラー処理を実行してみる

Step Functionsを用いたエラー処理の方法はいくつかあったため、全て試してみることにしました。

Lambdaでtry catchしない
最初に特に何もエラー処理を書かずにStep Functionsを実行してみました。
- エラーをなげるLambda

LambdaB

exports.handler=async(event)=>{thrownewErrorreturnevent;};

ワークフローでLambdaBをクリックすることで、例外の欄にエラーが出ていることがわかります。

try catchした後、errorをthrowする
次に、エラーをcatchしてthrowしています。
- エラーをなげるLambda

LambdaB

exports.handler=async(event)=>{try{thrownewErrorreturnevent;}catch(err){throwerr}};

この方法もワークフローでLambdaBをクリックすることで、例外の欄にエラーが出ていることがわかります。この方法ならば、エラーにメッセージを加えたりできるのでしょうか・・・（やり方がわかりませんでした。）

try catchしてerrorをthrowしない
- エラーをなげるLambda

LambdaB

exports.handler=async(event)=>{try{thrownewErrorreturnevent;}catch(err){}};

Lambdaはエラーをだしていますが、Step Functionsのワークフローではエラーが表示されていません。（個別のCloud Watchログではエラーが表示されています。）

parallelでcatch（prallelにcatch追加し、Lambdaでエラーハンドリングは行わない）
- parallelに以下のコードを追加

      "Catch": [
        {
          "ErrorEquals": [
            "States.ALL"
          ],
          "Next": "FailedState"
        }
      ]

Parallelの出力とFailedStateの入力を見ることでerrorがわかります。この書き方では、Parallel内でエラーが発生した際のエラー処理をまとめて記述できます。

・
・
・

いろいろエラーの書き方を試してみましたが、どれがいいとかではなく、状況に応じて選択すべきだなと思いました。今回いろいろ実行してみて、注意した方がよいと思った点があるので、記載しておきます。

Parallelの注意ポイント

１．上記の「Parallelでcatch」は正常終了しているように見えますが・・・

これを見ると、LambdaB、LambdaC、LambdaDが失敗しているように見えますが、LambdaC、LambdaDは正常終了しています。
→Parallelは記載した処理が一つのタスクとして失敗・成功が判断されます。Parallel内のタスクがエラーを出した場合、その時点で処理が終了しますが、呼び出されたLambdaは動いている点に注意が必要です。

２．parallelの出力は・・・

Parallelに出力するLambdaが複数あるとParallelの出力がこうなってしまいました。
こうなると、parameterを操作するのが難しかったです。
Parllelの出力は操作しないか、どれか一つが出力するようにすべきかなと思います。

あとがき

初めてやりましたが、AWSはドキュメントがわかりやすくてよかったです。
Step　Functionsは見た目でもわかりやすくて助かりました。
この記事が誰かの参考になればいいなと思います。
間違い等あればコメントください。

↧

Qiitaにyoutube動画を埋め込む方法

March 15, 2020, 9:54 pm

≫ Next: 【個人開発でやっておきたい】CircleCIで環境ごとに異なるfirebaseに接続する設定

≪ Previous: Step Functionsを使ってみる

Qiitaにyoutubeを埋め込む方法

結論から言うと、youtubeの埋め込みはできない。
代替はテキストリンク。

youtubeへのリンク貼り方

設置例
NBAジノビリのプレー集

[アンカーテキスト](URL)

ソースコード

[NBAジノビリのプレー集](https://youtu.be/Hlm6mkgGio4)

※youtubeのリンクはアクセスしているページのURLではなく、共有用のURL

iframeによる埋め込み（※使えない）

↓↓↓ここにiframeタグ貼り付けてる

↑↑↑ここまで

ソースコード

<iframewidth="560"height="315"src="https://www.youtube.com/embed/k6xdt12hrV0?start=73"frameborder="0"allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe>

iframeは表示されない

画像形式の埋め込み（※使えない）

　：not foundになる

ソースコード

![NBAジノビリのプレー集](https://youtu.be/Hlm6mkgGio4)

まとめ

おとなしくテキストリンクで設置

↧

【個人開発でやっておきたい】CircleCIで環境ごとに異なるfirebaseに接続する設定

March 15, 2020, 10:41 pm

≫ Next: Qiitaにhtml, css, jsの実際の表示例を埋め込む方法（CodePen）

≪ Previous: Qiitaにyoutube動画を埋め込む方法

初めに

背景

Vue.jsを用いたWebアプリ(Vue.jsに限った話では無いと思うが念の為)
FirebaseのFirestoreをDBとして用い、Firebase上にHostingがしたい.
CI/CDにはCircleCIを用いる.

やりたいこと

Production環境とStaging環境で接続するDBやHosting先をいい感じに分けてほしい.

ざっくりとした方針

Production環境とStaging環境でそもそもFirebase上のプロジェクトを分離し、prodcutionブランチにpushされたときはProduction環境に、 StagingブランチにpushされたときはStaging環境に接続するように設定する．
Production環境とStaging環境の両方のAPIキーなどをCircleCI上の環境変数として定義& .envファイルに書き出すように設定
build時はNODE_ENVの値により.envから読み出す値を分ける．
deploy時はfirebase use {project}でプロジェクトを指定した上でデプロイする．

なお、hostingのみの場合はわざわざプロジェクトを分けたりする必要はありません．
しかし、firestoreはプロジェクトごとに1個しか使えないので、prodcutionとstaging等で分けたい場合はそもそものプロジェクトから分ける必要があります．

前提

GithubにPushしたらCircleCIでjobが走るところまでは設定できているとします．

手順

1.Firebase上にプロジェクトを2つ作成する．

production用のプロジェクトと、とStaging用のプロジェクトを2つ作成します．
便宜上以下のふたつを作成したとします．
- MyProjectProd
- MyProjectStag

2. それぞれのAPIキー等を`.env`に登録する.

本記事ではdotenvを用いて環境変数を読み出します．
最終的には.envはCircleCI上で自動的に作られるようにするので、この手順は飛ばしても構いません．
念の為ローカルで動作確認用に作成しているだけです．
まず、dotenvをインストールしてなければインストールしてください．

yarn add dotenv

project直下に.envを作成してください.

FIREBASE_API_KEY_PROD=****************
FIREBASE_AUTH_DOMAIN_PROD=****************
FIREBASE_DATABASE_URL_PROD=****************
FIREBASE_PROJECT_ID_PROD=****************
FIREBASE_STORAGE_BUCKET_PROD=****************
FIREBASE_MESSAGING_SENDER_ID_PROD=****************

FIREBASE_API_KEY_STAG=****************
FIREBASE_AUTH_DOMAIN_STAG=****************
FIREBASE_DATABASE_URL_STAG=****************
FIREBASE_PROJECT_ID_STAG=****************
FIREBASE_STORAGE_BUCKET_STAG=****************
FIREBASE_MESSAGING_SENDER_ID_STAG=****************

_PRODがついている方にはMyProjectProdの値を、
_STAGがついている方にはMyProjectStagの値を、入力してください．
なお、これらの値はFirebase Console上から確認することが出来ます．

3.firebaseの初期化処理を記述する.

2で登録した値を用いてfirebaseの初期化処理を書いていきます．
使用しているフレームワークや構成によって記述する場所は違うと思いますが、筆者の環境(Vue.js+Nuxt.js)ではplugins/firebase.jsに記述しています．

if(!firebase.apps.length){if(process.env.NODE_ENV==="production"){//Prodcution環境firebase.initializeApp({apiKey:process.env.FIREBASE_API_KEY_PROD,authDomain:process.env.FIREBASE_AUTH_DOMAIN_PROD,databaseURL:process.env.FIREBASE_DATABASE_URL_PROD,projectId:process.env.FIREBASE_PROJECT_ID_PROD,storageBucket:process.env.FIREBASE_STORAGE_BUCKET_PROD,messagingSenderId:process.env.FIREBASE_MESSAGING_SENDER_ID_PROD});}else{//それ以外(Staging環境,develop環境)firebase.initializeApp({apiKey:process.env.FIREBASE_API_KEY_STAG,authDomain:process.env.FIREBASE_AUTH_DOMAIN_STAG,databaseURL:process.env.FIREBASE_DATABASE_URL_STAG,projectId:process.env.FIREBASE_PROJECT_ID_STAG,storageBucket:process.env.FIREBASE_STORAGE_BUCKET_STAG,messagingSenderId:process.env.FIREBASE_MESSAGING_SENDER_ID_STAG});}}

このようにprocess.env.NODE_ENVの値によって.envから読み取る値を変えています．

4. `NODE_ENV`の値を設定できるようにする．

NODE_ENVの値によって処理を変える記述が出来たので、次はNODE_ENVを設定できるようにします．
本記事では、cross-envを使用します．

yarn add cross-env

cross-env自体の使い方は
環境変数設定は基本cross-envだけどたまにenv-cmdも使う
等に書いてあるとおりです．
package.jsonに以下のような設定をします．(nuxt.js仕様)

{..."scripts":{..."build:stag":"cross-env NODE_ENV=\"staging\" nuxt build","build:prod":"cross-env NODE_ENV=\"prod\" nuxt build",...},...}

これで、

yarn build:stag

を実行すればstaging用の変数を用い、

yarn build:prod

を実行すればproduction用の変数を用いてbuildが走ります．

5. firebaseへのhostingの設定

buildしたものをfirebaseにhosting出来る設定をしていきます．
この手順は
Firebase Hosting でWebサイトを公開する方法
こちらの記事などで詳しく解説されていますので、参考にしながら進めると良いと思います．
本記事では簡易的に記述します．

staging用のプロジェクトと、prodcution用のプロジェクトがあるので、両方にエイリアスをつけて設定していきます．

firebase use --add

で、staging用のプロジェクトをstag,
prodcution用のプロジェクトをprodとして登録します．
これで、例えばstaging用にdeployしたい場合は、

firebase use stag
firebase deploy

で実行できます．

ここまでの動作確認

これで、手動であればprodcutionとstagingを分ける事ができます．
手順としては、
1. 任意の環境用にbuildする．
2. firebaseのプロジェクトを切り替える
3. deployする

となります．
例えば、staging環境であれば

yarn build:stag
firebase use stag
firebase deploy

を実行すればOKです．
ここまで手動で想定通りの動きになるか試してみましょう．
うまく行けば、これらをCircleCI上で実現できるようにします．

6.`.env`に記述した値の移植

2.で作成した.envファイルは、gitの管理化には入れないため、CircleCI上の環境変数に必要な値を登録し、build時に.envファイルを作成できるようにします．
具体的には、2．で記述したキーと値のセットをそのままCircleCI上のプロジェクトの環境変数に登録します．

7． `deploy`のためのキーの設定

CircleCI上からfirebaseのhostingにdeployするためには、キー等を設定する必要があります．
この手順にも、参考になる記事があるのでそちらを参考に進めてください．
Circle CIからFirebase Hostingに自動ビルド&デプロイする
上記記事に従って、
firebase login:ci
により得られたキーをCircleIC上の環境変数に設定します．
但し、今回はprodcution用とstaging用の2つがあるので

firebase use prod
firebase login:ci

で得られたキーをFIREBASE_TOKEN_PRODとし、

firebase use stag
firebase login:ci

で得られたキーをFIREBASE_TOKEN_STAGとして登録してください．

8. `.circleci/config.yml`の記述

最後にcircleCIの設定ファイルを記述していきます．
基本的には、先程手動で行った、

yarn build:stag
firebase use stag
firebase deploy

を実行するような設定をすればOKです．
変更点は、
- 最初にcircleCIの環境変数から.envを書き出す必要があること
- firebaseコマンドのパスを相対パスで指定すること
- deploy時にキー等を指定すること
の3点です．

必要な部分だけを記述したものが以下になります．

version:2.1orbs:#CircleCIが準備したnode用の設定を元として使うnode:circleci/node@1.1.6commands:make_env:#.envを書き出すコマンドをまとめておくsteps:-run:name:make .envcommand:|echo "FIREBASE_API_KEY_PROD=$FIREBASE_API_KEY_PROD" > .envecho "FIREBASE_AUTH_DOMAIN_PROD=$FIREBASE_AUTH_DOMAIN_PROD" >> .envecho "FIREBASE_DATABASE_URL_PROD=$FIREBASE_DATABASE_URL_PROD" >> .envecho "FIREBASE_MESSAGING_SENDER_ID_PROD=$FIREBASE_MESSAGING_SENDER_ID_PROD" >> .envecho "FIREBASE_PROJECT_ID_PROD=$FIREBASE_PROJECT_ID_PROD" >> .envecho "FIREBASE_STORAGE_BUCKET_PROD=$FIREBASE_STORAGE_BUCKET_PROD" >> .envecho "FIREBASE_API_KEY_STAG=$FIREBASE_API_KEY_STAG" >> .envecho "FIREBASE_AUTH_DOMAIN_STAG=$FIREBASE_AUTH_DOMAIN_STAG" >> .envecho "FIREBASE_DATABASE_URL_STAG=$FIREBASE_DATABASE_URL_STAG" >> .envecho "FIREBASE_MESSAGING_SENDER_ID_STAG=$FIREBASE_MESSAGING_SENDER_ID_STAG" >> .envecho "FIREBASE_PROJECT_ID_STAG=$FIREBASE_PROJECT_ID_STAG" >> .envecho "FIREBASE_STORAGE_BUCKET_STAG=$FIREBASE_STORAGE_BUCKET_STAG" >> .envcat .envjobs:deploy_stag:# staging環境にデプロイする用executor:name:node/defaulttag:"12.13"# 念の為バージョン(正確にはdockerのtag)を指定しておくsteps:-checkout-node/with-cache:steps:-run:yarn install-make_env-run:name:switch firebase project to productioncommand:./node_modules/.bin/firebase use stag-run:name:buildcommand:yarn build:stag-run:name:deploycommand:./node_modules/.bin/firebase deploy --project=$FIREBASE_PROJECT_ID_STAG  --token=$FIREBASE_TOKEN_STAGdeploy_prod:# prodction環境にデプロイする用executor:name:node/defaulttag:"12.13"steps:-checkout-node/with-cache:steps:-run:yarn install-make_env-run:name:switch firebase project to productioncommand:./node_modules/.bin/firebase use prod-run:name:buildcommand:yarn build:prod-run:name:deploycommand:./node_modules/.bin/firebase deploy --project=$FIREBASE_PROJECT_ID_PROD --token=$FIREBASE_TOKEN_PRODworkflows:deploy:jobs:-deploy_stag:filters:# stagingブランチの場合はstaging環境へのデプロイbranches:only:staging-deploy_prod:filters:# releaseブランチの場合はrelease環境へのデプロイbranches:only:release

これで、
stagingブランチにpushされた場合はdeploy_stagが、
releaseブランチにpushされた場合はdeploy_prodが実行されるはずです．
意図したとおりに挙動していれば無事終了です．

最後に

これがベストなやり方かどうかは分かりませんが、一応このやり方で特に問題は無いと思います．
方針さえ立てばそれぞれの手順自体は難しくないはずです．
やってみれば大したことないですが、自分はどういう方針で行くか結構手探りで進めたので、この記事が他の誰かのお役に立てれば幸いです．

また、firestoreのルールに関してCircleCI上で走らせるのも少しだけ手間取ったりしたので自分の備忘録のためにもそのうち書きたいと思ってます．
し

参考

環境変数設定は基本cross-envだけどたまにenv-cmdも使う
 Firebase Hosting でWebサイトを公開する方法
 Circle CIからFirebase Hostingに自動ビルド&デプロイする

↧

Qiitaにhtml, css, jsの実際の表示例を埋め込む方法（CodePen）

March 16, 2020, 12:13 am

≫ Next: Qiitaにtwitterを埋め込む方法

≪ Previous: 【個人開発でやっておきたい】CircleCIで環境ごとに異なるfirebaseに接続する設定

Qiitaにhtml, css, jsの実際の表示例を埋め込む方法（CodePen）

Qiitaでよく使われている、ソースコードと実際の表示イメージを埋め込む方法。
（よく見るカッコいいやつ）

＜こういうやつ＞

See the Pen
test by @@yuta (@yuta-38)
on CodePen.

Resultの枠の中のボタンをクリックすると、リアルタイムでJSが実行される。

やり方

CodePenというWEB上の別サービスのembed用コードをQiitaに埋め込んでいる。

CodePenの登録
ソースコードの記述
embed URLのコピー
Qiitaに貼り付け
表示内容の確認

1. CodePenの登録

そもそもCodePenって何？
html, css, javascriptのコーディングをリアルタイムでプレビューできるツール。
オンラインエディタと呼ばれるサービスの類い。

類似サービス：jsbin, jsFiddle,

●CodePenでユーザー登録する

twitter, github, facebook, メアドで登録可能

2. コーディング

2-1 プロジェクトの作成

Settingで「title」「Description」を入力
完了したら「Save&Close」

2-2　コーディング

HTML, CSS, JSのそれぞれの枠内にコーディングしていく
HTMLはbodyタグ内の記述でOK

補足(プレビュー時に書きコードが自動的に追記される)

CodePen側で自動的に追記する内容

<!DOCTYPEhtml><htmllang="en"{IFCLASSES}class="classes"{/IF}>

<head>

  <meta charset="UTF-8">

  {IF PRIVATE}
  <meta name="robots" content="noindex">
  {ELSE}
  <!-- MIT License -->
  {/IF}<title>{TITLE}</title>

  {STUFF FOR <HEAD>}

  <link rel="stylesheet" href="{CSS RESET CHOICE}">
  {EXTERNAL CSS}
  <style>
  {EDITOR CSS}
  </style>{PREFIXFREE(ifenabled)}{MODERNIZR(ifenabled)}</head>

<body>

  {EDITOR HTML}

  {JS Library (if chosen)}
  {EXTERNAL JS}

  <script>
    {EDITOR JS}
    //# sourceURL=pen.js</script>

</body></html>

3. embed URLのコピー

3-1 プロジェクトを保存する

コードを書き終わったら、Saveをクリック

3-2 embed用のソースコードをコピーする

ページの最下部にある、「embed」をクリック
（※画面幅が狭いと省略されてるかも）

「HTML(recommended)」のタブをクリック

枠内に記載されているコードをコピー

4. Qiitaに貼り付け

コピーしたコードをQiitaに貼り付け

※プレビュー画面では確認できない
「See the Pen test by ユーザー名 on CodePen.」と表示されていればOK

See the Pen test by @@yuta (@yuta-38) on CodePen.

ソースコード

<pclass="codepen"data-height="265"data-theme-id="light"data-default-tab="js,result"data-user="yuta-38"data-slug-hash="LYVmyye"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="test"><span>SeethePen<ahref="https://codepen.io/yuta-38/pen/LYVmyye">test</a> by @@yuta (<a href="https://codepen.io/yuta-38">@yuta-38</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

5. 表示内容の確認

限定共有投稿で仮校了とし、WEBページ上で表示内容を確認

問題なければ、右上の設定アイコンから、全体に公開を選択

＜メモ＞
jsbinのembed用コードを貼り付けてみたが、埋め込みはできなかった。
テキストリンクで表示。リンク先は有料版じゃないとつかえないっぽい

JS Bin on jsbin.com

ページ上部に戻る

↧

Qiitaにtwitterを埋め込む方法

March 16, 2020, 12:33 am

≫ Next: コマンドライン基礎編ざっくり備忘録

≪ Previous: Qiitaにhtml, css, jsの実際の表示例を埋め込む方法（CodePen）

Qiitaにtwitterを埋め込む方法

tiwtterのメニューから、「ツイートを埋め込む」でコードをコピーし貼り付けるだけ。

Qiitaの「いいね」が「LGTM」に変わります。
詳しくはこちらの記事をご確認ください💁‍♀️https://t.co/ToqYDaVFLB
— Qiita (キータ) 公式 (@Qiita) March 12, 2020

埋め込み用コードのコピー手順

①twitter右上のメニューをクリック

②「ツイートを埋め込む」を選択

③「Copy Code」をクリック

④Qiitaに貼り付け
プレビュー上では引用でテキスト部のみが表示される

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Qiitaの「いいね」が「LGTM」に変わります。<br>詳しくはこちらの記事をご確認ください💁‍♀️
<a href="https://t.co/ToqYDaVFLB">https://t.co/ToqYDaVFLB</a></p>&mdash; Qiita (キータ) 公式 (@Qiita) <a href="https://twitter.com/Qiita/status/1238019414378680321?ref_src=twsrc%5Etfw">March 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

以上

↧

コマンドライン基礎編ざっくり備忘録

March 16, 2020, 1:14 am

≫ Next: 強制横スクロールアクションゲームを作る_2　~強制横スクロール、三段ジャンプ~

≪ Previous: Qiitaにtwitterを埋め込む方法

Progateの『コマンドライン基礎編』を学習。
以下、『ざっくり備忘録』としてまとめます。

構造

ルートディレクトリ

一番親のディレクトリ。"/"で表記される。

カレントディレクトリ

現在作業しているディレクトリ。確認する際は

pwd

を使う。Print Working Directoryの略。

ホームディレクトリ

作業する際の起点となるディレクトリ。"~"で表記される。

ディレクトリの移動

cd ディレクトリ名

ひとつ上の親ディレクトリへ移動

cd ..

操作

ファイルの作成

touch ファイル名

ファイルの中身を表示

cat ファイル名

ディレクトリの作成

mkdir ファイル名

Ma*ke **dir*ectoryの略。

ディレクトリの中身を表示

ls

listの略。

移動させる

mv ファイル名 移動先のディレクトリ名
mv ディレクトリ名 移動先のディレクトリ名

名称の変更

mv 現在のファイル名 新しいファイル名
mv 現在のディレクトリ名 新しいディレクトリ名

コピー

cp コピーしたいファイル名 新しいファイル名
cp -r コピーしたいディレクトリ名 新しいディレクトリ名

ディレクトリをコピーする際は -rをつけないとエラーになる。

削除する

rm 削除するファイル名
rm -r 削除するディレクトリ名

コピーするときと同様 -rをつける。

↧

強制横スクロールアクションゲームを作る_2　~強制横スクロール、三段ジャンプ~

March 16, 2020, 1:35 am

≫ Next: 使ったことがないDockerを使う気にさせる使用事例

≪ Previous: コマンドライン基礎編ざっくり備忘録

はじめに

ゲームを作る練習として初心者がUnityを使って、強制横スクロールアクションゲームを作るお話です。出来るだけ細かくどのような作業をしたか書いていくつもりです。今回は以下の続きです。

*強制横スクロールアクションゲームを作る_1　~Unityで画像をObjectとして使う,Colliderをつける~

仕様

自転車に乗った人（＝Player）が穴に落ちないようにジャンプして進むシンプルなゲームです。

Playerは右方向に等速で進んでジャンプは3段ジャンプまで
床がランダムに生成されて、大きすぎる穴ができないように
Playerが床の横側にぶつかった時、画面下に落ちた時にゲームオーバー
右上に進んだ距離を表示
ゲームオーバーになるとゲーム終了の画面でその距離を表示

開発

ものすごくシンプルな仕様を元にゲームを作り始めました。
今回使用したUnityのバージョンは2019.2.6f1で、2Dのプロジェクトにしました。

3.Playerの移動（強制右スクロール）

まずProjectタブの中にあるAssets内で
右クリック --> Create --> C# Script
とした後、PlayerControllerと名前をつけておきます。これをダブルクリックして編集します。

usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassPlayerController:MonoBehaviour{privatefloatSTEP=5.0f;voidUpdate(){//右向きに等速で進むthis.transform.position+=newVector3(STEP*Time.deltaTime,0,0);}}

このスクリプトをHierarchy内のPlayerにドラックでアタッチすることでPlayerが右向きに直進します。

続いて、カメラがPlayerを追跡するようにHierarchy内のMain Cameraに新しい以下のスクリプトをアタッチしておきます。
ついでにCameraのInspectorの中にあるBackgroundを編集して背景の色を好きな色にしておきましょう。

usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassCameraController:MonoBehaviour{privatefloatpx;voidUpdate(){px=GameObject.Find("Player").transform.position.x;this.transform.position=newVector3(px,0,-20.0f);}}

これで右向きにPlayerが等速で移動できます。床を長くして確かめてみてください。

4.Playerのジャンプ

先ほど作ったPlayerControllerにこのスクリプトを追加することで、以下の実装ができます。

クリックでジャンプ
ジャンプは空中でも可能だが、三段ジャンプまで
ジャンプ力は１回目２回目３回目が同様になるように

publicclassPlayerController:MonoBehaviour{Rigidbody2Drigid2D;privateVector2velocity;publicfloatJUMP_POWER;privateintMAX_JUMP_COUNT=3;privateintjumpCount=0;privatebooljump=false;[SerializeField]ContactFilter2Dfilter2d;voidUpdate(){//クリックでJumpをtrueにしてジャンプ、//空中で３回以上ジャンプしてたらジャンプできないif(jumpCount<MAX_JUMP_COUNT&&Input.GetMouseButtonDown(0)){jump=true;}if(jump){// 速度をゼロにして、2回目のジャンプも1回目と同じ挙動にするthis.rigid2D=GetComponent<Rigidbody2D>();rigid2D.velocity=Vector2.zero;//ジャンプさせるthis.rigid2D.AddForce(transform.up*JUMP_POWER);//ジャンプ回数をカウントjumpCount++;jump=false;}// 床に着地したか判定し、床に接地したら3段ジャンプできるようにするif(GetComponent<Rigidbody2D>().IsTouching(filter2d)){jumpCount=0;}}}

InspectorでPlayerControllerのスクリプトを開いて、publicにしておいたJUMP_POWERの大きさを調整します。合わせてPlayerのRigidbody 2Dの中にあるMass（重さ）を調整します。

ちなみに速度を0にする部分は非常に大事です。
AddForceというのは力を加える関数なので、物理法則で速度を決定してしまいます。Playerがどんな速度で空中にいても同じ空中ジャンプをキメるためには、AddForceをする前にPlayerの速度を0にしておく必要があります。

また上向きのジャンプを安定させるためにPlayerオブジェクトを選択して、Inspector内のRigidbody 2DコンポーネントにあるConstraintsというところで、Freeze RotaionのZにチェックを入れました。こうすることでPlayerの上向きの力は常に画面に対して上向きの力になり、ジャンプが安定します。

接地判定は以下を参考にしました。

【Unity】Raycastを使わず地面に接触しているか判定する

まとめ

自転車に乗った人が右向きに強制スクロールで進んで三段ジャンプできるようにしました。

↧

使ったことがないDockerを使う気にさせる使用事例

March 16, 2020, 1:58 am

≫ Next: 初心者のための『なんでGitでブランチを使うねん！！』を再復習しよう！

≪ Previous: 強制横スクロールアクションゲームを作る_2　~強制横スクロール、三段ジャンプ~

はじめに

Dockerを学ぶ場合、会社のプロジェクトで使うから勉強する事になるパターンと
よく使われていることから使ってみたい！という2パターンに分けられると思います(自分は後者でした)

勉強した際いまいちどう使えばいいのかわからず、業務で使って理解した部分が色々あったので
便利だなと思ったユースケースと利点についてまとめました。
読んで使ってみたいと思う人が一人でも増えればいいと思います。

個人開発で使用する

PC内にDockerでlinuxの開発環境を作る(Win or Mac)

メリット

・母艦PCと言語バージョンが違う開発がパッケージ切り替え無しで実施できる

　DockerでLinux環境を作成し、その中に言語パッケージ等を入れて開発環境を構築します。
　本質は「どこから接続しても同条件で開発できる環境をDockerイメージとしてパッケージ化できる」点です。
　イメージさえあれば別PCを購入してもDockerさえ導入すれば同じ環境がすぐ構築でき、
　AWS等のクラウド上でコンテナを立てればSSH接続するだけですぐ開発に取り掛かることができます。
　※Linuxを含んだDockerコンテナを作る

・実質linux内で開発しているためデプロイする場合のOS差異がなく、コンテナ作成から公開が簡単にできる。

　上とほぼ似ていますが、linux内での開発になるのでそのままdockerfileを記述しイメージを作成、
　ECR、GCR等のコンテナ用クラウドにアップすることですぐに開発したコンテナを公開できます。
　自分の環境で開発した物をEC2等にデプロイする場合と比べて環境差異が生まれる可能性が少なく便利です。

会社のプロジェクトで使用する

開発環境として使用する

コンテナを用いて複数人の環境をすぐに作成できる

　Dockerイメージをpushするインスタンスを変更するだけで複数環境を簡単に作成することができます。
　開発環境の配布も可能なためプロジェクトインが簡単にできたり、テスト用のインスタンス生成等にも
　柔軟に対応が可能です。スタートアップ時にはいろいろなモジュールを変更して試してみることも多いため、
　変更しない部分(メインロジック等)を1個のDockerイメージにして変更がある部分のみを別イメージとして
　docker-composeの記述で環境を試し、必要ないコンテナはすぐ廃棄することで作業効率が向上します。
　(ローカルで同様の事をする場合、パッケージの削除・エラー解消などが必要となり膨大な作業が発生します)

本番運用のために使用する

スケーリングが容易なため、サービスの規模に応じてベストな運用ができる

　ソーシャルゲームなどではイベントがあるとアクセスが多くなったり、夜間のアクセスが減少することから
　スケーリング不可なシステムだとリソースの無駄やアクセス過多によるサーバー落ちの可能性があります。
　Dockerを使用することによりコンテナ単位でのスケールアウト・スケールインが可能なため、
　アクセスに応じた構成をフレキシブルに適応しながら運用することができます。
　

サービス運用の潤滑化・高速化

　開発に関わる作業(テスト・デプロイ・スケーリング等)が楽になることからプロダクトそのものに集中でき、
　技術面だけではなく企画時間～作業時間など全体の時間削減に繋がります。
　※うまく説明ができるメンバーがいる前提であれば、テストメンバーを増やす際も環境構築が即時可能で
　　開発メンバーのスケーリングが容易にできるのはすごくメリットに感じました。

Dockerに関する気になること

別に使わなくても開発はできる・採用企業にジョインする難しさ

　そもそもDockerが使用されるまでの運用法が間違っているわけでもないので、新規に導入する時間を考えると
　案件を1件でも多く受注し、同じ開発を続けることも企業にとっては一つの選択だと思います。
　2019年の記事では国内でDockerコンテナを本番利用している企業は9.2％という話もあり、該当企業に参加し
　その案件に参画するまでもいくつかの壁が存在します。

0からの勉強コストが高い

　経験のあるメンバーがいない場合、7人のメンバーが1日でDockerを学んでも1人週の工数がかかります。
　どんな新しい技術でも調査時間は必要ですが、前述の「使用しなくても開発は進められる」ということもあり
　この時間を「必要」と捉えるか・チームで何人Docke経験があるかで導入のハードルが変化します。

採用事例・知見の問題

　特に運用フェーズでの採用率の低さはナレッジが全然なかったことが大きい気がします。
　最近はAWSのイベントでも有名企業Docker採用事例のプレゼンテーションがあったり、
　企業が開催しているLT記事でも便利だなーと思う事例を見つけたりします。
　後追いで採用する上では参考にできるユースケースも増えており選択肢としては非常に魅力的だと思います。
　便利とは言っても決して銀の弾丸ではないので、他技術と比べ有利かを考えながら採用する必要があります。

まとめ

メリット

・環境差異を最小限に抑えることができストレスが少なく開発・運用することができる
・使い方によってあらゆるフェーズで使えるため、トータルの時間が削減できる
・採用企業の面接を受ける時、Docker運用について受け答えができるとウケが良い

デメリット

・ある程度勉強時間が必要なので継続的に使用していくつもりがないならメリットが薄い
・採用チームに参加できるか、あるいは導入を認めてもらえるかは企業次第

参考

個人開発

★Dockerで開発環境構築を10倍楽にしたはなし
　 VS CodeのRemote Containersを使ってコンテナ内で開発する
★VSCode の Remote - Containers 拡張を試してみた

※★は参考にした以上に個人的に面白かった記事です

↧

初心者のための『なんでGitでブランチを使うねん！！』を再復習しよう！

March 16, 2020, 3:10 am

≫ Next: Pythonで毎日AtCoder #7

≪ Previous: 使ったことがないDockerを使う気にさせる使用事例

はじめに

こんにちは！ベンチャー企業でソフトウェア開発をしている加納です！

意欲が高く一人で勉強されている初心者プログラマの方はGitの存在を知ってるかもしれません。Progateにも詳しい手順が解説されていたりしますよね！

実務経験がない状態だと（僕もそうだったのですが）『なぜGitでブランチを使うのか』と思うことがあると思います。今回はその理由を図を用いてわかりやすく解説いたします！

この記事を読んで得られること

Gitのブランチを用いた開発の良さを知って頂ければと思います。

本題：『なぜGitでブランチを使うのか』

結論から言いますと、『ブランチを使わない開発は危険すぎるから』です。

具体的にブランチを使わず開発をしている危険性を見ていきましょう。

上の図のように本番環境だけで開発をしているとします。何が起こってしまうでしょうか。

このように直で本番環境のコードを書き直したり、付け足したりしていると突然システムが機能しなくなってしまうこともあるのです。正直めちゃめちゃ焦ります。何を変更したんだっけと全て忘れてしまうかもしれないです（僕はそうです）

もちろんバックアップをとっておいたら良いのですが毎回コードを少し変えるたびにバックアップを取っていると無限に不要なフォルダができてしまうかもしれません。

そこでブランチを使うのです！！

ブランチの素晴らしさ

以下がブランチを用いて作業をした時の図です。

先ほどまでは[開発段階2]から[開発段階3]を直で変更していましたが、ブランチを使うとどうでしょう。

最低でも「開発用」、「テスト用」、「本番用」ブランチを用意して開発をすることで、[開発段階2]のコードはそのままにして、そのクローンをこまめに開発することができるのです！

開発中にバグが発生しても問題ありません。元のブランチを参照することですぐにバグが発生する前のコードに戻れるのです。

本番用ブランチで動作を確認し終えたのなら、[開発段階2]と[本番用ブランチ]をマージして終了となります。

最後に

最後まで読んでいただきありがとうございました。
一人で開発をしている方や、友達と開発をしている方！ぜひブランチを使って安全で快適なエンジニアライフをどうぞ！！

Gitのブランチの必要性を教えていただいた大先輩エンジニアの青木さんに感謝致します。

・具体的なブランチの構成について知りたい
→いまさらだけどGitを基本から分かりやすくまとめてみた

・効率的に優秀なプログラマになる方法を知りたい
→ハッキングを学ぼう-日本語訳

↧

Pythonで毎日AtCoder #7

March 16, 2020, 4:31 am

≫ Next: 初心者から始めるJava、継承

≪ Previous: 初心者のための『なんでGitでブランチを使うねん！！』を再復習しよう！

はじめに

前回
今日で一週間です。

#7

問題

考えたこと
Pythonのsortは文字列に対してもできることを知ったので、sortします。全ての文字列の長さが同じなので、sortしたものをそのまま繋げるだけです。

n,l=map(int,input().split())s=[input()for_inrange(n)]s.sort()ans=''foriinrange(n):ans=ans+s[i]print(ans)

まとめ

最短の解説になった気がする。文字列を操作する系の問題は苦手なので、精進したい。
では、また

↧

初心者から始めるJava、継承

March 16, 2020, 7:31 am

≫ Next: [Amazon Linux 2]公開鍵認証からパスワード認証へ変更

≪ Previous: Pythonで毎日AtCoder #7

追記2020/3/16
クラス名のつけ方で間違いがあったことを、コメントで指摘いただいたので訂正。

はじめに

この記事は備忘録である。
参考書レベルの内容だが、本記事に掲載するコードについては、
間違えたものが中心となる。これは実際にコーディング中に間違えた部分を掲載し、自分で反省するために投稿するという目的によるもの。
また、後日にJavaSilver試験問題の勉強を兼ねて復習するため、深い部分の話はここでは触れない。

環境

言語：Java11、JDK13.0.2
動作環境：Windows10

クラスの拡張

今まで書いてきたクラスはどれも独立して書かれたものだったが、毎回メンバ（フィールドとメソッド）を設定する必要があった。Catクラス程度ならば頑張れば作れるだろうが、膨大なメンバ（フィールドとメソッド）を持つクラスを毎回すべて書くのは現実的ではない。
Javaは、既存のクラスが持っているメンバをそのまま引き継ぎつつ、独自のクラスを作るためのクラスの拡張(extend)機能がある。

extendedHousecat

classWildCat{protecteddoubleweight;protecteddoubleheight;protectedStringname;publicstaticintsumCats=0;publicwildCat(){weight=0.0;height=0.0;sumCats++;System.out.println("ニャーゴ、猫をまた一匹見つけたよ。");}publicWildCat(doublewe,doublehe){weight=we;height=he;sumCats++;System.out.println("ニャーゴ、猫をまた一匹見つけたよ。");System.out.println("見つけた猫は、体重"+weight+"kg、身長"+height+"cmみたい。");}publicvoidmeasureWeightHeight(doublew,doubleh){weight=w;height=h;System.out.println("この猫を計測してみました。");System.out.println("体重は"+weight+"kg、身長は"+height+"cmあります。");}publicstaticvoidcountCats(){System.out.println("全部で"+sumCats+"匹の猫を見つけたよ。");}}//ヤマネコ(Wildcat)のクラスをベースに、イエネコ(Housecat)のクラスを作ろう。classHouseCatextendsWildCat{privateStringcollorColor;privateStringnickname;publicvoidcallNickname(Strings){nickname=s;System.out.printlm("この猫に、新しく"+nickname+"ってニックネームを付けたよ。");}}

ヤマネコ(WildCat)クラスを拡張して、イエネコ(HouseCat,Cat……色々呼び方はある)クラスを作った。このとき、WildcatとHouseCatは親と子の関係になり、それぞれsuper classとsub classになる。

スーパーなのかサブなのか

WildCatクラスを拡張したHouseCatクラスには、親であるWildCatクラスが持っていたメンバ（フィールドとメソッド）が引き継がれているので、

HouseCat cat1 = new HouseCat();
cat1.measureWeightHeight(5.0,50.5);

とすることで、体重5.0kgで身長50.5cmのHouseCatオブジェクトを生成できる。
もちろん、collorColor(首輪の色)とnickname(あだ名)フィールドも持っているし、
public void callNickname()メソッドであだ名をつけることもできる。

あえて親のコンストラクタを使いたい

HouseCatクラスにはコンストラクタがないが、sub classでコンストラクタを用意しなかった場合、super classのコンストラクタのうち引数のないコンストラクタが、HouseCatオブジェクトを生成したときに自動的に呼び出される。今回はpublic WildCat()の方だ。
だが例えば、super(8.0,60.8)としてコンストラクタ内で呼び出してやれば、8.0kg、60.8cmのイエネコとして呼び出されることになる。

privateより内向的で、privateより社交的

WildCatクラスのフィールドがいつもと違うのに気が付いただろうか？（実はここまで書き進めてから直した）。protectedは、「同じクラスか、子であるサブクラスからであればアクセスできる」という意味の修飾子になる。
サブクラスをどんどん作って発展させたいスーパークラスになると予想できるときは、protectedにしておくと後から扱いやすいだろう。
アクセス制限としてはパッケージも控えているが、ここでは割愛。

終わりに

継承後のサブクラスが持っていなければならないもの、スーパークラスのメンバがどこからまでのアクセスを認めているのか。こういった問題にまだ悩まされているので、ここの理解はまだまだ甘いのが現状。
以前扱ったJava11のリファレンスも、少し覗いただけでextendsがわちゃわちゃと出てきている。この家系図を理解したとき、本当のJavaが見えてくるのだろう、多分。

参考

出来るだけ自分で変数や式を書いてコンパイルしているので、完全に引用する場合はその旨記述する。

やさしいJava 第7版
 Java SE11 Silver 問題集（通称黒本）

Java® Platform, Standard Edition & Java Development Kit
バージョン11 API仕様

↧

[Amazon Linux 2]公開鍵認証からパスワード認証へ変更

March 16, 2020, 7:50 am

≫ Next: 関数と引数と戻り値

≪ Previous: 初心者から始めるJava、継承

内容

EC2への接続方法を公開鍵認証からパスワード認証へ変更する

類似記事
(Amazon Linux 2の)sshd_configとauthorized_keysを学ぶ

手順

対象のEC２へSSH接続して、ユーザをrootへ切り替えます。

sshd_configのバックアップ取得

設定変更を行う前には必ずバックアップを取得しておきます。

# cd /etc/ssh/
# pwd
/etc/ssh

# ls -l
total 608
...
-rw-r--r-- 1 root root       2276 Mar 15 12:25 ssh_config
-rw------- 1 root root       3977 Mar 15 12:04 sshd_config
...

# cp -p sshd_config sshd_config_yyyymmdd
# ls -l
total 608
...
-rw-r--r-- 1 root root       2276 Mar 15 12:25 ssh_config
-rw------- 1 root root       3977 Mar 15 12:04 sshd_config
-rw------- 1 root root       3977 Mar 15 12:04 sshd_config_yyyymmdd
...

sshd_config設定変更

sshd_configの設定を変更していきます。
(変更前)
#PubkeyAuthentication yes
PasswordAuthentication no

(変更後)
PubkeyAuthentication no
PasswordAuthentication yes

# vi sshd_config
# cat sshd_config | grep PubkeyAuthentication
#PubkeyAuthentication yes
PubkeyAuthentication no

# cat sshd_config | grep PasswordAuthentication
PasswordAuthentication yes
#PasswordAuthentication no

# systemctl restart sshd.service

viコマンドで設定変更を行い、cat+grepで変更箇所が問題なく変更されていることを確認します。
その後、systemctlコマンドでsshd.serviceを再起動します。

パスワード認証での接続確認

Teratermを使用して、パスワード認証でログインできるかを確認します。
その際、現在の接続は保ったまま行ってください。

IPアドレスを入力してOKを押下します。

ユーザ名とパスワードを入力してブレインパスワードを使う(L)を選択して接続します。

接続できました。

終わり

これでパスワード認証へ変更が出来た。
出来たがパスワード認証はあまりよろしくないので元に戻しましょう。

# mv sshd_config_yyyymmdd sshd_config
# systemctl restart sshd.service

↧

関数と引数と戻り値

March 16, 2020, 7:51 am

≫ Next: Mac Homebrewで最新のMySQLをインストールする

≪ Previous: [Amazon Linux 2]公開鍵認証からパスワード認証へ変更

関係性について

翻訳機、消費税に例えると下記の写真の通りになります↓↓

翻訳してください。

と言って「翻訳」と定義した箱に野球を入れて渡すと、baseballとなります。

消費税かけて下さい。

と言って「消費税」と定義した箱に 1万円を入れて渡すと
1万1000円となります。

一度関数名を定義すれば、
箱に何かを入れて「翻訳！」とか「消費税！」と言って呼び出すだけで、
それぞれの処理を実行してくれます。

記述方法

function関数名(引数){処理内容return文}関数を使う

上記のようになり、
return文を使用すると、
処理を終了し、処理結果を返すことが出来ます。
（戻り値のことです。）

消費税を例として、見ていきましょう↓↓

functiontax(price){vartax=price*1.10;returntax;}console.log(tax(1000));

上記の記述をすると下記にようになります↓↓

消費税など、
これからも変更されるであろうものは、
関数として、定義しましょう。

本日は以上になります。

ありがとうございました。

↧

目的

実施環境

実施方法概要

実施方法詳細

インストール

動作確認

Hello World!してみる

まとめ

参考

はじめに

作成の流れ

htmlをまずは書いていく

JavaScriptを書いていく

入力された値を読み取る

追加ボタンを押すことで入力された値を追加する

入力した値の表示

ボタンの切替

削除ボタンを押すとリストから削除される

ラジオボタンを押すことでリストの表示を切り替える

おわりに

はじめに

画像の収集

プログラム

インポート

学習データの前処理

学習データとテストデータに分ける

AIのモデルを定義

モデルの構造

モデルの学習

実行結果

学習済みモデルをテストする

最後に

IT業界見取り図

システム開発のプロセス

業種と守備範囲

業種と技術要素

最後に

【Qiita】記事の画像に枠線をつける方法

記述方法

画像への枠適用：実例

枠がない場合

【Qiita】表（テーブル）の書き方

表の書き方と注意点を実例で解説

表の書き方（左寄せ「|:--|」）

表の書き方（右寄せ「|--:|」）

表の書き方（中央寄せ「|:-:|」）

表の書き方（複数列）

自動補完による表枠組みの作成

4列２行の表

10列10行の表

Step Functionsとは

Step Functionsの作成

Step Functionsの書き方

Type

Resource

Parameters

OutputPath

Next

Catch

Step Functonsで躓いたこと

Parllel でのエラー処理を実行してみる

Parallelの注意ポイント

１．上記の「Parallelでcatch」は正常終了しているように見えますが・・・

２．parallelの出力は・・・

あとがき

Qiitaにyoutubeを埋め込む方法

youtubeへのリンク貼り方

iframeによる埋め込み（※使えない）

画像形式の埋め込み（※使えない）

まとめ

初めに

背景

やりたいこと

ざっくりとした方針

前提

手順

1.Firebase上にプロジェクトを2つ作成する．

2. それぞれのAPIキー等を.envに登録する.

3.firebaseの初期化処理を記述する.

4. NODE_ENVの値を設定できるようにする．

2. それぞれのAPIキー等を`.env`に登録する.

4. `NODE_ENV`の値を設定できるようにする．

6.`.env`に記述した値の移植

7． `deploy`のためのキーの設定

8. `.circleci/config.yml`の記述

2-2　コーディング