Codes | codit

<div class="box">
  <p class="img">
    <img src="hogehoge.png" alt="hoge" />
  </p>
  <p class="title">
    テストテキストです。
  </p>  
</div>

<style>
.box{
  width: 80px;
  height: 80px;
  position: relative;
}

.img{
  width: 100%;
  height: 100%;
  position: relative;
}

.img:after{
  width: 100%;
  height: 100%;
  position: absolute;
  content: '';
  display: block;
  top: 0;
  right: 0;
  background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(51,51,51,0) 35%, rgba(51,51,51,0.2) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(51,51,51,0) 35%,rgba(51,51,51,0.2) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(51,51,51,0) 35%,rgba(51,51,51,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#33333333',GradientType=0 );
}

.title{
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
</style>

CSS3 画像の上に乗せた白文字を見やすくする C0d3man52

// 以下router-viewするコンポーネントの設定
<keep-alive :include="/List/" :max="20">
  <router-view/>
</keep-alive>

// 以下キャッシュさせるコンポーネント側の設定
<script>
export default {
  name: "TopList", // ここにマッチする
}
</script>

JAVASCRIPT Vue.jsのnameにマッチしたコンポーネントをkeep-aliveする Koji Kadoma

methods: {
  someMethod(){
    setInterval(function () {
    console.log('30秒毎に処理')
      setTimeout(
        function() {
          console.log('5秒後に処理')
          setTimeout(
            function() {
              console.log('4秒後に処理')
            }.bind(this),
            4000
          );
        }.bind(this),
        5000
      );
    }.bind(this), 30000)
  },

JAVASCRIPT Vue.jsのmethodでsetInterval、setTimeoutを使う場合の注意点 Koji Kadoma

export default {
  beforeMount () {
    window.addEventListener('scroll', this.scrollHandler);
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.scrollHandler);
  },
}

JAVASCRIPT Vue.jsのSPAでページ遷移時にEventListenerを登録・解除する Koji Kadoma

<template>
  <div v-for="data in List" :key="data.page" class="list" :id="'page-' + data.page">
    何かの表示
  </div>
<template>

JAVASCRIPT v-forで要素の連番をつける Koji Kadoma

data() {
  return {
    pageTotal: 0,
    pageNumber: 1,
  };
},
computed: {
  getRel: function() {
    let rel = []

    if(this.pageNumber !== 1){
      const prev = { rel: 'prev', id: 'rel-prev'}
      prev.href = this.$route.path + '?page=' + (parseInt(this.pageNumber) - 1)
      rel.push(prev)
    }
    if(parseInt(this.pageNumber) < parseInt(this.pageTotal)){
      const next = { rel: 'next', id: 'rel-next'}
      next.href = this.$route.path + '?page=' + (parseInt(this.pageNumber) + 1)
      rel.push(next)
    }
    return rel
  },
},
head: {
  link: function () {
    return this.getRel
  },
},

JAVASCRIPT vue headでHTMLヘッダにlink relを動的に追加・削除・変更する Koji Kadoma

<form @submit.prevent="doSearch">
  <label for="search-txt">検索</label>
  <input type="text" name="key" placeholder="検索する" id="search-txt">
</form>

JAVASCRIPT Vue.jsのフォームでsubmitをさせないでページ遷移させる Koji Kadoma

<input type="text" name="key" placeholder="キーワードで探す"  v-model="keyword">
.
. // 省略
.
computed: {
  keyword: {
    get () {
      return this.$store.state.getKeyword
    },
    set (value) {
      this.$store.commit('setKeyWord', value)
    }
  }
},

JAVASCRIPT フォームのinputでVuexのstoreデータをv-modelで使ってリアルタイムで変更する Koji Kadoma

getPaginate: function() {
  let pages = []
  // 最大ページ数から1引いた半分の数値をstartとendにセットする
  let start = parseInt(this.page) - (parseInt(this.pageMax - 1)/2);
  let end = parseInt(this.page) + (parseInt(this.pageMax - 1)/2);

  // startが1未満だった時はstartを1にしてendを最大ページ数にする
  if (start <= 0) {
    end = this.pageMax
    start = 1
  }

  // endがpageTotal以上だった時はendをpageTotalにして
  // startを合計ページから最大ページ数-1個分戻った値にする
  if(this.pageTotal <= end){
    end = this.pageTotal
    start = parseInt(this.pageTotal) - parseInt(this.pageMax - 1)
  }

  // ループしてpagesにページ番号を挿入する
  for(let i =start; i<=end; i++){
    pages.push(i)
  }
  return pages
},

JAVASCRIPT Googleっぽいページャーのロジック Koji Kadoma

<template>
  <div>
    <router-view v-bind:hoge="fuga"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fuga: {1: 'apple', 2: 'lemon'}
    }
  }
}
</script>

