amareloのブログ(仮)

IT系勉強会で感じた想いや知見をメインに書いていきます。

JAWS-UG CLI専門支部 #154R S3入門 参加レポート

5/25 JAWS-UG CLI専門支部 #154R S3入門 に参加しましたので、レポートを書くのと同時に、ハンズオンでやったことの復習を書きます。

目次

イベントページ

jawsug-cli.connpass.com

今回のハンズオンでやったこと

以下の通りです。事前準備として、Cloud9上にハンズオン環境を構築しました。 ハンズオンでは、Cloud9のターミナルでコマンド実行します。

S3について

今回話に上がったポイントを以下に示します。

  • S3はオブジェクトストレージ
  • バケット」というオブジェクトコンテナにオブジェクト(ファイル)を格納する。
    • バケットは世界でユニーク(一意)である必要がある。
  • オブジェクトは、オブジェクトデータとメタデータで構成される。
  • オブジェクトは、バケット+キー+バージョンIDの組み合わせで、一意に識別される。
  • 耐久性はイレブンナイン(可用性は99.99%)
  • S3は結果整合性モデルが使われているため、データの更新と削除の場合は即時反映されない。
  • 仮想ホスティングとWebホスティングは違う。
    • 仮想ホスティングの場合は、ファイルフルパスでないとアクセスできない。
    • Webサイトとして公開したいならば、Webホスティングを設定すること。
  • グローバルサービスだが、バケット作成の際はリージョンを指定する必要がある。

また、開発者ガイドの「はじめに」を読むだけでも、S3への理解が深まるとのことです。

docs.aws.amazon.com

感想

この後、ハンズオンで実施した手順を自分の解釈も追記して書こうと思います。長くなるので、先に全体の感想を書きます。

SQSとSNSの時も参加しましたが、ブログには書きませんでした。しかし、CLIハンズオンガイドに、

  • 「完了すること」を最優先すること
  • 必ず復習すること
  • オリジナル手順をアウトプットすること

について書かれていました。今回からこの点に言及されたことにより、今回のハンズオンからはとにかく体感し、自分なりの解釈をインプットし、それをブログでアウトプットすることに努めようと思いました。

そのためか、余裕をもって完走出来ました。SQSとSNSの時も楽しかったものの、ついていくのがやっとでした。今回は、純粋にハンズオンは楽しいと思えて、前回以上に受講して良かったと思えました。

過去のSQS入門、SNS入門のハンズオンもやり直して、サービスの理解とコマンドの理解を深めたくなりました。

ハンズオンで実施した手順(再構成)

今回のハンズオンの手順は以下にあります。しかし、自分自身の理解のために、波田野さんの手順より細かく書こうと思います。くどいかもしれませんが、ご容赦ください。

※ハンズオン手順(波田野さん作成) prototype-handson-cli.s3-website-ap-northeast-1.amazonaws.com

事前準備

ハンズオンでは、IAMロールを作りIAMロール「AmazonS3FullAccess」を付与しました。これがないと、S3にバケットを作ることもオブジェクトを作ることもできません。

事前作業. Cloud9用ロールへのIAMポリシー追加 — ハンズオン(簡易版): S3入門 - ハイレベルコマンド活用

1.S3バケットの構築
①デフォルトリージョンの設定
  • AWSデフォルトリージョンを変数[AWS_DEFAULT_REGION]に格納します。
export AWS_DEFAULT_REGION='ap-northeast-1'
バケットプレフィックスを指定
S3_BUCKET_PREFIX='handson-cli-s3'
AWS_IDの取得と設定
  • AWS_IDを取得して変数[AWS_ID]に格納します。変数の値を出力して確認します。
AWS_ID=$( \
  aws sts get-caller-identity \
    --query 'Account' \
    --output text \
) \
  && echo ${AWS_ID}
バケット名設定
S3_BUCKET_NAME="${S3_BUCKET_PREFIX}-${AWS_ID}" \
  && echo ${S3_BUCKET_NAME}
⑤変数格納状況の確認
  • 変数が想定通りに格納されているか確認します。
  • ちゃんと格納されていれば、変数部分に想定している値が表示されます。
cat << END

  # AWS_DEFAULT_REGION:"ap-northeast-1"
    AWS_DEFAULT_REGION="${AWS_DEFAULT_REGION}"
  # S3_BUCKET_NAME:"handson-cli-s3-XXXXXXXXXXXX"
    S3_BUCKET_NAME="${S3_BUCKET_NAME}"

END
バケット構築

mb はバケット作成コマンドです。--region でバケットを作成するリージョンを指定します。

aws s3 mb s3://<バケット名> --region <リージョン>

変数が正しく格納されていることを確認したら、以下のコマンドを実行します。 - ①で指定したリージョンに、④で設定した変数のバケットを作成します。

aws s3 mb s3://${S3_BUCKET_NAME} \
  --region ${AWS_DEFAULT_REGION}
バケットの存在確認

aws s3 ls コマンドで、S3上に存在するバケットをリスト表示します。

  • S3バケットが存在することを確認するために、以下のコマンドを実行します。
aws s3 ls | grep ${S3_BUCKET_NAME}
2.S3オブジェクトの操作

バケット名変数[S3_BUCKET_NAME]の指定は省略します(1.②~④と同じため)。

(1)一時ファイル用ディレクトリの作成
①変数[DIR_TMP]にディレクトリを指定します。
DIR_TMP="${HOME}/environment/tmp-handson-cli-s3"
ディレクトリを作成します。
  • mkdirコマンドの- pオプション(--parentsオプション)は、ディレクトリがなくてもエラーを出さずにディレクトリを作成するオプションです。
mkdir -p ${HOME}/environment/tmp-handson-cli-s3
ディレクトリが存在することを確認します。
  • lsコマンドの -d オプション(--directory オプション)は、ディレクトリそのものの情報を表示するオプションです。
ls -d ${HOME}/environment/tmp-handson-cli-s3
④変数に正しい値がに格納させていることを確認します。
  • 合っていれば、正しいパラメータ値に値が入っています。
cat << END

  # 1. S3_BUCKET_NAME:"handson-cli-s3-XXXXXXXXXXXX"
       S3_BUCKET_NAME="${S3_BUCKET_NAME}"
  # 2. DIR_TMP:"${HOME}/environment/tmp-handson-cli-s3"
       DIR_TMP="${DIR_TMP}"

END
(2)ファイルアップロード
①一時ファイル用ディレクトリに移動します。
cd ${DIR_TMP}
②S3バケットにオブジェクトが存在しないことを確認します。

