CSS・Javascript

WordPressの投稿記事内でjavascriptを使いたい時

通常、WordPressでは記事内に書かれたjavascriptは、たとえテキストモードで入力しても自動的にエスケープされ動かない仕様となっている。

記事内でjavascriptを使いたい場合の解決策としてはカスタムフィールドを使用したりプラグリンを追加する等いくつかの方法があるが、最も簡単なのは inline-javascript というプラグインを導入する方法。
使い方はいたって簡単。
inline-javascript をインストールしてプラグインを有効化。
あとは使いたいjavascriptの前後を
[inline]〜[/inline]
で囲むだけでいい。

例えばページを読み込んだら任意のページに自動的にジャンプさせたい時は
テキストモードにして以下のように記載する。

[inline]
<script LANGUAGE="JavaScript">
function autoLink(){
location.href='http://www.digital-gate.com/';
}
setTimeout('autoLink()',0); 
</script>
[/inline]

実際に上記を入力・保存すると分かるが、scriptのタグは自動的に [ ] に置き換わる。

[inline]
[script LANGUAGE="JavaScript"]
function autoLink(){
location.href='http://www.digital-gate.com/';
}
setTimeout('autoLink()',0); 
[/script]
[/inline]

もちろんこのままできちんと動作するからこのままで良い。

ローカルストレージで複数の値を保存したい時(JSON)

ローカルストレージで複数の値を保存したい時、最も簡単なのはそれぞれの名前で複数のデータを保存すること
例えば以下の方法。

Javascript

<script type="text/javascript">
//複数のローカルストレージに保存
function setConfig(){
var n = document.getElementById("na").value;
var t = document.getElementById("te").value;
var a = document.getElementById("ad").value;
localStorage.setItem('onamae',n);
localStorage.setItem('tel',t);
localStorage.setItem('address',a);
alert("保存しました");
}
</script>
上記の方法は、保存データがそれぞれ多い場合はそれでも構わないが、少ないデータで無駄に多種類のデータを保存するのは好ましい方法とは言えない。

ローカルストレージに複数の値を保存するにはいくつか方法があるが、今後の展開をふまえてJSON形式で保存する方法を紹介する。
そのまま使えるサンプルになっているから、適所にコピーして自由に改造して使ってもらいたい。

なお、今回も以下のサンプルではjqueryを使うことを前提としているから、まずはヘッダーでjqueryを読み込んでおくこと。

html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
Javascript
<script type="text/javascript">
//ローカルストレージに保存
function setConfig(){
var n = document.getElementById("na").value;
var t = document.getElementById("te").value;
var a = document.getElementById("ad").value;
//保存データ
var datalist = {onamae:n,tel:t,address:a}
//ローカルストレージに保存
localStorage.setItem('config', JSON.stringify(datalist));
alert("保存しました");
}
//ローカルストレージを削除
function removeConfig(){
na.value = '';
te.value = '';
ad.value = '';
localStorage.clear();
alert("削除しました");
}
//ローカルストレージから取得
function getConfig(){
if(localStorage.getItem("config")){
var d = JSON.parse(localStorage.getItem("config"));
na.value = d.onamae;
te.value = d.tel;
ad.value = d.address;
}
}
//ページ読み込み時にローカルストレージから取得
$(document).ready(function(){
getConfig();
});
</script>
html
お名前<input type="text" id="na" />
電話番号<input type="text" id="te" />
住所<input type="text" id="ad" />
<button id="button" onclick="setConfig()">保存</button>
<button id="button" onclick="removeConfig()">すべて削除</button>

html5の機能、ローカルストレージを使いたい時

html5のローカルストレージはとても簡単に使えて便利。わざわざ仕組みを解説するより、なるべく単純でそのまま使えるサンプルを記載しておくから、コピーして必要な箇所を変更して使ってもらいたい。
PCから試す時はGoogleのChrome等、html5に対応したブラウザを使うこと。下のサンプルの場合、好きな名前を入力して保存ボタンをクリックした後、リロードしたり別のページを読み込んだ後に戻るとデータが保存されていることが確認できる。

なお、以下のサンプルではjqueryを使うことを前提としているから、まずはヘッダーでjqueryを読み込んでおくこと。

html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

ローカルストレージは同じ名前で空の内容を上書きすることで見かけ上削除された状態には出来るが、完全に削除したいと思うユーザーもいるから、削除ボタンのサンプルも一緒に載せておく。

Javascript

