読者です 読者をやめる 読者になる 読者になる

yuri memo

コーディングとかのメモ帳

ストレングス・ファインダーをやってみました

f:id:yurixxx8:20170424214023j:plain

ストレングス・ファインダーは
34の強みの中から、5つ自分の強みを教えてくれる自己分析みたいなやつです。

わたしはこの5つでした。

  • 規律性 Discipline
  • 個別化 Individualization
  • 調和性 Harmony
  • 内省 Intellection
  • 分析思考 Analytical
続きを読む

anyenvを使ってNode.jsのバージョン管理をすることにした

f:id:yurixxx8:20170422140054p:plain

MBPがきた時にnodebrewやらgulpやらもろもろ環境構築したのですが
教えてもらいつつ記事見ながらやったくせに全く記憶に残っておらず、、、
ちょっとやばいと思って環境構築やりなおしたい!って思ってました。
その時に「anyenvいいよ〜」と教えていただいたのでメモです。

ちなみに、anyenvとは複数のバージョンをインストール&管理できる賢い子らしいです。
Node.jsの他にもRubyPHPPythonなども管理できます。

インストール

% git clone https://github.com/riywo/anyenv ~/.anyenv

PATHを通す

% echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zshrc
% echo 'eval "$(anyenv init - zsh)"' >> ~/.zshrc

シェルを再起動してanyenvの設定を反映させる

% exec $SHELL -l

確認する

% anyenv

anyenv-updateのインストール

anyenvやrbenvのpluginsの更新などをしやすくするプラグインを作った - @znz blog

% mkdir -p $(anyenv root)/plugins
% git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
% anyenv update

anyenv-gitのインストール

anyenvでGitのコマンドを実行できるようにするためのプラグイン
https://github.com/znz/anyenv-git

% git clone https://github.com/znz/anyenv-git.git $(anyenv root)/plugins/anyenv-git

ndenvのインストール

% anyenv install ndenv
% exec $SHELL -l
% ndenv -v
  ndenv 0.4.0-4-ga339097

インストール可能なバージョンの確認

% ndenv install -l

Node.jsのインストール

% ndenv install 6.10.1

グローバルで使用するバージョン

% ndenv global 6.10.1

インストールされているバージョンの一覧を確認

% anyenv versions
ndenv:
  system
* 6.10.1 (set by /Users/***/.anyenv/envs/ndenv/version)
  7.8.0


