^GSPCとSPXとSPYの違い
^GSPC
S&P500指数のティッカー。プライスリターン。
SPX
S&P500指数をオプション取引するとき、原資産としてのS&P500指数のティッカー。^GSPCと数値的には一緒。
vue-cliでVue3にTailwindcss2を導入しようとしてPostcss8が必要だと警告が出た場合の解決方法
結論から言うとvue-cliのバージョンを5.0.0-alpha.5以上にあげましょう。
2021年4月23日現在、vue-cliをインストールし、Vueプロジェクトを作成した上で、tailwindcssを公式に従って追加するとPostcss8が必要ですと怒られます。
上記のリンクではCreating your projectでviteを使用していますが、Vue-Cliから作成のは以下の通りです。
vue-cliをインストール
yarn global add @vue/cli
Vueプロジェクトを作成
vue create hello-world cd hello-world
tailwindcssをインストール
yarn add tailwindcss@latest postcss@latest autoprefixer@latest --dev
configuration filesを作る
npx tailwindcss init -p
以下２ファイルを修正
// tailwind.config.js
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')以下作成
/* ./src/index.css */ @tailwind base; @tailwind components; @tailwind utilities;
これでbuildすればいける！と思います。いけません。
Postcss8が必要だと怒られます。package.jsonにはPostcssのバージョンが8になっているし・・・
ネットの海で漂流を続けた結果、以下の情報にたどりつきました。
vue-cliのバージョン情報
vue-cli/CHANGELOG.md at dev · vuejs/vue-cli · GitHub
最新版は5.0.0-alpha.8だったのでこれに上げます。
vue upgrade --to 5.0.0-alpha.8 @vue/cli-service vue upgrade --to 5.0.0-alpha.8 @vue/cli-plugin-babel vue upgrade --to 5.0.0-alpha.8 @vue/cli-plugin-eslint vue upgrade --to 5.0.0-alpha.8 @vue/cli-plugin-router
これで無事ビルドが通りました。
Nuxt.js^2.14.12でPostCSS プラグインを追加する際にエラーが出た時の解決方法
Nuxt.js^2.14.12に postcss-nestedを追加したかったので、公式に則って設定をするとビルド時にエラーが出ます。
How to add PostCSS plugins? - NuxtJS
まず、プラグインの追加。
yarn add postcss-nested --dev
nuxt.config.jsに追加したのはこちら。
build: {
postcss: {
plugins: {
'postcss-nested': {}
}
}
}エラー内容
Error: PostCSS plugin postcss-nested requires PostCSS 8.
Nuxt.js^2.14.12にはPostCSS 7が使われているみたいなので、postcss-nestedのバージョンをPostCSS8対応する前のバージョンを指定してエラーが出ずビルドが完了した。
yarn add postcss-nested@4.2.3 --dev
Contactform7でチェックボックスにBootstrap4のボタンデザインを適用する
Contactform7でチェックボックスにBootstrap4のボタンデザインを適用する場合に２時間くらいハマったのでメモ。
https://getbootstrap.com/docs/4.4/components/buttons/#checkbox-and-radio-buttons
まずは完成形。
Contactform7でのフォームに入力
<div class="form-group">
<label class="col control-label">チェックボックス</label>
<div class="col">
[checkbox naiyo use_label_element "チェックボックス1" "チェックボックス2" "チェックボックス3"]
</div>
</div>Javascriptに追加
ボタン（.btn-secondary、.btn-success）はお好きなものに。
$('.wpcf7-checkbox > .wpcf7-list-item, .wpcf7-radio > .wpcf7-list-item')
.addClass('btn-group-toggle')
.attr('data-toggle', 'buttons');
$('.wpcf7-form input[type=checkbox], .wpcf7-form input[type=radio]')
.closest('label')
.addClass('btn btn-secondary');
$('label.btn.active')
.removeClass('btn-secondary')
.addClass('btn-success');
$('.wpcf7-list-item-label').on('click', function () {
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
} else {
$(this).parent().addClass('active');
}
});ハマった理由は、Contactform7ではラベルのテキストがスパンで囲まれているのだが、
そうすると、テキスト部分（.wpcf7-list-item-label）がクリックで反応してくれない。外周部分は反応する。
まず、テキスト部分だけが反応しないことがわからなかった。
<div class="form-group">
<label class="col control-label">チェックボックス</label>
<div class="col">
<span class="wpcf7-form-control-wrap naiyo">
<span class="wpcf7-form-control wpcf7-checkbox">
<span class="wpcf7-list-item first btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox" name="naiyo[]" value="チェックボックス1">
<span class="wpcf7-list-item-label">チェックボックス1</span>
</label>
</span>
<span class="wpcf7-list-item btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox" name="naiyo[]" value="チェックボックス2">
<span class="wpcf7-list-item-label">チェックボックス2</span>
</label>
</span>
<span class="wpcf7-list-item last btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox" name="naiyo[]" value="チェックボックス3">
<span class="wpcf7-list-item-label">チェックボックス3</span>
</label>
</span>
</span>
</span>
</div>
</div>テキスト部分をクリックしても、ボタンを押した場合と同じようにactiveが付与されるようにする。
$('.wpcf7-list-item-label').on('click', function () {
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
} else {
$(this).parent().addClass('active');
}
});
swiperの横幅がモダンブラウザで１００％にならない場合
swiperで.swiper-containerにwidth: 100vw;を付与しているのに、右側にちょっとだけ空白ができてしまう問題。
swiperを以下のようにinitすることで解決。
window.addEventListener('load', () => { // init swiper here }, false);
参考
Wrong width until page is resized on Firefox · Issue #2218 · nolimits4web/swiper · GitHub
contactform7にbootstrap4のカスタムバリデーションスタイルを適用する方法
前提
- wordpress
- Bootstrap4
- contactform7
バリデーションを行って、boostrap4のカスタムバリデーションスタイルを適用したい。
参考リンク
https://getbootstrap.com/docs/4.3/components/forms/#custom-styles
上記を参考にして、以下を追加して送信しても、必須項目が入力されていない状態でvalidになってしまう。
<script> // Example starter JavaScript for disabling form submissions if there are invalid fields (function() { 'use strict'; window.addEventListener('load', function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })(); </script>
contactform7では必須項目でもrequired属性が付与されないので、以下の１行をスクリプトに追加してあげる。
$('.wpcf7-validates-as-required').attr('required', true);
