Posted by アイ・エス・シーシステム事業部
on 2011年12月05日 in JavaScript/Ajax,jQuery,WEB,技術


おっと、こんなのを探していたところでした・・・

階層的なdivをツリービュー風に変換してしまうjQueryプラグイン「Arborescence.js」:phpspot開発日誌.

しかし、記事中のArborescence.jsのリンク先が現在
「The plugins site is currently unavailable.」
となっていて見ることが出来ません。

後日あらためて・・・

Posted by アイ・エス・シーシステム事業部
on 2011年11月25日 in HTML,JavaScript/Ajax,jQuery,技術


いやぁーーーー
すばらしいものを提供されている方がいらっしゃってとても助かっています。

これです。
↓↓↓
どんなフォームにも使えるjQueryのフォームバリデーション exValidation

エラー項目にはバルーン表示でエラー通知してくれるというナウい(死語)もの。

このexValidationを利用して開発中のフォームに当てはめてみたんですが・・・
あ、この条件下では・・・ここは必須で・・・で、こうするとこの項目自体見えなくなって・・・・っていう感じになってしまい
なにをどーして良いのやら・・・という風になってしまいました。

そこで、いろいろ試しに試して出来たのがこのサンプルです。

exValidationサンプル

まず、御覧頂いて・・・っと

このフォームは下記のような動作をするものです。

1.まずはユーザーに区分を入力してもらう
2.入力してもらった区分によって異なる項目のフォームを表示する
3.項目の中にはある項目が特定の値のときだけ必須になるというものも存在する

このような場合にどうしたか・・・ということをご紹介します。

まず、サンプルの構造は下記のようになっています。
———————————————————————-
[切り替え] これ自体が必須項目でもあります。

[項目群1] 切り替えが「20歳未満」の時に表示されるフォーム
[項目群2] 切り替えが「20歳以上」の時に表示されるフォーム
———————————————————————-
[html]



<select id="sel" name="sel" onchange="changeDiv(this)">
<option value="">–</option>
<option value="1">20歳未満のお客様</option>
<option value="2">20歳以上のお客様</option>
</select>

<!– 20歳未満のお客様用項目 –>
<div id="scene1">



</div>
<!– 20歳以上のお客様用項目 –>
<div id="scene2">



</div>
[/html]

で、JavaScriptはこんな感じ