<script type="text/javascript">
//ローカルストレージに保存
function setConfig(){
var na = document.getElementById("na").value;
localStorage.setItem('name',na);
alert("保存しました");
}
//ローカルストレージを削除
function removeConfig(){
na.value = '';
localStorage.clear();
alert("削除しました");
}
//ローカルストレージから取得
function getConfig(){
config_na = localStorage.getItem('name');
na.value = config_na;
}
//ページ読み込み時にローカルストレージから取得してテキストボックスに表示
$(document).ready(function(){
getConfig();
});
</script>

html

お名前<input type="text" id="na" />
<button id="button" onclick="setConfig()">保存</button>
<button id="button" onclick="removeConfig()">すべて削除</button>

なお、スマートフォンなどHTML5に対応している可能性が高い環境はこれだけで良いが、PC環境の場合は、まだローカルストレージに対応していないブラウザでアクセスされることが多いだろう。
そんな時は下のようなサンプルで、アラートを出すか、サンプルを参考に条件分けをして処理を分岐するといい。

Javascript

if(typeof localStorage == 'undefined'){alert("ローカルストレージが使えません");}

 

Javascriptで引数からセレクトメニュー(プルダウンメニュー)を選択状態にしたい時

前回、Javascriptでセレクトメニュー(プルダウンメニュー)が変更されたらGETで送信する方法を書いたが、引数付きでジャンプした際、セレクトメニューはデフォルトの一番上が選択された状態に戻ってしまう。

PHP等の場合は、セレクトメニューを書き出す際にselectedを付加して書き出せば良いが、.htmlの場合はJavascriptで処理する。
例えば以下URLの場合

http://www.digital-gate.com/?c=2&g=1

下のHTMLを見れば分かるが、通常何もしない状態ではそれぞれのプルダウンは「全クラス表示」「全グループ表示」となるが、それでは表示されているであろう内容と合わないから「c」のプルダウンが「2組」、「g」のプルダウンが「グループ1」が選択された状態にしたい。

URLの引数を取得して、プルダウンメニューが選択された状態になるようにする方法は以下のサンプル

Javascript

function getVars(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i <hashes.length; i++){
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}

上記Javascriptを使うと引数から設定値を簡単に取得出来る。

class = getVars()["c"];
group = getVars()["g"];

使い方はこんな感じ。

あとはjqueryを使ってプルダウンの選択を変更するだけ。
※別途jqueryを読み込んでおくこと。

$('#class-items').val(class);
$('#group-items').val(group);

具体的にはこんな感じ。

HMTL

<form method="get" action="" name="form">
<select name="class" onChange="multipleNavi()" id="class-items">
<option value="0">全クラス表示</option>
<option value="1">1組</option>
<option value="2">2組</option>
</select>
<select name="group" onChange="multipleNavi()" id="group-items">
<option value="0">全グループ表示</option>
<option value="1">グループ1</option>
<option value="2">グループ2</option>
</select>
</form>

Javascript複数のセレクトメニュー(プルダウンメニュー)どちらかが変更されたらGETで送信したい時

表示の絞り込み等で複数のセレクトメニューを使用している時、送信ボタンをクリックしなくてもセレクトメニューに変更があった時点で送信してくれると便利な場合がある。

ちなみにセレクトメニュー(プルダウンメニュー)が1個の場合は

Javascript

function navi(c){
var class = c.options[c.selectedIndex].value;
location.href = '?c=' + class;
}

HTML

<form method="get" action="" name="form">
<select name="class" onChange="navi(this)" id="class-items">
<option value="0">全クラス表示</option>
<option value="1">1組</option>
<option value="2">2組</option>
</select>
</form>

上記ではクラスのプルダウンを変更すると同ページにGETで引数が付いた状態でジャンプする。

例 http://www.digital-gate.com/?c=3

セレクトメニュー(プルダウンメニュー)が2個の場合は

Javascript

function multipleNavi(obj){
var class = document.form.class.value;
var group = document.form.group.value;
location.href = '?c=' + class + '&g=' + group;
}

HTML

<form method="get" action="" name="form">
<select name="class" onChange="multipleNavi()" id="class-items">
<option value="0">全クラス表示</option>
<option value="1">1組</option>
<option value="2">2組</option>
</select>
<select name="group" onChange="multipleNavi()" id="group-items">
<option value="0">全グループ表示</option>
<option value="1">グループ1</option>
<option value="2">グループ2</option>
</select>
</form>

上記ではクラスまたはグループいずれかのプルダウンを変更すると同ページにGETで両方の引数が付いた状態でジャンプする。

