認識のすり合わせの重要性

実は新卒でありながら、5人チームのプロジェクトのサブリーダーを現場でさせて頂いているのですが、今日初めてPMに怒られそうになって、改めて気づかされたことがあったから、同じミスをしないよにメモメモ。。

 

忙しいPMに自分がすべきと思うことを能動的に伝えに行き、PMの時間をできるだけ奪わないように日々意識しているんですが、今日はそれが裏目に出ました。。

 

伝え方は問題なかったとは思うが、一方的に表面的な作業内容としてすべきことを伝えPMから認識あっているよ、と言われた為、それをそのまま鵜呑みにし、5時間違う作業へまっしぐら。

 

この時、自分がすべき作業内容の目的を聞いていれば、自分の認識の過ちに気づけたはず。。。

 

後で、報告したら、僕がしてと言ったことと全然違うよ。と。。。

 

その後、改めてすべきことを聞き、こうこうこうで合ってますか?と聞くと、

僕は朝からずっとそのことを言っていますよ、と。。。

 

内心、お互いの認識の相違かなあと思いながらも、自分の立ち回り次第で起きなかった問題。

複数のプロジェクトに参加しているPMを支えるサブリーダーとして、これはまずいなあぁと、結構へこみました。

 

超当たり前のことですが、向かっていく方向(作業を行う目的)の認識がずれていると、その後とんでもない違いが生まれちゃいました。

 

表面的な認識を揃える前に、PMのプロジェクトをどのように運んでいこうとしているのかという考えをもっとアンテナ張って、分からなければ詳しく聞くようにしないとなあと思う一日でした。

 

色々言われた後、5時間残業して遅れた分取り戻すために作業してたら

夜遅くまで頑張ってるけどどうしたん?

ってPMに笑って貰えたので、よかったですと。。。平和が一番。

 

お疲れ様です。

 

技術メモ

日々の業務や学習で学んだ知識や技術をぱらぱらとメモ程度に、備忘録として。

 

随時追加していくぞー。

 

フロントエンド

スクロール制御

cssのoverflowで制御

webサーバー

DocumentRoot

 

 httpd.confやVirtualHostに記述可能。

 

Webサーバソフトウェアなどの設定項目の一つで、サーバコンピュータ内のストレージ(外部記憶装置)上に設けられたファイルシステムの中で、外部からアクセスを受け付ける起点となるディレクトリを指定する。

外部からそのサーバにアクセスすると、ドキュメントルートに指定したディレクトリがあたかもルートディレクトリ(最上位ディレクトリ)であるかのように見え、中に格納されたファイルやサブディレクトリにアクセスすることができる。

システムによっては、そのコンピュータ内部のストレージにあるディレクトリだけでなく、ネットワーク越しに外部のコンピュータのディレクトリを設定できる場合もある。

e-words.jp

 

jp.cybozu.help

Cloud9、MySQLを用いてRailsアプリの開発環境を構築

Cloud9でMySQLを用いたRailsアプリの開発環境構築の手順

 

何回も色んなエラーが出て、なかなか構築できなかったから、

備忘録として。(2021年11月30日時点)

*一応この手順で構築できたけど、詳しい人で手順に違和感を感じた人居たら、教えて頂きたい、、、

 

 

 

cloud9開発環境構築手順書(MySQL)


ruby -v
rails -v

Rails ライブラリインストール
bundler ver.2 を使用しているため
$ gem install bundler:2.1.4 #gem(ライブラリ)管理
$ sudo yum install mysql-devel #mysqlを使う為のパッケージインストール
rails new アプリ名 -d mysql
$ cd アプリ名
$ bundle install #Gemfile.lockにないgemをGemfileから見つけた場合、そのgemをインストールする。

MySQL をアンインストール(うまく立ち上がらないため)


$ sudo yum remove mysql
$ sudo yum remove mysql-server
$ sudo yum remove mysql-libs

MySQL(MariaDB) インストールおよび起動


