簡単!jQueryで作るシンプルなスライドショー

Webサイトで最も目を引くところといえば,スライドショーではないでしょうか.企業や飲食,教育等のHPには必ずと言っていいほどスライドショーがあります.スライドショーはページの最上部に配置され,とても目を引くコンテンツです.今回はそのスライドショーを超簡単に作って行きます.超簡単なスライドショーなので,実装する機能は,一定経過時間ごとに画像が変わる機能のみとします.

続きを読む

jQueryとCSSで見え隠れするサイドメニューをつくる

今回はWebページ左端にある「open」ボタンをクリックすると,左側から格納されたメニューバーが出現するアニメーションを作成します.このアニメーションは複雑そうに見えてとても簡単です.ブラウザの画面より外側に要素を配置しておき,ボタンが押されたら左側の位置を0にするだけです.文章で見てもわからないので,実際にコードを見てみましょう.

続きを読む

jQueryとSCSSで画像にキャプションをつける

この記事ではjQueryとCSSで画像にキャプションをつけるためのコードを解説します.HTML上に配置された画像にマウスオーバーした時に,画像のキャプションが表示されるアニメーションをつけていきます.CSSだけでも可能な処理ですが,jQueryを使用してアニメーションをつける方がコードもすっきりと収まります.CSSはその書き方の特性上,かなり読みにくくなってしまいます.「:hover」や「:active」でアニメーションをつけても問題はないですが,アニメーションはjQueryでつける方がいいでしょう.

続きを読む

ブラウザからmongoDBのデータベースにデータを追加・表示する(Express Node.js)

前回の記事では「mongoose」を使ってデータベースからデータを取得し、ブラウザに表示させましたが、今回はnpm の方で MongoDB が公式で出しているモジュールがあったのでそちらを使用します。

今回は接続から、取得、表示、追加の順に解説します。「/form」のフォームから追加するデータを入力し、「/page_a」で追加したデータの一覧を表示させます。完成イメージは以下の通りです。

続きを読む

Express(Node.js)でMongoDBからデータを取得し、表示させる

前回の記事ではMongoDBのデータベースに接続するところまで作成しました。この記事では実際にデータベースから値を引き出し、ブラウザ上に表示させていきます。データベースにはフォームで値を保存できるようにしたいのですが、今回はデータを直接データベースに格納し、取り出すところをメインとします。ではみていきましょう。

続きを読む

Express(Node.js)でMongoDBと接続する

今回は「Express」から「MongoDB」に接続してみたいと思います。MongoD BはMySQLなどのRDBMS(Relational Database Management System)とは違い「NoSQL」と呼ばれるデータベースとなります。

「RDMS」はデータ構造をあらかじめ設定しなければいけないのに対し、「NoSQL」はデータ構造を決めておかなくても良いという特徴があります。また「NoSQL」はSQL言語を必要としないデータベースです。

続きを読む

Node.jsのフレームワーク(Express)で,フォームによるデータの送信を行う簡単な方法

前回の記事では、クエリパラメータを利用してデータを受信しました。今回の記事ではフォームでデータを送信し、送信したデータを画面上に表示させます。フォームによるデータ送信を解説する前に押さえておかなければならない2つのリクエスト方法があります。「GETリクエスト」と「POSTリクエスト」です。まずはそのリクエスト方法について解説した後、フォームの解説を行います。

続きを読む