備忘録

備忘録

OnsenUIのons-listを一番下までスクロールする方法

Onsen UI JavaScript

Ⅰ. はじめに

タイトルの通り「OnsenUIのons-listを一番下までスクロールする方法」です。

Ⅱ. やり方

サンプルプログラム
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
</head>
<body>
  <ons-page>
    <ons-list id="number-list">
      <ons-list-item>001</ons-list-item>
      <ons-list-item>002</ons-list-item>
      <ons-list-item>003</ons-list-item>
      <!-- 中略 -->
      <ons-list-item>010</ons-list-item>
    </ons-list>
  </ons-page>
  <script>
  let element = document.getElementById('number-list')
  // 一番下にスクロールさせる
  element.parentElement.scrollTop = element.parentElement.scrollHeight
  </script>
</body>
</html>
実行結果

JavaScriptで非同期的にsleepする方法

JavaScript

Ⅰ. はじめに

タイトルの通り「JavaScriptで非同期的にsleepする方法」です。

Ⅱ. やり方

サンプルプログラム
async function sleep (msec) {
  return new Promise(resolve => setTimeout(resolve, msec))
}

(async () => {
  console.log('hello world 1')
  await sleep(1000)
  console.log('hello world 2')
})()
実行結果


参考

https://qiita.com/asa-taka/items/888bc5a1d7f30ee7eda2

CentOSでspeedtest-cliを実行する方法

CentOS

Ⅰ. はじめに

タイトルの通り「CentOSでspeedtest-cliを実行する方法」です。

Ⅱ. やり方

1. pipをインストールする
yum install epel-release
yum install python-pip
pip install pip --upgrade
2. speedtest-cli をインストールする
pip install speedtest-cli
3. speedtest-cli を実行する
$ speedtest-cli
Retrieving speedtest.net configuration...
Testing from ***(***.***.***.***)...
Retrieving speedtest.net server list...
Selecting best server based on ping...
Hosted by Speedtest.net (Toronto, ON) [94.81 km]: 75.328 ms
Testing download speed...
Download: 316.15 Mbit/s
Testing upload speed...
Upload: 51.62 Mbit/s

その他オプション

speedtest-cli --server 1234
speedtest-cli --no-upload
speedtest-cli --json
speedtest-cli --csv --csv-delimiter "|"

参考

https://github.com/sivel/speedtest-cli

Vue.js+webpackでCropperを使う方法

Vue.js webpack

Ⅰ. はじめに

タイトルの通り「Vue.js+webpackでCropperを使う方法」です。
Cropperは画像のトリミング用のjQueryプラグインですが、有志によりVue.js でも簡単に利用できるようにするパッケージが作成されています。

Cropperの公式デモサイト
https://fengyuanchen.github.io/cropper/

Ⅱ. やり方

1. vue-cropperをインストールする
npm install vue-cropper
2. サンプルプログラムを書く

ImageCropPage.vue

<template>
  <div>
    <vueCropper
      ref="cropper"
      :img="option.img"
      :outputSize="option.size"
      :outputType="option.outputType"
      :fixed="option.fixed"
      :fixedNumber="option.fixedNumber"
      style="height: 500px"
    ></vueCropper>
    <input type="file" id="image" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">
  </div>
</template>

<script>
import VueCropper from 'vue-cropper'

export default {
  components: { VueCropper },
  data () {
    return {
      option: {
        img: null,
        size: 1,
        full: false,
        outputType: 'jpg',
        canMove: true,
        fixedBox: false,
        original: false,
        canMoveBox: true,
        fixed: true, // 比率固定を有効にする
        fixedNumber: [1, 1] // 1:1 の比率
      }
    }
  },
  mounted: function () {
    this.startCrop()
  },
  methods: {
    startCrop () {
      this.$refs.cropper.startCrop()
    },
    uploadImg (e) {
      let file = e.target.files[0]
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert('対応していない画像ファイルです')
        return false
      }

      let reader = new FileReader()
      reader.onload = (e) => {
        if (typeof e.target.result === 'object') {
          this.option.img = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          this.option.img = e.target.result
        }
      }
      reader.readAsArrayBuffer(file)
    }
  }
}
</script>
実行結果

f:id:kagasu:20180610033324p:plain

参考

https://github.com/xyxiao001/vue-cropper

後からGitのリモートを追加する方法

GitHub

Ⅰ. はじめに

タイトルの通り「後からGitのリモートを追加する方法」です。

Ⅱ. やり方

1. Git を初期化する
git init
2. リモートを追加する
git remote add origin https://github.com/user/repository.git
3. pull する
git pull origin main
4. ブランチ名をmainに設定する
git branch -M main