select now(); select date_format(now(), '%Y-%m-%d');
結果
2021-04-09 21:59:05 2021-04-09
select concat('2021', '-', '4', '-', '9'); select date_format(concat('2021', '-', '4', '-', '9'), '%Y-%m-%d');
結果
2021-4-9 2021-04-09
select concat('2021', '-', lpad('4',2, '0'), '-', lpad('9', 2, '0'));
結果
2021-04-09
桁を揃えるために0埋めしたいときのlpad()はよく忘れる
lpad( 文字列, 桁数, 左側に埋めたい文字 );
コミットを不必要に汚さないのは
エンジニアとしてのエチケットですよね。😗
今、コミットしたばかりだというのに
「しまった！ typoした」
なんて、自分のミスを追いかけてコミットしたなら
スカッシュマージしてからPUSHです。
1.まずはログ確認
git log --oneline
2.例えばこんなログ
3.最初の失敗コミット(13822ee)と
失敗コミットの修正コミット(0dbf0b7)は
みっともないので
rebaseの-i オプションでHEADから2番目のコミットまでマージする
git rebase -i HEAD~2
4.viが開いたらスカッシュするコミットの"pick" を ”s” にする
👇
5.そしたらwq（スカッシュの指示を保存して閉じる）して
コミットメッセージを修正しておく
👇
6.そしたらwq（コメントの修正を保存して閉じる）してログを確認
7.コミットログがきれいになったのでPUSH
git push origin work
これなら仲間のエンジニアに嫌われないで済みますね。✌️
買ったばかりの可愛いMacBook-Proを、
より使いやすく、
言うことをよく聞いてくれる、
さらに可愛いマシンにしようではないかと奮闘中のhikaruです。
今日は、
エンジニアなので github はもちろん、
sakura のレンタルサーバーなどへ
簡単にsshで接続できるようにしようと思いました。
手始めにgithubです。
【手順】
cd ~/.ssh
キーの名前は任意です。
新しいMacからの接続なので
今回はわかりやすく 'id_rsa_github_hikaruMac' としたいと思います。
ssh-keygen -t rsa -f id_rsa_github_hikaruMac
Generating public/private rsa key pair. Enter passphrase (empty for no passphrase): (passphraseは省略) Enter same passphrase again: (passphraseは省略) Your identification has been saved in id_rsa_github_hikaruMac. Your public key has been saved in id_rsa_github_hikaruMac.pub. →できた公開鍵 The key fingerprint is: SHA256:OAEWGCvJadVidJHT5D4x0B5lsTI5AKv4BpIY3drHOCc toru.hayakawa@ToruMacBook-Pro.local The key's randomart image is: +---[RSA 3072]----+ | o****..+. | |.o+*o=++o . | |+++.o +O.. | |++.o o.+* | |*.. E *oS | |.o = .. | | o | | . | | | +----[SHA256]-----+
passphraseは省略したほうが良いです。
どうせ使わないし、
忘れたらキーペアを作り直せば良いだけなので
enterキーで省略すると公開鍵ができます。
githubにログインしたら、 Settings > SSH and GPG keys へアクセスします
右上の new SSH key をクリックして、
さっきの公開鍵「id_rsa_github_hikaruMac.pub」をアップロードします。
接続確認のために、githubからsshでcloneしてみます。
git clone git@github.com:xxxxxx.git
と、、、
だめじゃん😟
接続できない！！ 💦
今日のはまりポイントはここでした。。。
sshは接続するときの秘密鍵のデフォルトのファイル名は
~/.ssh/id_rsa
~/.ssh/id_dsa
~/.ssh/identity
のいずれかなので、自分で勝手に名前をつけた秘密鍵では接続できないのでした。
なので、configに最低限こんな感じで記述しないとだめです。
Host github github.com HostName github.com IdentityFile ~/.ssh/id_rsa_github_hikaruMac User git
※ 自戒をこめて、カテゴリーの名前を替えました。
旧） これだけ知りたい
新） 転ぶ前に読め
精進しよっと。😉
エンジニア、プログラマにとって不可欠と言って良い存在のXdebug。
Hikaruも長いことお世話になっています。
特にバグ潰しには威力を発揮します。
動きがおかしいと思われるプログラムがあったとき、
問題のありそうなプログラムステップで停止させ、
その時点の変数の内容やメソッドの結果を知ることができる
エンジニアにとって神みたいな存在です。
その結果、
テストでは知り得なかった思わぬ結末が待っていたりもするのですが、
問題解決に威力を発揮することは論を待たないです。
ところが、そんなXdebugですが、
どうやら2020年にそれまでのXdebug2から3にバージョンアップされていたらしいです。
そんなことを知らずに、
新たにDockerのコンテナ*1を立ち上げたのが運の尽きでした。
いつも通りに設定したつもりでした。
いや、正確にはいつものphp.iniの設定をコピーしていました。
左うちわで。。。
しかし、どうにもステップで停止できない。
つまり、デバッガーとして役に立たない。
なんで？？
落ち着け！
まずは
echo phpinfo();
ん？
いつのまにXdebug3に！ Xdebug2じゃなかったの？
というわけでようやく設定の誤りを見つけました。
解説書ではないので結論だけ
Hikaruの設定
| Xdebug2（今まで） | Xdebug3（これから） |
|---|---|
| xdebug.remote_enable = 1 | xdebug.mode = debug |
| xdebug.remote_autostart = 1 | xdebug.start_with_request = yes |
| xdebug.remote_host = host.docker.internal | xdebug.client_host = host.docker.internal |
| xdebug.remote_port = 9000 | xdebug.client_port = 9000 |
| xdebug.remotelog=/tmp/xdebug.log | xdebug.log = /tmp/xdebug.log |
ざっくり言って「remoteなんちゃら」というパラメータは廃止されたらしいです。
動くわけないですね。
ちなみにXdebugのデフォルトのportは9000から9003に変更されているようですが、Hikaruはそのまま9000で設定しました。
同じような悩みを持っている人がいたらこちらからどうぞ。
xdebug.mode = debug xdebug.start_with_request = yes xdebug.client_host = host.docker.internal xdebug.client_port = 9000 xdebug.log = /tmp/xdebug.log
もっと詳しく知りたい方はこちら
Xdebug 2 から 3 へのアップグレード（日本語）
まあ、つまづいてもエンジニアは楽しいです。
*1:開発者用の環境のことです。自分のマシンでサーバーと同様にプログラムを動作させることができます
昨日、スクワットをしすぎて、ちょっとした筋肉痛になり、
「股関節が痛い」
って、言おうとして
「股間が痛い」
といったら、妻に大笑いされてしまいました。
こんにちは、Hikaruです。
そろそろ、エンジニアっぽいことも書こうと思います。
普通は、文字入力するときのカーソルは一つですよね。
とはその名の通り、
2つ以上のカーソルを出して（作って）、
一度に入力を済ませちゃおうという機能です。
例えば、普通の文書の入力ではあまりそういう場面は少ないかもしれませんが、
Wordなどの文書でも
「表記のゆれ*1をいっぺんに直したい」
というような事は時々あるのではないかと思います。
と、強引に話を持っていきましたが、
そういうのはWordにもある
校閲 ＞ 表記のゆれチェック
みたいな機能で十分対応できますね。
でも、エンジニアはちょっと事情が違います。
プログラムやコードの記述では、単なる「表記のゆれ」ではすみません。
致命的なバグにも繋がります。
要するに、この「マルチカーソル」を使えるかどうかは、
「エンジニアのテクニックセンス」の問題です。
なにしろ、コードを書くために使っているのは
テキストエディタ（の類）で
Wordみたいな高級品じゃありませんから、自分で何とかしなければいけません。
今日はVSCode*2のマルチカーソルについて紹介します。
（前置き長すぎ💦）
実はマルチカーソルについては以前も記事を書きました。
少し、イメージしていただけるといいなと思いますが、
今日はもう少し基本的なところを紹介しようと思います。
まず、はじめの一歩はこれです。
カーソルを追加したいところをoption(alt) + クリックで追加していくだけです。
ここで、うっかり意図しないところを追加してしまったときは 慌てずにもう一度同じところをoption(alt) + クリックすればキャンセルできます。
例えばこんな風に使います。
とにかく、大事なことは
必要なカーソルを自在に追加したり、
取り消したりできるようにして、
余計なところのカーソルは確実に除外しておくこと。
それさえできれば、
あとはそこに入力やペーストをしてあげればよいのです。
一気にもれなく入力がかたずけば、
仕事が早く、確実に進むこと請け合いです。😐💯
少し実践的です。
同じ文字を順に選択して、マルチカーソルを作ります。
最初に文字列を選択しておいて、Command(Ctrl) + D を使って一つずつ追加していきます。
ここでも、不要な箇所を選択してしまった時は Command(Ctrl)+ K を打てば取り消しできます。
その後、引き続き Ctrl + D を使います。
選択ができたら、← → キーでカーソルを移動して、入力します。
例えばこんな感じに
ここでも不要な箇所をちゃんと除外できれば仕事は早いです。
それには、選択した文字列を一気に選択する機能 Command(Ctrl) + shift + L を使います。
その後、← → キーでカーソルを移動すればよいのです。
例えばこんな感じに使います。
もう、お気づきだと思いますが、
「その作業にマルチカーソルを使うと良いと気付けるか」
が、鍵ですね。
これだけ押さえておけばかなり使えます
ちょっと慣れるまではまごつくこともあるかもしれませんが、
意識して使うようにしていると、自然に指が動くようになります。
中学生に人気の運動部TOP3はこんな感じらしいです。
こんにちは、Hikaruです。
中学生に人気の運動部ランキングTOP3
| 人気順 | 運動部 |
|---|---|
| 1 | ソフトテニス部 |
| 2 | バスケットボール部 |
| 3 | 卓球部 |
バスケットボール部は2位なんですね。
Hikaruも娘ともどもバスケットは大好きです。
でも、一番じゃないんですね。
そこで、突然ですが、こんなwebページの表があった時に、
バスケットボール部の
と思った時にどうしましょう🙄
ちょっと今日はエンジニア初心者向けみたいな記事になりますが。。。
<table> <thead> <tr> <th>人気順</th> <th>運動部</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>ソフトテニス部</td> </tr> <tr> <td>2</td> <td>バスケットボール部</td> </tr> <tr> <td>3</td> <td>卓球部</td> </tr> </tbody> </table>
普通は2行目の
そんなときの考え方は
表の見出し(thead)が1行で、内容（tbody）の3行のうち、
2行目の文字を太字で赤くしたい
ということですので、こんな風に書きます。
table tbody tr:nth-child(2) {color:red;}
$('table tbody tr').eq(1).css('color', 'red');
どちらの書き方でも表示はこうなります。
| 人気順 | 運動部 |
|---|---|
| 1 | ソフトテニス部 |
| 2 | バスケットボール部 |
| 3 | 卓球部 |
スタイルシートも、Jqueryも、どちらも意味は同じで
tableの中の
tbodyの中の
trのn番目のcolor（文字の色）はred（赤）
という意味ですが、
このn番目のnは順番を表す数字です。
Jqueryは0オリジン*1なので、0番目、1番目と数えて2行目なら1。
cssは1オリジンなので、1番目、2番目と数えるて2行目なら2です。
エンジニアとしては0オリジンに慣れ親しんでいるので、
Jquryで間違うことはありませんが、
たまにcssを書くときにはうっかり、
n番目のnのために失敗したりします。
ｎのために書いたものが全部一つずつずれちゃうのって、やっちゃってから結構がっかりします。
ま、「そんな失敗はしないよ」という声が聞こえてくるような気もしますが、😓
そういえば
というドラマがありましたね。
相変わらず強引な話題転換です。
あのドラマがきっかけで、賀来 賢人さんと榮倉 奈々さんは結婚したのでした。
みなさんうまいことやっていますね。 😏
というわけで今日はこれ。
家入レオさんの「Nのために」の主題歌
n番目は :nth-child(n) を使うが、n は1オリジンで 1から数える
n番目は .eq(n) と書くが、n は0オリジンで 0から数える
*1:0から数え始めること。0を起点にすること。対して一般生活では1から数え始めるので1オリジンと呼びます
このブログのデザインってなんだか暗いですよね。 🙄
こんにちは、Hikaruです。
なんとなくブログを始めるときに
「ま、いっか」
と、安易に（失礼）選んだこのブログのデザインですが、
なんだか暗い。
スマホでは別スタイルになっているので
そっちは良いとしても、何とかしたくなってきました。
そこで、はたと
と、そんな風にしてみようかと思い立ったので作りました～。
でも、はてなブログにはすでにそんな機能があったりして？
とりあえず、オリジナルカラーを含めて4色展開にしました。
折を見てサイドバーに設置しようと思います。
あ、でもスマホで見ていただいてる方（背景が白）はタップするとたぶん悲惨なことになります。
（ちょっと慌てて追記しました。💦）
だけど、PCでもかえって読みずらいかな。。。
たぶん色サンプルの選び方のセンスの問題ね。😏
はこんな感じです。
※ JqueryとVue.jsのライブラリが必須です。 😅
<div id="radioColorSample"> <dl class=""> <dt class="">読みづらいな、と思ったら、背景色を変更してください</dt> <dd v-for='(extension, idx) in radioList'> <input type="radio" name="colorExtension" :id="'extension' + idx" :value=extension> <label :for="'extension' + idx"> <span class="colorSample"></span> </label> </dd> <div style="clear:both;"></div> </dl> </div>
let radioColorSample = new Vue({ el: '#radioColorSample', data: { // サンプルカラーはここに radioList: ['#292c2f', '#435d77', '#674654', '#466467'], }, }); $(document).ready(function () { $('span.colorSample').each(function (index, element) { $(element).css( 'background-color', $(element).closest('dd').find('input').val() ); }); }); $(document).on('change', 'input[name="colorExtension"]', function () { $('body').css('background-color', $(this).val()); });
#radioColorSample dl { background-color: #fff; color: #333; padding: 10px; } #radioColorSample dl dd { float: left; } #radioColorSample .colorSample { display: inline-block; width: 20px; height: 20px; margin: 0 6px; } #radioColorSample input[type="radio"] { display: none; }
ちょっとhostsの内容を確認したい！
と思って一所懸命 /etc の下を見たのですが、
「あれっ？無いっ！」
ってなって。。。
linuxと間違えてました。
Macは
vim /private/etc/hosts
だっつうの
javascriptにはphpのhtmlspecialchars()のようなメソッドは無いので
function htmlspecialchars(str) { return (str + '').replace(/&/g, '&') .replace(/"/g, '"') .replace(/'/g, ''') .replace(/</g, '<') .replace(/>/g, '>'); }
プチモンテさんが丁寧に紹介してくれていますので使わせていただきます。
以前、
Qiita風にコードをクリップボードにコピーする
という記事を書きましたが、今回はそのリメイク版です。
という問題がありました。
（え～、ひどいじゃん😠。 はい、ごめんなさい😓）
シンタックスハイライトとは、
読みやすくするためにコードに色を付けるなどの装飾をすることです。
生のコードがこれだとすると
SELECT count(TABLE_NAME)
FROM INFORMATION_SCHEMA.TABLES
WHERE TABLE_SCHEMA = {データベース名};
シンタックスハイライトしたコードはこんな感じ
SELECT count(TABLE_NAME) FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA = {データベース名};
この方が、わかりやすいですね。
今回はその点を改良して、
シンタックスハイライトしたコードでも
記事内に複数のコードがあっても
ワンクリックでコードをコピーできるようにリメイクしました。
こんな感じです。
SELECT count(TABLE_NAME) FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA = {データベース名};
はてなブログはコードのシンタックスハイライトに対応しています。
（公式のヘルプにあります。詳しくはこちらを
Hikaruの思いとしては、、、
せっかくきれいにコードを紹介できるような記事が書けるのですから、
一歩踏み込んで、簡単にクリップボードにコピーできるような機能があるといいな
というのが発想です。
簡単ですので是非使ってみてください
ブログの管理画面の「デザイン」を開きます
「カスタマイズ」の中にある「ヘッダ」を開いて、
「タイトル下」までスクロールします
「このあたりをクリック」したら、下のコードをコピーして貼り付けてください。
<script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="copy1"> <div class="copied" style="display:none;">Copied!</div> <div class="showCopy"> <span class="material-icons" style="display:none;"> <span class="toCopy">file_copy</span> </span> </button> </div> <div class="copyMessage"> ``` {ここにコードを書く} ``` </div> </div>
この記事は、
はてなの編集モードが「Markdown」であることを想定して書いています。
「はてな記法」で編集しているときは、同様にコードをコピペして使えますが、
「みたまま」で編集しているときは、「HTML」タブに切りかえてから貼り付けて使用してください。
も、編集モードによって違います
Markdownモードでは
```{ここにコードを書く}```
という部分を
HTMLモードでは
<pre> {ここにコードを書く}</pre>
はてな記法では
>|| {ここにコードを書く}||<
という書式で書く必要がありますので注意して読み替えてください。
記事を書き終えたら、記事の最後に下記の2行のコードをコピペしてください。
コードをクリップボードにコピーするスクリプトとスタイルシートです。
<link href="https://cdn.yutenji.biz/css/copy1.css" rel="stylesheet"> <script type="text/javascript" src="https://cdn.yutenji.biz/js/copy1.js></script>
このブログのCDN*1からのダウンロードにしていますが、
スタイルなどを変更したいときは
ご自分のブログやサイトに読み込んで修正してください。
チェックボックスって意外と面倒なところがあって、
これこそVue.jsをうまく使いたいなと思います。
なるべく使いまわしできそうな感じっていうと
こんな感じでしょうかね。
スタイルはまあ良いとして
骨格をこんな感じにしてみました。
<div id="checkbox1"> <form method="post"> <dl class=""> <dt class="">汎用チェックボックス</dt> <dd v-for='(extension, idx) in checkboxList'> <input type="checkbox" name="extension[]" :value=extension> {{extension}} </dd> </dl> </form> </div> <script> let checkbox1 = new Vue({ el: '#checkbox1', data: { checkboxList: ['jpg', 'png', 'gif', 'svg'], }, }) </script>
項目の増減はcheckboxListを編集するだけでOK。
あとは、必要に応じてPOSTすれば使えますね。
（続く）
今日の教訓は
標題そのまんまです。💦
UPDATE テーブル名 SET カラム名=値 WHERE 条件式
WHERE条件式には、
特定できるなら極力プライマリキーを使う。
それがだめならせめてkeyを持つカラムで
対象を特定できる条件を作る。
keyの存在も確かめず（あるに違いないという思いこみ）、
カラムの属性もおそらく（intだろ、きっと。みたいな）、
雰囲気で書いてなんとなくStagingでOKだから。。。
そんなSQLは本番で痛い目にあう。
構文は正しいのでエラーは返らないが、
期待する結果にはなっていない
なんていうことが起こる。
以前からこれだけは作ろうと思っていたんです。
Qiitaのサイトだったら、
参考になるコードを見つけると、
「ありがとう」
と心の中でつぶやきつつ、
それをコピーしたいと思うわけです。
それで、
後は自分のエディタにペーストして。。。
とスムーズにいくわけです。
及ばずながら、
Hikaruもこのブログ上ではいろいろとソースコードを公開しているので
そんなQiitaのようにコピーできるようにしておけば
誰かの幸せにちょっとぐらい貢献できるかな
と思っていたのです。
と、いうわけで
「Qiita風にコードをクリップボードにコピーするコード」
を
「Qiita風にコードをクリップボードにコピーする機能も使って」
紹介します。
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<div>
<style>
#copy1 {
position: relative;
max-width: 800px;
padding: 15px;
background: #000;
color: #fff;
}
.copyMessage {
margin-top: 20px;
}
.copied,
.showCopy {
position: absolute;
z-index: 10;
}
.showCopy {
right: 20px;
}
.copied {
right: 50px;
}
.material-icons {
cursor: pointer;
}
</style>
<div id="copy1" v-on:mouseover="mouseOver" v-on:mouseleave="mouseLeave">
<div class="copied" v-if="copied">Copied!</div>
<div class="showCopy" v-if="showCopy">
<span class="material-icons">
<span @click="toCopy">file_copy</span>
</span>
</button>
</div>
<div class="copyMessage">
<pre>
（ここにコードを書く）
</pre>
</div>
</div>
</div>
<script>
let copy1 = new Vue({
el: '#copy1',
data: {
showCopy: false,
copied: false
},
methods: {
mouseOver() {
this.showCopy = true;
},
mouseLeave() {
this.showCopy = false;
this.copied = false;
},
toCopy: function(e) {
$('#copy1').append('<textarea id="forCopy" ></textarea>');
$('#forCopy').html($('.copyMessage pre').html()).select();
document.execCommand("copy");
$('#forCopy').remove();
this.copied = true;
},
}
})
</script>
依存関係なく、そのままブログサイトなどにコピペして使えます。
（ここにコードを書く）
という部分にコードを書くだけで実現します。
javascriptでクリップボードにコピーする方法は
ネット上でいくつか紹介されていますが、
OSやブラウザ、「コピーするもの」
によってうまくいかないケースもあります。
それを回避するために
Hikaruのコード↑ では
$('#copy1').append('<textarea id="forCopy" ></textarea>'); // 仮textareaを作っちゃう $('#forCopy').html($('.copyMessage pre').html()).select(); // ソースコードをtextareaにコピーして範囲選択 document.execCommand("copy"); // クリップボードにコピー $('#forCopy').remove(); // 作った仮textareaを削除する
という風にしていますので、
ブラウザ環境の違いなどに影響はされないと思います。
さらに詳しい方は、
スタイルの記述などを外部ファイルにすると
すっきりして良いです。
（もちろん、Hikaruもそうしています）
でも、ここまで書いてきて
はたと思ったのですが、
こういう機能ははてなブログにも既にあるのかな？
Hikaruが知らないだけなら
それもバカみたいな話ですが。。。
それでも他のブログやサイトで使えますから
さっそく定型文*1に登録しておくことにします。
Vue.jsの良さにやっと気付いてきた感のあるHikaruです。
スライドショーって意外と面倒なものと
レッテルを貼ってなんとなく避けてきましたが、
（あ、正確にはそのあたりはデザイナーさんの範疇なので
あまり携わったことがないということです💦）
Vue.jsのv-bindを使えば簡単なんじゃないの？
と思い立ったので、ちょっと作ってみました。
使った写真はhikaruが散歩の途中で撮ったものから適当にピックアップして使いましたが、すごく簡単に実装できるように作れてびっくり(ﾟдﾟ)！
初心者向きにできました。
でも、こんな風にコードをシンプルに整理するまでには紆余曲折が。。。
特にv-forというのをフィルタをかけて使う
というところにたどり着くのにけっこういろいろ勉強しました。😅
使用するには↓を展開してコピーしてください。
そのままでもサンプルスライドショーが動作します。
超簡単ベーシックスライドショーのコード
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<style>
/* transition style*/
.slide1-enter-active,
.slide1-leave-active {
transition: all 1s ease;
}
.slide1-enter,
.slide1-leave-to {
opacity: 0;
}
</style>
<div>
<div id="slide1" :style="slide1Style">
<transition name="slide1">
<div class="slider-inner" v-for='slide in slides[idx]' :key="idx">
<img :src="imgBathPath + slides[idx].img" :style="slideImage">
</div>
</transition>
</div>
</div>
<script>
let imgBathPath = 'https://cdn.yutenji.biz/img/slide/';// 画像を保存してあるフォルダ
let slide1 = new Vue({
el: '#slide1',
data: {
idx: 0,
slide1Style: {
position: 'relative',
width: '600px', // スライドショーの横幅
height: '450px', // スライドショーの高さ
overflow: 'hidden',
},
slideImage: {
position: 'absolute',
width: '100%', // スライドショーの横幅に合わせて画像のサイズが調整されます
top: '0',
left: '0',
},
slides: [{
img: 'IMG_0742.png' // 画像の名前1
},
{
img: 'IMG_0622.jpg' // 画像の名前2
},
],
},
mounted() {
setInterval(() => {
this.idx = this.idx < this.slides.length - 1 ? this.idx + 1 : 0;
}, 3500) // 1枚のスライドの表示時間の調整はこの数字、既定は3.5秒にしてあります
}
})
</script>
コード中にコメントを入れてあるところがポイントです。
*1:スライドが切り替わるときの、切り替わり方の効果のことです
※ この記事はできればパソコンでご覧ください。
スマホでは画面サイズによっては、
表示効果にずれがおこりますので、
記事の意図した内容通りの表示にはならないことがあります。😓
（2020-06-06）
* この記事だけ背景色を変更しました。
* スマホでも記事の意味が伝わるようにスタイルを修正してみました。
