カテゴリー
開発環境 ホームページ製作

docker基本操作

先に削除

コンテナ確認
docker ps -a

コンテナ削除
docker rm コンテナID

後に削除

イメージ確認
docker images

イメージ削除
docker rmi イメージID

カテゴリー
開発環境 ホームページ製作

webpack5のsassにおけるfontawesome

webpack5で、sassのfontawesomeを使うには、npmでダウンロードもできるが、直接ダウンロードのほうが分かりやすく、設定しやすい。

使い方については、下記リンク先を参照にすること。

https://fontawesome.com/how-to-use/on-the-web/using-with/sass

https://qiita.com/oreo3@github/items/08a350520a1f0eaf6e42

https://helog.jp/framework/bootstrap-sass-customize/

https://web.analogstd.com/tips/posts/css/how2use-font-awesome5.php

下記も参考になりそう

カテゴリー
開発環境 ホームページ製作

style.cssとインラインスタイルシートはどちらが速いか

Webpack5で、style.cssとインラインスタイルシートでは、どちらが速いか、高得点になるかを試してみた。条件は下記。

  • ホームページのソースの量は、ほとんどなし。
  • fontawesomeを使う。
  • サーバーは忍者ツールズの無料ホームページ。
  • 審査はグーグルのPageSpeed Insights。

まずは、style.css。style.cssとmain.jsに分割される。

結果は、62点。

次にインラインスタイルシート。webpack5でmain.jsにcssも全てバンドルされる。

結果は、50点。

忍者ツールズの無料ホームページは、広告用のjsファイルがついてくるので、それが遅延の原因になっている可能性があるな。だから、忍者ツールズの無料ホームページでは、jsファイルとcssファイルは別にしたほうがいいのだろう。

【後日談】
http://toushin.konjiki.jp/ というサイトで試してみたら、jsファイルとcssファイルを分割したほうが遅かった。

カテゴリー
開発環境

webpack5とwebpack.config.jsの設定

webpackの設定については、下記リンク先を参照。

https://ajike.github.io/webpack_scss/

http://toushin.konjiki.jp/ というサイトを、Webpack5を使いリニューアルしてみた。package.jsonとwebpack.configの設定でいろいろ考えた結果、下記のようになった。

npmでbootstrap、jqueryは最新版を入れる。bootstrapは4.5.3、jqueryは3.5.1を入れたはずなのに、ChromeのWappalyzerではbootstarpは4.1.3、jqueryは3.3.1と表示される。分からん。

{
  "name": "new11",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "css-loader": "^5.0.0",
    "postcss": "^8.1.4",
    "postcss-loader": "^4.0.4",
    "sass": "^1.28.0",
    "sass-loader": "^10.0.4",
    "style-loader": "^2.0.0",
    "webpack": "^5.3.2",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "bootstrap": "^4.5.3",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  }
}

cssはscssで作る。cssファイルは出力せず、jsとバンドルする設定。

module.exports = {
  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: `./src/index.js`,

  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: "main.js",
  },

  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: "development",

  // ローカル開発用環境を立ち上げる
  // 実行時にブラウザが自動的に localhost を開く
  
  devServer: {
    contentBase: "dist",
    open: true
  },
  

  module: {
    rules: [
      {
        // Sassファイルの読み込みとコンパイル 
        test: /\.(sc|c|sa)ss$/, // 対象となるファイルの拡張子 
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          // CSSをバンドルするための機能
          {
            loader: "css-loader",
            options: {
              // オプションでCSS内のurl()メソッドの取り込まない
              url: false,
              // ソースマップの利用有無
              sourceMap: true,
              // Sass+PostCSSの場合は2を指定
              importLoaders: 2,
            },
          },
          // PostCSSのための設定
          {
            loader: "postcss-loader",
            options: {
              // PostCSS側でもソースマップを有効にする
              sourceMap: true,
              postcssOptions: {
                // ベンダープレフィックスを自動付与する
                plugins: ["autoprefixer"],
              },
            },
          },
          // Sassをバンドルするための機能
          {
            loader: "sass-loader",
            options: {
              // ソースマップの利用有無
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
};
カテゴリー
開発環境

wordpress開発手法

wordpressの開発手法を整理してみた。

  • 自分のgithubにdocker-composeをアップロード。
  • 開発仲間には、docker環境とgithubのアカウントを作ってもらう。
  • 開発仲間を自分のgithubに招待。
  • 開発仲間には、docker-composeをダウンロードしてもらい、同じ環境を作ってもらい開発をスタートしてもらう。
  • 開発仲間には、自分のgithubに適時アップロード、ダウンロードしてもらう。
  • 自分は最新のアップロードされたファイルをチェックする。
  • チェックが終わったら、Git version controlにアップロード。

こんな感じかね。

mixhostのGit version controlは、下記が参考になりました。
https://terreto.work/post/gvc_mixhost

Githubは、下記が参考になりました。
【削除されてました】

それから、ジットではなくギット。