css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              #app
  .container
    //- サイズの入力
    .row
      .input
        .input-item
          label
            small.text-secondary width:
          .input-group.mr-3
            input(type="number", aria-label="width", placeholder="1920", v-model.number="size.width").form-control

        .input-item
          label
            small.text-secondary height:
          .input-group
            input(type="number", aria-label="width", placeholder="1080", v-model.number="size.height").form-control

      button(type="button", v-on:click.prevent="clearInput").btn.btn-link.text-muted.ml-auto
        i.fa.fa-trash.mr-1(aria-hidden="true")
        | clear

    //- アスペクト比
    .row(v-if="canCalc")
      .result
        .aspect-ratio
          //- 縦横比
          .aspect-ratio__item
            .card
              .card-body
                .aspect-ratio__number.ratioByLong
                  span {{ result.byLong.horizontal }}
                  span.ml-1.mr-1 :
                  span {{ result.byLong.vertical }}
            
          //- 短辺基準
          .aspect-ratio__item
            .card
              .card-body
                .aspect-ratio__number.ratioByShort
                  span {{ result.byShort.horizontal }}
                  span.ml-1.mr-1 :
                  span {{ result.byShort.vertical }}

    //- 一般的なアスペクト比で近い値
    .row(v-if="suppose.length > 0")
      .looking-for
        label
          small.text-secondary looking for?
          
        ul.list-group.list-group-flush(v-model="suppose")
          li.list-group-item(v-for="item in suppose")
            .item
              span {{ item.width }}
              span.ml-1.mr-1 ×
              span {{ item.height }}
            .item
              span.ratioByLong {{ item.byLong.horizontal }}:{{ item.byLong.vertical }}
            .item
              span.ratioByShort {{ item.byShort.horizontal }}:{{ item.byShort.vertical }}
      

    //- 履歴
    .row
      .history-header
        label
          small.text-secondary history
          
        button(type="button", v-on:click.prevent="clearHistory", v-bind:disabled="history.length === 0").btn.btn-link.text-muted.ml-auto
          i.fa.fa-trash.mr-1(aria-hidden="true")
          | clear
      
      table.table.table-sm.history-table
        thead
          tr
            td #
            td Size
            td(colspan="2") Aspect Ratio
        tbody
          //- 履歴をリストで表示
          tr(v-for="item in history")
            td {{ item.index }}
            td {{ item.size.width }}×{{ item.size.height }}
            td
              span.ratioByLong {{ item.aspectRatio.byLong.horizontal }}:{{ item.aspectRatio.byLong.vertical }}
            td
              span.ratioByShort {{ item.aspectRatio.byShort.horizontal }}:{{ item.aspectRatio.byShort.vertical }}
            
          
!
            
              body {
  margin: 20px;
  background-color: #eceff1;
}


.row {
  &:not(:last-of-type) {
    margin-bottom: 20px;
  }
}


.input {
  display: flex;
}


.input-item {
  &:not(:last-of-type) {
    margin-right: 20px;
  }
}

.result {
  display: flex;
  flex-direction: column;
  
  label {
    margin-bottom: 0;
  }
}


.aspect-ratio {
  display: flex;
  border-radius: 4px;
}

.aspect-ratio__item {
  display: flex;
  flex-direction: column;
  
  &:not(:last-of-type) {
    margin-right: 2rem;
  }
}


.aspect-ratio__number {
  font-size: 3rem;
}


.looking-for {
  li {
    .item {
      display: inline-block;
      &:not(:last-of-type) {
        margin-right: 1rem;
      }
    }
  }
}


.history-header {
  width: 100%;
  display: flex;
  
  label {
    margin-bottom: 0;
  }
}

.history-table {
  thead {
    background-color: transparent;
  }
  
  tbody {
    background-color: #fff;
    
    tr:nth-child(even) {
      background-color: #fafafa;
    }
  }
  
  // 目次
  td:nth-child(1) {
    color: #9e9e9e;
  }
}


button {
  cursor: pointer;
  
  &[disabled] {
    cursor: default;
    pointer-events: none;
  }
}


// 横縦比
.ratioByLong {
  color: #e53935;
}

// 縦横比
.ratioByShort {
  color: #e53935;
}
            
          
!
            
              // TODO 履歴の削除を1件ごとにできるようにする
// TODO 見た目が分かりにくいので変えた(Materialize?)

const value = {
  size: {
    width: NaN,
    height: NaN
  },  // 入力されたサイズ
  history: [],  // アスペクト比の履歴
  historyDelayTimer: NaN // 履歴に追加するときのディレイ用タイマー
};