例 http://www.digital-gate.com/?c=2&g=1

jquery mobileのトグルスイッチ・スライダーをjavascriptから切り替えたい時

前回のエントリはjquery mobileでプルダウンを選択状態にしたい時だが、同様にjavascriptを使ってデータを取得したり、フォルダや引数からデータを取得したものをトグル・スライダーの表示に反映させたいことも多いはず。
トグルボタン・トグルスイッチ・スライダーを、javascriptを使い取得した値に合わせて選択済にさせる方法は以下のサンプルを参考にすると良い。

html

<form>
<select name="slider" id="toggle" data-role="slider" onChange="navi(this)">
<option value="stop">停止中</option>
<option value="start">送信中</option>
</select>
</form>

javascript

<script type="text/javascript">
//選択済にしたい項目のvalue
var co = 2;
//トグルメニューをセットする
$('#toggle').val(co);
//jquery mobile用の処理
$('#toggle').slider('refresh');
</script>

最後の

$('#toggle').slider('refresh');

がポイント

jquery mobileでプルダウンを選択状態にしたい時

javascriptを使ってデータを取得したり、フォルダや引数からデータを取得したものをフォームのプルダウンメニューに反映させたいことは多いはず。
javascriptを使いセレクトメニューを選択済にする方法はいろいろなサイトで公開されているのから困らないが、通常のjavascriptで選択状態にするだけでは、jquery mobileを使っている場合に反映されない。

jquery mobileを使用する環境でjavascriptを使って任意のプルダウンメニューを選択状態にしたい時は以下のサンプルを参考にすると良い。

HTML

<form method="get" action="" id="select">
<select name="menu" id="course">
<option value="">選択してください</option>
<option value="1">セレクト1</option>
<option value="2">セレクト2</option>
<option value="3">セレクト3</option>
<option value="4">セレクト4</option>
<option value="5">セレクト5</option>
</select>
</form>

javascript

<script type="text/javascript">
//選択済にしたい項目のvalue
var co = 2;
//該当するselectのIDにセット
$('#course').val(co);
//jquery mobile用の処理
$('select').selectmenu('refresh',true);
</script>

最後の

$('select').selectmenu('refresh',true);

がポイント

ランダム文字列生成スクリプト(JavaScript版)


指定した文字種と文字数で、ランダムな文字列が作成できます。

基本はローマ字小文字(a-z)追加したい文字種があればチェックします。

ローマ字大文字(A-Z)
数字(0-9)
ハイフン「-」
アンダーバー「_」

そのままコピペで使えるJavaScriptとhtmlは以下

<script type="text/javascript" language="JavaScript">
function Generat(){
var result = '';
var source ='abcdefghijklmnopqrstuvwxyz';
if(document.generator.c1.checked){source +='ABCDEFGHIJKLMNOPQRSTUVWXYZ';}
if(document.generator.c2.checked){source +='0123456789';}
if(document.generator.c3.checked){source +='-';}
if(document.generator.c4.checked){source +='_';}
var len = document.generator.c5.options[document.generator.c5.selectedIndex].value; 
for(var i=0; i<len; i++) {result += source.charAt( Math.floor( Math.random() * source.length));}
alert(result);
return result;
}
</script>
<form name="generator">
<input type="checkbox" name="c1" checked>ローマ字大文字(A-Z)<br>
<input type="checkbox" name="c2" checked>数字(0-9)<br>
<input type="checkbox" name="c3">ハイフン「-」<br>
<input type="checkbox" name="c4">アンダーバー「_」<br>
<select name="c5">
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
<option value="32">32
<option value="33">33
<option value="34">34
<option value="35">35
<option value="36">36
<option value="37">37
<option value="38">38
<option value="39">39
<option value="40">40
<option value="41">41
<option value="42">42
<option value="43">43
<option value="44">44
<option value="45">45
<option value="46">46
<option value="47">47
<option value="48">48
<option value="49">49
<option value="50">50
<option value="51">51
<option value="52">52
<option value="53">53
<option value="54">54
<option value="55">55
<option value="56">56
<option value="57">57
<option value="58">58
<option value="59">59
<option value="60">60
<option value="61">61
<option value="62">62
<option value="63">63
<option value="64">64
</select> 文字<br>
<input value="作成" onclick="Generat()" type="button"><br>
</form>

jquery.validateでチェックボックスを必須項目にしたい時

