フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

strapiの管理画面の編集する方法

参考にしたページ

strapi.io

github.com

github.com

strapiの管理画面のレイアウトを変更するための準備

  1. node_modules/strapi-admin/admin/src/内の中身をadmin/src内に移動する
  2. node_modules/strapi-plugin-content-manager/admin/src/内の中身をextensions/content-manager/admin/src内に移動する

admin/src内及びextensions/content-manager/admin/src内のファイルを修正した場合、画面に反映させる

  1. yarn buildで変更した内容が反映される。

※ hotrelaodしたい場合、「yarn develop --watch-admin」で起動するとできるらしいが、自分の環境ではhotreadしてくれなかった・・・。

困ったとき

  • strapiのコミュニティがあるので、そこでhelpチャンネルがあり、そこで質問することができる。 strapi.slack.com

expressでjsonwebtokenを利用する

インストール

$ npm install --save jsonwebtoken
$ npm install --save @types/jsonwebtoken

コード

import * as jwt from 'jsonwebtoken'

interface jwtPayload {
  email: string;
  name: string;
}

const jwtPayload: jwtPayload = {
  email: 'yamada.tarou@example.com',
  name: 'Yamada Taro,
};
const token = jwt.sign(jwtPayload, 'secret');
console.log(token)

dockerを使ってexpressを動かしてみる

docker-comsepose

  • ファイルを作成する
version: '3'
services:
  express:
    image: node:14.15.1-alpine
    container_name: express
    ports:
      - '3000:3000'
    volumes:
      - ./express:/opt/express/
    tty: true

docker-build

docker-compose build

初期化

  • npm initコマンドを実行する
# npm init
{
  "name": "express",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

dockerにログインして作業する

  • docker ログイン
docker exec -it express ash
  • expressをインストールする
# npm install express --save

- 下記のエラーが発生する

npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "express" under a package
npm ERR! also called "express". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR! 
npm ERR! For more information, see:
npm ERR!     <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-03-25T23_04_42_464Z-debug.log
  • package.jsonのnameをexpressから違う名前に変更する
{
  "name": "demo",
  (※※ 省略 ※※)
}  
  • 再度インストールするとインストールすることができる
# npm install express --save
  • pegをインストールする
npm install pug
  • views/index.pugファイルを作成する
html
  head
    title= title
  body
    h1= message
  • app.jpファイルを作成する
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.render('index', { title: 'Hey', message: 'Hello there!' })
})

app.set('view engine', 'pug')

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

サーバー起動

node app.js

nuxtjsにvue-smooth-dndを適用する

はじめに

  • 下記のドラック&ドロップのライブラリをnuxtjsに適用してみる github.com

インストール

npm install vue-dnd-zone

コード

  • pages/test.vueファイルを作成する
<template>
  <div>
    <div class="simple-page">
      <Container @drop="onDrop">
        <Draggable v-for="item in items" :key="item.id">
          <div class="draggable-item">
            {{ item.data }}
          </div>
        </Draggable>
      </Container>
    </div>
  </div>
</template>

<script>
import { Container, Draggable } from 'vue-smooth-dnd'
import { applyDrag, generateItems } from '../utils/helpers'
export default {
  name: 'Simple',
  components: { Container, Draggable },
  data() {
    return {
      items: generateItems(50, (i) => ({ id: i, data: 'Draggable ' + i })),
    }
  },
  methods: {
    onDrop(dropResult) {
      this.items = applyDrag(this.items, dropResult)
    },
  },
}
</script>
  • utils/helpers.jsファイルを作成する
export const applyDrag = (arr, dragResult) => {
    const { removedIndex, addedIndex, payload } = dragResult
    if (removedIndex === null && addedIndex === null) return arr
  
    const result = [...arr]
    let itemToAdd = payload
  
    if (removedIndex !== null) {
      itemToAdd = result.splice(removedIndex, 1)[0]
    }
  
    if (addedIndex !== null) {
      result.splice(addedIndex, 0, itemToAdd)
    }
  
    return result
  }
  
  export const generateItems = (count, creator) => {
    const result = []
    for (let i = 0; i < count; i++) {
      result.push(creator(i))
    }
    return result
  }

実行結果

f:id:PX-WING:20210325232401p:plain

簡易版タスク管理機能をRedux Tool Kitで作成してみる②

はじめに

  • 前回、Redux Tool Kitでstoreを作成したので、作成したstoreを利用したコンポーネントを作成してみる

コード

import React from 'react'
import { useSelector } from 'react-redux'
import { selectTasks } from './taskSlice'
import { TaskItem } from './TaskItem'

