【教材用サンプル】パラメーターを使って初めてページを開いた時のみ実行する【Javascript】

カテゴリ : html/css, JavaScript, 教材サンプル

Webサイトのトップページなどで初めてページを開いた時のみ何か(例:アニメーションなど)を実行する方法です。

サイトを訪れた回数をcookieで取得することも可能ですが、今回は一度目のみを認識できれば良いのでパラメーターを使って簡単に実装します。

parameter.htmlとparameter2.htmlというファイルで確認をします。(ファイル名は任意です)

locationオブジェクトのsearchプロパティで取得した現在のURLのサーチ情報(?で始まる検索クエリ部分)を変数paramに代入し、変数paramの値が?count=2ではない場合「トップページに初めて訪れました」のアラートを出します。(それ以外の場合はアラートは出しません)

トップページに移動するためのa要素のhref属性に「parameter.html?count=2」と指定することで、二度目以降はURLのサーチ情報に?count=2が付与されます。

これによって2度目以降はアラートが出ず、初めてページを開いた時のみアラートを出すことができます。

parameter.htmlの記述

<!DOCTYPE html>
<html lang="ja" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>パラメーターの値による条件分岐1</title>
 </head>
 <body>
 <a href="parameter.html?count=2">TOP</a>
 <a href="parameter2.html">別ページに移動</a>
 <script type="text/javascript">
 let param = location.search;
 if(param !== "?count=2"){
 alert("トップページに初めて訪れました");
 //初めて訪れた時の処理を書く
 }
 </script>
 </body>
</html>

 

parameter2.htmlの記述

<!DOCTYPE html>
<html lang="ja" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>パラメーターの値による条件分岐2</title>
 </head>
 <body>
 <a href="parameter.html?count=2">トップへ戻る</a>
 </body>
</html>

【ライブラリ】jQueryの一般的な実装手順

カテゴリ : JavaScript, jQuery

 

スクリーンショット 2015-04-08 11.10.11

 

ぼくの教えているWeb講座の受講生の方から「ライブラリ(jQuery)の実装の手順について教えてほしい」と質問が上がりました。

 

色々なサイトで既に紹介されているのですが、中には解説が難しく感じるものもあるようなので、当サイトでも解説をしたいと思います。(とっても今更な感じですが・・・)

今回はまずjQueryへのリンクの貼り方を解説します。

 

 

第1回jQueryへリンクを貼ろう

 

まず最初に行うことは、jQueryを実装したいhtmlファイルからjQuery本体(javascriptファイル)へリンクを貼ることです。

リンクの貼り方は2通りあります。

 

 

a.  ローカルにjQuery本体をダウンロードしてリンクを貼る方法

 

jQuery公式サイトより、jQuery本体をダウンロードし、ローカルサイトフォルダの任意の場所へ移動します。

 

jQuery公式サイトへはこちらのリンクからジャンプします。(新規ウィンドウまたはタブが開きます)

 

スクリーンショット 2015-04-07 21.20.19

 

画面のやや右上にある「Download jQuery」ボタンより、ダウンロード画面へ移動します。

 

スクリーンショット 2015-04-07 21.22.35

 

必要なバージョンのjQueryをダウンロードしましょう。

 

スクリーンショット 2015-04-07 23.45.03

 

ダウンロード後、ローカルサイトフォルダ内の任意の場所に移動し、相対パスの記述でリンクを貼ります。

記述場所はhtmlファイルのhead要素内にしましょう。

 

例:htmlファイルと同じ階層にjsフォルダを作成し、そこにjQuery本体(jquery-1.11.2.min.js)を移動した場合、下記の記述でリンクを貼ります。(script要素以外は任意の記述をしてください)

 

<head>
<meta charset="UTF-8">
<title>jQueryの一般的な実装手順</title>
<script src="js/jquery-1.11.2.min.js"></script>
</head>

 

 

b.CDNを利用してjQuery本体へリンクを貼る方法

公式サイト内に設置されているjQueryの本体ファイルへリンクを貼ることができます。

下記の記述でリンクを貼ります。(script要素以外は任意の記述をしてください)

<head>
<meta charset="UTF-8">
<title>jQueryの一般的な実装手順</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>

 

 

以上の2つの方法でjQueryへリンクを貼ることができます。

次回はプラグインの一般的な実装手順を紹介します。

 

【メモ (jQuery)】 Webサイト(全体または一部の要素)をフェードインさせる記述

カテゴリ : JavaScript, 未分類

 

alpha

 

今回はjQueryを使ってWebサイトの全体、または一部の要素をフェードインさせるアニメーションを紹介します。

要素に対するID名でアニメーションの指定が行えるため、比較的自由度が高い設定が行えると思います。

 

 

