Koji Kadomaさんのcoditページ | Author

Author

Koji Kadoma: Member of codit.work

PHP、Ruby、Dockerなどのコードを共有することが多いです。今年の目標はもっとJavascriptを書くこと！

coditへのお問い合わせはこちらからお願いします。

Koji Kadomaさんのコード

import { createApp } from 'vue'
import App from './App.vue'
import dayjs from 'dayjs';

const app = createApp(App);
app.config.globalProperties.$dayjs = dayjs
app.mount('#app')

JAVASCRIPT Vue.js 3でdayjsをグローバルに組み込む方法 Koji Kadoma

import { createApp } from 'vue'
import App from './App.vue'
import routes from './routes'
import { store } from './stores/'

const app = createApp(App);
app.use(routes);
app.use(store);
app.mount('#app')

JAVASCRIPT Vue.js 3でのmain.jsの書き方 Koji Kadoma

docker run --detach -it --restart=always --name=dropbox -e "POLLING_INTERVAL=20" -v /home/rancher/Dropbox:/opt/dropbox/Dropbox otherguy/dropbox:latest

DOCKER Dropboxのdockerコンテナを立ち上げる Koji Kadoma

<template>
  <p id="exscript">
    <ins class="banner"></ins>
  </p>
</template>
<script>
  export default {
    mounted() {
      let scriptEl = document.createElement('script')
      scriptEl.setAttribute('src', 'スクリプトのURL')
      document.getElementById('exscript').appendChild(scriptEl)
    }
  }
</script>

JAVASCRIPT Vue.jsのコンポーネントで外部scriptをロードする方法 Koji Kadoma

{
  "name": "hoge",
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome dev",
    "lint": "vue-cli-service lint",
    "deploy": "gridsome build && netlify deploy --dir=dist/ -p"
  }
}

JAVASCRIPT Gridsomeコマンドを短くして使う方法 Koji Kadoma

<template>
  // OK
  <p v-if="!$route.params.page">1〜{{perPage}}件</p>

  // NG
  <p v-if="$route.params.page === null">1〜{{perPage}}件</p>

  // NG
  <p v-if="$route.params.page === 'undefined'">1〜{{perPage}}件</p>
</template>

JAVASCRIPT Vue.jsのテンプレート内でundefinedを判定する方法 Koji Kadoma

plugins: [
  {
    use: 'gridsome-plugin-matomo',
    options: {
      host: 'matomoのアドレス', // https:から書くこと
      siteId: サイトID
    }
  }
]

JAVASCRIPT Gridosomeに秒殺でmatomo analyticsを組み込む Koji Kadoma

export default function (Vue, { router, head, isClient }) {
  // 省略

  const gIndex = head.meta.findIndex(e => e.name === 'generator')
  if (gIndex !== -1) head.meta.splice(gIndex, 1)
}

JAVASCRIPT Gridosomeでジェネレータのmetaタグを削除する方法 Koji Kadoma

```
yarn add @gridsome/transformer-remark
```
JAVASCRIPT Gridosomeで「No transformer for 'text/markdown' is installed.」と出た時の対応 Koji Kadoma

window.navigator.serviceWorker.getRegistrations()
.then(registrations => {
  for(let registration of registrations) {
    registration.unregister();
  }
});
window.location.reload(true);

JAVASCRIPT PWAでキャッシュを消して強制アップデートをする方法 Koji Kadoma

module.exports = {    
  chainWebpack: config => {
    config
      .plugin('html-inline-source')
      .use(require('html-webpack-inline-source-plugin'))
    config.plugin('html').tap(args => {
      args[0].inlineSource = '^(/css/.+\\.css)'
      return args
    })
  }
}

JAVASCRIPT Vue.jsでCSSスタイルをHTMLヘッダーのインライン化する設定 Koji Kadoma

image: node:latest

pages:
  stage: deploy
  only:
    - master
  before_script:
    - 'yarn config set cache-folder .yarn'
    - 'yarn install'
  script:
    - 'yarn build'
    - 'mv public public_org && mv dist public'
  artifacts:
    paths:
      - public

JAVASCRIPT Gitlab CI/CD/PagesでVue.jsアプリをビルド&デプロイする設定ファイル Koji Kadoma

// langは表示中の言語。config.tomlで設定する
// 直後の数字は桁数

{{lang.NumFmt 0 .Params.price}}

GO HUGOで数字のフォーマット（number format）をする Koji Kadoma

```
h1{
  display: flex;
  justify-content: center;
}
```
CSS3 複数行なら左寄せ、1行ならセンタリングさせるCSSコード Koji Kadoma

import Dexie from 'dexie';

const db = new Dexie('testDB');

async noteInit(){
  await db.delete();
  await db.version(1).stores({
    notes: 'fileName, noteTxt',
  });
  await db.open()
},