const app = new Vue({
  el: '#app',
  data: value,
  
  created: function() {
    // 履歴をクッキーから呼び出す
    const savedHistory = this.loadHistory();
    if (savedHistory) {
      this.history = savedHistory;
    }
  },
            
  methods: {
    
    /**
     * 最大公約数
     *
     * @param {number} a
     * @param {number} b
     * @return 最大公約数
     */
    gcd(a, b) {
      if (b) {
        return this.gcd(b, a % b);
      }
      else {
        return Math.abs(a);
      }
    },
    
    /**
     * サイズが入力されているか
     *
     * @param {number} width 幅
     * @param {number} height 高さ
     * @return 入力されていたらtrue
     */
    validateSize(width, height) {
      return _.isNumber(width) && !isNaN(width) && _.isNumber(height) && !isNaN(height);
    },
    
    /**
     * 幅と高さからアスペクト比を計算する
     *
     * @param width {number} 幅
     * @param height {number} 高さ
     * @return {Object} アスペクト比
     * @return {Object} byLong 長辺()
     * @return {number} byLong.horizontal 横
     * @return {number} byLong.vertical 縦
     * @return {Object} byShort
     * @return {number} byShort.horizontal
     * @return {number} byShort.vertical
     */
    calcAspectRatio(width, height) {
      let byLong = {
        horizontal: NaN,
        vertical: NaN,
      };
      
      let byShort = {
        horizontal: NaN,
        vertical: NaN,
      }
      
      // 最大公約数を計算して、それで割る
      if (this.validateSize(width, height)) {
        // 横基準
        const gcd = this.gcd(width, height);
        byLong.horizontal = width / gcd;
        byLong.vertical = height / gcd;
        
        // 短辺基準
        if (width >= height) {
          // 幅が長い
          byShort.horizontal = width / height;
          if (byShort.horizontal.toString().length >= 10) {
            // 割り切れなさそうな値は丸める
            byShort.horizontal = Math.round(byShort.horizontal * 100) / 100;
          }
          byShort.vertical = 1;
        }
        else {
          // 縦が長い
          byShort.vertical = height / width;
          if (byShort.vertical.toString().length >= 10) {
            // 割り切れなさそうな値は丸める
            byShort.vertical = Math.round(byShort.vertical * 100) / 100;
          }
          byShort.horizontal = 1;
        }
      }
      
      return {
        byLong,
        byShort
      };
    },
    
    /**
     * 幅と高さをクリア
     *
     */
    clearInput() {
      this.size.width = NaN;
      this.size.height = NaN;
    },
    
    /**
     * 履歴をクッキーに保存
     *
     */
    saveHistory() {
      // カンマ区切りの数字だけにする
      let history = [];
      
      this.history.forEach(function (item, index) {
        history.push([item.index, item.size.width, item.size.height, item.aspectRatio.byLong.horizontal, item.aspectRatio.byLong.vertical, item.aspectRatio.byShort.horizontal, item.aspectRatio.byShort.vertical].join(','));
      });

      Cookies.set('history', history.join('|'));
    },
    
    /**
     * 履歴をクッキーから呼び出す
     *
     * @return 履歴
     */
    loadHistory() {
      const history = [];
      const cookie = Cookies.get('history');
      
      if (cookie) {
        const records = cookie.split('|');  // 1件ごとに区切る
        records.forEach(function (record, index) {
          const items = record.split(',');  // 項目ごとに区切る
          
          // データ形式を復元する
          history.push({
            index: Number(items[0]),
            size: {
              width: Number(items[1]),
              height: Number(items[2])
            },
            aspectRatio: {
              byLong: {
                horizontal: Number(items[3]),
                vertical: Number(items[4])
              },
              byShort: {
                horizontal: Number(items[5]),
                vertical: Number(items[6])
              }
            }
          });
        });
      }
      
      return history;
    },
    
    /**
     * 履歴をクリアする
     *
     */
    clearHistory() {
      // タイマーを止める
      if (!isNaN(this.historyDelayTimer)) {
        clearTimeout(this.historyDelayTimer);
      }
      
      this.history = [];  // 変数をクリア
      Cookies.remove('history');  // Cookieをクリア
    }
  },
  
  computed: {
    
    /**
     * 計算可能か(高さと幅が入力されたか)
     *
     */
    canCalc: function() {
      return this.validateSize(this.size.width, this.size.height);
    },
    
    /**
     * 縦横比
     * 
     */
    result: function() {
      return this.calcAspectRatio(this.size.width, this.size.height);
    },
    
    /**
     * 入力された縦横サイズから、近いアスペクト比のサイズを予想する
     *
     */
    suppose: function() {
      //  幅、高さの前後50ピクセルを総当たりして、一般的なアスペクト比になるものがあれば、そのときの縦横サイズ&アスペクト比を返す
      // TODO 総当たりは効率が悪いの&候補が見つからない可能性があるので近い値から計算するようにしたい
      let results = [];
      
      if (this.canCalc === true) {
        const ratioByLong = [this.result.byLong.horizontal, this.result.byLong.vertical];  // 現在の横縦比
        
        // 計算したアスペクト比が一般的なものでなかった場合だけ候補を出す
        if (
          _.difference(ratioByLong, [4, 3]).length !== 0
          && _.difference(ratioByLong, [3, 2]).length !== 0
          && _.difference(ratioByLong, [2, 1]).length !== 0
          && _.difference(ratioByLong, [3, 1]).length !== 0
          && _.difference(ratioByLong, [4, 1]).length !== 0
          && _.difference(ratioByLong, [16, 9]).length !== 0
          && _.difference(ratioByLong, [8, 5]).length !== 0
          && _.difference(ratioByLong, [5, 4]).length !== 0
          && _.difference(ratioByLong, [5, 3]).length !== 0
          && _.difference(ratioByLong, [21, 9]).length !== 0
        ) {
          
          // 一般的なアスペクト比
          // 1:1は計算しなくても分かるので含めない
          let ratios = [
            { w: 4, h: 3 },
            { w: 3, h: 2 },
            { w: 2, h: 1 },
            { w: 3, h: 1 },
            { w: 4, h: 1 },
            { w: 16, h: 9 },
            { w: 8, h: 5 },
            { w: 5, h: 4 },
            { w: 5, h: 3 },
            { w: 21, h: 9 }
          ];
          
          // 縦横比を逆にした比率も設定しておく
          ratios.forEach(function (ratio) {
            ratios.push({ w: ratio.h, h: ratio.w });
          });
          
          
          // 走査する幅を決める(前後10%)
          const range = {
            start: Math.round(this.size.width * 0.9),
            end: Math.round(this.size.width * 1.1)
          };
          
          ratios.forEach(function (ratio) {
            // 結果を計算
            results = results.concat(calcSizeByRatio(ratio.w, ratio.h, range.start, range.end));
          });
          
          // 入力されたサイズに近いサイズから表示したいので、差を計算しておく
          results.forEach((result) => {
            return result.diff = Math.abs(this.size.width - result.width) + Math.abs(this.size.height - result.height);  // 入力されたサイズからの差
          });
          
          // サイズの近いものから取り出す
          results = results
            .sort(function (a, b) {
              return a.diff - b.diff;
              // return a.diff > b.diff; // chromeで機能しない
            })
            .filter(function (element, index) {
              return index < 5;
            });
        }
      }
      
      return results;
    }
  },
  
  watch: {
    result: function() {
      if (!isNaN(this.historyDelayTimer)) {
        clearTimeout(this.historyDelayTimer);
      }
      
      // サイズが変わってしばらくたったら履歴に追加する
      if (this.canCalc) {
        this.historyDelayTimer = setTimeout(() => {
          this.historyDelayTimer = NaN;
          
          // 履歴に追加
          if (this.history.length === 0 || (!_.isEqual(this.size, this.history[0].size) || !_.isEqual(this.result, this.history[0].aspectRatio))) {
            // 最初の1件 or 前回と違っていたら履歴に追加
            this.history.unshift({
              index: this.history.length + 1,
              size: {
                width: this.size.width,
                height: this.size.height
              },
              aspectRatio: {
                byLong: {
                  horizontal: this.result.byLong.horizontal,
                  vertical: this.result.byLong.vertical
                },
                byShort: {
                  horizontal: this.result.byShort.horizontal,
                  vertical: this.result.byShort.vertical
                }
              }
            });
            
            this.saveHistory();
          }
        }, 3000);
      }
    }
  }
});