こんなこともできるみたいです(*´-`)
qiita.com

CSSで画像のアスペクト比を保持したままいい感じにトリミングする(レスポンシブ対応)

f:id:yurixxx8:20170408172723j:plain

レスポンシブサイトでサムネイルなどを一覧表示させたいときに
写真のサイズがバラバラだとなかなかうまくいかず困ってました。

以前、background-sizeがいいかも!と記事を書きましたが
object-fitのポリフィルが使えるようになり、これは!!と思いました。
object-fitについては以下の記事を参考に。
参考:1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス

で、さっそくやってみたのですが
widthとheightをきちんと指定すればうまくいきます。
IEだってばっちりです。

ですが、heightを指定すると可変するときにいい感じにならない、、
f:id:yurixxx8:20170408164227p:plain
指定しなければ縦長の画像が、、
f:id:yurixxx8:20170408164238p:plain
(いい方法ご存知の方おりましたら教えてくださいm(_ _)m)

わたしの実装したいことはobject-fitだとうまくいかなそうと諦め、
フォロワーさんに助けを求め、記事を読み漁った結果、完成形はこちら。
http://yurixxx8.com/demo/20170408/photo_trimming.html

画像のアスペクト比も保持しつつ、縦長画像もいい感じにおさまります。

今回は画像の中心でトリミングしてます。
画像トリミングに関する箇所のみ抜粋してコードを載せていきますね。

<div class="cardItem">
  <div class="trimming">
    <img class="photo" src="images/sample_photo_01.jpg" alt="Green leaves">
  </div>
  <div class="body">
    <p class="text">Green leaves</p>
  </div>
</div>
.trimming {
  overflow: hidden;
  position: relative;
  padding-top: 65%;
  margin-bottom: 5px;
}
.photo {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.trimming
トリミングする外側のクラスです。
position: relative;を指定します。
overflow: hidden;ではみ出した分をカットします。
padding-top: 65%;で高さをとっています。
これによって、heightを指定せずともアスペクト比を保持したまま画像の高さがだせます。
参考:CSSだけでアスペクト比を固定するテク - Qiita

.photo
position: absolute;を指定します。
画像の中心でトリミングしたいので以下のように指定します。

top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

参考:CSSだけで画像トリミングできたよ | Tips Note by TAM

ざっとこんな感じです!
サムネイル画像をbackground-imageとして扱うことがどうしてももやもやだったので
imgタグで実装できてとてもすっきりです٩( 'ω' )و

スマホでフルスクリーンになるレスポンシブメニュー

今回は以下のようなレスポンシブメニューを実装しました。
・モバイル時に、メニューをフルスクリーンで表示
・メニュー開閉アニメーションはフェードイン/フェードアウト
jQueryのfadeToggleなどは使わずに、classの付け外しをjQueryで行う

デモはこちらです。

yuri memo - レスポンシブメニュー DEMO
 デモは、以下のような構成になっています。
HTML
[ fade_menu.html ]
CSS
[ css/style.css ]
jQuery
[ js/jquery-2.0.0.min.js ]
[ js/script.js ]

HTML

順番にコードを載せていきます。

<body>
  <header>
    <h1 class="logo">yuri memo</h1>
    <!-- ハンバーガーメニュー部分 -->
    <div id="toggle">
      <div class="trigger">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <!-- フルスクリーン部分 -->
    <div class="toggleWrap">
      <!-- メニュー部分 -->
      <ul class="mainNav">
        <li><a class="navItem" href="#">Home</a></li>
        <li><a class="navItem" href="#">About</a></li>
        <li><a class="navItem" href="#">Product</a></li>
        <li><a class="navItem" href="#">Contact</a></li>
        <li><a class="navItem" href="#">Nyaaan</a></li>
      </ul>
    </div>
  </header>

  <main>
    <h2>レスポンシブメニューのデモです。</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </main>

  <!-- jsファイルの読み込み -->
  <script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
</body>

#toggleがクリックされた時に、
.toggleWrapに対して、開閉のクラスやアニメーションのクラスをつけていきます。

CSS

※メニューに関するCSSのみ抜粋しています。
CSSの全コードはデモから確認できます。

/* スマホでメニューを開いた際に背景色が画面全体にかかるようにと
フルスクリーンで固定したいので、position: fixed; top: 0; left: 0; を指定 */
.toggleWrap {
  background: rgba(234, 234, 234, 0.95);
  padding: 50px 15px 10px 15px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mainNav li {
  list-style-type: none;
}
.navItem {
  display: block;
  text-decoration: none;
  color: #3e3e3e;
  border-bottom: 1px solid #ccc;
  padding: 15px 0;
  text-align: center;
  font-size: 2rem;
}

/* メニューを閉じる時のスタイル
display:none; を使用せず、opacityを使うとfadeっぽくなる */
.hide {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

/* アニメーションはメニューの開閉時のみでいいので
.toggleWrapに書かず、別にclassを用意 */
.animation {
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
}

/* メニューオープン時のみ、メニューの後ろのコンテンツをスクロールさせない
iOS safariには別途対応が必要(jQueryに記述)*/
.no-scroll {
  overflow: hidden;
}

/* 768px以上に適応するスタイル */
@media screen and (min-width: 768px) {
  #toggle {
    display: none;
  }
  .toggleWrap {
    background: none;
    height: auto;
    position: static;
    padding: 0;
    margin-bottom: 20px;
  }
  .mainNav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
            justify-content: space-between;
    max-width: 670px;
    margin: 0 auto;
  }
  .navItem {
    padding: 5px 15px;
  }
  .navItem:hover {
    border-color: #3696da;
  }
  .animation {
  -webkit-transition: none;
          transition: none;
  }

 /* 非表示にしていたメニューを表示させる */
  .hide {
    opacity: 1;
    visibility: visible;
  }
}

jQuery

$(function(){
  fade('.toggleWrap');
});

function fade(elm){
  var $fade = $(elm),
      $body = $('body');
  // .toggleWrapを非表示にしておく
  $fade.addClass('hide');

  // #toggleがクリックされた時に、.hideの付け外しで .toggleWrapの表示・非表示を切り替え
  // .addClass('animation');でアニメーションのCSSを適応
  $('#toggle').on('click', function(){
    $fade.toggleClass('hide').addClass('animation');
    $('.trigger').toggleClass('active');

    // スクロールの制御
    // .hideを持っている状態はメニューが閉じている状態で、このときは.no-scrollは不要
    if ($fade.hasClass('hide')) {
      $body.removeClass('no-scroll').off('.noScroll');
    } else {
      // メニューが開いている時に、bodyに.no-scrollを追加してスクロールさせない
      $body.addClass('no-scroll').on('touchmove.noScroll', function(e){
        e.preventDefault();
      });
    }
  });
}
$body.on('touchmove.noScroll', function(e){
  e.preventDefault();
});

上記の部分はiOSでは、overflow: hidden;だけでスクロールを無効にできないため追記しています。
こちらの記事が参考になりました。
qiita.com

fadeToggleを使わない理由

jQueryでslideToggleとかfadeIn,fadeOutとか楽なのは事実なんですが
fadeOutは最終的にdisplay: none;の状態になります。
CSSでdisplay: block;とか書いてても
style属性にdisplay: none;が適応されているので
リロードしないとその状態が保持されたままなんですよね(._.)
こんな感じです。ブレイクポイントを過ぎてもメニューが表示されませんね。
http://yurixxx8.com/demo/20170305/2017-03-05.gif
ブレイクポイントによってはスマホの縦横切り替えでこの現象が起きるかも?
なので今回はクラスの付け外しでやってみました!

以上ですにゃ。

プラグインなしで拡大しながらフェードで切り替わるスライド

拡大しながらフェードインするスライドを実装したのでめもめも。
さらっと言ってますけど、ほんと分からなくて泣きそうになりながら実装したんだよ・・・ぐすん。

とりあえず、デモをのせますね。

1. フルスクリーン背景バージョン
2. 通常スライドバージョン

フルスクリーンか通常のかはHTMLとCSSで変更し、jsは全く同じものです。

$(window).load(function(){
var slide = $('.slideshow');
var i = 0;
// ページの読み込み時にスライドの1枚目を2000ミリ秒かけてフェードイン
slide.find('.item').eq(i).fadeIn(2000).addClass('in');
// スライドの枚数を調べて変数に格納
var total = $('.slideshow .item').length -1;
// 処理を繰り返す
setInterval(function(){
  if(i < total){
  slide.find('.item').eq(i).addClass('out');
  slide.find('.item').eq(i).removeClass('in');
    j = i;
    i++;
    setTimeout(function(){
      // 1000ミリ秒後に3500ミリ秒かけてフェードインする
      slide.find('.item').eq(i).fadeIn(3500).addClass('in').removeClass('out');
    },1000);
    // 4500ミリ秒かけてフェードアウトする
    slide.find('.item').eq(j).fadeOut(4500);
  } else if(i == total){
  slide.find('.item').eq(i).addClass('out');
  slide.find('.item').eq(i).removeClass('in');
    j = i;
    i = 0;
    setTimeout(function(){
      slide.find('.item').eq(i).fadeIn(3500).addClass('in').removeClass('out');
    },1000);
    slide.find('.item').eq(j).fadeOut(4500);
  };
// この値を変更すると、処理の間隔を遅くしたり早くしたりできる
},4500);
});

setTimeout(function(){
 slide.find('.item').eq(i).fadeIn(3500).addClass('in').removeClass('out');
 },1000);
 slide.find('.item').eq(j).fadeOut(4500);
}
フェードにかかる秒数を変更する場合は、fadeOutの引数を青色の箇所の合計とあわせるようにします。

setInterval(function(){
 // ここに書いた処理が4500ミリ秒ごとに繰り返される
},4500);

今回のデモで言うと、値を6000などにすると画像の停滞時間が長くなります。

1. フルスクリーン背景バージョン[slide sample-01]

<div class="wrap">
  <h1 class="title">slide sample-01</h1>
  <div class="slideshow">
    <div class="item" style="background-image: url(images/slide01.jpg)"></div>
    <div class="item" style="background-image: url(images/slide02.jpg)"></div>
    <div class="item" style="background-image: url(images/slide03.jpg)"></div>
  </div>
</div>
.slideshow {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.slideshow .item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: none;
  background-size: cover;
  background-position: center center;
}
.in {
  -webkit-transform: scale(1);
  transform: scale(1);
  z-index: 2; 
}
.out {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: 4s;
  transition: 4s;
  z-index: 1;
}
.wrap {
  position: relative;
}
.title {
  position: absolute;
  transform: translate(calc(50vw - 50%),calc(50vh - 50%));
  z-index: 10;
  color: rgba(102, 102, 102, 0.70);
}

2. 通常スライドバージョン[slide sample-02]

<div class="slideshow">
  <img class="item" src="images/slide2-01.jpg" alt="">
  <img class="item" src="images/slide2-02.jpg" alt="">
  <img class="item" src="images/slide2-03.jpg" alt="">
</div>
.slideshow {
  position: relative;
  width: 80%;
  padding-top: 35%;
  overflow: hidden;
  margin: 0 auto;
}
.slideshow .item {
  width: 100%;
  position: absolute;
  top: 0;
  display: none;
}
.in {
  -webkit-transform: scale(1);
  transform: scale(1);
  z-index: 2;
}
.out {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: 4s;
  transition: 4s;
  z-index: 1;
 }
.title {
  text-align: center;
  color: rgba(102, 102, 102, 0.70);
  margin: 20px 0 15px 0;
}

えっと・・・こんな感じです・・・。
一応GitHubにもあげてみました。ぷるぷる。
GitHub - yurixxx8/zoom-fade-slide: It is a slide that switches with fade while expanding.

ちなみに、高解像度ディスプレイのFirefoxでみると挙動が怪しいです。
scaleで拡大される時になんだか問題ありそうです・・・。
他の方が作られた近いような感じのプラグインでも、同じ現象が起きたのでFirefox固有の何かなのでしょうかね、、、。
解決策探し中なので解決できたらまた書きます。
(5000pxくらいの画像用意すれば回避できるけど根本的な解決になっていない)

はじめてのさくらVPS。はじめてのサーバー構築で大変だったところ。

以前から気になっていたVPSに先日手を出しました。
メモリ 1GB・SSD 30GBで月972円ですよ〜〜〜。

その時の初期設定メモです。
基本はさくらの公式設定ガイド通り。
さくらの初期設定ガイドそこそこ分かりやすくてよかっです。
【さくらのVPS】サーバの初期設定ガイド – さくらのサポート情報

ちなみに、サーバーの知識はほぼないです。
レンタルサーバーでたまにDNS切り替えとかドメイン移管とかそんなくらいで。
コマンドがしがし叩いてサーバー立てるなんてほんとにもう・・・。

〈ちょっと迷ったところ〉 SSH接続の設定変更方法

さくらの公式設定ガイドには以下のようにありますが。

TeraTermを利用して、ログイン方法をパスワード認証から公開鍵認証へ変更する方法です。 

えー、めんどくさい。。。と思い別な方法で。(やったことないくせに)
以下の記事を参考にしました。
Linuxコマンド【 ssh-keygen 】認証用の鍵を生成 - Linux入門 - Webkaru

rootでログインして、

# ssh-keygen

するといろいろ聞かれます。

Enter file in which to save the key (/home/user/.ssh/id_rsa): ← キーの保存先です。Enterぽち
Created directory '/home/user/.ssh'. ← ~/.ssh がない場合ディレクトリを作成
Enter passphrase (empty for no passphrase): ← パスフレーズを入力
Enter same passphrase again: ← もう一度入力
Your identification has been saved in /home/user/.ssh/id_rsa. ← ここにつくったよ
Your public key has been saved in /home/user/.ssh/id_rsa.pub. ←公開鍵これだよ

カギを無事につくれたら、ssh接続をするユーザでサーバへログイン。
公開鍵をサーバに登録します。
ここは以下の記事を参考にしました。
さくらのVPS初期設定 - Qiita

$ mkdir .ssh
$ chmod 700 .ssh
$ vi .ssh/authorized_keys

これそのままコマンドに打ってくです。
で、作った公開鍵(.ssh/id_rsa.pub)の内容をコピペして保存し、
以下のコマンドでパーミッションの変更。

$ chmod 600 .ssh/authorized_keys

これでSSHログインできるようになります。
直後にさっそくログインしようと思ったら、なぜかタイムアウトしてしまう現象にハマって・・
よくみたら起動していたはずのサーバーが停止してました。てへ。起動したらログインできた。

〈詰んだところ〉ポート番号変えたらログインできなくなった

さくらの公式設定ガイドや他の方の記事にもあるように以下の設定をします。

  • 攻撃を回避するために、SSH接続のポートを22番から変更する
  • rootユーザでのログインを無効にする
  • パスワード認証を無効にする
$ su -
Password: ← rootのパスワードでログイン
# vi /etc/ssh/sshd_config
#Port22 
→Port65228
49152番〜65535番の間で

#PermitRootLogin yes 
→PermitRootLogin no
rootユーザでのログインを無効

PasswordAuthentication yes 
→PasswordAuthentication no
パスワード認証を無効

設定変更したら、設定ファイルの変更読み込みして終了でし。

# service sshd restart

いざログイン。

# ssh admin@xxx-222-12345.vs.sakura.ne.jp -p 65228 -i ./.ssh/id_rsa

※admin@xxx-222-12345.vs.sakura.ne.jpのところはVPSのコンパネに書いてあったよ!

で、ログインできない。何回やってもできない・・・。
ポートを22に戻すとログインできる。いみわかんない(´;ω;`)

