カテゴリー: jQuery

15秒でHTML5のプロジェクトを始めるテンプレート生成サイト

投稿者：isc_blog

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">

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

2011年6月7日

スマートフォンサイトでアドレスバーを隠す方法（iPhone/Android）

投稿者：isc_blog

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

まずは、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>

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

2011年6月6日

jQueryでlightboxみたいな「prettyPhoto」を使ってみる

投稿者：isc_blog

前にお客様サイト上に「お問い合わせフォーム」を掲載する際に
prototype.js で「lightbox」を使ってビューっとウィンドウ出したことがあったなぁと思い今回「jQuery」で実装しなければならなかったため調べたところ
「prettyPhoto」というものがありました。

本家サイトをいろいろ見れば使い方がわかるんですが（なんだかすごいです。）
今回、「お問い合わせフォーム」として使用するため、下記のような規制がありました。
・下部に表示される「twitter」をはじめとするボタンが不要
・リンクではなくボタンで起動する

で、こんな感じで出来ました！
下記を「test.html」としました。
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery lightbox clone – prettyPhoto – by Stephane Caron</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.6");
</script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javaScript">
function openInquiry() {
$.prettyPhoto.open(‘inquiry.html?iframe=true&width=500&height=500′,’お問い合わせフォーム’,’内容を入力してください。’);

}
</script>
</head>
<body>
<div id="main">
<h2>Iframe JavaScriptから起動</h2>
<input type="button" value="click" onclick="openInquiry();" />

構成は下記の通り
[html]
prettyPhoto
│ inquiry.html
│ result.html
│ test.html
│
├─css
│ prettyPhoto.css
│
├─images
│ │
│ ├─fullscreen
│ │ 1.jpg
│ │ 2.jpg
│ │ 3.jpg
│ │ 4.jpg
│ │ 5.jpg
│ │ 6.jpg
│ │ high.gif
│ │ huge.gif
│ │ wide.gif
│ │
│ ├─prettyPhoto
│ │ ├─dark_rounded
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ contentPattern.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ ├─dark_square
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ contentPattern.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ ├─default
│ │ │ default_thumb.png
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │ sprite_next.png
│ │ │ sprite_prev.png
│ │ │ sprite_x.png
│ │ │ sprite_y.png
│ │ │
│ │ ├─facebook
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ contentPatternBottom.png
│ │ │ contentPatternLeft.png
│ │ │ contentPatternRight.png
│ │ │ contentPatternTop.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ ├─light_rounded
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ └─light_square
│ │ btnNext.png
│ │ btnPrevious.png
│ │ default_thumbnail.gif
│ │ loader.gif
│ │ sprite.png
│ │
│ └─thumbnails
│ flash-logo.png
│ quicktime-logo.gif
│ t_1.jpg
│ t_2.jpg
│ t_3.jpg
│ t_4.jpg
│ t_5.jpg
│
└─js
jquery-1.3.2.min.js
jquery-1.4.4.min.js
jquery.prettyPhoto.js
[/html]
サンプルはこちらに置きました↓
http://ivankov.iscw.jp/prettyPhoto/test.html

↓↓↓

↓↓↓

アーカイブダウンロードはこちら
ダウンロード

2011年5月16日

Twitter発言をjQueryとJSONPで取得して表示してみました

投稿者：isc_blog

先日紹介したＷＥＢサービスで使用されている「jsonp」で取得と表示を簡単に出来ないかな？と思い「Twitter」のＡＰＩを利用してデータを取得しJSONPで表示するものを書きました。

※ＪＳＯＮＰについては→JSONPとは

[html]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JSONPでTwitter発言表示してみました</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.6.0");</script>
<script type="text/javascript">
function dispTweet() {
// 一度クリアにする
$("#recent").html("");
// ユーザーアカウントのデフォルト値
var screenName = "isc_web";
// デフォルト表示件数
var count = 20;
if ($("#sname").val() != "") {
screenName = $("#sname").val();
}
if ($("#count").val() != "" && !isNaN($("#count").val())) {
count = $("#count").val();
}
var url="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=" +
screenName + "&count=" + count + "&callback=?";
$.getJSON(url , function(data){
$.each(data,function(i){
// 取得できるデータは
// http://dev.twitter.com/doc/get/statuses/user_timeline
// にて確認してください。
$("#recent").append("<li>"+this.text+"</li>"); // とりあえず記事本文のみ出力
});
});
alert("OK");
}
</script>
</head>
<body>
<strong>TwitterのつぶやきをJSONPで取得表示する</strong><br />
表示したいアカウント：<input type="text" id="sname" value=""> 
表示件数：<input type="text" id="count" value="">※デフォルト20件<br />
<input type="button" value="ツイート表示" onclick="dispTweet()">
<div id="recent"></ul>
</body>
</html>
[/html]
サンプルはこちら