2018-02-27

【映画】2018/01に見た映画

映画

1月はこの5本を見ました(今更)

ドーン・オブ・ザ・デッド

鑑賞日：01月01日監督：ザック・スナイダー
元旦に世界の終わりを描く映画を見た。
前編を通しての救われなさが非常に良い。
ゾンビ怖い！と言うよりは、人間ドラマが深く描かれてたような気がする。

君の名は。

鑑賞日：01月03日監督：新海誠
テレビ放送で鑑賞。
きれいな秒速5センチメートルという感じ。
エモくない新海誠が新鮮だった…
公開当初からあらすじだけ見て思ってたけど、ほぼイル・マーレではと思った。

アバウト・タイム~愛おしい時間について~

鑑賞日：01月07日監督：リチャード・カーティス
過去改変SFに見せかけたヒューマンドラマ。
タイムスリップ物としてみると、設定に穴がありすぎて気になってしまう。
ただそれを飲み込んだ上で、キャラクターの心情や行動を見ると、考えさせられることもあり、
普通にいい映画だった。

天国は、ほんとうにある

鑑賞日：01月19日監督：ランドール・ウォレス
 臨死体験をした息子が天国を見たと言い始めた牧師の実話を元にした映画。
見ても「確かに天国はあるな！」という気分にはあまりなれなかった。
宗教的な題材を扱った映画を見ると、どうしてもキリスト教圏との思想の違いを感じてしまう。

パディントン

鑑賞日：01月21日監督：ポール・キング
喋るクマがロンドンに来るコメディ。
街中に喋るクマがいるのにみんな普通にしてて面白かった。
きれいなTEDと言った感じで、キャラも、登場人物も素敵だし、
ストーリーもほわほわしていた。

2018-02-26

【CSS】文字の左右に線を引く

CSS

See the Pen OQBwvy by baetdjam (@beatdjam) on CodePen.

説明

文字の要素をFlexboxにして、align-items で垂直方向を中央ぞろえする。
疑似要素 :before、:afterで、文字の前後に空の要素(content:"")を追加する

解説

flex-grow:1を設定することで、要素内いっぱいに伸縮してくれる。
高さ1pxで背景色#000の要素を天地中央揃えで配置することで、線のように見せている

<style>
    .sample {
        display: flex;
        align-items: center;
    }
    .sample:before, .sample:after {
        content: "";
        flex-grow: 1;
        height: 1px; /* 線の太さを変えたいときはここを変える */
        background: #000; /* 線の色を変えたいときはここを変える */
        margin:0 .4em; /* 文字と線の余白用 なくても良い */
    }
</style>
<p class="sample">Sample</p>

2018-02-26

【JavaScript/jQuery】要素を切り替えるスライダー

JavaScript

しくみ

f:id:beatdjam:20180226022435p:plain

さんぷる

See the Pen VQEZwM by baetdjam (@beatdjam) on CodePen.

こーど

$(window).on('load',function(){
    class slider{
        constructor(time, slideId, innerArea, prevBtn, nextBtn){
            this.slideId = slideId;
            this.innerArea = innerArea;
            this.defaultLeftVal = $(this.slideId).css("left");
            this.time = time;
            //ボタン制御
            $(prevBtn).click(()=>{this.move(false)});
            $(nextBtn).click(()=>{this.move(true)});
        }
        move(isNext){
            // 実行中は再度実行させない
            if($(this.slideId).css("left") !== this.defaultLeftVal) return;
            // スクロール領域をli要素数+1の大きさで用意する
            $(this.slideId).css("width", parseInt($(this.slideId).css("width")) * ($(this.innerArea+ " li").length + 1));

            // 押されたボタンによって要素を切り替える
            if(isNext){
                var clone = this.slideId + " li:first-child";
                var insertTo = this.slideId + " li:last-child";
                var left = "-=" + $(this.innerArea).css("width");
                // 次へボタンのときはアニメーション前に要素を追加する
                if(isNext) $(insertTo).after($(clone).clone());
            }else{
                var clone = this.slideId + " li:last-child";
                var insertTo = this.slideId + " li:first-child";
                var left = "+=" + $(this.innerArea).css("width");
            }
            $(this.slideId).one("transitionend webkitTransitionEnd oTransitionEnd mozTransitionEnd",()=>{
              if(!isNext) $(insertTo).before($(clone).clone());
              $(clone).remove();  
              $(this.slideId).css({
                left: this.defaultLeftVal,
                WebkitTransition: "",
                MozTransition: "",
                MsTransition: "",
                OTransition: "",
                transition: ""
              });
            });
            $(this.slideId).css({
              left: left,
              WebkitTransition: "left "+ this.time + "ms linear",
              MozTransition: "left "+ this.time + "ms linear",
              MsTransition: "left "+ this.time + "ms linear",
              OTransition: "left "+ this.time + "ms linear",
              transition: "left "+ this.time + "ms linear"
            });
        }        
    }
    var slide = new slider(600, "#slideArea", "#viewableArea", "#prev", "#next");
});

/* コメントのある行は変えても問題ない箇所 */
#viewableArea {
    overflow: hidden;
    width: 102px; /* itemのwidth+border(100px + 2px) */
}
#slideArea {
    position: relative;
    left: -102px; /* item一つ分左にずらす(102px) */
    width: 306px; /* li要素の個数分(102px * 3) */
}

#slideArea > ul{
    padding-left: 0; /* デフォルトのスタイルシート削除用 */
    list-style: none;
}
.item {
    background-color: #e7e7e7; /* list領域をわかりやすくするため */
    border:1px solid #000; /* list領域をわかりやすくするため */
    float: left;
    width: 100px; /* 変更可 */
}

html

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="viewableArea">
  <div id="slideArea">
    <ul>
      <li class="item">
        hoge
      </li>
      <li class="item">
        fuga
      </li>
      <li class="item">
        hoge2
      </li>
    </ul>     
  </div>  
</div>    
<button id="prev">前へ</button>
<button id="next">次へ</button>

B-Teck!

お仕事からゲームまで幅広く