Home

Posts

craco（Tailwindcss+React)の設定でエラーが発生する

craco（Tailwindcss+React)の設定でエラーが発生する Reactで利用する craco のインストール自体もうまくいかないので以下の方法を取る。 npm install craco --force で、設定ファイル(craco.config.js)も作成するもエラーが発生。 これも一部ソースを変更してみる。 module.exports = { style: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, } ↓ module.exports = { style: { postcssOptions: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, }

JavaScriptのPromise処理一覧サンプル

Promiseのチェーンメソッドの挙動のサンプル。 function promiseFn(count) { return new Promise((resolve, reject) => { setTimeout( () => { count++; console.log(`${count}回目の呼び出し`); if(count === 3){ reject(count); } else { resolve(count); } }, 1000 ); }); } promiseFn(0) .then(count => { return promiseFn(count); }) .then(count => { return promiseFn(count); }) .then(count => { return promiseFn(count); }) // ←この関数は実行されない .catch( errorCount => { console.error(`エラーに飛びました。カウント数は${errorCount}。`); }) .finally( () => { console.log("処理の終了"); }); console.log("初回に出力されるログ。"); /* > 初回に出力されるログ。 > 1回目の呼び出し > 2回目の呼び出し > 3回目の呼び出し > ❌ エラー処理: カウントは3。 > 処理の終了 */ 上のチェーンメソッドを async/await で書き直す。 function promiseFn(count) { return new Promise((resolve, reject) => { setTimeout( () => { count++; console.log(`${count}回目の呼び出し`); if(count === 3){ reject(count); } else { resolve(count); } }, 1000 ); }); } async function exe(){ // (1) try { // (2) let count = await promiseFn(0); count = await promiseFn(count); count = await promiseFn(count); count = await promiseFn(count); // ← この関数は実行されない } catch ( errorCount ){ console.error(`エラー処理: カウントは${errorCount}。`); } finally { console.log("処理の終了"); } } exe(); console.log("初回に出力されるログ。"); // (3) /* > 初回に出力されるログ。 > 1回目の呼び出し > 2回目の呼び出し > 3回目の呼び出し > ❌ エラー処理: カウントは3。 > 処理の終了 */ await（チェーンメソッド処理）を関数内で使う場合は、asyncをfunction の前に追加する。 エラー処理のため、try{} catch(){} finally処理を施す。 Promiseはジョブキューでの非同期処理なので、グローバルコンテキスト（この場合、console.log(“初回に出力されるログ。”);)が先に処理される。 3.については 1.「コールスタック」が優先され、次に 2.「ジョブキュー」が実行され、最後に 3. 「タスクキュー」が実行される。 ...

エラーメッセージ

vendor-laravel-framework-src-Illuminate-Database-Connection.php:703 errorが出た場合（MAMP）

Laravel で at vendor/laravel/framework/src/Illuminate/Database/Connection.php:703 というエラーが出た場合、MAMPを使っている場合は以下のように設定する必要がある。 （1）MAMPの設定がデフォルトの場合、.envファイルの”DB_PORT”の箇所を”8889″にする。 DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=8889 ...(略) （2）次に、MAMPの設定がデフォルト場合、config/database.phpファイルを以下のように設定する。 'mysql' => [ ...(略) 'port' => env('DB_PORT', '8889'), ...(略) 'unix_socket' => env('DB_SOCKET', '/Applications/MAMP/tmp/mysql/mysql.sock'), これでMAMPでのMySQLの動作はうまくいく。 ちなみに、MAMP版のMySQLは /Applications/MAMP/Library/bin/mysql -u root -p でアクセスできる。

Dockerのubuntuでcurlをインストールする

dockerのubuntuをrun・execさせて入るとcurl等が入っていない場合がある。 docker pull ubuntu:20.04 docker run -it -d -name ubuntu ubuntu:20.04 docker exec -it ubuntu /bin/bash curl -I https://google.com/ bash: curl: command not found この場合、以下の様にapt-get updateすると良い。 apt-get update apt-get install curl これでcurlが使える。

Maintenanceファイルがないのに「自動更新失敗エラー」が出てくる時の対処法

.maintenaceファイルが無いのに「WordPress の自動更新に失敗しました。再度、更新を行ってみてください。」が出てくるエラーの対処法 色々なサイトで、WordPressにて「WordPressの自動更新に失敗しました。再度、更新を行ってみてください。」というエラーが出たときには、WordPressのルートディレクトリにある「.maintenance」ファイルを削除しよう!! 的な文面を見るけど、どこを探しても見つからない場合は以下の方法で対応できたらしよう。 (1) サーバにログインして、コマンドラインから「ls -a」にて「.maintenance」ファイルを探して「rm -rf .maintenance」を実行。 (2) やはり「.maintenance」ファイルが無い場合、wp-contentやwp-adminやwp-includesディレクトリから「.maintenance」ファイルを探して削除。 (3) それでもない場合は「wp-cli.phar」をダウンロードしてコマンド化し、「wp core update」を施す。 好きな場所で curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar を実行し、wp-cli.pharをダウンロードする。 動くか確認。動かなかったらコマンドラインで動くPHPをインストールする。 php wp-cli.phar --info ↓コマンドが動くディレクトリで行う。 cd (WordPress のディレクトリ) chmod +x wp-cli.phar sudo mv wp-cli.phar /usr/local/bin/wp 実行し動作確認する。 wp --info 上が動いたら、利用しているWordPressのディレクトリに移動して、 wp core update を実行し、WordPressのアップデートを試みる。 だいたいこれで動くけど、ロックが効いているときは15分くらい待ってから再度、 wp core update を行う。

ワイの中でさいきょうのWebpack設定（メモ用）

const path = require('path'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const enableSourceMap = process.env.NODE_ENV !== 'production'; module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), publicPath: "", }, module: { rules: [ { test: /\.scss/, use: [ { loader: MiniCssExtractPlugin.loader, }, { loader: "css-loader", options: { url: false, sourceMap: enableSourceMap, importLoaders: 2, }, }, { loader: "postcss-loader", options: { sourceMap: enableSourceMap, postcssOptions: { plugins: [ "autoprefixer", ['css-declaration-sorter', {order: 'smacss',}], ['postcss-sort-media-queries', { sort: 'mobile-first' }], require('cssnano')({ // cssnanoを導入 preset: 'default', }) ], }, }, }, { loader: "sass-loader", options: { implementation: require('sass'), sassOptions: { fiber: require('fibers'), }, sourceMap: enableSourceMap, }, }, ], }, { test: /\.(gif|png|jpe?g|webp|svg|eot|woff?|ttf)$/i, use: [ { loader: "file-loader", options: { name: 'images/[name].[ext]', }, }, ], }, ], }, plugins: [ new CleanWebpackPlugin({ cleanStaleWebpackAssets: false, }), new MiniCssExtractPlugin({ filename: 'style.css', }), ], devtool: "source-map", watchOptions: { ignored: /node_modules/ }, devServer: { //ルートディレクトリの指定 contentBase: path.join(__dirname, ''), //サーバー起動時にブラウザを自動的に起動 open: true, // ルートディレクトリのファイルを監視（変更があると自動的にリロードされる） watchContentBase: true, //バンドルされたファイルを出力する（実際に書き出す） writeToDisk: true }, };

人気で安い証明写真のメリットとデメリット

仕事柄、大阪でいろいろとディレクションみたいなことをしてるんだけど、 人気で安い証明写真 のメリットとデメリットを考えてみた（あくまで主観的なメリットとデメリット）。 メリット 安いからお得感半端ない – お金が浮いたら大阪天満宮の美味しいものが食べられる 人気だから写真の質に不安がない。安心できる – 証明写真の撮影し直しなどが発生しにくい デメリット 安すぎてどこで撮ったか言いづらい（口コミ戦略があまり期待できないかも？） 人気とはいえそれは主観だろ？（口コミ的にいろいろと広がっているかもしれないが、主観的判断は正しいと絶対的にいえないのでは？） 安すぎて友だちに自慢できない（口コミ戦略が（ry）） 人気過ぎて逆に友だちに言いたくない（口コミ戦略g（ry）） 店内がチープすぎて友だちに言えない（口コミ戦ry（ry）） 隠れた名店はそもそも他の人に言えない（口コミs（ry）） ということで、口コミ戦略が発生しにくいというデメリットは大きすぎるので、SEOでの戦略にシフトしてみる。これでお客さんが増えたらいいなぁ。 https://studio-age.com/id_photo.php

Gitlabへの接続方法

ssh -T git@gitlab.com 登録していたら The authenticity of host 'gitlab.com (172.65.251.78)' can't be established. ECDSA key fingerprint is SHA256:HbW3g8zUjNSksFbqTiUWPWg2Bq1x8xdGUrliXFzSnUw. Are you sure you want to continue connecting (yes/no/[fingerprint])? yes Warning: Permanently added 'gitlab.com,xxx.xxx.xxx.xxx' (ECDSA) to the list of known hosts. Welcome to GitLab, @<ユーザ名>! と歓迎してくれる。 ##やっつけ的コマンドまとめ -git clone ... -git add . -git commit -m "..." -a -git push -git pull 確認用 -git status -git diff -git log

ERROR! The server quit without updating PID file (/var/run/mysqld/mysqld.pid).

とりあえずQiitaに書いてあるとおりなのでだいたいは割愛。このエラーが出てワイがやったことは以下の通り。 brew uninstall mysql sudo rm -rf /var/run/mysqld brew install mysql sudo chown _mysql:_mysql /var/run/mysqld （↑でもパーミッション絡みのエラーが発生した場合）sudo chmod 0777 /var/run/mysqld mysql.server start

M1 MacでHomebrewでNginxをインストールした際のnginx.confの場所とかPHP-FPM周りとかmemcachedとか

HomebrewでNginxをインストールした際のnginx.confの場所 /opt/homebrew/etc/nginx/nginx.conf php-fpm周りのやつ PHP-FPMに関するwww.confファイルの場所 /opt/homebrew/etc/php/8.0/php-fpm.d/www.conf homebrewでインストールしたPHP-FPMの起動・再起動等 brew services start php brew services restart php ※ brew services start php-fpmではないことに注意 memcached・zlib・libmemcached brew install memcached memcachedの起動 brew services start memcached memcachedの停止 brew services stop memcached memcachedの再起動 brew services restart memcached zlibのインストール brew install zlib インストール先のパスをコピー（ファイルコピーじゃないよ） /opt/homebrew/Cellar/zlib/1.2.11 libmemcachedのインストール brew install libmemcached peclでPHPにmemcachedを引っ付ける pecl install memcached ここでzlibのパスを聞かれるので上でコピーしたパス/opt/homebrew/Cellar/zlib/1.2.11を貼り付ける ... zlib directory [no] : /opt/homebrew/Cellar/zlib/1.2.11 ... PHPにmemcachedがついてるか確認 php -m | grep memcacehd ここでmemcachedが表示されたらOK。 このままじゃphp-fpmによる読み込みが実行されていないので再起動する。 brew services restart php ...