自動的に画像がスライドしていく画像スライダーを作る
HTML、CSS、JavaScript(jQuery)で自動的に画像がスライドしていく画像スライダーを作ります。
よくWebページのトップバナーがこんな感じに変化していますね。
動作イメージ
ページを開くと１枚目の画像が表示されています。
しばらくすると画像が左にスライドします。（１枚目の画像が少しだけ左に見えるのが分かりますか？）
またしばらくすると画像がさらに左にスライドします。
最後の画像が表示されたあとは、再び１枚目の画像に戻ります。（ここはアニメーションなしで一瞬で戻ります。）
論よりコード
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ImgSlider</title> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script> </head> <body> <div class="main"> <!--スライドを表示させる画面--> <div class="slider"> <!-- 横に並べた複数のスライドを格納する用コンテナ --> <ul class="slider__container"> <!-- 各スライド --> <img src="img/spring.jpg" alt="" class="slider__item slider__item1"> <img src="img/summer.jpg" alt="" class="slider__item slider__item1"> <img src="img/autumn.jpg" alt="" class="slider__item slider__item1"> <img src="img/winter.jpg" alt="" class="slider__item slider__item1"> </ul> </div> </div> <script src="app.js"></script> </body> </html>
CSS
body{ background: #f6f5f4; color: #333; } .main{ width: 1600px; margin: 30px auto; } .slider{ /* スライドを表示させる画面の横幅(≒スライド１枚あたりの横幅) */ width: 1600px; /* スライドを表示させる画面の縦幅(≒スライド１枚あたりの縦幅) */ height: 1066px; /* はみ出した要素は隠れるようにする */ overflow: hidden; } .slider__container{ /* スライドを表示する画面とスライド１枚をぴったり合わせるため設定 */ padding: 0; margin: 0; /* 子要素でfloatを利用しているため設定 */ overflow: hidden; list-style: none; /* 後ほどJSでleftプロパティを設定するため必要 */ position: relative; } .slider__item{ /* スライド１枚あたりの横幅 */ width: 1600px; /* スライド１枚あたりの縦幅 */ height: 1066px; /* スライドを横一列に並べる */ float: left; }
JavaScript(jQuery)
//最初にどのスライドから表示するかを選択 var currentItemNum = 1; var $slideContainer = $('.slider__container'); //クラスslider__itemの要素の個数を算出 var slideItemNum = $('.slider__item').length; //スタイド１つあたりの横幅を算出 var slideItemWidth = $('.slider__item').innerWidth(); //スライド１つあたりの横幅とスライドの個数から var slideContainerWidth = slideItemWidth * slideItemNum; //スライドさせる速さ(animateメソッド用) var DURATION = 1000; //横に並べた複数のスライドを格納する用コンテナの横幅を設定 $slideContainer.attr('style', 'width:' + slideContainerWidth + 'px'); //スライドを自動的に変化させる関数 function autoSlide(){ //現在のスライドの番号が全部のスライドの数より少ないとき if(currentItemNum < slideItemNum){ //スライド用コンテナをanimateメソッドで変化させる $slideContainer.animate({left: '-='+slideItemWidth+'px'}, DURATION);//現在のCSSのleftのプロパティの値からスライド１つあたりの横幅分変化させる currentItemNum++;//現在のスライド番号を１増やす //現在のスライドの番号が全部のスライドの数と同じとき }else if(currentItemNum = slideItemNum){ //現在のCSSのleftのプロパティの値を変更(徐々に変化させないのでanimateメソッドは使わない) $slideContainer.css('left', '+='+slideItemWidth*(slideItemNum-1)+'px'); currentItemNum = 1;//現在のスライド番号を１に戻す } } //setInterval関数で適当な秒数ごとに実施 setInterval(autoSlide, 5000);
ポイントまとめ
・スライドを表示させる画面、複数のスライドを横に並べる用のコンテナ、各スライドの要素を用意
・スライドを表示させる画面に、スライド１枚分が表示されるように、大きさや「overflow:hidden;」を設定
・JSでスライドの横幅や数を取得し、それに合わせてコンテナの大きさや一回のスライドする幅を設定する
・animeteメソッドでコンテナのpositionを変化させる
・setIntervalで定期的に画像をスライド
今一度jQueryの.html()と.text()と.val()の違いを確認する
指定した要素の内容を変えるのによく使うjQueryの「.html()」と「.text()」と「.val()」。
正確に動作の違いを確認していなかったとふと思ったので、改めて整理します。
動作確認用コード
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>html text val</title> </head> <body> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script> <h1>.html()の場合</h1> <div class='html' value='元々のvalue値'>元々の文章</div> <input class='html' value='元々の文章'> <h1>.text()の場合</h1> <div class='text' value='元々のvalue値'>元々の文章</div> <input class='text' value='元々の文章'> <h1>.val()の場合</h1> <div class='val' value='元々のvalue値'>元々の文章</div> <input class='val' value='元々の文章'> <script> $('.html').html('<b>.html()では、htmlのタグが反映されて太字になる</b>'); $('.text').text('<b>.text()では、htmlのタグは文字として認識</b>'); $('.val').val('.val()では、valueの値を書き換える'); </script> </body> </html>
実行結果
ブラウザ表示内容
開発ツール内容
・.html()をdivタグに対して実施した場合、htmlのタグが反映されて太字になった上で、表示内容が変わる
・.html()をinputタグに対して実施した場合、画面上は反映されず、表示されている表示内容は変わらない
(開発ツールで確認すると反映はされているが、inputタグの仕様で画面上は見えない)
・.text()をdivタグに対して実施した場合、htmlのタグは文字として認識された上で、表示内容が変わる
・.text()をinputタグに対して実施した場合、画面上は反映されず、表示内容は変わらない
(開発ツールで確認すると反映はされているが、inputタグの仕様で画面上は見えない)
・.val()をdivタグに対して実施した場合、表示内容は変わらない
(divタグは元々オプションでvalueを持っていないため、開発ツールで確認しても反映されていない。)
・.val()をinputタグに対して実施した場合、valueの値が置き換わり、表示内容が変わる
jQueryでほぼ一行で、ページを開くとスクロールして一番下の文章を表示させるテキストエリアを作成
ページを開くとスクロールして一番下の文章を表示させるテキストエリアを作ります。
履歴一覧など、ユーザには基本的には最新の情報を見せたいけど、過去の内容も見せたいってときに使えそうですね。
jQueryでほぼ一行で実装可能です。
動作イメージ
ページを開いた瞬間からテキストボックスの中が自動的にスクロールされます。
あっという間に一番下の文章が表示されます。
テキストボックスの中でスクロールすると一番最初の文章まで見られます。
論よりコード
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charaset = "utf-8"> <title>勇者とモンスター</title> <link rel="stylesheet" type="text/css" href="style.css?<?php echo date("YmdHis"); ?>"> </head> <body> <header> </header> <div id="main" class="site-width"> <!-- メッセージエリア --> <!-- JSで操作するようのクラスをメッセージエリアに用意する--> <div class="message-area js-auto-scroll"> <p>今日は何をしますか？</p> <p>あああああああああああああああああああ</p> <p>あああああああああああああああああああ</p> <p>あああああああああああああああああああ</p> <p>いいいいいいいいいいいいいいいいいいい</p> <p>いいいいいいいいいいいいいいいいいいい</p> <p>いいいいいいいいいいいいいいいいいいい</p> <p>ううううううううううううううううううう</p> <p>ううううううううううううううううううう</p> <p>一番下です</p> </div> </div> <script src="js/vendor/jquery-2.2.2.min.js"></script> <script> //自動スクロール //メッセージエリアのDOMを変数に格納 var $scrollAuto = $('.js-auto-scroll'); //animate関数で利用できるプロパティは数値を扱うプロパティの値を簡単に変化させることができる関数 //scrollTop()」は、ブラウザの画面をスクロールした時の位置（スクロール量）を取得できるメソッド。引数を設定することで任意のスクロール位置まで移動させることが可能 //scrollHeightは、あふれた(overflowした)画面上に表示されていないコンテンツを含む要素の内容の高さ //scrollTopの要素をscrollHeightに徐々に変化させている $scrollAuto.animate({scrollTop: $scrollAuto[0].scrollHeight}, 'slow'); </script> </body> </html>
CSS
/* ====================================== サイト全般レイアウト ====================================== */ /*リセットCSS*/ *{ text-decoration: none; padding: 0px; margin: 0px; color: rgba(0,0,0,0.87); } .site-width{ width: 100vw; } body{ background-color: rgb(252, 215, 161); } /* ====================================== メインゲーム画面 ====================================== */ /*メッセージエリア*/ .message-area{ background-color: darkgrey; width: 90%; height: 400px; /* メッセージエリアにoverflow: scroll;を指定*/ overflow: scroll; margin: 2vw 2vw; } .message-area p{ font-size: 3.5vw; -webkit-text-size-adjust:100%; padding: 1vw; }
ポイントまとめ
・スクロールさせるメッセージエリアにoverflow: scroll;を指定
・animate関数とscrollTopを利用して、任意のスクロール位置まで、プロパティの値を変化させる
・scrollHeightは、あふれた(overflowした)画面上に表示されていないコンテンツを含む要素の内容の高さを取得
・scrollTopの要素をanimate関数でscrollHeightに徐々に変化させることで、ページを開くとスクロールして一番下の文章を表示させるテキストエリアを実現
画像をクリックするとPOST送信できるボタンをHTMLとCSSで作成
画像をクリックするとPOST送信できるボタンをHTMLとCSSで簡単に作ります。
画像自体をクリックして先に進めるので、UIが良くなりますね。
やり方としては、透明なsubmitボタンを画像の前に置き、まるで画像をクリックしたようにPOST送信をさせます。
動作イメージ
左上のvar_dumpで表示させたPOST送信の中身は最初は何も入っていません。
一番左のフランケンシュタインをクリックすると、monster01がPOST送信されているのが分かります。
真ん中のドラキュラをクリックすると、monster03がPOST送信されているのが分かります。
論よりコード
HTML(POST送信確認用にPHPを使用)
<?php var_dump($_POST);//POST送信確認用 ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charaset = "utf-8"> <title>ボタンを画像にする</title> <link rel="stylesheet" type="text/css" href="style.css?<?php echo date("YmdHis"); ?>"> </head> <body> <header> </header> <div id="main" class="site-width"> <!-- メインのゲーム画面--> <div class="container-game-area"> <!-- モンスター選択--> <div class="monster-area"> <div class="monster-form-container"> <!--画像のボタンごとにformタグを用意する--> <form method="post"> <!--type="submit"のinputタグとボタンの画像となるimg タグを用意--> <input class=input-monster-img type="submit" name="select-monster" alt="送信する" value="monster01"> <img src="img/monster01.png" alt=""> </form> <form method="post"> <input type="submit" name="select-monster" alt="送信する" value="monster02"> <img src="img/monster03.png" alt=""> </form> <form method="post"> <input type="submit" name="select-monster" alt="送信する" value="monster03"> <img src="img/monster05.png" alt=""> </form> </div> </div> </div> </div> <footer class="site-width"> </footer> </body> </html>
CSS
/* ====================================== サイト全般レイアウト ====================================== */ /*リセットCSS*/ *{ text-decoration: none; padding: 0px; margin: 0px; color: rgba(0,0,0,0.87); } .site-width{ width: 100vw; } #main{ /* background-color: #1BE7FF;*/ background-color: #F9C80E; } /* ====================================== メインゲーム画面 ====================================== */ .container-game-area h1{ font-size: 5vw; } /*モンスターエリア*/ .monster-area .monster-form-container{ width: 90vw; overflow: hidden; margin: 0 auto; } .monster-form-container form{ width: 30vw; float: left; position: relative; border: 1px black solid; box-sizing: border-box; } .monster-form-container input{ width: 30vw;/* imgタグとwidth,heightの大きさを揃える */ height: 30vw; display: block; background-color: #F9C80E;/*background-colorをしっかりと指定しないとinputタグが小さくなってしまいます*/ opacity: 0;/*inputタグは見えなくなるようにopacity:0;*/ position: absolute; top:0; z-index: 2;/*透明なボタンが画像より手前に来るようにz-indexを指定*/ } .monster-form-container input{ cursor: pointer; } .monster-form-container img{ width: 30vw;/* inputタグとwidth,heightの大きさを揃える */ height: 30vw; }
ポイントまとめ
・作りたい画像のボタンの数だけformタグを用意する
・formタグの中に、「type="submit"のinputタグ」と「ボタンの画像となるimg タグ」を用意
・inputタグとimgタグのwidth,heightは揃える
・inputタグのbackground-colorをしっかりと指定(指定しないとinputタグが小さくなる)
・inputタグとimgタグがぴったり重なるようにpositionで調整
・inputタグは見えなくなるように「opacity:0;」を設定
・透明なinputタグのsubmitボタンが画像より手前に来るようにz-indexを指定
これで見えないですが画像の手前にsubmitボタンができて、まるで画像をクリックしたようにPOST送信ができます。
HTMLとCSSとJavaScriptでキャラクター選択画面を作る
ゲームとかにありがちなキャラクター選択画面のアニメーションをHTMLとCSSとJavaScriptで簡単に作ります。
動作イメージ
キャラクターを選択する前はボタンは灰色になっていて押せません。
キャラクターをクリックすると、キャラクターの周りが赤く囲われます。
ボタンは灰色から黄色に変化して、押せるようになります。
他のキャラクターをクリックすると、キャラクターの周りが赤く囲われます。
先程クリックしたキャラクターの周りの赤枠は消えます。
論よりコード
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charaset = "utf-8"> <title>キャラクター選択</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> </header> <div id="main" class="site-width"> <!-- キャラクター選択画面--> <div class="characters-select-area" > <h1>キャラクターを選んでね</h1> <form method="post"> <!--上段のキャラクターが配置されているエリア --> <div id="container-top-characters" class="site-width"> <!-- for属性の値とinputタグのid属性の値を同じにすることで、ブラウザでラベルをクリックした際に、inputタグをクリックしたのと同じ動作が可能になる --> <!-- labelタグにはjsで使うクラス「js-panel-select」を用意しておく--> <label for="man" class="panel panel-ceo js-panel-select"> <!-- ラジオボタンを用意する--> <input type="radio" name="ceo-select" value="0" id="man"> <img class="panel-img" src="img/man.png"> </label> <label for="woman" class="panel panel-ceo js-panel-select"> <input type="radio" name="ceo-select" value="1" id="woman"> <img class="panel-img" src="img/woman.png"> </label> <label for="ninja" class="panel panel-ceo js-panel-select"> <input type="radio" name="ceo-select" value="2" id="ninja"> <img class="panel-img" src="img/ninja.png"> </label> </div> <!--下段のキャラクターが配置されているエリア --> <div id="container-bottom-characters" class="site-width"> <label for="monkey" class="panel panel-ceo js-panel-select"> <input type="radio" name="ceo-select" value="3" id="monkey"> <img class="panel-img" src="img/monkey.png"> </label> <label for="dog" class="panel panel-ceo js-panel-select"> <input type="radio" name="ceo-select" value="4" id="dog"> <img class="panel-img" src="img/dog.png"> </label> </div> <!-- submitボタンのinputタグにはjsで使うクラス「js-btn-prohibid」を用意しておく --> <!-- 属性disabledをつけておき、ボタンを非活性にする --> <input type="submit" class="btn btn-slect js-btn-prohibid" value="選択" disabled="disabled"> </form> </div> <footer class="site-width"> </footer> <script src="js/vendor/jquery-2.2.2.min.js"></script> <script> ////キャラクター選択 //クラス js-panel-select のDOMを変数に入れる var $selectPanel = $('.js-panel-select'); //変数$selectPanelの要素をクリックしたとき $selectPanel.on('click', function(e){ //変数$selectPanelの要素のCSSを変更して、枠線を透明にする（前回クリックしたときの赤い枠線を消すため） $selectPanel.css('border', '5px rgba(0,0,0,0) solid'); //クリックした要素のCSSを変更して枠線を赤くする $(this).css('border', '5px red solid'); }); ////ボタン活性化 //クラス js-btn-prohibid のDOMを変数に入れる var $prohibidBtn = $('.js-btn-prohibid'); //変数$selectPanelの要素をクリックしたとき $selectPanel.on('click', function(e){ //クラスjs-btn-permitを追加する(ボタンの色が変わる) //クラスjs-btn-prohibidを削除する(ボタンの色が変わる) //属性disabledを削除する(ボタンが活性化される) $prohibidBtn.addClass('js-btn-permit').removeClass('js-btn-prohibid').removeAttr('disabled'); }); </script> </body> </html>
CSS
/* ====================================== サイト全般レイアウト ====================================== */ /*リセットCSS*/ *{ text-decoration: none; padding: 0px; margin: 0px; color: rgba(0,0,0,0.87); } .site-width{ width: 100%; } #main{ background-color: #F9C80E; } /* ====================================== キャラクター選択画面 ====================================== */ .characters-select-area img{ width: 100%; } .character-area{ float: left; } input[type=radio] { display: none;/*ラジオボタンを見えないようにするCSS*/ } .panel-ceo{ width: 33vw; display: block; float: left; box-sizing: border-box; } #container-top-characters{ margin: 0 auto; width: 100vw; overflow: hidden; } #container-bottom-characters{ margin: 0 auto; width: 66vw; overflow: hidden; } .btn{ width: 50vw; margin: 0 auto; display: block; font-size: 6vw; } .js-panel-select{ border: 5px rgba(0,0,0,0) solid;/*キャラクターパネルのデフォルトのCSS*/ } .js-btn-prohibid{ background-color: gray;/*非活性のときのボタンのCSS*/ } .js-btn-permit{ background-color: yellow ;/*活性のときのボタンのCSS*/ }
ポイントまとめ
・キャラクターパネルtype="radio"のinputタグにし、CSSで「display: none;」を指定してラジオボタンを見えなくする。
・labelタグで「type="radio"のinputタグ」と「キャラクター画像のimgタグ」を囲う。
・「labelタグのfor属性の値」と「inputタグのid属性の値」を同じにすることで、ブラウザでラベルをクリックした際にinputタグをクリックしたとき(ラジオボタンをクリックしたとき)と同じ動作をさせる。
・submitボタンのinputタグにはあらかじめ属性disabledをつけておき、ボタンを非活性にする。
・キャラクターパネルをクリックしたときに、JavaScriptで枠線を付ける/消す、ボタンを活性化する。
Gitコマンド備忘録
Gitを使う準備
前提
Gitの概念や用語の説明は特に記載しておりません。
Gitインストール(Macの場合)
$ brew install git
Git初期設定
$ git config --global user.name <ユーザネーム> $ git config --global user.email <ユーザアドレス>
Gitのコミット履歴に掲載される名前とアドレス。
変更はもう一度同じコマンドを実施する
初期設定の確認は以下のコマンド
$ git config --global -l
リポジトリの作成
$ git init
現在のフォルダ内にリポジトリを作成し、ワークツリーとインデックスを用意する。
Gitで管理したいディレクトリで実施。
Git管理したくないファイルは「.gitignore」ファイルを作成し、記載。
新規追加や変更されたファイルを選択しステージさせる
$ git add .
. で変更があったものを全選択。.をファイル名に変更するとファイルごとに実施可能。
ステージしたファイルをワークツリーへ戻す
$ git reset .
ステージされた変更をコミットする。
$ git commit -m "コミット名"
登録されているリポジトリの確認
$ git remote -v
登録されているリポジトリの削除
$ git remote remove origin
登録されているリモートリポジトリへプッシュする
$ git push origin master
Gitリポジトリのコピー（クローン）を実行
git clone https://github.com/〇〇/〇〇.git(リモートリポジトリ名) <ローカルで格納するディレクトリ名> <|| **ワークツリーとインデックスの状況をファイル単位で確認する >|| git status
過去のコミット履歴を確認する
git log (--oneline)
ブランチを新規に作成する
$ git branch new-branch1 $ git branch new-branch2
ブランチを確認する
$ git branch new-branch1 new-branch2 * master
ブランチを移動する
$ git checkout new-branch1 $ git branch * new-branch1 new-branch2 master
ブランチの修正をマスターに反映させる
$ git merge new-branch1
masterブランチで実施する。
mergeできるときはメッセージを求められるので、Vi コマンド形式でいれる。
conflictが起きているときはいらない方のbranchの内容を修正・コミットし、再度マージ。
ブランチを削除する
$ git branch -d <ブランチ名>
過去の特定のコミット位置からブランチを切る
$ git checkout -b <new_branch> <commit_hash>
さくらのレンタルサーバでWebサービスを公開する
１：さくらレンタルサーバを契約する
いろいろプランはありますが「スタンダードプラン」で十分だと思います。
容量などの差はあれど使える機能に差は無さそうです。
www.sakura.ne.jp
２：ローカル環境のDBのデータをエクスポート
２−①：DBを選択する
２−②：エクスポートをクリック
２−③：Export methodの詳細をクリック
２−④：DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT / TRIGGER コマンドを追加する にチェックを入れる
２ー⑤：下の方にある「実行」ボタンをクリック
４：公開サーバ用のデータベースを作成する
４−①：サイドバーにあるアプリケーションの設定の中のデータベースの設定をクリック
４−②：データベースの新規作成
４−③：データベース名を入力
４−④：データベースを作成するボタンをクリック
４−⑤：管理ツールログインをクリック
４−⑥：２−⑥で作った「.sql」ファイルをインポートする
インポート→ファイルを選択→実行
５：ファイルマネージャーでコードをアップロードする
５−①：「サーバコントロールパネル」画面のファイルマネージャーをクリック
５−②：「アップロード」をクリック
５−③：「ファイルを追加をクリック」
5MB以上の大きさのファイルは送れないので、５MBごとにまとめてアップロードするのが良いです。
（公開サーバ内でファイルの圧縮・解凍が可能です。）
６：ローカルサーバと公開サーバの差分設定を修正する
DBに接続する際の変数を修正する
ローカルサーバから公開サーバに接続先を変更してください。
「サーバコントロールパネル」画面の情報と対応させ、PDOオブジェクト生成の際の変数を以下のように修正。
// PDOオブジェクト生成（DBへ接続）
$dbh = new PDO($dsn, $user, $password, $options);
$dsnの中のdbname…「データベース名」
$dsnの中のhost…「データベースサーバ」
$user…「データベースユーザ名」
$password…接続パスワード
７：URLにアクセスする
URLは「http://〇〇◯.sakura.ne.jp/フォルダ名/ファイル名.php」になります。
画面表示され、DB関連の処理も行われれば、無事完了です。