/**
 * 比率で割り切れるサイズを計算する
 * 
 * @param ratioWidth {number} 幅の比率
 * @param ratioHeight {number} 高さの比率
 * @param start {number} 開始幅
 * @param end {number} 終了幅
 * @return {array} 検索結果
 * @return .width {number} 幅
 * @return .height {number} 高さ
 * @return .byLong {Object} 横縦比
 * @return .byLong.horizontal {number} 横縦比の横
 * @return .byLong.vertical {number} 横縦比の縦
 * @return .byShort {Object} 縦横比
 * @return .byShort.horizontal {number} 縦横比の横
 * @return .byShort.vertical {number} 縦横比の縦
 */
function calcSizeByRatio(ratioWidth, ratioHeight, startWidth, endWidth) {
  let result = [];  // 結果
  
  // start, endは整数にする
  const start = Math.floor(startWidth);
  const end = Math.ceil(endWidth);
  
  // 計算用の比率
  const ratio = ratioHeight / ratioWidth;

  const byLong = {
    horizontal: ratioWidth,
    vertical: ratioHeight
  };  // 横縦比
  const byShort = ratioWidth > ratioHeight ? {
    horizontal: Math.round(ratioWidth / ratioHeight * 100) / 100,
    vertical: 1
  } : {
    horizontal: 1,
    vertical: Math.round(ratioHeight / ratioWidth * 100) / 100
  };  // 短辺を1とした比率
  
  for (let i = start; i < end; i++) {
    const h = i * (ratioHeight / ratioWidth);
    if (h === Math.floor(h) && h !== 0) {
      //高さが割り切れるなら結果に追加
      result[result.length] = {
        width: i,
        height: h,
        byLong,
        byShort
      };
    }
  }
  
  return result;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console