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

みかづきブログ その3

3ヶ月つづけてみました。

CanvasのdrawImageで画像の縮小を綺麗に行なう為のClassをつくりました。 😎

JavaScript

CanvasのdrawImageで画像の縮小を行なう際に、一気にサイズを小さくするとジャギーがひどいことになってしまうことがあったので、段階的に小さくしていくためのClassをつくりました。

インターフェイスとしては、

var obj = SmoothResize.resize(img, zoom);

という感じで、画像と倍率を渡すと、オブジェクトが同期的に返ってくる感じとなっており、
オブジェクトの中身は、

{
  elm    : _elm, // canvas
  width  : _elm.width, // canvasの幅
  height : _elm.height // canvasの高さ
};

という感じです。
いまとなっては、canvasをそのまま返しても良かった気がしています。


Javascript

  // 画像をギザつかせずにリサイズする
  class SmoothResize {
    // 変数節約のために引数を実際よりも多めに取る
    static resize(img, zoom, _elm, _ctx, _elm2, _elm2Ctx, _zoom) {
      _elm      = doc.createElement("canvas");
      _elm2     = doc.createElement("canvas");
      _ctx      = _elm.getContext("2d");
      _elm2Ctx  = _elm2.getContext("2d");
      _zoom     = 1;

      if (zoom >= 1) {
        _elm.width  = img.width  * zoom;
        _elm.height = img.height * zoom;
        _ctx.drawImage(img, 0, 0, _elm.width, _elm.height);
      } else {
        _elm.width  = img.width;
        _elm.height = img.height;
        _ctx.drawImage(img, 0, 0);

        while (_zoom > zoom) {
          _zoom /= 2;
            
          if (_zoom / 2 < zoom) {
            _zoom = zoom;
          }
            
          _elm2.width  = img.width  * _zoom;
          _elm2.height = img.height * _zoom;
          _elm2Ctx.drawImage(_elm, 0, 0, _elm2.width, _elm2.height);

          _elm.width  = _elm2.width;
          _elm.height = _elm2.height;
          _ctx.drawImage(_elm2, 0, 0, _elm.width, _elm.height);
        }

        _elm.width  = img.width  * zoom;
        _elm.height = img.height * zoom;
        _ctx.drawImage(_elm2, 0, 0, _elm.width, _elm.height);
      }

      return {
        elm    : _elm,
        width  : _elm.width,
        height : _elm.height
      };
    }
  }

変数を節約するところ以外はかなり愚直に書きました。


DEMO

左が普通に縮小したとき、右が段階的に縮小した時です。
若干きれいに縮小できています。

JavaScript
  var img = new Image(),
      zoom = 0.05;
  
  img.onload = () => {
    (() => {
      // 普通に縮小
      var canvas = document.getElementById("canvas"),
          ctx = canvas.getContext("2d");
      
      canvas.width = img.width * zoom;
      canvas.height = img.height * zoom;
      ctx.drawImage(img, 0, 0, img.width * zoom, img.height * zoom);
    })();
      
    (() => {
     // 段階的に縮小
      var obj = SmoothResize.resize(img, zoom);
      
      doc.body.appendChild(obj.elm);
    })();
  };

  img.src = "https://dl.dropboxusercontent.com/u/325592/IMG_0029.JPG";

『山田孝之のカンヌ映画祭』が好きすぎて、OP曲、フジファブリックの 『カンヌの休日 feat. 山田孝之』にでてくる映画をまとめてみました。 📽

考えたこと

『山田孝之のカンヌ映画祭』

いま一番面白いと思っているドラマです。

http://www.tv-tokyo.co.jp/yamada_cannes/images/mainvisual01.jpg
http://www.tv-tokyo.co.jp/yamada_cannes/ より引用


www.tv-tokyo.co.jp


内容

山田孝之の2016年夏の記録
2016年夏山田孝之は、映画監督山下敦弘を呼び出す。
山田は山下に、世界最高峰のカンヌ映画祭で賞をとりたいと告げる。
後日、とある場所で集まった山田と山下は、早速映画の内容について話し始めた。

http://www.tv-tokyo.co.jp/yamada_cannes/introduction/ より引用

とまあ、ドキュメンタリー風のドラマなんですが、
パルムドールを受賞するために山田孝之が(やや強引に)奔走するストーリーとなっております。

OP曲

『カンヌの休日 feat. 山田孝之』

http://gyao.yahoo.co.jp/player/00100/v09964/v0993900000000548545/gyao.yahoo.co.jp


こちらで視聴できます。
ありがたい時代になりましたね。

さてさて、この楽曲。曲もとても良いのですが、
歌詞が大変ユニークで、ほとんどがカンヌ映画祭での賞を受賞した映画のタイトルになっております。
接続詞以外でいうと、

  • 「パルムドール」
  • 「真っ赤な絨毯」
  • 「黄金のシュロをください」
  • 「カンヌの素敵な映画祭」

以外はすべて映画のタイトル、しかも(1作を除いて)カンヌで賞を受賞(パルム・ドールとは限りませんが)したことのある作品、
除かれた1作もカンヌにノミネートされた作品です。
そんな制限の中で産まれた歌詞なのですが、とても自然な仕上がりになっています。
サビに、パルム・ドール受賞作よりも知名度のある、「誰も知らない」「ダンサー・イン・ザ・ダーク」などを配置しているのもうまいですね。
「あれ?映画のタイトルが散りばめられているのかな?」と気づく人を増やす効果が見込めそうです。
そこまで気づいた方は、実際は散りばめられているどころか、ほとんどが映画の歌詞であることに気づき驚くことでしょう。

ではでは、そんなこんなで、歌詞にでてくる順に映画の概要をまとめていきたいと思います。

続きを読む

Pug(Jade)でfor文を書く 😎

HTML

単純にfor文を書きたければ、

Pug
- for (var $i = 0; $i < 10; ++$i) {
  .box
- }

HTML
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

になります。
単純なループです。

$iの値をつかいたければ、

Pug

- for (var $i = 0; $i < 10; ++$i) {
  .box #{$i}
- }

という感じで、#{}で囲えば、

HTML

<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>

という感じで文字列として活用できます。


PugをHTMLにコンパイルする方法ですが、
いつもはGulpで変換していますが、
小規模なものであればCodePenでちゃちゃっと変換してしまってます。

codepen.io

f:id:kimizuka:20170208100048p:plain

Settings から HTML Preprocessor を Pug にすればOKです。便利ですね。

万が一、HTML を Pugにしたいときは、 こちらの記事 をご確認ください。

kimizuka.hatenablog.com