2020-03-24 1分 read (About 199 words)

【Vue.js】要素の枠線をマウスで掴んでサイズ変更する

はじめに

要素の枠線をマウスで掴んでサイズ変更するやり方をメモします

2020-03-18 数秒 read (About 35 words)

JavaScript でクラスを追加・削除する方法

JavaScript でクラスを追加・削除する方法です

1
2
3

const item = document.querySelector('.hoge')
item.classList.remove('hoge')
item.classList.add('fuga')

以上です

2020-03-18 4分 read (About 547 words)

【JavaScript】CSVをインポートするコード

はじめに

JavaScript で CSV を取り込むコードです

CSV 取り込みの文字をクリックでファイル選択するか、ドラッグアンドドロップでもできます。

2020-03-09 数秒 read (About 79 words)

JavaScriptでのダブルクリック処理の実装方法

コード

data: {
  delay: 500,
  clicks: 0,
  timer: null
},

click_one(){
  this.clicks++
  if(this.clicks === 1) {
    var self = this
    this.timer = setTimeout(function() {
      // ここにシングルクリック書処理
      self.clicks = 0
    }, this.delay);
  } else{
    clearTimeout(this.timer);
    // ここにダブルクリックの処理
    this.clicks = 0;
  }
},

参考

https://stackoverflow.com/questions/41303982/vue-js-how-to-handle-click-and-dblclick-events-on-same-element/56046910

2020-03-09 1分 read (About 145 words)

【Vue.js】無限スクロール処理

ライブラリ公式ページ

https://peachscript.github.io/vue-infinite-loading/

ライブラリインストール

1	npm install vue-infinite-loading -S

コンポーネント登録

main.js

import InfiniteLoading from 'vue-infinite-loading'
Vue.use(InfiniteLoading, {
  slots: {
    noResults: '',
    noMore: ''
  }
})

HTML コード

<template>
  <div>
    <div v-for="hoge in hoge_list"></div>
    <infinite-loading ref="infiniteLoading" spinner="bubbles" v-on:infinite="infiniteHandler"></infinite-loading>
  </div>
</template>

JavaScript コード

infiniteHandler() {
  if (/* 無限するロールする条件 */) {
    this.get_news_list();
  } else {
    console.log("無限スクロール完了")
    this.$refs.infiniteLoading.stateChanger.complete();
  },
},

async get_news_list() {
  const params = {
    page: this.page,
  };
  const res = await this.gm_api_get("news", params)
  this.page += 1;
  this.$refs.infiniteLoading.stateChanger.loaded();
}

this.$refs.infiniteLoading.stateChanger.reset();で初期化できます

2020-02-06 1分 read (About 128 words)

【Vue】inputのv-modelの値を0以上に制限する方法

input の v-model の値を 0 以上に制限する方法をメモします

filter だと表示上は制限できますが実際の値は制限できないんですよね

コツとしては v-model を使うのではなく、:value と@change に分けることですね

分かってしまえば簡単ですが微妙にハマったので一応メモしておきます

<div>
  <label>test label</label>
  <input type="number" :value="hoge" @change="min($event.target.value)" />
</div>

methods: {
  min(val) {
    if (val < 0) {
      this.hoge = 0;
    } else {
      this.hoge = val;
    }
  },

2020-02-05 2分 read (About 361 words)

SpotifyからLINE MUSICに乗り換えました

みなさん音楽のサブスクリプションサービスは何使ってますか？

僕はたった今 Spotify から LINE MUSIC に乗り換えました

その理由を紹介します

Spotify はデスクトップアプリもあって使いやすくてずっと好きだったのですが、１つだけ不満があって

それは「プレイリストの検索を曲名で行えない」んですよね

なぜかプレイリストの名前と説明欄からしか検索できないんです
そんなの意味ないですよね、、

好きな曲の探し方って、好みが似た人を見つけて、その人が他にどんな曲を聴いているのか教えてもらうのが一番良くないですか？

それがまさにプレイリストを曲名で検索することだと思ってて

それが出来ないのがツラすぎたので乗り換えました

LINE MUSIC はデスクトップアプリはないけどブラウザ版があるし僕は基本的に邦楽を聞くのですが LINE MUSIC は邦楽が多くてちょうど良かったです

好きだったのになあ、Spotify、、ばいばい、、

2020-01-30 1分 read (About 124 words)

【Node.js】文字列をハッシュ化する方法

はじめに

Node.js で文字列を hash 化する手順をメモしておきます

他の記事で crypto ライブラリを使っているものをよく見ますが、crypto ライブラリは deprecated になったので使わない方が良いです
以下では crypto-js ライブラリを使ってます

手順

1
2
3

const CryptoJS = require('crypto-js')
const password = 'hoge'
const hashed_password = CryptoJS.SHA256(this.password).toString(CryptoJS.enc.Base64)

以上です

2020-01-19 8分 read (About 1254 words)

botterの漫才を作ってみたw

はじめに

ミルクボーイが 2019 年の M １優勝しましたね！
テンプレ漫才なので botter を題材として作れるんじゃね？と思って実際に書いてみたので良かったら読んでみて下さい！

2020-01-17 2分 read (About 257 words)

【Cordova】よく利用するプラグイン一覧

はじめに

最近は Cordova を利用したハイブリッドアプリが流行ってきてますね
Cordova を導入した時にいつも入れているプラグインをメモしておきます

【Vue.js】要素の枠線をマウスで掴んでサイズ変更する

はじめに

JavaScript でクラスを追加・削除する方法

【JavaScript】CSVをインポートするコード

はじめに

JavaScriptでのダブルクリック処理の実装方法

コード

参考

【Vue.js】無限スクロール処理

ライブラリ公式ページ

ライブラリインストール

コンポーネント登録

HTML コード

JavaScript コード

【Vue】inputのv-modelの値を0以上に制限する方法

SpotifyからLINE MUSICに乗り換えました

【Node.js】文字列をハッシュ化する方法

はじめに

手順

botterの漫才を作ってみたw

はじめに

【Cordova】よく利用するプラグイン一覧

はじめに

タグクラウド

アーカイブ

タグ

アーカイブ

タグ

Your browser is out-of-date!