jquery validateを使ったチェックにおいて通常の「input type=”text”」では自由に必須項目(required)の設定は簡単だが、複数選択が可能なチェックボックスにおいて必須項目の設定をしたい場合、同じやり方ではうまくいかない。サイトによってはjquery validateで「チェックボックスの必須項目は設定出来ない」と書いてあるところもあるが、チェックボックスの必須項目設定も可能。

テキストボックスでの必須項目設定とエラー表示は

<input type="text" size=50 name="name" class="required">
name:{required: "お名前を入力してください"},

のようにする。

チェックボックスの場合

例えば以下のようなフォームにおいてjquery validateを使ったチェックを行い、いずれか1つを選択することを条件にしたい時、

<input type="checkbox" name="lesson[]" value="1">1回目<br>
<input type="checkbox" name="lesson[]" value="2">2回目<br>
<input type="checkbox" name="lesson[]" value="3">3回目<br>
<input type="checkbox" name="lesson[]" value="4">4回目<br>

テキストボックスの時と同じようにしてnameであるlesson[]等を記載し

lesson[]:{required: "レッスンを選択してください"},

のようにするとエラーとなり失敗する。
[]を使う時は「’」「”」で囲み

'lesson[]':{required: "受講希望日を選択してください"},

とすれば良い。

htmlとjavascriptのサンプルは以下

JAVASCRIPT・HTML

(function(){
var rules = {
'lesson[]': {required: true}
};
var messages = {
'lesson[]':{required: "受講希望日を選択してください"}
};
$(function(){
$('#form').validate({
rules: rules,
messages: messages,
errorPlacement: function(error, element){
if (element.attr("name") == "lesson" ) error.insertAfter("#lesson_err");
}
});
});
})();
<input type="checkbox" name="lesson[]" value="1">1回目<br>
<input type="checkbox" name="lesson[]" value="2">2回目<br>
<input type="checkbox" name="lesson[]" value="3">3回目<br>
<input type="checkbox" name="lesson[]" value="4">4回目<br>
<div id="lesson_err"></div>

何もチェックしなかった場合「lesson_err」の位置に「受講希望日を選択してください」が表示される。

Google Maps V3のコントロールボタンのカスタマイズ

Google Maps V3のコントロールボタンのカスタマイズは以下の方法で行う。

■コントロールボタンの種類の変更

拡大縮小ボタンをiPhone等のスマートフォン向きなものに変更したい時は

navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}

Androidの標準ボタンにしたい時は

navigationControlOptions: {
style: google.maps.NavigationControlStyle.ANDROID
}

■コントロールボタンの位置

各コントロールボタンの表示位置は簡単に変更できる。

最上部

position:google.maps.ControlPosition.TOP_LEFT
position: google.maps.ControlPosition.TOP_CENTER
position:google.maps.ControlPosition.TOP_RIGHT

上部

position: google.maps.ControlPosition.LEFT_TOP
position: google.maps.ControlPosition.RIGHT_TOP

中央部

position: google.maps.ControlPosition.LEFT_CENTER
position: google.maps.ControlPosition.RIGHT_CENTER

下部

position: google.maps.ControlPosition.LEFT_BOTTOM
position: google.maps.ControlPosition.RIGHT_BOTTOM

最下部

position:google.maps.ControlPosition.BOTTOM_LEFT
position: google.maps.ControlPosition.BOTTOM_CENTER
position:google.maps.ControlPosition.BOTTOM_RIGHT

最上部と上部、下部と最下部は微妙に位置が違う

例えば、マップタイプのコントロールボタンを左上にしたい時は

mapTypeControlOptions: {
position:google.maps.ControlPosition.TOP_LEFT
},

拡大縮小ボタンを右下にしたい時は

navigationControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT,
}

■コントロールボタンの表示・非表示

ストリートビューのコントロールボタンを非表示にしたい時は

streetViewControl: false,

マップタイプのコントロールボタンを非表示にしたい時は

mapTypeControl: false,

何もコントロールボタンを表示したくない時は

disableDefaultUI: true,

■サンプルコード

<script type="text/javascript">// <![CDATA[
function attachMessage(marker, msg) {
google.maps.event.addListener(marker, 'click', function(event) {
new google.maps.InfoWindow({
content: msg
}).open(marker.getMap(), marker);
});
}
var data = new Array();
var myMap = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(26.731889,128.168945),
streetViewControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT,
style: google.maps.NavigationControlStyle.SMALL
}
});
for (i = 0; i <data.length; i++) {
var myMarker = new google.maps.Marker({
position: data[i].position,
map: myMap
});
attachMessage(myMarker, data[i].content);
}
// ]]></script>