`aws s3 ls s3://<バケット名>/' でバケット内のオブジェクトをリスト表示します。

  • 以下の通りコマンド実行します。この時点では結果に何も出力されません。
aws s3 ls s3://${S3_BUCKET_NAME}/
③変数[S3_OBJECT_NAME]にアップロード用ファイル名を設定します。
S3_OBJECT_NAME='upload.txt'
④変数[FILE_UPLOAD]にファイルアップロード用フォルダパスを格納します。
FILE_UPLOAD="${DIR_TMP}/${S3_OBJECT_NAME}"  && echo ${FILE_UPLOAD}
⑤アップロード用のファイルを作成します。
  • touch コマンドは、ファイルのタイムスタンプを変更するコマンドですが、ファイルが存在しない場合は、空(0バイト)のファイルを作成します。
touch ${FILE_UPLOAD}
⑥作成したファイルをS3にアップロードします。

ローカルディレクトリからS3バケットにオブジェクト(ファイル)をアップロードする場合は、cpコマンドを使います。

aws s3 cp <ローカルディレクトリ名> s3://<バケット名>

以下の通りコマンドを実行して、⑤で作成したファイルをアップロードします。

aws s3 cp ${FILE_UPLOAD} s3://${S3_BUCKET_NAME}/
⑦S3バケットにファイルが作成(アップロード)されたことを確認します。

※コマンドだけでなく、マネジメントコンソールからもファイルが作成されたか確認します。

aws s3 ls s3://${S3_BUCKET_NAME}/
(3)オブジェクトダウンロード
①変数[S3_OBJECT_NAME]にダウンロードするS3オブジェクトを指定します。
S3_OBJECT_NAME='upload.txt'
②変数[FILE_DOWNLOAD]にダウンロードファイルのローカル保存名を指定します。
FILE_DOWNLOAD="${DIR_TMP}/download.txt" && echo ${FILE_DOWNLOAD}
③S3オブジェクトをダウンロードします。
  • オブジェクトをダウンロードする際も、cpコマンドを使います。
aws s3 cp S3://<バケット名>/<オブジェクト名> <ダウンロード先ディレクトリ>
  • 以下のコマンドを実行して、ファイルをダウンロードします。
aws s3 cp s3://${S3_BUCKET_NAME}/${S3_OBJECT_NAME} ${FILE_DOWNLOAD}
④ダウンロードしたファイルが存在することを確認します。
ls ${FILE_DOWNLOAD}
(4)S3オブジェクトの削除
①S3オブジェクトを削除します。
  • オブジェクトを削除する際は、rmコマンドを使います。
aws s3 rm s3://<バケット名>/<オブジェクト名>
  • 以下のコマンドを実行して、ファイルを削除します。
aws s3 rm s3://${S3_BUCKET_NAME}/${S3_OBJECT_NAME}
  • ファイルが削除されたことを以下のコマンド実行、またはマネジメントコンソールより確認します。
aws s3 ls s3://${S3_BUCKET_NAME}/
(5)ファイルのアップロード(バケット/ディレクトリ)
①変数[S3_OBJECT_PREFIX]に、ファイルのアップロード先ディレクトリを指定します。
S3_OBJECT_PREFIX='dir1'
②S3バケットにアップロードします。
  • 以下のコマンドを実行した際、S3_OBJECT_PREFIXで指定したフォルダがなければ、作成されます。
aws s3 cp ${FILE_UPLOAD} s3://${S3_BUCKET_NAME}/${S3_OBJECT_PREFIX}/
(6)S3オブジェクトの移行
①移動元のS3バケット名とS3オブジェクトパス名を指定します。
  • S3オブジェクトを移動させるためには、mvコマンドを使います。
aws s3 mv <移動元オブジェクト名> <移動先オブジェクト名>
  • 以下のコマンドを実行して、移動元オブジェクトを指定します。
S3_BUCKET_NAME_SOURCE="${S3_BUCKET_NAME}"
S3_OBJECT_PREFIX_SOURCE='dir1/upload.txt'
②移動先のS3バケット名とS3オブジェクトパスを指定します。
S3_BUCKET_NAME_DESTINATION="${S3_BUCKET_NAME}"
S3_OBJECT_PREFIX_DESTINATION='dir2/moved.txt'
③以下のコマンドでS3オブジェクトを移動します。
aws s3 mv s3://${S3_BUCKET_NAME_SOURCE}/${S3_OBJECT_PREFIX_SOURCE} \
  s3://${S3_BUCKET_NAME_DESTINATION}/${S3_OBJECT_PREFIX_DESTINATION}
④移動元にS3オブジェクトが存在しないことを確認します。
! aws s3 ls s3://${S3_BUCKET_NAME_SOURCE}/${S3_OBJECT_PREFIX_SOURCE}
⑤移動先にS3オブジェクトが存在することを確認します。
aws s3 ls s3://${S3_BUCKET_NAME_DESTINATION}/${S3_OBJECT_PREFIX_DESTINATION}
(6)S3オブジェクトのパス単位削除
①変数[S3_OBJECT_PREFIX]に、削除するS3ディレクトリ名を格納します。
S3_OBJECT_PREFIX=dir2
②削除前に、削除するディレクトリが存在することを確認します。
aws s3 ls s3://${S3_BUCKET_NAME}/${S3_OBJECT_PREFIX}
③以下のコマンドで、ディレクトリ配下のオブジェクトを含めてすべて削除します。
  • recursiveオプションをつけることで、再帰的にディレクトリ内のファイルを含めて削除します。
aws s3 rm \
  --recursive \
    s3://${S3_BUCKET_NAME}/${S3_OBJECT_PREFIX}
④削除したディレクトリが存在しないことを確認します。何も表示されなければ完了です。
! aws s3 ls s3://${S3_BUCKET_NAME}/${S3_OBJECT_PREFIX}
3.Gitリポジトリ取得~S3バケットへの転送

今回は事前に用意されていたGitリポジトリからコンテンツを取得しました。これは4.で使うものです。

①Gitリポジトリの取得元を指定します。
GIT_REPOSITORY_ORIGIN='https://github.com/opelab/jawsug-cli-sample-web.git'
リポジトリ保存用ディレクトリを指定します。
DIR_PARENT="${HOME}/environment/contents-handson-cli-s3"
リポジトリ保存用ディレクトリを作成します。
mkdir -p ${HOME}/environment/contents-handson-cli-s3
ディレクトリが作成されたことを確認します。
ls -d ${HOME}/environment/contents-handson-cli-s3
⑤Gitリポジトリディレクトリ名を指定します。
GIT_REPOSITORY_NAME='jawsug-cli-sample-web'
⑥Gitリポジトリを取得します。
cd ${DIR_PARENT} \
  && git clone ${GIT_REPOSITORY_ORIGIN}
⑦Gitリポジトリディレクトリが存在することを確認します。
ls -d ${DIR_PARENT}/${GIT_REPOSITORY_NAME}
⑧転送ファイル用ディレクトリを指定します。
DIR_S3_TRANSFER="${HOME}/environment/contents-handson-cli-s3/jawsug-cli-sample-web"
⑨転送除外オブジェクトを指定します(gitignoreなどgitを含むファイルとします)。
S3_SYNC_EXCLUDE=".git*"
⑩S3バケット上のディレクトリに転送します。
  • S3バケットとローカルを同期させたい場合は、syncコマンドを使います。
  • exclude オプションで動機対象外のオブジェクトを指定、aclオプションはアクセス公開範囲を指定します。
aws s3 sync <ローカルファイルのディレクトリ> s3://<バケット名> --exclude <同期対象外オブジェクト> --acl <公開範囲>
  • 以下のコマンドでオブジェクトを転送します。
dir_current=$(pwd)
cd ${DIR_S3_TRANSFER} \
  && aws s3 sync . "s3://${S3_BUCKET_NAME}/" \
    --exclude "${S3_SYNC_EXCLUDE}" \
    --acl public-read \
  && cd ${dir_current}
⑪S3バケットに転送オブジェクトが存在することを確認します。
aws s3 ls s3://${S3_BUCKET_NAME}/

結果、以下のように表示されます(例)。

2020-05-25 01:23:45        186 error.html
2020-05-25 01:23:45      55560 img.jpg
2020-05-25 01:23:45        255 index.html
⑫仮想ホスティングエンドポイントを取得します。
S3_BUCKET_ENDPOINT=" \
  ${S3_BUCKET_NAME}.s3.$( \
    aws s3api get-bucket-location \
      --bucket ${S3_BUCKET_NAME} \
      --output text \
  ).amazonaws.com" \
  && echo ${S3_BUCKET_ENDPOINT}
⑬オブジェクトにアクセスできることを確認します。
  • 変数[S3_OBJECT_NAME]にオブジェクト名を指定します。
S3_OBJECT_NAME='img.jpg'
  • オブジェクトURLを出力し、表示されたURLにアクセスできることを確認します。
URL_S3_OBJECT="${S3_BUCKET_ENDPOINT}/${S3_OBJECT_NAME}" \
  && echo ${URL_S3_OBJECT}
4.webサイトホスティングの設定

バケット名変数[S3_BUCKET_NAME]の指定は省略します(1.②~④と同じため)。

①インデックスドキュメント名を指定します。
S3_DOC_INDEX='index.html'
②エラードキュメント名を指定します。
S3_DOC_ERROR='error.html'
③Webサイトホスティング設定をします。
aws s3 website "s3://<バケット名>" --index-document <indexファイル名> --error-document <エラーページファイル名>
aws s3 website "s3://${S3_BUCKET_NAME}" \
  --index-document ${S3_DOC_INDEX} \
  --error-document ${S3_DOC_ERROR}
④Webサイトエンドポイントにアクセスできるか確認します。
  • 以下のコマンドを実行後、出力されたURLにアクセスできることを確認します。
S3_BUCKET_WEBSITE_ENDPOINT=" \
  ${S3_BUCKET_NAME}.s3-website-$( \
    aws s3api get-bucket-location \
      --bucket ${S3_BUCKET_NAME} \
      --output text \
  ).amazonaws.com" \
  && echo ${S3_BUCKET_WEBSITE_ENDPOINT}
⑤エラードキュメントにアクセスできるか確認します。
  • ④で出力されたURL末尾に適当な文字(/z/ など)を加えて実行します。
  • エラー画面が表示されることを確認します。
5.署名付きURLの利用

バケット名変数[S3_BUCKET_NAME]の指定は省略します(1.②~④と同じため)。

①署名対象S3オフジェクトを指定します(「img.jpg」とした場合)。
S3_OBJECT_NAME='img.jpg'
②署名付きURLの有効期限(秒)を指定します。
S3_PRESIGN_SECONDS='120'
③オブジェクトの署名付きURLを作成します。
  • 署名付きURLを発行するには、presign コマンドを使います。
aws s3 presign s3://<バケット名>/<オブジェクト名> --expires-in <有効期限(秒)>
  • 以下のコマンドを実行して、署名付きURLを発行します。
aws s3 presign s3://${S3_BUCKET_NAME}/${S3_OBJECT_NAME} \
  --expires-in ${S3_PRESIGN_SECONDS}
④結果に表示されたURLにアクセスできることを確認します。
⑤指定した有効期限が過ぎたら、URLにアクセスできなくなったことを確認します。
  • 「This XML file does not appear to have any style information associated with it. The document tree is shown below.」と表示されます。
6.後始末

使わないS3バケット、ハンズオン用ディレクトリを削除します。また、Cloud9ロールからS3フルアクセスポリシーをデタッチします。

後始末手順は以下の通りです。自分はこのブログを書いたり復習するために残していますので、まだ実施していません。

後始末1. S3バケットの破棄

後始末2. ハンズオン用ディレクトリの削除

事後作業. Cloud9用ロールからのポリシーのデタッチ

※Cloud9環境も不要ならば、事前準備の5以降(後始末も含みます)を実施します。

以上で終了です。

最後に

ハンズオンの復習をすることで、CLIについて、S3の動きについて、理解を深められたと実感できました。 今後のハンズオンは、必ず復習ありきで臨もうと思います。できる限りブログも書こうと思います。 かなり長いブログになってしまいましたが、最後まで読んでいただいた方は本当にありがとうございました!

Webエンジニア勉強会inVR 第2回 参加レポート

Webエンジニア勉強会inVR 第2回 に参加しましたので、レポートを書きます。

目次

イベントページ

study-in-virtual.connpass.com

LT内容

読書から始めるポモドーロテクニック 果物リンさん
資料

speakerdeck.com

ポモドーロテクニックとは
  • 25分集中・5分休憩を繰り返すプラクティス。
    • 4回繰り返したら15分休憩する。
  • 一つのことに集中して決めたこと以外はやらない。

  • 運用が難しい

    • タイマー押し忘れる。
    • 一度集中したら休憩挟みたくない。
    • 割り込み対応もしなければならない。
      • 読書でポモドーロしてみたらいいんじゃ?
読書から始めてわかったこと
  • 一人の読書時間なら割り込みが発生しにくい
  • 読書は集中を持続するのが難しい。
  • 実践してみて捗ることがわかった。
  • メリハリが聞く。
仕事にも取り入れてみる
  • リモートワークとポモドーロは相性がよい。
  • 非同期コミュニケーションが主体なので割り込みが少ない。
  • タイマー押し忘れる問題は残る。
    • 気づいた時に押す。
    • 忘れていた分は押していたことにする。
Tips
  • Kanbanflow(Trello + タイマーなSaaS)は、タスクを仕事用、プライベート用と2つに分けられておすすめ(有料)。
  • カスタマイズしてもいいらしい。
    • スパンや休憩時間を長くしてもよい。
  • 読書はポモドーロテクニック運用の習慣づけにおすすめ!
まとめ
  • 読書からポモドーロをはじめてみるのがよい。
  • 家にいる今こそはじめてみよう。
  • ポモドーロはいいぞ!
リモートワーク時代のチーム運営 せとあずさん
資料

slides.com

コミュニケーションについて
  • 積極的なペア作業、画面共有の活動をすることで、会議室争奪戦からの解放され、トータルのコミュニケーションはむしろ増えた。
  • 技術的な作業に関してはリモートの方がやりやすい
  • リモートワークは個人作業、ではない。

  • 画面共有、共同編集ツールの使い分け

    • 通話している時にTPOに応じてツールを切り替えながら作業するのは無理がある。
    • Slackの画面共有とConfluenceを併用するケースが一番多い。
    • 画面共有時の予測変換によるネタバレがある。デスクトップ共有でなく、アプリケーション共同編集で使うしか回避策がない。
  • リモートに良くある話

    • 細かいニュアンスが伝わらない。
    • 雑談重要。
      • 細かいニュアンスとか雑談に頼らないで、どう成果物を生み出すかを考えてコミュニケーションすることが大切。
  • 成果主義かメンバーシップ重視か

    • 成果主義とメンバーシップのバランスをとるのがマネジメントの仕事。
    • これまでもそうだったが、重要度が増した。
    • 全社員ノートPCでVPN接続も問題ないからこんな話ができている。そうでなければ修羅場。
    • インフラ重要!
作業環境の話
  • 自分自身の環境にあまり困っていない

    • 技術同人誌の執筆や検証用の環境があるため、机はある、モニターある、回線も引いている。
      • リモートワーク環境充実のために、同人誌を書きましょう!(ではない)
  • リモート環境をめぐる問題

    • 家族の有無やチームごとに事情が違う。
      • しかし、マネジメントする立場からするとリモートでやるなら全部そっちにそろえてほしい。
      • 全社強制リモートになって選択肢がないので、やりくりできている部分がある。
メンバーの育成
  • リモートワークは自走できるソフトウェアエンジニアだといいが、駆け出しはつらい。
    • 自分もちゃんと育成されたわけではないので生存バイアス。
  • エンジニアを目指したのは、コミュニティの先人が技術を追求する様子が楽しそうだったから。
    • 当時はウェブ会議システムなどはなく、メーリングリストやWeb日記だったが、ネットでの交流だった。
  • 独学で技術を習得するには動機付けは何よりも重要。
  • 職場でもコミュニティでも、これからエンジニアになる人たちに技術の追求することの魅力を見せるのが自分たちの勤め。それはリモートでも可能なこと!
個人開発 ツイッターで通話を募集できるサービスを作った話 れとると・きゃりーさん
資料

speakerdeck.com

  • 家で1人なので誰ともしゃべらない。
    • 誰かと通話したいが、通話に誘うのは大変
技術的背景
  • 通話部分は、Skyway(NTTコミュニケーションズ)を使用。

    • 今回は1:1の電話モデルを使用。
    • FirestoreのユーザのドキュメントにSkywayのクライアント接続情報(peerID)を持たせる。
    • CloudFirestoreに接続情報を格納する。
    • フォロワーが接続情報を取得し、相手の状態を取得しにいく。
    • フォロワーが通話をかける。それに応答すれば通話成立。
  • 通話時間の制限

    • 自動で通話を切断できないため、15分超えたら通話を終了するようアラート出すようにした。
  • CSS

    • tailwindcss(Utilクラスを提供してくれるCSSフレームワーク)を使用。よき!
    • サイトの横幅を狭くして、レスポンシブルを考える手間を削減した。
  • インフラはVercleを使用

    • GitHubと連携して自動デプロイできる。
    • 個人だと無料のため、個人開発者におすすめ。
リリース後
  • Twitterがそこそこバズってたため、そこそこ使われ始めた。
    • VTuberの企画や配信などに使われ始めた。
よかったこと
  • 初期段階からデプロイして試したので、多くのフィードバックを得られた。
  • 価値検証のサイクルが早められた。
  • 開発の進捗を逐次公開する。

    • ファンが得られやすい。
    • 公開時に使ってくれる人が増えるため、ブーストになる。
  • ランニングコストを抑えられた。

    • 長く運営すればするほど、成功する確率は高まる。
まとめ
  • TwiCall、みんなつかってね。
  • 個人開発楽しいよ!
せっかくの在宅なので推しと勤務する にしこりさぶろ~さん

※LTの途中で離席する事情が入り、あまりメモをすることができませんでした。すいません。。。

資料

speakerdeck.com

在宅勤務はじまる前は
  • オフィス徒歩圏内だし在宅する必要ない。
  • 仕事とプライベートの切り替えがむずかしい?
  • 現在は、VRでミーティングするようになった。
リモートワーク欲ゼロから今日までの変化
  • 推しのパネルを置いてウェブ会議
  • ゲーム・アニメの画像やキャプチャ動画をZoomの背景に。
  • 自作モデルでアイドルとして在宅勤務
  • バ美肉LTをやってみた。めっちゃウケた!
  • グリーンバックの布やキャプチャーボードを導入
    • あらゆる端末の映像をリアルタイムに出力できるようにした。
    • 推しの世界との完全な融合が可能になった。
  • リアルタイムな「推しとの掛け合い」をLTで表現した。めっちゃウケた!
まとめ
  • VR/ARの世界が身近になった。
  • コロナ後も生かせる機材、ユニークな体験を手にすることができた!
  • 全員オンライン⇒オンラインだからこその挑戦がしやすい。
  • 自分から刺激的な時間を積極的に作り、自粛期間を楽しく!

全体の感想

昨今の在宅勤務を楽しく効果的に進めるための知見に溢れていて、楽しく参加でき勉強になりました。 自粛生活を何となく過ごすより楽しく過ごしたい!そう思わせてくれる勉強会でした。 特に、せとあずさんのLTの中で「技術を追求することの魅力を見せる」という言葉が出てきました。 自分もこの近年勉強会に参加することに積極的になれたのは、何らかの技術に打ち込んでいる人たちの姿がカッコよく見えたからだと考えています。 新人の方はもちろんですが、少しでも多くの方々にも伝わってほしいと思います。楽しく仕事ができるように。

Webエンジニア勉強会という名称ではあるものの、今回・前回ともに言語やフレームワークに特化しないテーマだったため、とても参加しやすかったです。 会の冒頭で前回のアンケート結果を紹介していましたが、「オンライン配信を見ているより、勉強会に参加した感じが強くて良い」という内容のコメント(違っていたらすいません)が紹介されていました。 自分も前回参加して、ZoomやYouTubeLiveでのオンライン勉強会とは少し違うという感触でしたが、このコメントを聞き納得しました。 しかし、参加したという感触だけで終わらないように気をつけようとも思いました。 VRでもオンライン配信でも、一つでも何か自分の血肉にすることが大事だと思います。その点に手法は関係ないと思いました。 自分も最近、オンライン勉強会に参加してインプットして終わることばかりでした。 参加したいオンライン勉強会が多いのは良いことですが、参加することが目的にならないよう「自分の血肉にするものを得る」こと意識して参加したいと思いました。

コロナの影響もありLT登壇から離れていましたが、自分もまた登壇したい気持ちが高まってきました!

第18回redmine.tokyo勉強会 参加レポート

5/23 第18回redmine.tokyo勉強会に参加しました。これまで、現地+オンラインで開催されてきましたが、今回はコロナの影響でオンラインとなりました。勉強会レポート、久々となりましたが、書こうと思います。

目次

redmine.tokyo とは?

「フリー(OSS)のプロジェクト管理ツール Redmine の恩恵を共有することを目的として、勉強会を開催したりチケットで課題や知見を共有するというような活動を、主に関東を中心に行うコミュニティです。」

以下リンクより転用させていただきましたが、上記の通りです。

redmine.tokyo

イベントページ

redmine-tokyo.connpass.com

第18回勉強会の内容

redmine.tokyo

講演・LTの概要

2020年5月リリース RedMica 1.1 新機能ハイライト @g_maeda さん
  • Redmineの次期バージョンの新機能を先行して使えるRedMica
  • RedMica1.1の新機能
RedMicaとは?
  • RedMicaはファーエンドテクノロジーRedmine、MyRedmineに使われている。
  • RedMicaはオープンソフトウェアとして公開されている。
  • Redmineの最新の開発成果が先行リリースされる。
RedMica1.1最新機能ハイライト

Redmine4.2(次期バージョン)にも入る機能を備えている。今回は80個ある修正変更の主要項目13個を紹介。

  • グループをウォッチャーとして入る。
  • ユーザアカウントのメールアドレスのドメインを制限できる。
    • ユーザが勝手に個人のスマホのメールアドレスを登録して、情報漏洩することを防ぐため。
  • チケット、Wikiページの添付ファイルをまとめてダウンロードできる。
  • 優先度の高いチケットの更新を通知するオプション
    • 通知メールの量を抑えることに効果がある。
  • CSVのインポート時のフィールドの対応関係を名前を基に自動推定して設定できる。
  • CSVインポート時に関連するチケットを設定できる。
  • プロジェクト一覧のデフォルト表示形式設定をリスト形式に固定できる。
  • チケット表示画面に「完了」「未完了」のバッジを表示
  • WIkiツールバーのテーブル挿入ボタン
  • Wikiツールバーのコードハイライトボタンのカスタマイズして、個人設定で固定できる。
  • 作業時間の詳細のグループ条件に「チケット」を追加
  • チケットをクローズできない場合の理由を表示
  • RedMica独自機能:ベクターアイコンに切り替え
これであなたもRedmine活動家 @MadoWindahead さん
資料

www.slideshare.net

Redmine警察、Redmineマイスター、Redmine活動家
  • Redmine警察は、ルールが守られているか、安心して使えているかを定期的にチェックする人
  • Redmineマイスターはいわゆる職人。使い方の理想を追いつつメンバー教育をしていく人
  • Redmine活動家は、活動からあるべき姿に到達させる人
Redmine活動家の定義

Redmine活動タブを見て、物事が予定通り進んでいるか、抜け漏れやミスや重複がないか、ありたい姿や価値に到達できる仕組みになっているかを確認して、あるべき姿に近づける活動を行う人。

活動家の敵は・・・事なかれ主義

活動家のレベルは以下の通り。

  • レベル1  - 自分の活動を見て抜け漏れや改善点を見つけ自主的に対応する人
  • レベル2

    • 仲間たちと活動を確認して相互調整を行う人
    • お互いに支援し合い効率的に進められる人
  • レベル3

    • 良い活動の横展開等を行い、活動状況から状況の指摘と是正提案を行える人
  • レベル4

    • あるべき姿を意識しその状態に近づける活動、不足分などを考え、自主的に実施できる人
    • 活動家がチケット作成、ルール作成等、介入することがある。
  • レベル5(革命家レベル?)

    • レベル1~4のメンバを叱咤激励、指導、教育を行いながら、活動そのものを変える人
地球都合問題対応とRedmine
  • 今はまさに乱世。新たな価値が生まれる時期・仕事のやり方も変わっていく!
  • 集まって相手を重視したやり方から、活動ログ・成果物を重視したやり方へ変わっていく、変えていく!
    • 人指向からタスク指向に
      • やっていることを見せられるような仕組みを。
      • 属人性から共同作業へ。
      • いかにツールを使いこなして業務をできるかがポイント。
  • Redmineをコミュニケーションハブに
「伝わるチケット」の書き方 @onozaty さん
資料

www.slideshare.net

伝わるチケットの重要性
  • チケットは起票したら終わりではなく、そのチケットを確認する人がいる。
    • 書いたチケットを確認する人が複数人いる
    • 確認時間の方が起票時間より長い。
  • 伝わるチケットを書くことで、確認にかかる時間を減らしたい。生産性の向上へ。
  • 他の人の作業時間を減らすために、自分に何ができるかを常に考えていく。
伝わるチケットの定義
  • 必要な情報がそろっている

    • チケットの確認者が欲しい情報を取りに行ける。
    • チケット起票時に必要な情報を入力することをチームの目標に。
  • 必要な情報の入力を手助けするもの

    • カスタムフィールド

      • カスタムフィールドを使って、必要な情報を入力項目として追加できる。
      • フィールド単位での検索も可能。
    • Redmine Issue Templates plugin

      • 必要な情報の入力欄を用意することができる(テンプレ化)
    • 使い分け

      • 選択肢やフォーマットが決まっているものはカスタムフィールド
      • 文章や画像を入力したいものは、Issue Templates
      • どちらか迷ったら、Issue Templatesがおすすめ。
      • 規則性が見えてきたらカスタムフィールドに。
より短い時間で理解できるためには
  • 情報を適した表現方法を使うことでより分かりやすく
  • 文章だけでなく、画像などで表現するのも良い。
  • アニメーションGIFにすると動きがあってさらに良い。アニメーションGIFは無料ツールで簡単に作成可能。
  • 表などはRedmineではフィルタやソートできないので、添付ファイルを使うと良い。

  • clipboard image paste プラグイン

一番重要なことは

チームの他のメンバのことを考えること。

Redmine管理者入門!BacklogとRedmineの違いと、基本的な考え方 ~ Backlogで物足りなくなったら ~」 @tw_yukiaさん
資料

www.slideshare.net

BacklogユーザのRedmineへのありがちな誤解
  • そんな変わらない?
  • 使いにくい?
  • 全然ちがう!たとえるならば、Backlogはカップ麺、Redmineはスーパーマーケット。
Backlogについて
  • Backlogは既読通知がわかりやすい。
  • Backlogの課題入力画面に、進捗率の概念はない。

  • Backlogは無料版ではカスタムフィールドを使えない。

  • ロールがプロジェクトごとに設定できない。
  • Backlogにはワークフローがない。

    • 権限設定の範囲がシステム共通で細かい制御には向いていない。
    • ワークフロー不要なので、すぐに使える。
  • Backlogは面倒な設定をしないでもすぐに課題管理できる。

  • Redmineは何から何まで細かく自分好みに設定できる。

  • カップ麺より美味しいラーメンを作るのは大変

    • 日ごろからRedmineが準備されているならいつもと変わらない。
    • 何もないところから準備するには、Backlogの方がはやい。
  • Redmine(スーパーマーケット)じゃないとできないことは結構ある。

    • トラッカ、ロール、ワークフロー、これを抑えればRedmineが楽しくなる。
  • 声かけ、周知徹底、運用でカバーを超えていく

  • システム化することで再現性を担保、プロセスを蓄積して改善しながら転用する。
    • そうすることで、Redmineが楽しくなっていく!
Redmine + Teams = TeleWork」 @saito0119 さん
資料

www.slideshare.net

世の中のテレワーク状況
  • 90%の会社がテレワーク推奨
  • 45%の人がテレワーク初めて
  • できない理由は、80%が自宅ネットワークやPC環境。60%がセキュリティ制度上の問題
  • 課題は
    • 柔軟な業務のアサインが難しい
    • コミュニケーションに負担がかかる
    • 職場の一体感が無くなる
齋藤さんの会社では
  • もともとオリパラ向けに準備を進めていた。
ツールの使い分け
  • テレワークでのチャットはTeamsを使っている。
    • ナレッジとしてでなくあくまでもチャットツール
    • 非エンジニアに人気がある。あちこちいじっていれば使えるため。
    • Plannerという小チームでのタスク管理機能もあり、使いこなせば、Redmineいらないチームもあるかも?
      • 古い情報を上手に隠したりできるので、Redmineにもほしい機能。
  • Redmineもテレワークで大活躍している。
    • しかし、非エンジニアの人には敷居が高い。
    • メンションやイイねボタンがないのが残念
    • 齋藤さんはもともとた拠点にいるメンバをRedmineで束ねていたので違和感なかった。
    • スピード感はTeamsの方が上?
初動とチケット化
  • チャットで大体の作戦が立つ。
  • 収集つかない場合は、Web会議で議論する。議事メモはチャットに流すか、WikiOneNoteにまとめる。
  • キーマンが「チケット切って」と言ったら、以降はタスク管理されていく。
動機と非同期
  • 電話
    • 完全な同期型で双方の時間を拘束。
  • Teams
    • リアルタイム型だが、応答は即時出なくてもよい。ただ放置すると、既読スルーと思われる。
  • Redmine
    • 通知・応答ともに非同期。
  • メール

    • 外から連絡を受ける「郵便」。非同期。
  • 結論は共存!間違いない。

  • 双方中途半端に強化せず、専門をきわめて使いこなしてほしい。
使い分け例
  • 読み捨てする場合はTeams
    • チャットは電話の代わり。資料を渡すなどRedmineで出来ることはそちらに寄せて一元管理する。
  • 今後永続的に利用し、ナレッジDBになるのがRedmine
    • 課題管理や情報管理をあえてRedmineに持ち込まない。
終わりに
  • ピンチはチャンス。なかなか普及しなかったRedmineを定着させるチャンス!
  • 職場のNewNormalは、今我々が作る。
ITシロウトがREDMINE在宅ワークについて考えてみた あいちゃん2号機さん
今自分が実現して見せたいこと
  • 日常業務はTeamsでのチャットや打合せ
  • Redmineでの進捗確認情報共有ですべてまかなう
  • きちんと記録を残す仕事はRedmineのチケットに移行
    • Teamsは情報を探すのにはむかない。
素人が考えるRedmineとは?
  • 何が欲しいか自分でもわかっていない。

    • 絶対的革新的な天元突破できるツールが欲しい
    • 誰もが効率よく仕事を終わらせたい。
  • わかってきたこと

    • 進捗という情報はみんなで作り上げるもの

      • Redmineは「心臓」である
        • ツールは手足。本当に流したいのは血液(情報)。その原動力は人間。
        • Redmineは適切に情報を送り出すための機能。
    • 情報は鮮度が命

      • Excelでそこまで更新できるか?プロジェクトはすぐにゾンビ化する。鮮度を保つのは難しい。
      • いつでもどこでも動ける心臓である、Redmineが必要。
  • 実現したいこと

    • 場所を問わずにいつでもどこでも使える環境を構築すること。
「優先度」機能をもっと便利に!使いこなそう! hin-t さん
Redmineにおける優先度設定
  • 優先度をつけるとどのチケットから完了させるべきか表現できる。
  • 重要なチケットが色分けされるので埋もれない。
  • 緊急度が高いものが一目瞭然。
  • どのチケットから着手すればよいかわかりやすい
  • ただし、優先度設定は手動でやらなければならない。
    • 優先度自動更新プラグインを開発。もっとRedmineを使いこなして好きになってほしい。
優先度自動更新プラグイン
  • チケット作成日からチケットの優先度を自動で更新。
    • 休日や営業時間を意識した作りになっている。
  • 時間の経過に伴いチケットの優先度を自動で変更し、担当者へ通知する。
  • RPA連携事例もある。
労力最小のGitHub/GitBucket連携プラグインの提案 @ak_iwasaki さん
Redmineリポジトリ機能について
  • ぶっちゃけ、GitHubが使えればいい!
労力最小の連携プラグイン
  • GitHubやGitBacketはWebHookでRedmineと連携する。
  • いろいろ課題はあるが、どなたか実装お願いします!
Redmine Japanで会いましょう Redmine Japan 実行委員長 川端 さん(@agilekawabataさん)

Redmine Japan 2020 開催決定!

開催趣旨
  • ツールを使いこなして生産性を上げる時代が来ている。
  • Redmineがいまだにプロ向けツールと思われているが、テレワーク導入企業が増えている今、Redmineを使ってもらえるきっかけとしたい。
日時・場所など
  • 日時:2020年9月18日(金) AM10:00~予定 
  • 場所:アーツ千代田
  • 規模:200名
  • 元学校のため、学校の机といすを使われる。
  • キーノートスピーチ

感想とまとめ

自分は今の職場でRedmine(Backlogも)を使っていませんが、個人として仕事への向き合い方も勉強できるため、去年からredmine.tokyoに参加してきました(過去2回とも配信参加)。Redmineのノウハウにとどまらないお話を聞けて本当に勉強になります。現地に行って、登壇者の熱量を感じ、参加者と想いを共有したかったですが、完全オンラインでも過去2回と雰囲気変わらず受講することができて安心しました!音声が途切れるなど大きなトラブルもなかったです。資料をしっかりと見ながら話を聞けたのも良かったです。

懇親会も楽しかったー!!今回はじめての懇親会参加でしたが、初見者にもやさしい方々で参加しやすいコミュニティだと再認識しました。

コロナ脅威がなくなったら、いつの日か現地で参加(できるならば登壇)したいです!

次回は、7/11 redmine.osaka。こちらも参加したいです!!

Vivaldiを2週間使ってみた感想

前回、Vivaldi(ヴィヴァルディ)をインストールしてみたことを書きました。あれから2週間経過しましたので、改めて使ってみた感想を書きます。

前回記事

amarelo24.hatenablog.com

動作確認した結果

今のところ、

Vivaldiを使ってみましたが、画面が崩れたなどの問題は見当たりませんでした。 普通にググってウェブサイト閲覧しても、今のところ気になる点はありませんでした。

使ってみた感想(あくまでも個人的見解です)

Chromeより起動が早い(と思う)

自分の主観ですが、初回の起動についてはChromeより早く感じました。 ただ、メモリ使用量はChromeとそれ程変わらないかも?(検証してないのでわかりませんが…)

画面二分割できて便利!

もともとVivaldiをインストールしようと思ったキッカケがこれなのですが、1画面1ブラウザで二分割表示できます。 ブラウザを使う作業に関しては、他のブラウザと比べて作業が楽になりました。 ただ、15インチのノートPCでは横が途切れてしまうことがあるのは致し方ないところです。 大きいサイズのディスプレイが欲しくなりました。もっと使い勝手がよくなるかもしれません。

※画面二分割の手順は、前回の記事を参照してください。

ウェブパネルが便利!

Twitterのようによく見るサイトは、ウェブパネルに登録し、タブを切り替えても固定して見えるようにすると便利です。 ブログを書く合間にTwitterのTLを見ることができます!

f:id:amarelo-n24:20200523024655p:plain

また、YouTubeを開いておいて動画見ながら作業もできます!

f:id:amarelo-n24:20200523024936p:plain

簡単な手順は以下の通りです。

①ウェブパネルに登録したいウェブサイトを開きます。

②+ボタン(赤枠)をクリックします。

③開いたページのURLが入力されていることを確認したら、+ボタン(青枠)をクリックします。

f:id:amarelo-n24:20200523025622p:plain

④アイコンが表示されれば完了です。

f:id:amarelo-n24:20200523030007p:plain

なお、ウェブパネルを削除する場合は、削除したいウェブパネル上で右クリックし、「ウェブパネルを削除」でできます。

ブラウザの機能でスクショが撮れて便利!

ブラウザの機能でスクショが撮れます。 画面の一部分ならば、Windowsの機能(PrintScreenやWindowsロゴ+Shift+s)でも十分かもしれませんが、 ページ全体のスクショを撮ることができます。 スクロールしないとならない部分も含め、ページ全体をスクショ撮りたいときには重宝します!

簡単な手順は以下の通りです。

1.ブラウザ右下のカメラアイコンをクリックします。

f:id:amarelo-n24:20200523003419p:plain

2.キャプチャ:ページ全体、形式:クリップボード を選択します。

f:id:amarelo-n24:20200523003606p:plain

PNGJPEGで保存したい方は、形式をいずれかのラジオボタンにします。

最後に

2週間使って特に問題はありませんので、当分普段使いのブラウザとして使い込みます。 Chrome拡張機能を使えたり、キーボードのショートカット設定をカスタマイズできるようなので、もっと便利に使えるよう考えてみたいです!

Vivaldiを使ってみた

まだ日本ではシェアの少ないブラウザですが、Vivaldi(ヴィヴァルディ)をインストールしましたので、手順と使用感について書こうと思います。

目次

Vivaldiとは?

詳しい説明はWikipediaを読んだ方が早いと思いますが、ポイントを一つ挙げるとしたら、同一ウインドウ内で複数ページを開くことが可能というところだと思います。

ja.wikipedia.org

Vivaldiを使いたいと思った理由

オンライン勉強会のように片方のページで配信ページを表示させ、もう片方のページでTwitterなど別のページを開いて配信を見ながら作業するといったケースが増えましたし、調べものして複数ページの情報を比較するケースも多くなりました。1画面で複数ページ表示できれば楽だなぁと思っていたところでVivaldiの存在と、複数ページを1ウインドウで表示できることを知り、「楽そう!」と思ったためです。

インストール~初期設定

インストーラのダウンロード

Vivaldi公式サイト内の、「Vivaldiをダウンロード」ボタンよりインストーラをダウンロードします。

f:id:amarelo-n24:20200505220022p:plain

②インストール

ダウンロードしたインストーラをダブルクリックで実行します。

※少し待ちます。 f:id:amarelo-n24:20200505220132p:plain

インストールが完了すると、以下のような画面が表示されます。「続ける」をクリックします。 f:id:amarelo-n24:20200505220508p:plain

③他のブラウザからブックマークと設定をインポート

他のブラウザのブックマークと設定をインポートします。 f:id:amarelo-n24:20200505220540p:plain

Chromeのブックマークをインポートしたい場合は、Chromeをクリックし、「インポート」をクリックします。 f:id:amarelo-n24:20200505220749p:plain

インポートが完了すると以下のような画面表示になりますので、「続ける」をクリックします。

※設定完了後に取得したスクショのため、はじめての設定の場合は、「完了」ボタンが「続ける」と表示されていると思います。

f:id:amarelo-n24:20200505221008p:plain

④トラッカー・広告ブロック

設定したい既定の保護レベルを選択して、「続ける」をクリックします。 f:id:amarelo-n24:20200505221244p:plain

※自分は、ダークを選択しました。 f:id:amarelo-n24:20200505221645p:plain

⑤テーマ

設定したいテーマを選択します。 f:id:amarelo-n24:20200505221320p:plain

⑥タブの位置

表示させたいタブの位置を選択して「続ける」をクリックします。 f:id:amarelo-n24:20200505221724p:plain

⑦初期設定完了

以下のように表示されたら「完了」をクリックします。 f:id:amarelo-n24:20200505221742p:plain

複数画面のタイリング

①複数表示させたい画面の選択

同一ウインドウに表示させたいページのタブをCtrlを押しながらクリックします。 f:id:amarelo-n24:20200505222209p:plain

②複数表示設定

ウインドウ右下の赤枠部分をクリックします(2画面を左右に表示させたい場合)。 f:id:amarelo-n24:20200505222255p:plain

※2画面表示させるとこのようになります。 f:id:amarelo-n24:20200505222406p:plain

他にも、上下2画面表示、4分割表示にすることもできます。

使用感

重いという評判もあるようで少し気になりましたが、今のところ重さは感じません。 上述のような、オンライン勉強会にて片方で配信画面を表示させ、もう一方でツイートするといった、ブラウザ内での並行作業をするときはとても便利だと思いました。また、商品(サービス)選定の際に、複数サイトの情報を見比べるようなときにも効果的だと思いました。ブラウザの画面切り替えがないだけですが、煩わしさが軽減されたと感じています。

最後に

まだ使い始めたばかりなので、もう少し使い込んでみて他のブラウザと特徴がどう違うか調べてみるのも面白そうです。 気づいたことがあったらまた書こうと思います。少しでも誰かの役に立つことができれば嬉しいです。

【Git】ローカルリポジトリ作成からブランチ作成について

このご時世、いまだにGitとGitHubの使い方をほとんど理解しておらず、addとpushは何となくわかっていましたが、 ブランチって何?という状態だったので、勉強しました。

ローカルリポジトリ作成からリモートリポジトリにブランチ作成までに自分が勉強して実行したことを備忘録として書きます。 拙い理解度の範疇で書きますので、もし認識違いなどありましたら、ご指摘いただけますと幸いです。

目次

前提

  • GitHubに既にリモートリポジトリがある。
  • PCにGitがインストールされている。

上記前提で書きますので、GitHubのアカウント作成、Gitのインストール手順は割愛します。

ブランチを作成する目的

マスターブランチで管理しているソースに機能追加したり修正する際に、 マスターに影響を及ぼさないようにするために、マスターとは別の流れ(ブランチ)を作ります。 作成したブランチで開発、修正した機能をマスターにマージ(統合)することもできますが、 マージについては別途書けたら書きます。

ローカルリポジトリを作る

GitHub上にリモートリポジトリがある場合は、まずローカルにリモートリポジトリのクローンを作ります。 以下の通り、コマンドを入力します。

git clone <リモートリポジトリURL>

ローカルリポジトリでbranchを作る

作成したローカルリポジトリがどのブランチにいるのか、確認します。

git branch

まだbranch作っていないので、

*master

とだけ表示されます。

次にローカルブランチを作成します。

git branch <任意のブランチ名>

もう一度、git branch を実行すると、

   <作成したブランチ名>
* master

と表示されます。これは所属するブランチが"master"のままのため、 このままpushすると、masterリポジトリを更新することになってしまいます。

git checkout <作成したブランチ名>

で所属するブランチを移動します。実行すると、

Switched to branch '作成したブランチ名'

と表示されます。もう一度、git branch を実行すると、

* <作成したブランチ名>
   master

のように * が作成したブランチ名の前に表示されるようになります。 これは所属するブランチが<作成したブランチ名>に移動したことを示します。

ステージングエリアへの追加とコミット

ローカルリポジトリで作成や修正したファイルを、ステージングエリアに追加します。

git add

を実行します。

次に、ステージングエリアに追加した変更を確定(commit)させます。

git commit -m コメント

で変更をコミットします。コメント欄に変更内容を簡単に書きます。

はじめてadd、commitする場合

まずは以下の通りユーザ名とメールアドレスを設定する必要があります。

git config --global user.email "メールアドレス"

git config --global user.name "ユーザ名"

でないと、addの際に「ユーザ名とメールアドレスを設定しろ」と怒られますw

リモートリポジトリにpush

ローカルブランチで作成・変更したファイルと、ブランチそのものをリモートリポジトリに反映します。

git push -u origin <作成したブランチ名>

を実行します。

Branch '作成したブランチ名' set up to track remote branch '作成したブランチ名' from 'origin'.

と表示されたら完成です。

最後に

はじめてのGitに関する記事が、いきなりブランチ作成になってしまいました。 Gitについてももっと勉強して理解を深め、精度の高い記事を書けたらと思います。

HTML5でリストを表現する要素

引き続き、HTMLで学んだことを書きます。 今日はリスト表現についての備忘録です。

目次

リスト

順不同リスト

箇条書きなどのように、順番を設けずに項目を列挙するタイプのリストです。 ul要素で順不同リストを表し、そのリストアイテムをli要素で表します。

※ul:unordered list

※li:list item

        <ul>
            <li>自己紹介</li>
            <li>作成中</li>
            <li>作成中</li>
            <li>作成中</li>
            <li>作成中</li>
            <li>作成中</li>
        </ul>

ul要素の中にli要素を書きます。liを書くときはインデントを一つ下げます。

上記の例では、このように表示されます。 f:id:amarelo-n24:20200419105625p:plain

頭の●をなくしたい場合は、CSSにて、

li {
    list-style: none;
}

と書くことで消すことができます。また、list-styleの値で、●部分を■に変更したり(値:square)、○に変更(値:circle)することもできます。

番号順リスト

1,2,3・・・のように番号順に表現するリストです。 ol要素で番号順リストを表し、そのリストアイテムをli要素で表します。

※ol:ordered list

        <ol>
            <li>自己紹介</li>
            <li>作成中</li>
            <li>作成中</li>
            <li>作成中</li>
            <li>作成中</li>
            <li>作成中</li>
        </ol>

このように表示されます。

f:id:amarelo-n24:20200419105459p:plain

用語説明型リスト

用語を定義し、その説明を表現するためのリストです。 dl要素で用語説明型リストを表し、dt要素で定義したい言葉、dd要素で言葉の説明を表します。

※dl:description list

※dt:description term

※dd:description definition

     <dl>
         <dt>dlとは?</dt>
             <dd>「definition list」の略で用語説明型リストを表現します。</dd>
         <dt>dtとは?</dt>
             <dd>「definition term」の略で説明したい用語を表現します。</dd>
     </dl>

dt要素を書くときはインデントを一つ下げ、dd要素を書くときはさらにもう一つインデントを下げます。

上記例では、このように表示されます。 f:id:amarelo-n24:20200419111752p:plain

リストを使ってサイト構成してみた

前々回の記事で紹介したHTMLで、順不同リストでサイト構成してみましたので、 用語説明型リストを使って自己紹介ページを作ってみました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>about me</title>
    <meta name="description" content="amareloのページ">
    <link rel="stylesheet" href="introduction.css">
</head>
<body>
    <header>自己紹介</header>
    <dl>
        <dt>職業</dt>
            <dd>コーヒー焙煎人兼エンジニア</dd>
    </dl>
    <dl>
        <dt>資格</dt>
            <dd>AWSソリューションアーキテクトアソシエイト(資格だけ)</dd>
            <dd>AWSクラウドプラクティショナー(資格だけ)</dd>
    </dl>
    <dl>
        <dt>趣味</dt>
            <dd>コーヒー焙煎</dd>
            <dd>ランニング</dd>
    </dl>
    <dl>
        <dt>好きなAWSサービス</dt>
            <dd>Lambda</dd>
            <dd>S3</dd>
    </dl>  
</body>
<footer>
    <p>サイト制作者:amarelo</p>
</footer>
</html>

CSSでテキストを中央に寄せたり、文字を太字にしていますが、そこは省略します。 以下にように表示されます。

f:id:amarelo-n24:20200419115023p:plain

最後に

勉強したことの備忘録として書いていますので、実際に公開するWebサイトを作るには良くない書き方かもしれません。 構成の良しあしまでは調べられていませんので、何卒ご容赦ください!

今日はここで締めたいと思います。