[html]
// 初期にフォームの分岐を非表示にする
$(document).ready(function() {
$("div[id*=scene]").css("display", "none");
});
// Validationの初期設定
$(function(){
var validation = $("form")
.exValidation({
rules: {
sel: "chkrequired",
name: "chkrequired",
name_: "laterCall",



},
stepValidation: true,
errTipCloseBtn: false,
errHoverHide: true,
scrollToErr: true
});
// イベントリスナー
$(‘input.laterCall’).click(function() {
validation.laterCall(‘#’ + this.id.replace(‘_’,”));
});
$(‘input[name=sake]’).change(function() {
changeSakeItem();
validation.laterCall(‘#sake_kind’);
});
// 一度動作し初期化する
changeDiv(document.getElementById(‘sel’));
});
// お酒を飲むかどうかで必須項目チェンジ
function changeSakeItem() {
clearErrors();
// alert($(‘input[name=sake]:checked’).val());
if ($(‘input[name=sake]:checked’).val() != "1") {
$(‘#sake_kind’).attr(‘class’, ”);
} else {
$(‘#sake_kind’).attr(‘class’, ‘chkrequired’);
}
}
// エラー削除
function clearErrors() {
// 表示されているエラーをフェイドアウト
$("div[id*=err_]").fadeOut();
}

// ユーザ区分変更
function changeDiv(elem) {
clearErrors();
var accNo = 0;
if (elem != null && elem.value =="1") {
accNo = 1;
} else if (elem == null || elem.value.length == 0) {
// N/A
accNo = 0;
} else {
accNo = 2;
}
$("div[id*=scene]").css("display", "none");
if (accNo > 0) {
$("div#scene"+accNo).css("display", "block");
}
// まずは必須項目チェック全外し
$(‘#name’).removeClass(‘chkrequired’);
$(‘#kana’).removeClass(‘chkrequired’);
$(‘#email’).removeClass(‘chkrequired’);
$(‘#birthday’).removeClass(‘chkrequired’);

// 20歳未満か20歳以上で必須項目条件切り替える
switch (accNo) {
case 1:
$(‘#name’).addClass(‘chkrequired’);
$(‘#kana’).addClass(‘chkrequired’);
$(‘#email’).addClass(‘chkrequired’);
break;
case 2:
$(‘#birthday’).addClass(‘chkrequired’);
break;
}
clearErrors();
}
[/html]

こんな感じの実装で出来ました。

要するに「class=chkrequired」っていうのを外せば必須項目にならないし
なんでもない項目に「class=chkrequired」を乗っけてあげればその時点から必須項目になります。

サンプルで「20歳以上」にしてから「飲む」を選択すると「お飲みになる種類」が必須になる・・・という感じです。

こちらからダウンロード出来るようにしておきましたのでご自由にご利用ください。
コメントいただけるとありがたいです。

Posted by アイ・エス・シーシステム事業部
on 2011年09月18日 in JavaScript/Ajax,jQuery,WEB,技術


西畑一馬のjQuery Mobileデザイン入門より

下記の記事がすごーく参考になるのでご紹介します。

サンプルで学ぶjQuery Mobileまとめ(前編)
サンプルで学ぶjQuery Mobileまとめ(中編)

見るだけでjQuery Mobileでスマホサイト作りたくなります。
サンプル作りながら読み終わる頃には1サイトできそうな勢いです!

Posted by アイ・エス・シーシステム事業部
on 2011年09月17日 in JavaScript/Ajax,jQuery,WEB,技術


・jQueryをやってみようと思っている方
・いまさら聞けないけどAjax習得したい方
にオススメの記事がありました。

40分で覚える!jQuery速習講座

6ページもあるけど、どんどん読み進められますのでやる気モードでどうぞ!

まずはHTML変更するところからそれっぽく「アコーディオン」まで。

あー そーゆーことぉ!

ってなることうけあいです!

Posted by アイ・エス・シーシステム事業部
on 2011年08月24日 in JavaScript/Ajax,jQuery,WEB,技術


先日 EXT JSすげーみたいなことを書きました。
参考記事こちら

そんな感じのjQuery版があったのでご紹介します。

本家のデモをはこちらです。

本家のページはこちらです。ダウンロードも出来ます。

ダウンロードして加工してみました・・・(加工と言っても名称変更してみただけ)
ちょいと日本語にしてみました・・・バージョン

jquery-desktop

Posted by アイ・エス・シーシステム事業部
on 2011年07月20日 in HTML,JavaScript/Ajax,jQuery,WEB,技術


iframeタグにて他のページのコンテンツを取り込む際に
内容に応じてiframeの高さを自動調節してスクロールバーを出したくない時、ありますよね。
そんなときに重宝しそうなjQueryプラグイン「Auto iFrame Height」を見つけました。

こんなソースでiFrameに埋め込んだ中のコンテンツの高さを取得し自動で高さ調節してくれます。

[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>autoheight</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autoheight.js"></script>
</head>
<body>
IFRAME内のページの大きさに自動で高さ調整するサンプル<br />
<iframe id="myframe" name="myframe" class="autoHeight" frameborder="1" scrolling="no" src="heightpage.html"></iframe>
</body>
</html>
[/html]

サンプルはこちら
↑このページで簡単なサンプルをダウンロードできます。

上記はJavaScriptで20段までのテーブルをランダムで作成しています。
リロードごとに高さが変わっているのがわかるはず・・・

iframeの中身は同一ドメインのコンテンツに限ります。
でないとアクセス権がない・・・とかなんとか

中身がYahoo!だと高さ調節してくれないサンプル

Posted by アイ・エス・シーシステム事業部
on 2011年06月10日 in Google maps,JavaScript/Ajax,jQuery,WEB,WEBサービス,便利ツール,技術


HTML5 Demo: geolocation を見てやってみようと思いました。
で、ボタン押したら・・・的なことを盛りこんでみました。(ちょっとテキトーなのでソースが綺麗じゃないのはご容赦ください)

geocode サンプルはこちら

ソースはこれだっ!
[html]
<meta charset="utf-8">
<title>測位!</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var lat = "";
var lng = "";
function success(position)
{
var s = document.querySelector(‘#status’);
if (s.className == ‘success’)
{
return;
}
s.innerHTML = "ここだっ!ちがうかっ!";
s.className = ‘Success’;
var mapcanvas = document.createElement(‘div’);
mapcanvas.id = ‘mapcanvas’;
mapcanvas.style.height = ‘100%’;
mapcanvas.style.width = ‘100%’;
document.querySelector(‘#map’).appendChild(mapcanvas);
lat = position.coords.latitude;
lng = position.coords.longitude;
alert(‘Latitued: ‘+lat);
alert(‘Longitude: ‘+lng);
var url="http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lng+"&sensor=false";
alert(‘Google Map API: ‘+url);
//Get Json Request Here
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here!"
});
}
function error(msg)
{
var s = document.querySelector(‘#status’);
s.innerHTML = typeof msg == ‘string’ ? msg : "failed";
s.className = ‘Fail’;
}
//Jquery Code
$(document).ready(function()
{
$("#check").click(function()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(success, error);
}
else
{
error(‘Not supported’); //HTML Support
}
});
});
</script>
<input type=’button’ id=’check’ value=’測位!’/>
<div id="status">読込中・・・</div>
<div id="map"></div>
[/html]
※ソースは文字コードUTF-8で保存してください。

最近はGoogle様のおかげで簡単ですね。

その昔、某携帯用のナビゲーションを開発する仕事があってその際は緯度・経度の計算から地図の描画までスンゴイ計算して~ごにょごにょして~なんとか切り出した画像がこれです・・・的な感じでした。
なつかしい・・・けどたかだか6年前くらいか・・・

Posted by アイ・エス・シーシステム事業部
on 2011年06月07日 in HTML,JavaScript/Ajax,jQuery,WEB,WEBサービス,便利ツール,技術


Initializr というサイトで
15秒でHTML5のテンプレート的なコードを生成出来てしまいます!

こんな感じで・・・・

【HTML&CSS】
サンプルページにするとサンプルページのコードがくっついてきます。

【Javascript】
jQueryのminバージョンを付けて!

【Compatibility】※互換性
Modernizr!・・・ってモダンブラウザ的なことだろう・・・ と思う。

【Server Configuration】
サーバーコンフィグ・・・いらない

【Analytics】
いらないかな・・・・


この設定で作った物をダウンロードしたページ・・・

中身のコードはこんな感じ・・・(抜粋)
[html]
<!doctype html>
<!–[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]–>
<!–[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]–>
<!–[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]–>
<!–[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html lang="en" class="no-js"> <!–<![endif]–>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title></title>
<meta name="description" content="">
<meta name="author" content="">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css?v=2">

<script src="js/libs/modernizr-1.7.min.js"></script>
</head>
<body>
<p class="info">Your HTML5 project is almost ready! Please check the <a href="TODO.txt">TODO list</a>.</p>
<div id="header-container">
<header class="wrapper">
<h1 id="title">Your title</h1>
<nav>
<ul>
<li><a href="#">Some</a></li>
<li><a href="#">navigation</a></li>
<li><a href="#">links</a></li>
</ul>
</nav>
</header>
</div>
<div id="main" class="wrapper">
<aside>
<h3>Something aside</h3>
</aside>
<article>
<header>
<h2>Your article heading</h2>

    ・
    ・
[/html]

冒頭に[if IE]の嵐がっ!
モダンブラウザ対応した証拠ですね。
No Contentsを選べば手っ取り早い雛形の完成です。

Posted by アイ・エス・シーシステム事業部
on 2011年06月06日 in ANDROID,HTML,iphone,JavaScript/Ajax,jQuery,WEB,デザイン,技術


スマートフォンサイトでアドレスバー隠すようなサイトが多くてやってみよう!と思いました。

まずは、TAM テクニカルチーム|jQuery Mobileでスマートフォン用サイトを作成するを参考にスマートフォン用のページを作りました。

こんな感じ
※ぜひスマートフォンで見てください。

そして、アドレスバーを隠すようにしてみました。
iPhone Memo | 画面読込時にアドレスバーを隠すを参考にしました。

[html]
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<title>jQueryMobileで作ったページ</title>

<style type="text/css">

body {
min-height: 416px;
-webkit-text-size-adjust: none;
}
footer{
font-size:10px;
height:30px;
line-height:30px;
text-align:center;
}
.pagebtn{
margin:0 auto;
}
.formbox{margin-bottom:10px;}
</style>
<script type="text/javascript">
function hideAdBar(){
setTimeout("scrollTo(0,1)", 100);
}
</script>
</head>
<body onLoad="hideAdBar()" onOrientationChange="hideAdBar()">
<div data-role="page">
<header data-role="header">
<h1>サンプルページ</h1>
</header>
<div id="content" data-role="content">
<p>株式会社アイ・エス・シー</p>
<p>jQueryMobileデモサイトへようこそ!</p>
<ul data-role="listview" data-filter="true" data-inset="true">
<li><a href="http://www.iscw.jp/">サイト制作アイ・エス・シー</a></li>
<li><a href="http://www.isc-tokyo.co.jp/">株式会社アイ・エス・シー</a></li>
<li><a href="http://blog.iscw.jp/">アイ・エス・シー実験室</a></li>
<li><a href="http://www.yahoo.co.jp/">Yahoo!</a></li>
<li><a href="http://www.google.co.jp/">Google</a></li>
<li><a href="http://jquerymobile.com/">jQuery Mobile</a></li>
</ul>
こんな簡単にスマートフォンサイトが作れると楽しいですね!
<a href="#contact" data-role="button" data-icon="arrow-r" class="pagebtn">サービス概要</a>
</div>
<footer data-role="footer">
Copyright(C) ISC. All Rights Reserved.
</footer>
</div>

<!– サービス概要 –>
<div data-role="page" id="contact">
<header data-role="header">
<h1>サービス概要</h1>
</header>
<div id="content" data-role="content">
<h2>新規ウェブサイト制作</h2>
 ご依頼の時点から弊社担当者を決めウェブサイトの構成やデザインについてご連絡させていただきます。<br />
 ヒアリングシートに必要事項を記述していただき、担当者からのアドバイス等踏まえウェブサイト制作にあたります。<br />
 もちろん、途中で確認していただきながら進めますので「完成」時に困ることがないようにいたします。<br />
 ウェブに備えたい機能など、お気軽にご相談ください。<br />
 ウェブ以外の印刷物についてもご相談ください。<br />

<h2>既存ウェブサイトリニューアル</h2>
 ご依頼の時点から弊社担当者を決め現行のサイトについてのヒアリングやリニューアルに際するご希望をお知らせいただきます。<br />
 その上で、現行サイトに足りないものや機能改善について担当者よりアドバイスさせていただきウェブサイトのリニューアルにあたります。<br />
 もちろん、途中で確認していただきながら進めますので「完成」時に困ることがないようにいたします。<br />
 ウェブ以外の印刷物についてもご相談ください。<br />
<br />
 ドメイン取得・サーバーレンタルについても取得・契約代行いたします。また、他社にて取得したドメイン等移管等についてもお気軽にご相談ください。
</div>
<footer data-role="footer">
Copyright(C) ISC. All Rights Reserved.
</footer>
</div>
</body>
</html>
[/html]

アドレスバーを隠すのはここがキモです。
[html]
 ・
 ・
 ・
<script type="text/javascript">
function hideAdBar(){
setTimeout("scrollTo(0,1)", 100);
}
</script>
</head>
<body onLoad="hideAdBar()" onOrientationChange="hideAdBar()">
 ・
 ・
 ・
[/html]
ソースはこんな感じなんですが
ひとつ注意点があります。
[html]
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
[/html]
はじめ、これがなくてなかなかアドレスバーが隠れてくれませんでした。隠れない!非表示にならないって方はこれが原因かも・・・

それにしても
jQuery Mobileすごいですね!簡単ですね。
参考資料:jQuery Mobile

ページトップへ戻る

Get Adobe Flash player