調べた結果、
☑️ 変更後のポートをリッスンしているか確認
→ リッスンしていれば正常にポート番号の変更がされてるのでファイアウォールが原因かも
☑️ ファイアウォールの停止をしてログインできるか確認
→ ログインできたらファイアウォールの影響なので指定したポートを解放する
とのことで、まさにファイアウォールが原因でした。

●リッスンしているポートの確認

# netstat -tanp | grep LISTEN

ファイアウォールの停止方法

# /etc/rc.d/init.d/iptables stop 
iptables: Setting chains to policy ACCEPT: filter [  OK  ]
iptables: Flushing firewall rules: [  OK  ]
iptables: Unloading modules: [  OK  ]

ポートを解放するためにiptablesを編集します。
サーバの利用用途に合わせて許可するポート番号を設定する

# iptables -A INPUT -p tcp -m tcp --dport 65228 -j ACCEPT
# iptables -A INPUT -p tcp -m tcp --dport 80 -j ACCEPT
# iptables -A INPUT -p tcp -m tcp --dport 443 -j ACCEPT

※ 80 HTTP / 443 HTTPS

iptablesを再起動して変更を適用します。

$ service iptables restart

これで無事SSHログインできました。

順番が逆になっちゃったけど最後にOSのアップデートで終了。

# yum update

途中で[y/n]が表示されたら「y」を選択。
Complete!が表示されればOK。

ポート番号変更してログインできなくなった時は心折れそうでしたが
無事にサーバー立てられてよかったです。
せっかくサーバー契約したので真面目に使っていく所存♡

yuriについて。この仕事が好き。

一昨日、念願のMacBookProが届きました。わーい。

さて今回は、わたしの普段の仕事や日頃思っていることや考えていることをながながと書こうと思います。
あらかじめお伝えいたしますが3,000文字くらいあります。

  • 1.わたしについて
  • 2.なんでweb業界に入ったか
  • 3.普段の業務
  • 4.最近知ったこと・やってみたこと
    • 2016年7月以降に知った存在
    • 最近やったこと
    • お気に入り
  • 5.これからについて
  • おわりに
続きを読む