【MySQL】rootパスワードを忘れたら
前提：サーバーにSSH接続している
MySQLに接続しようとして
mysql -u root -p
と打つけどパスワードを忘れてしまって接続ができない。
そういう時の話。
1. MySQLサービスを停止しておく
service mysqld stop
2. セーフモードで起動
mysqld_safe --skip-grant-tables
3. MySQLにセーフモードで接続
mysql -u root
4. パスワードを再設定
use mysql;
update user set password=PASSWORD("好きなパスワードをここに入力") where User='root';
flush privileges;
5. MySQLからログアウト
quit
6. セーフモードのMySQLを停止
service mysqld stop
7. MySQLを再度起動
service mysqld start
javascriptで作るスライドショー
javascriptを使ってスライドショーを作るぞ!!
完成形はこれだ!!
簡単に説明するぞ。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="container">
<main>
<img>
</main>
<nav>
<ul>
<li id="play">Play</li>
<li id="pause" class="hidden">Pause</li>
<li id="prev"><</li>
<li id="next">></li>
</ul>
</nav>
<ul class="thumbnails"></ul>
</div>
</body>
</html>※codepenで表現したから書かなかったけど、このまま使うとcssとjsファイルの読み込みができないから追記しておいて!
画像を表示させる領域を作るぞ。領域はタグ名でもいいし、クラス名でもいいしid名でもいいから一意になるようにしておけ。でないと予期せぬところまでjsの影響が出てしまう。無難なのはidな。これなら1ページで1つしかないから必ず、思ったところにしかjsの影響が出ない。今回はボリュームも大したことないし、タグで一意にできるから一意のタグ振って終わり。
再生ボタンで自動切り替え、nextボタンで次に行って、prevボタンで前に戻るようにしたいからid振ってボタンの領域も作っておく。
サムネイルの領域も追加しとく。今回はクラス名でいいや。
コードの量が多かったり多くなるならjsをかける対象はidに絞る方がいいぞ!!
最初の方でimgタグにアニメーションかけるぞみたいなことした場合、今後アニメーションいらないけどimgタグ使いたいって時に困る。アニメーション無効化jsとかcssかけなきゃいけなくなる。めんどい。
CSS
ご自由にどうぞ!
javascript
{
const images = [
'https://unsplash.it/680/450?image=10',
'https://unsplash.it/680/450?image=20',
'https://unsplash.it/680/450?image=30',
'https://unsplash.it/680/450?image=40',
'https://unsplash.it/680/450?image=50',
'https://unsplash.it/680/450?image=60',
'https://unsplash.it/680/450?image=70',
'https://unsplash.it/680/450?image=80',
];こうやってスライドショーに使う画像を配列にひとまとめにしておく。インデックスを利用したいからキー名はいらないよ。
let currentNum = 0;
function setMainImage(image) {
document.querySelector('main img').src = image;
}
setMainImage(images[currentNum]);mainタグ内imgタグのsrc属性を切り替える手法を使って画像を取り替えていく。
今はまだ、currentNumは0でしかないからimages[currentNum]は配列の中の一つ目、
'https://unsplash.it/680/450?image=10'に固定であって
<main> <img src="https://unsplash.it/680/450?image=10"> </main>
こういう風にしかならないけど、currentNumの数が変われば表示できる画像が変えられるところが味噌。
images[1]だったら2番目の画像になるでしょ。
function removeCurrentClass() {
document.querySelectorAll('.thumbnails li')[currentNum]
.classList.remove('current');
}
function addCurrentClass() {
document.querySelectorAll('.thumbnails li')[currentNum]
.classList.add('current');
}これはまあ、currentっていうクラスを着けたり取ったりして選択されているサムネイルとそれ以外で見た目変えるためのやつ。
const thumbnails = document.querySelector('.thumbnails');これでとりあえず、thumbnailsクラスの要素にアクセスできて
images.forEach((image, index) => {
const li = document.createElement('li');
if (index === currentNum) {
li.classList.add('current');
}
li.addEventListener('click', () => {
setMainImage(image);
removeCurrentClass();
currentNum = index;
addCurrentClass();
});
const img = document.createElement('img');
img.src = image;
li.appendChild(img);
thumbnails.appendChild(li);
});imagesって配列に入れてある画像のurlの数だけ処理を回すんだけど、
サムネイルを一つずつli要素で表現したいから、li要素を作ってそれを定数に格納。
で、index(順番)とcurrentNum(表示させるって決まった画像番号)が一致したらば、その時のli要素にcurrentクラスを付けとくぞと。
クリックされたらそのサムネイルに使ってる画像を表示させて、currentクラスを一旦全ての要素から外し、クリックされたサムネイルの画像の順番(index)をcurrentNumに入れて、該当するli要素にcurrentクラスをつけるっていうクリックイベントを作る。
それでimgっていう定数にimgタグを格納してそれのsrc属性にimagesに入っている画像urlを一つ付けてあげてthumbnailsクラスの要素の中に配置する。
これをimagesに入っている画像urlの一つ目から順番にやっていくと。
const next = document.getElementById('next');
next.addEventListener('click', () => {
removeCurrentClass();
currentNum++;
if (currentNum === images.length) {
currentNum = 0;
}
addCurrentClass();
setMainImage(images[currentNum]);
});
const prev = document.getElementById('prev');
prev.addEventListener('click', () => {
removeCurrentClass();
currentNum--;
if (currentNum < 0) {
currentNum = images.length - 1;
}
addCurrentClass();
setMainImage(images[currentNum]);
});
let timeoutId;
function playSlideshow() {
timeoutId = setTimeout(() => {
next.click();
playSlideshow();
}, 1000);
}
const play = document.getElementById('play');
const pause = document.getElementById('pause');
play.addEventListener('click', () => {
play.classList.add('hidden');
pause.classList.remove('hidden');
playSlideshow();
});
pause.addEventListener('click', () => {
play.classList.remove('hidden');
pause.classList.add('hidden');
clearTimeout(timeoutId);
});
}あとはボタン押してcurrentNum変えて、変えたらそのcurrentNumに該当する画像を表示させようぜという処理を追加して終わり。
これがスライドショーの基礎だな。これができれば、css次第でどれだけでもかっこよくできるぞ。頑張れ!
sedで置換 アンパサンド(&)とかスラッシュ(/)を含める時の話
sed -{オプション} 's/{置換前}/{置換後}/g'シェルスクリプトの話です。
ファイルの中だったり、変数の中だったりとある箇所をいじりたい時に使うのがこのsedな訳ですが、
まあ例えば
# ITEM="これはアイテムだぞ" # echo "$ITEM" これはアイテムだぞ # ITEM=`echo "$ITEM" | sed 's/だぞ/ではないぞ/g'` # echo "$ITEM" これはアイテムではないぞ
となりますけど、"タッキー"と翼"を"タッキー&翼"に変えたいとしますよね。
まぁ、そんなシチュエーションが巡ってくるかは微妙ですけど。
で、純粋に
# ITEM="タッキーと翼" # echo "$ITEM" タッキーと翼 # ITEM=`echo "$ITEM" | sed 's/と/&/g'` # echo "$ITEM" タッキーと翼
だけどこれだと上手くいきません。
アンパサンド(&)は置換前の文字列を意味するから、"タッキーと翼"の"と"を"と"に変えるという意味になる。
なので、エスケープしてアンパサンド(&)に意味を持たさないようにします。
# ITEM="タッキーと翼" # ITEM=`echo "$ITEM" | sed 's/と/\&/g'` # echo "$ITEM" タッキー&翼
これで行けた!
スラッシュ(/)も同様でエスケープしないとsedの置換処理そのものに影響を与える。
これも一緒。バックスラッシュ(\)を前につければオッケー。
バックスラッシュの出力方法は自分で調べてくれたまえ。
deha,
yoi programing life wo!
React.js 超入門 〜これから始めるReact.js〜
みなさん、こんにちは。kidou_kazeです。
UI を作るための JavaScript ライブラリである Reactについて一緒に学びましょう。
React は Facebook が中心に開発しているライブラリで Facebook でも使われていたりしますね。
かなり複雑な UI でも効率的に開発していくことができて、部品単位で開発していくことで拡張性の高いプログラムを組むことができるのがReactの長所です。
開発においてはJavascriptの規格であるES6を使用することが多いです。
Reactでの開発を行うのであれば、 まずは React 開発で便利な Chrome の拡張機能を入れておきましょう。
こちらは、Facebookから公式で提供されているデバッグ用ツールです。
React Developer Toolsを使うと、コンポーネントツリーの構造、各コンポーネントに渡されているPropsの値、現在のStateの値といったことが視覚的に確認できるようになります。
使い方はすごくわかりやすいこの方の記事を参考にしてください。
React.jsを試す
React.js公式ページの「download this HTML file」からHTMLファイルを入手し、Reactに簡単に触れることができます。
Reactは以下の2行をheadタグ内に入れることで始められます。
<script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
JSXというjavascriptの新しい文法を使うためにもう１行追加します。
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
これでJSXのスクリプトもjavascriptに自動で変換されます。
入手したHTMLファイルを見ると、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
</script>bodyタグに上記のように記述することで
Hello,world!
と表示されます。
React で作った部品を描画する際、ReactDOM.render()を使います。
<h1>Hello, world!</h1>が描画する内容で、
document.getElementById('root')が表示させる要素となっています。
よってid="root"の要素に<h1>Hello, world!</h1>が入り込み、ページにはHello,world!と表示されるわけです。
React.jsの印象がある程度は掴めたのではないでしょうか?
これから更にReact.jsを学んでいきましょう。
最後まで読んでいただきありがとうございました。