JAVASCRIPT Dexie.jsでテーブルを作り直したい時の対応 Koji Kadoma

```
{{ .Params.price | lang.NumFmt 0}}
```
GO HUGOのテンプレートで値段を整形（number format）する Koji Kadoma

{{- if .IsTranslated -}}
{{ range .Translations }}
<link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}" title="{{ .Language.LanguageName }}">
{{- end -}}    
{{- end -}}

GO 多言語化したHUGOサイトのHTMLヘッダにlink rel="alternate"で他言語へのリンクをつける Koji Kadoma

{{ if .IsTranslated }}
<div class="translated__box">
  <ul class="tab__btn">
    <li>
      <span class="tab__btn--item current-lang">{{ .Site.Language.LanguageName }}</span>
    </li>
  {{ range .Translations }}
    <li>
      <a class="tab__btn--item" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
    </li>
  {{end}}
  </ul>
</div>
{{end}}

GO HUGOで他言語へのリンクする Koji Kadoma

```
---
title: Categories
outputs:
  - html
  - json
---
```
GO HUGOでカテゴリ一覧(Taxonomy Term)のJSONファイルを出力する Koji Kadoma

// page.vue (呼び出し元)
<Btn :to="'/'" :className="{active: true}">実行する！</btn>

// btn.vue (受け取り側)
<template>
  <router-link class="btn" :class="className" :to="to"><slot></slot></router-link>
</template>

JAVASCRIPT Vue.jsの子コンポーネントに簡単にclassを付与する方法 Koji Kadoma

buildImgProxyUrl: function(url){
  const crypto = require('crypto');
  const key = 'CAMO_KEY'; // 自分のものに置き換える
  const hmac = crypto.createHmac('sha1', key);
  const convUrl = hmac.update(url);
  const digest = hmac.digest('hex')
  const result = 'サーバーのURL' + digest + '?url=' + encodeURIComponent(url)  // 自分のものに置き換える
  return result;
}

JAVASCRIPT 画像プロキシ・camoのdigestコードを生成してURLを返すスクリプト Koji Kadoma

```
for(let [key, val] of Object.entries(testObj)){
  this[key] = val
}
```
JAVASCRIPT Javascriptで連想配列をPHPのforeachっぽい書き方でループを回す Koji Kadoma

// 以下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

<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

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

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

<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

    {{ $json_url := 'APIのURL' }}
    {{ $data := getJSON $json_url }}

    {{ if gt (len $data) 0 }}{{   if not (eq (index $data 0) "") }}
    <section>
      <ul>
        {{range $data }}
        <li>
          <a href="{{ .referer }}" target="_blank">
            <span>{{ .title}}</span>
            <span>{{ .url}}</span>
          </a>
        </li>
        {{ end }}
      </ul>
    </section>
    {{ end }}{{ end }}

GO HUGOのテンプレートで外部APIのJSONデータをロードして展開する Koji Kadoma

{{ $v1 := (where .Site.RegularPages "Section" "topics" )}}
{{ $v2 := (where .Site.RegularPages ".Params.slug" "!=" .Params.slug)}}
{{ $related:= $v1 | intersect $v2 }}
{{ with $related }}
    <ul class="article-list">
      {{ range . }}
      {{ partial "li" .}}
      {{ end }}
    </ul>
{{ end }}

GO HUGOで、表示させている記事以外の同一セクションの記事一覧を抽出する Koji Kadoma

{{ $style := resources.Get "sass/main.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

SASS HUGOでSASSを使うためのコード Koji Kadoma

*, *:before, *:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
}

CSS3 box-sizingを全ブラウザでborder-boxにする Koji Kadoma

FROM anatolinicolae/alpine-cloud9
MAINTAINER c0d3man <hoge@fuga.com>

RUN sed -i -e 's/v3\.4/v3.6/g' /etc/apk/repositories
RUN apk --no-cache add php7 php7-fpm php7-mysqli php7-json php7-openssl php7-curl \
php7-zlib php7-xml php7-phar php7-intl php7-dom php7-xmlreader php7-ctype \
php7-mbstring nginx supervisor curl

DOCKER Alpine LinuxベースのCloud9 + PHP 7コンテナ Koji Kadoma

FROM alpine:latest

RUN wget https://github.com/gohugoio/hugo/releases/download/v0.41/hugo_0.41_Linux-64bit.tar.gz
RUN tar -xzf hugo_0.41_Linux-64bit.tar.gz
RUN mv hugo /usr/local/bin/hugo
RUN mkdir -p /hugo
## Install lftp & PHP
RUN apk update && apk add lftp

DOCKER ジェネレイト&FTPができるHUGOコンテナのDockerfile Koji Kadoma

Koji Kadomaさんのコード

Koji Kadomaさんのノート