下記にまずはHTMLの記述から解説をします。

 

この記事の続きを読む

【メモ (jQuery)】 Webサイト全体をアニメーションさせる記述

カテゴリ : JavaScript, すべてのカテゴリ

anime

 

フルフラッシュサイトが流行っていた頃は、最初に全体をアニメーションさせながら登場させるなんていうサイトがよくありました。

 

今回はその動きをjQueryで作成してみたいと思います。

 

下記の記述でid名containerというdivをアニメーションさせてみたいと思います。

 

この記事の続きを読む

【メモ (Javascript)】 特定の要素の座標を取得する記述【jQuery】

カテゴリ : JavaScript, すべてのカテゴリ

js_座標取得

 

先日仕事の関係でJavascriptを使って要素の位置を取得する方法を調べていたので、こちらで紹介します。

 

いくつか方法があったのですが、以下の2通りを紹介します。

 

この記事の続きを読む

【メモ (jQuery)】 スクロールアニメーションを作成できるライブラリ「ScrollTween.js」【パララックス】

カテゴリ : JavaScript, すべてのカテゴリ

 

2013-12-26-08.41

 

 

ここ数年、Webサイトの中でスクロールに連動してアニメーションをさせる「パララックス」という表現が流行っていますね。

「パララックス」って何?というと下記のようなタイプのサイトに使われているような表現です。

 

jQuery最高の教科書|株式会社シフトブレイン 著

IRO

James Bond 007 Cars Evolution | Evans Halshaw

 

 

中にはかなり自由度高く動くものもあり、面白そうなので一度そういった表現を導入してみようと思いました。

Javascriptを1から作っていくのはかなり大変そうだったので、ライブラリで良さ気なものを探していると「ScrollTween.js」というライブラリが見つかりました。

少しいじってみると自由度も高く触りやすいものだったので紹介します。

 

 

「ScrollTween.js」はこちらのページの「Download ZIP」からダウンロードできます。

 

dl

 

 

以下、実装の手順です。

 

この記事の続きを読む

【メモ (jQuery)】 Uncaught ReferenceError: $ is not defined (anonymous function)

カテゴリ : JavaScript, すべてのカテゴリ

 

error

 

jQueryを利用する際に Uncaught ReferenceError: $ is not defined (anonymous function)

というエラーが出た際の処理。

 

以前他のサイトでも使用したことがある機能を実装しようとした際に、jsファイルの記述内容やリンクは間違っていないはずなのに動かない・・・。ということが起こりました。

さらに上記に記述した「Uncaught ReferenceError: $ is not defined (anonymous function)」というエラー。

 

どうやらhtmlのhead要素内の記述に問題があったようです。

 

この記事の続きを読む

【メモ (jQuery)】 一定量以上スクローした際に出てくるナビゲーション

カテゴリ : JavaScript, すべてのカテゴリ

 

20131014-000522.jpg

 

当サイトの右側に出てくるナビゲーションのように、一定量以上スクロールしたときに出てくるナビゲーションを作るための記述です。

(ナビゲーションでない要素にも適用はできます。)

 

この記事の続きを読む

【メモ (WordPress)】 Javascript内の全角文字が文字化けしてしまったときの対処

カテゴリ : JavaScript, Wordpress, すべてのカテゴリ

 

スクリーンショット 2013-10-04 11.52.41

 

WordPressで作成したページから外部のJavascriptにリンクを貼った時、Javascript内に記述した値の全角文字が文字化けしてしまうことがあります。その場合の対処を下記に記述します。

この記事の続きを読む

【メモ (WordPress)】 カテゴリの内容が空欄の場合の表示処理

カテゴリ : JavaScript, Wordpress, すべてのカテゴリ

 

WordPressで投稿ページと固定ページで同じphpを使用している場合、下記の画像のように固定ページではカテゴリの内容が空欄になってしまいます。

 

【投稿ページ】

スクリーンショット 2013-10-04 9.47.16

 

【固定ページ】

スクリーンショット 2013-10-04 9.51.54

この記事の続きを読む

最近の投稿

About Web Site & Key Word

このWebサイトについて&キーワード

■ html,css,JavaScriptなどのweb言語についての解説やメモ、Flash(ActionScript)でゲーム制作を行うための技術紹介、 WordPressを使用したCMS作成のための解説やメモ、アプリ制作の記録や解説やメモ、またそれらにまつわるニュースやブログを掲載します。

■ web制作,CMS制作,ゲーム制作,アプリ制作,
Android,iOS,iPhone,iPad,html,css,JavaScript,Flash,ActionScript,php,cgi,WordPress,Titanium Studio,ブログ,ニュース