オンライン面接はじめの一歩
前置き
こちらに書いていることはあくまでも、はじめてのオンラインコミュニケーションの内容となります。
こんなの常識だ！当たり前だ！という方は、見ないでください。
また、個人の見解になりますのでご注意ください。
クレームは受け付けております。
対象者
- これからオンラインで面接を受けようと思っている方
- オンラインコミュニケーションが苦手な方
画面情報の整理
オンラインコミュニケーションは画面に映る情報が全てです。
情報の取捨選択をしましょう。
1.画面の明るさ
これは常識かと思われますが、かなり重要なポイント。
画面が暗いとそれだけで、やる気が無いように見えてしまい印象が悪いです。
基本的には明るい方が印象が良いので、部屋の中で、より明るく映るところに移動することをおすすめします。
もしくはリングライトが安く売られているので、購入し、画面の明るさを調整しましょう。
2.背景情報
部屋の背景にも気を使いましょう。
基本的には何も背景は映らないほうがいいです。
しかし、工夫をすることで他の人と差をつけるポイントにもなります。
例えば、自分の趣味がある方は背景に趣味の道具や作品を飾ることによって興味を持ってもらえる可能性があります。
趣味がきっかけで会話が弾み、面接の時にリラックスして望むことができるかも・・・？逆に滑ってしまう危険性も・・・？
リスクを踏まえた上、自分をどうアピールしたいのか考え、背景情報を整理しておきましょう。
会話
オンラインコミュニケーションは、間のとり方やリアクションなどがすごく難しく感じると思います。
簡単なコツがあるのでいくつか紹介させていただきます。
1.普段のテンションの1.2倍を意識する
個人的な意見ですが、熱量は電波に乗りづらいと思っています。（とある人受け売り）
そのため、気持ちをのせたいと思った場合、普段のテンションだと伝わりにくことがほとんどです。なので、気持ちハイテンションで面接に望みましょう。
2.リアクションはメリハリをつける。
会話は大半がリアクションを占めると個人的に思っています。
オンラインでコミュニケーションを取ることで
話を聞いている時
→相槌を声でアピールするのではなく、大きめにうなずきましょう。
画面の自分を見て、動いているとわかるくらい大きくうなずくのがコツです。
大げさなくらいが丁度いいので何度か実践しましょう。
話す時は、要所で間をわざと開けましょう。
→オンラインの場合、間が空きすぎるのは不自然に見えるため、詰め込んで話してしまいがちです。
しかし、間を開けることによって、逆に注目を集めることができます。
ここは必ず聞いてほしいところの前に、息を吸うくらいの間を開けると話が入ってきやすくなります。
3.名前を呼ぶことで親近感をわかせるようにする。
これは一般的な面接のテクニックの1つですが、オンラインだと名前が常に表示されているのでより実践しやすいと思います。
最初の挨拶で、〇〇さん本日はお時間いただきありがとうございます。と1言付け加えるだけで好印象です。
基本的なツールの使い方を抑えておく。
ご自身のPCにあったツールの設定ができてないケースが非常に散見されます。
- 自分の声は聞こえているのか？
- 相手の音声は通常通り聞こえているのか？
- カメラは問題なく起動しているのか？
上記は、最低限押さえておきましょう。
面接時にツールのトラブルが起きるのが一番最悪です。
それだけで面接官はやる気を無くしてしまう可能性が非常に高いです。
これは、遅刻とほぼ同意義です。
事前チェックは済ませて面接に望みましょう。
まとめ
いろいろ書いてきましたが、これらのことはあくまでもテクニック的要素が強いです。
テクニックをスムーズに実践するためには、場数を踏む必要があります。
オンラインコミュニケーションに苦手意識のある方は圧倒的に量が足りてない方がほとんどです。
普段の仕事や友人とのコミュニケーションでツールを使うことになれていない方はまず使ってみることから始めましょう。
RUNTEQでは、オンラインコミュニケーションの練習も学習の1つだと考えています。
練習できてないという方は、ぜひ、運営までご相談ください。
運営はみなさんが頼ってくれることを心待ちにしております。
ルーティングとアクション
webサービスを作るのに必須なルーティングとアクション！
今回は写真を投稿などをする場合でまとめていきたいと思います！
先に表を載せちゃいます！！
ちょーーーー基礎ですが、これがちゃんとわかってないと、コードを書いてく中で、何をどうしてたかわからなくなってきます！
丸暗記でもいいので覚えます！！
（まだ完璧ではない・・・）
今日も短いですが以上！
application.html.erbの役割
しばらく、お休みしてましたー笑
今日から復活です！
また頑張っていきます💪
application.html.erbの役割
layoutsディレクトリ配下にあるもの。
Rails newしたときに、こんな感じであるはずです！
（ちょっと関係ないの入ってますが大体こんな感じ）
application.html.erbとルーティングに沿ったhtml.erbが適用されてブラウザに表示されています！
例えば、掲示板の一覧表示とかの場合、
application.html.erb + boardディレクトリのindex.html.erb
がブラウザに表示されます！
application.html.erbの中身
実際に私が掲示板アプリを作ったときはこんな感じになりました！
htmlの宣言をして
head と bodyがあって
head のなかにcss と javascript を何使うか明記してます。
body にログインしているときとそうでないときにヘッダーとフッターの部分テンプレートの区別をしています。
application.html.erbにはどの部分テンプレートを使うのかということを書いています！
なので、意外と短いのです！
今回はこんな感じで！また別のところで出てくると思います〜
その時をお待ち下さい！
<!DOCTYPE html>
<html>
<head>
<title><%= page_title(yield(:title)) %>
</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
</head>
<body>
<% if logged_in? %>
<%= render 'shared/header' %>
<% else %>
<%= render 'shared/before_login_header' %>
<% end %>
<%= render 'shared/flash_message'%>
<%= yield %>
<%= render 'shared/footer' %>
</body>
</html>
感想
はい、サボってました〜
ちょっと方向性変えてまた、頑張って情報発信していきたいと思います！
自分の勉強のためにも！！
また頑張るぞ〜！！！
gem sorcery使ってみた
アカウント系のgemだとよくdeviceを見かけるのですが、現場だとsorceryをよく使うらしいので早速チャレンジしていきましょう💪
誤りなどがたくさん出てきそうな予感なので、ご指摘、ご指導よろしくお願いいたします🙇♀️🙇♀️
※間違いがあったため、修正中です（2019/07/15）
gem sorcery を gemfile に追加
#Gemfileにsorcery追加 $ gem 'sorcery' $ bundle install #sorceryで必要な初期ファイルをインストール $ bundle exec rails generate sorcery:install $ rake db:migrate
参考までに、db:migrate後のマイグレーションファイルを載せておきます。
class SorceryCore < ActiveRecord::Migration[5.1] def change create_table :users do |t| t.string :email, null: false t.string :crypted_password t.string :salt t.timestamps null: false end add_index :users, :email, unique: true end end
また、今回、last_name と first_nameを分けたいのでカラム追加します。
$ bundle exec rails g migration AddNameToUsers last_name:string first_name:string $ bundle exec rails db:migrate
カラム追加完了！
※気をつける点はこの時点ではUsersControllerを作ってないのでこれから作っていきます。
sorceryのgitだとscaffoldの書き方が書いてあるのですが、今回は勉強のため、controller、viewは自分で書いていきます！
sorceryに書いてあるやり方と異なる点がたくさん出てきていますのでご注意ください！！
UsersControllerを作る
$ bundle exec rails g controller users new create
ルーティングを設定
今回なるべくシンプルにルーティングを書きたかったため、必要最低限のルーティング設定にしています。
Rails.application.routes.draw do root 'static_pages#index' resources :users, only: [:create] get '/signup', to: 'users#new' get '/login', to: 'user_sessions#new' post '/login', to: 'user_sessions#create' end
まず、ここでは説明していないですが、トップページを作りたかったため、StaticPagesControllerを作っています。
resourcesではUsersControllerのcreateアクションのみ設定しています。
他の部分は、urlを指定したかったので個別に書いています。
これでコードを書いていく準備完了です
ここからの大まなか流れをざっくりと説明します。
まず、ユーザーを新規登録するための準備をいろいろやります。
その後、ユーザーがログインするためにいろいろやります。
では、そのいろいろを説明していきます！
新規登録ブロック
privateメソッドを指定しよう！
class UsersController < ApplicationController private def user_params params.require(:user).permit(:email, :password, :password_confirmation, :last_name, :first_name) end end
privateメソッドの中のメソッドは、外部のオブジェクトに対して提供する意志のないメソッドということになります。
つまり、UsersControllerクラス以外には提供しないよー！ってことです。
ユーザーが入力した値を受け取りましょう！
単に入力してきた値を受け取っています！笑
users/new.html.erb
<h1>新規登録</h1> <div class="row"> <div class="col-md-6 offset-md-3"> <%= form_for(@user) do |f| %> <%= f.label :email %> <%= f.email_field :email, class: 'form-control' %> <%= f.label :password %> <%= f.password_field :password, class: 'form-control' %> <%= f.label :password_confirmation %> <%= f.password_field :password_confirmation, class: 'form-control' %> <%= f.label :last_name %> <%= f.text_field :last_name, class: 'form-control' %> <%= f.label :first_name %> <%= f.text_field :first_name, class: 'form-control' %> <%= f.submit class: "btn btn-primary" %> <% end %> <%= link_to "ログイン", login_path, class: 'col-md-6 offset-md-3'%> </div>
Validationをかけましょう！
class User < ApplicationRecord authenticates_with_sorcery! validates :last_name, presence: true validates :first_name, presence: true validates :email, presence: true, uniqueness: true validates :password, length: { minimum: 3 }, if: -> { new_record? || changes[:crypted_password] } validates :password, confirmation: true, if: -> { new_record? || changes[:crypted_password] } validates :password_confirmation, presence: true, if: -> { new_record? || changes[:crypted_password] } end
そもそも、なんでValidationをかけるのかというと、正しいデータだけを保存するためです！
では、それぞれ見ていくと
last_name, first_name → 値が入っているかどうか
email → 値が入っているかどうかと値が重複していなかどうか
password → パスワードのミニマムの長さ指定と2つのテキストフィールドで受け取る内容が完全に一致しているかどうか
password_confirmation → 値が入っているかどうか
ユーザー情報を保存しましょう！
先程入力した値を正しい情報で受け取ることができるようになったのでデータベースに保存しましょう！
class UsersController < ApplicationController def new @user = User.new end def create @user = User.new(user_params) if @user.save redirect_to login_path else render :new end end end
user#newアクションでUser.newでUserを作るための箱を用意します。
user#createアクションで@userにuser_paramsで入ったデータを箱にいれます。
@user.saveでデータを保存します。
保存が成功したら、ログインページへ行きます。
保存が失敗したら、もう一度登録画面へ行きます。
redirect_toとrenderの違いは過去に記事でまとめているので興味があればみてください〜
renderとredirect_toの違い - とまとの成長日記
これで登録はできるようになります！実際の画面をみていきましょう！！
新規登録画面です。
情報を入力して登録ボタンを押します。
ログはこんな感じで出ます！
無事保存され、ログイン画面にリダイレクトされています！
ログインブロック
UserSessionsControllerを作りましょう！
$ be rails g controller UserSessions new create
ログインに必要なデータを受け取りましょう！
user_sessions/new.html.erb
<h1>ログイン</h1> <div class="container"> <div class="row"> <div class="col-md-6 offset-md-3"> <%= form_for(:user_sessions) do |f| %> <%= f.label :email,(t '.email') %> <%= f.email_field :email, class: 'form-control' %> <%= f.label :password,(t '.password') %> <%= f.password_field :password, class: 'form-control' %> <%= f.submit "ログイン", class: "btn btn-primary" %> <% end %> <div class="row"> <%= link_to "新規登録", signup_path , class: 'col-md-6'%> </div> </div> </div> </div>
これでデータを受け取る準備完了です！
ログインできるようにUserSessionsControllerを書いていく
ここではログインに関することを書いていきます！
では、中身を書いていきます！
class UserSessionsController < ApplicationController def new end def create user = login(params[:user_sessions][:email], params[:user_sessions][:password]) if user redirect_to root_url else render :new end end end
UserSessions#createで@userにparamsで入力された値を受け取ります。
ログインに成功したら、トップページへ行きます。
ログインに失敗したら、ログインページに戻ります。
早速ログインしてみましょう！
ログイン画面に値を入力して
ログはこんな感じです！
無事トップページへいくURLが動いています
はい、今回もざっくりとした説明でした。笑
また、情報は修正・追記していきますので、よろしくお願いします！
感想
過去最長の記事になりましたあああああ
頑張って書いた。自分で褒めておく😭💗
Javascript 超超超基礎 後編
はい、やっと後編です！
超超超基礎いよいよ完結でございます！！
最後気合い入れてまとめていきます💪
function（関数）
処理をまとめることができる。
→利点は、同じ処理を何箇所もあると修正するときに何箇所も修正する手間が省ける。
書き方が何種類かあるのでみていきましょう！
1.関数宣言
これが一番一般的な書き方だそうです。
function 関数名(){
//処理内容
}2.関数式
関数を宣言しないでもいい書き方。
var 名前 = function(){
//処理内容
}
例題：文章の間に広告をはさみたい時に広告を関数で書く
1.関数宣言で書いた場合
function showAd(){
console.log('------------------')
console.log('とまとはおいしい')
console.log('------------------')
}
showAd();
console.log('Javascriptは難しい')
console.log('Javascriptは難しい')
showAd();
console.log('Javascriptは難しい')
console.log('Javascriptは難しい')
showAd();2.関数式で書いた場合
var ad = function(){
console.log('------------------')
console.log('とまとはおいしい')
console.log('------------------')
}
ad();
console.log('Javascriptは難しい')
console.log('Javascriptは難しい')
ad();
console.log('Javascriptは難しい')
console.log('Javascriptは難しい')
ad();
引数
今回は先程学んだfunctionに引数を渡す場合どういう使い方をしていくかみていきます！
いま、全部の場所で’とまとはおいしい’と表示するようにしていますが、場所によってワードを変えたい場合引数を渡すことで変えることができます！早速例題！
function showAd(message = 'とまと'){
console.log('------------------')
console.log(`${message}はおいしい`)
console.log('------------------')
}
showAd('きゅうり');
console.log('Javascriptは難しい')
console.log('Javascriptは難しい')
showAd();
console.log('Javascriptは難しい')
console.log('Javascriptは難しい')
showAd('なす');function showAd(message = 'とまと') →仮引数と呼ばれるものを渡しています。
showAd('きゅうり');showAd('なす'); → これで実引数と呼ばれるものを渡しています。
アロー関数
アロー関数はES2015から導入された書き方です。
「function」を書かずに 「=>」 という記号を使った書き方になります。
例題：引数nameに渡したものを表示するだけの関数
var name = function(name) {
console.log(name);
}
//書き換えると
var name = (name) => {
console.log(name);
}
ざっくりですが終わります！
ほかにも何か気づいたことがあれば追記していきます！
もしくはまた、まとめて行きたいと思いまーす！
感想
絶賛体調不良ですが、なんとか書ききれた💪💪
今日は横浜からお届けしているのですが、きっとどっかでお祭りが開催されるのか、浴衣女子がたくさん 🥺🥺
本当にかわいい。。。。
今年こそは浴衣着て花火大会なるものに行ってみたいのである👘💗