$ sudo yum --enablerepo=remi,epel,rpmforge install mysql-server #remiリポジトリから最新のmysqlサーバーをインストール
$ sudo service mariadb status
$ sudo service mariadb start

MySQL(MariaDB) 接続確認


mysql -u root -p
USE コマンドで使いたいDBを指定。
-> exit

DB、テーブル作成、データ入力


rails db:create
rails db:migrate
rails db:seed #初期データ

$rails s

まとめ

色んなエラー潰して、現状エラー出ずにできてるし大丈夫なのかな?

 

Cloud9とGithubをSSHで接続してpushするまで

f:id:SGNI_engineer:20211130222042p:plain

メモ程度なので雑なまとめ方ですが、Cloud9とGithubSSHで接続してpushするまでをまとめました。

 

 

 Cloud9にGithubの認証情報を登録

$ git config --global user.name ユーザー名
$ git config --global user.email メールアドレス

 ローカルリポジトリの作成

$ cd プロジェクトディレクトリへ移動
$ git init

Initialized empty Git repository in /home/ec2-user/environment/プロジェクトディレクトリ/.git/ 直下に.gitディレクトリを作成```

 コミット対象を登録

$git status コマンドでリポジトリの状態を確認
$ git add <ファイル名>
$ git add <ディレクトリ名>
$ git add . 更新があったファイルやディレクトリを一括してステージングエリアへ追加
$ git commit -m "コミットメッセージ"

 コミットログ確認

$ git log

 GitHubリポジトリを作成

GitHubソースコードの保管場所(リポジトリ)を用意するために+ > New repositoryを選択。
Create a new repositoryページでRepository name(リポジトリ名)を入力してCreate repository(リポジトリを作成)ボタンをクリックするとGitHub上にソースコードの保管場所(リポジトリ)が作成される。
リポジトリ作成直後はページ上にソースコードの保存に利用するURLが表示される。(SSHを選択)
このURLを利用してCloud9からGitHubソースコードをコピーしリモートリポジトリ登録を行う。

 【Cloud9】リモートリポジトリを登録

今回はCloud9上のローカルリポジトリをリモートリポジトリ名をoriginという名前で登録する
$ git remote add origin コピーしたURL 
$ git remote -v 登録したリモートリポジトリの確認
$ git remote rm origin 登録リモートリポジトリ削除

 公開鍵の作成

$ ssh-keygen -t rsa -C リモートレポジトリを登録した自分のメールアドレス(・・・@gmail.comなど)
$ cat ~/.ssh/id_rsa.pub ssh-rsaから始まる部分をコピー

github settings>SSH and GPG keys>New SSHkey 貼り付け

 SSH実行

$ ssh -T git@github.com

 【Cloud9】ソースコードをプッシュ

$ git push origin master

ニューモーフィズムが簡単に作れるツール紹介

f:id:SGNI_engineer:20211130142501p:plain

 

ニューモーフィズムが簡単に作れるツールを見つけたので、実装してみました。

ニューモーフィズムとは何か、使い方、実装例を以下で紹介します。

 

 

 

ニューモーフィズムとは

 

f:id:SGNI_engineer:20211130143919p:plain

ニューモーフィズム(Neumorphism)とは、ベース(背景)から要素が押し出されていたり、窪んでいたりするようなスタイルのデザイン手法です。

凹凸によって要素を表現しているため、ミニマルデザインとの相性がとても良く、美しく洗練された印象のデザインに仕上げることができます。

ニューモーフィズムとは?デザイン方法やルールのまとめ | Web Design Trends

 

使い方

 

1,以下のサイトにアクセス

neumorphism.io

 

2,影や形を調整

f:id:SGNI_engineer:20211130111338p:plain

3,cssをコピーして実装する

 

実装例

f:id:SGNI_engineer:20211130142501p:plain

以下の実装結果は上画像の様になります。

 

sample.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="sample.css">
</head>
<body>
    <div class = "contents">
        <div class="button1">
            <a class="icon" href="#">
                <i class="fas fa-user-alt"></i>
            </a>
        </div>
        <div class="button2">
            <a class="icon" href="#">
                <i class="fas fa-search"></i>
            </a>
        </div>
        <div class="button3">
            <a class="icon" href="#">
                <i class="fas fa-heart" style="color: #902727;"></i>
            </a>
        </div>
        <div class="button4">
            <a class="icon" href="#">
                <i class="fas fa-home"></i>
            </a>
        </div>
    </div>
</body>
</html>

 

sample.css

body{
    background: #ebebeb;
}
.icon{
    display: block;
    font-size: 2em;
    margin-top: 25px;
    align-items: center;  
    color: rgb(88, 88, 88);
}
.contents{
    text-align: center;

}
.button1{
    width: 100px;
    height: 100px;
    margin: 10px;
    display: inline-block;
    border-radius: 20px;
    background: #ebebeb;
    box-shadow:  24px 24px 20px #d1d1d1,
                 -24px -24px 20px #ffffff;
}
.button2{
    width: 100px;
    height: 100px;
    margin: 10px;
    display: inline-block;
    border-radius: 50px;
    background: linear-gradient(145deg, #d4d4d4, #fbfbfb);
    box-shadow:  24px 24px 20px #d1d1d1,
                 -24px -24px 20px #ffffff;
}
.button3{
    width: 100px;
    height: 100px;
    margin: 10px;
    display: inline-block;
    border-radius: 20px;
    background: linear-gradient(145deg, #fbfbfb, #d4d4d4);
    box-shadow:  24px 24px 20px #d1d1d1,
                 -24px -24px 20px #ffffff;
}
.button4{
    width: 100px;
    height: 100px;
    margin: 10px;
    display: inline-block;
    border-radius: 50px;
    background: #ebebeb;
    box-shadow: inset 24px 24px 20px #d1d1d1,
                inset -24px -24px 20px #ffffff;
}

グラスモーフィズムを実装してみた

f:id:SGNI_engineer:20211130104815p:plain

今はやりのグラスモーフィズムを実装してみました。

グラスモーフィズムとは何か、実装例を以下で紹介します。

 

 

 

グラスモーフィズムとは

 

f:id:SGNI_engineer:20211130144639p:plain

 

2020年末ごろより人気が高まっているスタイルで、静かな不発トレンドとなったニューモーフィズムのプラスチックな質感に対して、すりガラスを通して覗いたような背景のぼかしが特長です。

 

背景が透けて見えることで、コンテンツの階層を確立し、インターフェースの奥行き感を演出できます。本物のガラスの用に、どの層がどの層の上にあるのかを簡単に確認することができます。

https://photoshopvip.net/126760

 

実装例

f:id:SGNI_engineer:20211130104815p:plain

以下の実装結果は上の画像の様になります。

 

sample.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="sample.css">
    <title>sample</title>
</head>
<body>
    <div class = "back-img">
        <div class = "glassmorphism">
            <p>Glassmorphism</p>
        </div>
    </div>
</body>
</html>

sample.css

.back-img{
    background-image:url(img/beach.jpg);
    background-repeat: no-repeat;
    display:flex;
    align-items: center;          
    width:1920px;
    height:1107px;
   
}
.glassmorphism{
    width: 900px;
    height: 600px;
    margin: auto;
    text-align: center;
    border-radius: 2ch;
    background:linear-gradient( rgba(255,255,255,0), rgba(255,255,255,0.5));
    border: 1px solid rgba(255,255,255,0.4);
    border-right-color:rgba(255,255,255,0.2);
    border-bottom-color:rgba(255,255,255,0.2);
    backdrop-filter: blur(7px);
    box-shadow: 0 5px 20px rgba(255,255,255,0.2);
}
p{
    color: rgb(255, 255, 255);
    font-size: 60px;
    height: 450px;
    line-height: 450px;
}