JAVASCRIPT Vue Routerで、ネストした子ルートに親のdataを渡す Koji Kadoma

```
{
 "data-root": "/to/some/path"
}
```
DOCKER Dockerの保存先を変更・移動する C0d3man52

<template>
  <ul>
    <li v-for="page in pages">
      <router-link :to="page.route" v-bind:exact="page.exact">
        <span>{{page.title}}</span>
      </router-link>
    </li>
  </ul>
</template>

<script>

export default {
data() {
  return {
    pages: {
      page1: {
        route: {name: 'ParentChild1'}},
        title: '子ページ',
        exact: false, 
      },
      page2: {
        route: {name: 'Parent'}},
        title: '親ページ',
        exact: true, // trueじゃないと、子ページルート時にもactiveになる
      },
      page3: {
        route: {name: 'ParentChild2'}},
        title: '子ページ2', //このページ内でさらに子子ルートをネストしている
        exact: false,
      }    
    }
  }
}
}
</script>
<style>
.router-link-active{

}
</style>

JAVASCRIPT [Vue.js] ネストしたRouteで、親ルート以下の場合activeクラスを付与する Koji Kadoma

.
.
.

router.afterEach((to) =>{
  if(store.getters.pageCount < 1){
    store.commit('addPageCount')
  }else{
    store.commit('setHasHistory', true)
  }
})

JAVASCRIPT Vue.js + Vuexで自サイトにHistoryがあるかを判定する Koji Kadoma

<template>
  <div>
    <button v-show="appBnr">インストールする</button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      appBnr: false
    };
  },
  mounted () {
    // アプリ
    if (window.matchMedia('(display-mode: standalone)').matches === false) {
      this.appBnr = true;
    }
    // safari
    if (window.navigator.standalone === false) {
      this.appBnr = true;
    }
  },
}
</script>

JAVASCRIPT Vue.jsでPWAアプリとして表示されているかを判定する Koji Kadoma

<template>
  <div>
    <button v-on:click="installBnr">インストールする</button>
  </div>
</template>

<script>

export default {
  methods: {
    installBnr(){
      let deferredPrompt;

      window.addEventListener('beforeinstallprompt', (e) => {
        // Prevent Chrome 67 and earlier from automatically showing the prompt
        e.preventDefault();
        // Stash the event so it can be triggered later.
        deferredPrompt = e;
        deferredPrompt.prompt();
      });
    }
  }
}
</script>

JAVASCRIPT Vue.jsでPWAのインストールポップアップ（ホーム画面に追加ダイアログ）を強制的に表示させる Koji Kadoma

const commandLineArgs = require('command-line-args');

const optionDefinitions = [
  {
    name: 'verbose',
    alias: 'v',
    type: Boolean
  },
  {
    name: 'title',
    alias: 't',
    type: String,
  },
  {
    name: 'num',
    alias: 'n',
    type: Number,
    defaultValue: 3
  }
];
const options = commandLineArgs(optionDefinitions);

JAVASCRIPT Node.jsでコマンドラインの引数管理をする Koji Kadoma

const collection = await db.collection('user')
const tasks = await collection.updateMany(
   { "alive": true, "last_login": { $lte: dayjs().subtract(1, 'year').toISOString() } },
   {
     $set: { "alive": false },
   }
)