export const TaskList = () => {
    // useSelectorでstoreに定義しているtasksを取得することができる
    const tasks = useSelector(selectTasks)
    return (
        <div>
            {
                tasks.map((task) => <TaskItem key={task.id} task={task} />)
            }
        </div>
    )
}
import React from 'react'
import { useDispatch } from 'react-redux'
import { doneTask, deleteTask } from './taskSlice'

export const TaskItem = ({ task }) => {
    const dispatch = useDispatch();
    return (
        <div>
            <input type="checkbox" 
                    onClick={()=>dispatch(doneTask(task))}
                    defaultChecked={task.done} />
            <span>{task.title}</span>
            <button onClick={()=>dispatch(deleteTask(task))}>削除</button>
        </div>
    )
}
import React, { useState } from 'react'
import { useDispatch } from "react-redux"
import { createTask } from "./taskSlice"

export const TaskInput = () => {
    const dispatch = useDispatch()
    const [newTitle, setNewTitle] = useState("")
    const handleTitleChange = (e) => {
        setNewTitle(e.target.value)
    }
    const handleSubmit = (e) => {
        e.preventDefault()
        dispatch(createTask(newTitle))
        setNewTitle("");
    }
    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input type="text" 
                  value={newTitle}
                  onChange={handleTitleChange}
                  placeholder="新しいタスクを入力してください"
                />
                <button>追加</button>
            </form>
        </div>
    )
}

実行結果

f:id:PX-WING:20210108084202p:plain

簡易版タスク管理機能をRedux Tool Kitで作成してみる①

はじめに

  • 前回、ReduxToolkitの件を簡単に調べてので今度は実際に実装してみる px-wing.hatenablog.com

コード

  • app/features/task/taskSlice.jsファイルを作成する
import { createSlice } from '@reduxjs/toolkit';

export const taskSlice = createSlice({
  name: 'task',
  initialState: {
      currentId: 3,
      tasks: [
          { id: 1, title: 'タスク1', done: false },
          { id: 2, title: 'タスク2', done: false },
          { id: 3, title: 'タスク3', done: false }          
      ]
  },
  reducers: {
    createTask: (state, action) => {
      // タスクの新規作成
      state.currentId += 1;
      const newTask = {
          id: state.currentId,
          title: action.payload,
          done: false
      }
      state.tasks = [newTask, ...state.tasks]

    },
    doneTask: (state, action) => {
      // 取得したIDのタスクのdoneステータスを変更する
      const task = state.tasks.find((t)=> t.id === action.payload.id)
      if (task){
          task.done = !task.done;
      }
    },
    deleteTask: (state, action) => {
      // 取得したID以外のタスクを取得してstate.tasksを更新する
      state.tasks = state.tasks.filter((t)=> t.id !== action.payload.id)
    }
  },
});

export const { createTask, doneTask, deleteTask } = taskSlice.actions;
export const selectTasks = state => state.task.tasks;
export default taskSlice.reducer;
  • app/store.jsファイルに上記で作成したtaskSliceを追加する
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import taskReducer from '../features/task/taskSlice';

export default configureStore({
  reducer: {
    counter: counterReducer,
    task: taskReducer,
  },
});

確認

  • 上記のファイルを作成した状態で動作確認するとstoreにデータが格納されていることが確認できる f:id:PX-WING:20210107085812p:plain

express adminを動かしてみる

はじめに

  • express版のlaravel admin またはrails adminのようなソースを見つけたので動かしてみる github.com

docker-compose.yaml

  • nodeのイメージをpullするだけのdocker-composeファイルを作成する
version: '3'
services:
  app:
    image: node:14.16.0-alpine
    container_name: app
    ports:
      - "8080:8080"
    volumes:
      - ./express:/srv/backend/app
    environment:
      TZ: Asia/Tokyo
    tty: true
  • node環境を起動する
docker-comose up -d

express adminの雛形をダウンロード及び設定

github.com

  • ローカルに作成されたexpressフォルダ内でgit cloneしてexpress adminのテンプレートをダウンロードする
git clone https://github.com/simov/express-admin-examples.git .
  • 下記のコマンドを実行してDB接続先とexpress adminにログインするアカウント情報を設定する
 ./bin/admin
  • 上記のコマンドだけではhost名など指定できないので、直接express/config.jsonファイルを開きDB接続の指定を行う。
{
    "mysql": {
        "host": "hoge",
        "database": "fuga",
        "user": "hoge",
        "password": "fuga",
        "port": 3306
    },
    "server": {
        "port": 8080
    },
    "app": {
        "layouts": true,
        "themes": true,
        "languages": true
    }
}

express admin起動

  • docker内部にログインする
docker exec -it app ash
  • 下記のコマンドを実行すると起動する
 ./bin/admin

動作確認

  • http://localhost:8080/にアクセスする f:id:PX-WING:20210322234218p:plain