JAVASCRIPT MongoDBでfindで絞り込みをして一括アップデート(Node.js) Koji Kadoma

```
docker run -v /path/to/dir:/app -v /etc/localtime:/etc/localtime:ro hoge:latest
```
DOCKER docker runで-vオプションで複数のマウントを設定する C0d3man52

const name = 'hoge'
let method_name = 'mtd_' + name
let property_name = 'prop_' + name

await SomeFunc[method_name]();  // メソッド
await SomeFunc[property_name];  // プロパティ

JAVASCRIPT Javascriptでメソッド名やプロパティ名を動的に呼び出す Koji Kadoma

Dockerfile

FROM node:12.6-alpine

WORKDIR /app

RUN apk update && \
    apk add git && \
    apk add --no-cache curl && \
    curl -o- -L https://yarnpkg.com/install.sh | sh

ENV PATH $HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH

CMD ["sh"]

DOCKER Node.js + yarnのDockerイメージのDockerfile Koji Kadoma

```
sudo apt-get install build-essential curl file git
```
RUBY UbuntuのHomebrewで「No developer tools installed.」の対策 Koji Kadoma

// 
// 何かのコード
// 

res.type('application/xml');
return res.send(sitemap)

JAVASCRIPT node.js ExpressでXMLフォーマットを出力する Koji Kadoma

<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<urlset>
  <url>
    <loc>URL</loc>
    <lastmod>YYYY-MM-DDD</lastmod>
    <changefreq>daily</changefreq>
  </url>
</urlset>

HTML5 サイトマップの基本フォーマット C0d3man52

#!/bin/bash
# バックアップディレクトリに移動
cd /path/to/backup

# データベースのバックアップ
mysqldump -uユーザー名 -pパスワード データベース名 > db_bk.sql

# Google Driveのバックアップ用に作ったフォルダに同期する
/usr/sbin/gdrive sync upload . アップロードするフォルダのfileId --keep-local

MYSQL MySQLのバックアップをGoogle Driveに同期する C0d3man52

const cacheControl = require('express-cache-controller');
app.use(cacheControl({ maxAge: 0 }));

app.get('/prefecture/:id/detail.json' function(req, res, next) {
  // 何かの処理 
  
  res.cacheControl = {
    maxAge: 15552000
  };  
  
  return res.send(何かのデータ)
});

JAVASCRIPT Expressでキャッシュコントロールする「express-cache-controller」の使い方 Koji Kadoma

#実行
db = Mysql2::Client.new('DB設定')
sql = "SELECT * FROM posts WHERE status = 1"
stmt = db.prepare(sql)
res = stmt.execute()

#結果チェック
p res.count //-> 件数がでる。 
p res.size //-> 件数がでる。

if res.count > 0
#何かの処理
end

if res.size> 0
#何かの処理
end

RUBY RubyのMySQL2 gemで結果の有無を確認する方法 Koji Kadoma

GRANT ALL PRIVILEGES ON *.* TO ユーザー名@'%' IDENTIFIED BY 'パスワード' WITH GRANT OPTION;

MYSQL 権限付きユーザーを新規作成するMySQLコマンド C0d3man52

<template>
  <div>
  </div>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>

JAVASCRIPT vueテンプレートの空ファイル Koji Kadoma

<script>
export default {
  name: 'home',
  mounted: function(){
    const title = "タイトル"
    const description = "説明文"
    document.title = title
    document.querySelector("meta[property='og:title']").setAttribute('content', title)
    document.querySelector("meta[name='description']").setAttribute('content', description)
    document.querySelector("meta[property='og:description']").setAttribute('content', description)
  }
}
</script>

JAVASCRIPT Vue JSでtitleやmetaタグを動的に変更する Koji Kadoma

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <title>vue-skeleton</title>
    <meta name="robots" content="noindex,nofollow">
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="/js/bundle.js"></script>
  </body>
</html>

JAVASCRIPT Vueのindex.html C0d3man52