アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

jQuery 3.0βリリース。2系と3系の違いについて

2016年に入り、jQuery 3.0βがリリースされました。はっきりとしたロードマップは出ていないものの、今年中には正式リリースするのではないでしょうか。



そこで今回はjQuery 2.xと3.xで何が変わるのか、紹介したいと思います。



jQuery Compatはなくなります



元々レガシーなブラウザをサポートするjQuery Compatも開発されていましたが、MicrosoftがIE8をサポートしなくなったのを受けて、jQueryIEを非サポートすることになりました。その結果、jQuery Compatの開発は中止となり、jQuery 3.x一本になります。



Alphaで実装したshow()、hide()のインライン操作の排除



元々実験的なものでしたが、スタイルシートなどで設定された場合に必ずしも正しく動かないことが分かったためとしています。メソッド自体は残りますのでこれまで通りとなります。



data()メソッドでのアクセス方法変更



HTML Standardに沿う形になり、単語を-でつなぐ kebab-case から 2つ目以降の単語の最初の文字を大文字化する camelCase に変更するとのことです。



jQuery.DeferredがPromises/A+互換になります。



ES2015 Promisesとも同じとのことなので安心して利用できるようになりそうです。この場合、





promise.then(function() {
  // 正常終了の場合
},
function() {
  // エラーの場合
});


となり、これまで使われていた .catch() が使えなくなります。そのため、.catch().then(null, function() {})エイリアスになります。



.width(), .height(), .css(“width”), and .css(“height”) が十進数を返すようになります



これまでは整数しか返さなかったと思いますが、今後は小数点以下も含むようになります。



古いイベント処理がなくなります



.load.unload.error はなくなります。今後は .on に統一されます。



アニメーション処理はrequestAnimationFrameで行います



requestAnimationFrameはパフォーマンスを意識したアニメーションを実装できるようになります。ただしIE9Android 4.4未満では実装されていません。



DOM操作を行う幾つかのメソッドが使えなくなります



jQuery.dirjQuery.siblingjQuery.buildFragmentjQuery.accessjQuery.swapはドキュメントにも記載されなくなり、アクセスできなくなります(内部では使うようです)。



カスタムセレクターの高速化



:visible の改善により、顕著な場合では17倍も高速になったとのことです。






なお、最新版では2.2.0はミニファイ版が85,589 byte、3.0βが86,071 byteとなっています。非サポートのブラウザは増えたものの、さほど大きさは変わらない模様です。常に進化しているとあって、今後のWeb/ハイブリッドアプリ開発でもjQueryは欠かせぬ存在になりそうです。



jQuery 3.0 Beta Released | Official jQuery Blog

jQueryから離れるためのJavaScript代替ライブラリまとめ

jQueryは便利すぎて、ついつい他のフレームワークを使いながらも一緒に組み合わせて使ってしまったりします。その結果として読み込むサイズが肥大化したり、動作が重たくなったりします。特にスマートフォンのようにリソースがデスクトップほど潤沢でない場合は顕著です。



そこでjQueryから離れて代替ライブラリを使ってみましょう。多くのライブラリはjQueryを踏襲して似たような使い方ができるようになっています。



Minified.js





jQueryのようにDOM操作、アニメーション、イベント、HTTPリクエストをサポートしています。また、コレクション、日付や数字のフォーマット、テンプレートといった便利ユーティリティも備えています。



サイズは4KB(ミニファイ&Gzip)で、jQuery 2.1.4の29KBに比べて大幅に軽量です。



Minified.js - A Truly Lightweight JavaScript Library



cash





DOM操作に特化したライブラリで、eachが用意されている程度となっています。その結果、サイズはわずか2.59KB(Gzip後)となっています。Ajaxやイベントの取り回しは別なライブラリで行うならば十分と言えそうです。



cash



honza/140medley



140medleyはさらに小さくGzipすると504 byteになります。DOM、Ajax、イベントのバインド、ローカルストレージ、テンプレート機能があります。



honza/140medley



julienw/dollardom



$domはDOMの選択、スタイル設定、アニメーションといった機能を提供します。開発は終了しており、メンテナンスモードになっています。



julienw/dollardom



ryanflorence/snack



DOM操作、イベント処理、Pub/Sub、Ajax、そして各種ユーティリティが提供されています。Gzip後のサイズは3.4KBと機能の割に多くの機能が実装されています。



ryanflorence/snack



Zepto.js





jQuery代替のライブラリとしては最も互換性が高いと思われるライブラリです。レガシーなブラウザ対応を切ることでサイズを小さくまとめています。



Gzip後のサイズは9.1KBと他のライブラリと比べると大きめですが、jQueryとそのまま差し替えても殆どの場合で動く機能の豊富さや互換性の高さを考えるとしょうがないと言えそうです。



Zepto.js: the aerogel-weight jQuery-compatible JavaScript library



You Might Not Need jQuery





ライブラリではなくjQueryを使わない書き方を教えてくれるサイトです。アニメーションにおいても簡単なコードでjQueryのような操作ができるのが分かるはずです。



You Might Not Need jQuery






jQueryは確かに便利なのですが、意外と使っていない機能の方が多いのではないでしょうか。そうなると多くの機能はムダになってしまいます。DOM操作やAjaxで使いたいという要望であればもっと軽量なライブラリを選んでも良いでしょう。



特にスマートフォンタブレット向けであればHTML5のみが対象になるので切り捨てられるコードは多くあります。ぜひjQuery以外の選択肢も見てみてください。

【jQuery Tips】スクロールで画像がめくれる動きを表現する

こんにちは、生形です。
最近、嬉しいことにアシアルの書籍の売れ行きが軒並み好調です。

6月に入り、弊社岡本が執筆した「イラストでよくわかるPHP」が、Kindleの月替わりセール対象商品になりました。
なんと699円(紙の本の価格の64%OFF!)で購入いただけます。
現在、アマゾンWebプログラミングカテゴリの売れ筋ランキング1位です!
セールは今月いっぱいですので、ぜひこの機会に。




つづいて、私の執筆した「スラスラわかるJavaScript」に増刷がかかりまして、
個人的な目標の1万部まであと少しというところまで来ました!
セミナー等でお会いした方には本を買いましたよと声をかけて頂くこともあり、大変ありがたく思っております。
購入者特典としてjQueryのTips集を翔泳社スラスラわかるシリーズ公式サイトで配布していますので、
ご存じなかった方はぜひダウンロードしてみて下さい!



さて、今日はこのTips集から、「スクロールで画像がめくれる動きを表現する」を紹介します。
完成イメージは、こちらのページを見て下さい。
画像が2枚重ねて配置されていて、ページをスクロールすると前面の画像がめくれて背面の画像が見えるようになります。



コードの量はほんの少しだけで、とても簡単です。
それでは見てみましょう。

スクロールで画像がめくれる動きを表現する



index.html




<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>JavaScriptの練習</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="main.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
  <div id="over"><a href="https://www.asial.co.jpimages/flower1.jpg &mode=1" class="popupimg"><img src="https://www.asial.co.jpimages/flower1.jpg"></a></div>
  <div id="under"><a href="https://www.asial.co.jpimages/flower2.jpg &mode=1" class="popupimg"><img src="https://www.asial.co.jpimages/flower2.jpg"></a></div>
 </body>
</html>


style.css




body {
    /* スクロールバーを表示するために、高さを多く取っておく */
    height: 5000px;
}
/* 画像の親要素 */
div {
    /* スクロールしても画像をウィンドウ左上に固定表示する設定 */
    position: fixed;
    left: 0px;
    top: 0px;
    height: 600px;     /* 画像と同じ高さを設定 */
}
div img{
    height: 600px;
}
/* 背面の要素を囲むdiv要素 */
#under {
    z-index: 1;        /* 背面に表示 */
}
/* 前面の要素を囲むdiv要素 */
#over {
    z-index: 2;        /* 前面に表示 */
    overflow: hidden;  /* 要素からはみだした部分は非表示 */	
}


main.js




$(function(){
    $(window).on("scroll", function() {
        // スクロール量を取得
        var scroll = $(window).scrollTop();
        // 画像の高さを取得
        var height = $("#over img").height();
        // 前面のdiv要素の高さを削る
        $("#over").css("height", height-scroll);
    });
});


index.htmlには、画像を囲む<div>要素が2つあります。
これがそれぞれ、前面と背面に表示している画像です。
初期状態では、<div>要素と画像の高さはどちらも600pxに指定しています。
ページをスクロールすると、スクロールした分だけ前面の<div>要素の高さを低くしています。
仮に200px分スクロールした場合は、<div>要素の高さは400pxになります。
このように、スクロールと連動して上に重なっている要素の高さを変化させることで、あたかも画像が捲れ上がっていくように見せることができます。



これを少し改良すれば、画像を何枚も用意しておいて、
日めくりカレンダーのように次から次へと画像がめくれていくようにしたりと、色々な表現が楽しめると思います。
ポートフォリオやプロモーションサイト等で使ってみてください!

初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips

こんにちは、鴨田です。

今更感はすごくあるとは思いますが、
コーダー初心者でも簡単なJavaScript/jQueryのコードで、
ちょっとした運用を楽に出来るTipsを紹介したいと思います。



1.現在見ているページのナビゲーションをアクティブにする



JS


if (document.URL.indexOf("001.html") != -1) {
  $("nav a.top").toggleClass("on");
} else if (document.URL.indexOf("002.html") != -1){
  $("nav a.list").toggleClass("on");
}


HTML


<nav>
  <ul>
    <li><a class="top">TOPページ</a></li>
    <li><a class="list">一覧ページ</a></li>
  </ul>
</nav>



デモページ(001.html)

PHPとかでやる場合の方が多いかも知れませんが、
ナビゲーションの現在位置表示で使えると思います。



2.liの中身がない場合、その上位要素のulごと表示をしない



JS


if($("ul.class1 li").size()=="0") {
  $("ul.class1").hide().parent().append("<span>ここに<ul>がありました</span>");;
}
if($("ul.class2 li").size()=="0") {
  $("ul.class2").hide().parent().append("<span>ここに<ul>がありました</span>");
}


HTML


<nav>
  <ul class="class1">
    <li><a class="top">TOPページ</a></li>
    <li><a class="list">一覧ページ</a></li>
  </ul>
</nav>
<nav>
  <ul class="class2">
  </ul>
</nav>



デモページ(002.html)

上側には、li要素が存在するので、ulのボーダーが見えます。
下側には、li要素が存在しないので、ul要素丸ごと非表示となり、ボーダーすら見えなくなりますが、
代わりにspan要素を入れ込んでいます。

また、先ほどは001.htmlだったので、TOPページがアクティブでしたが、
002.htmlにしておりますので、一覧ページがアクティブになっていることが分かるかと思います。

同じような表現として、下記のような表現でも同じ事が出来ます。



$("ul").not(":has(li)").hide();




3.ある文字列を含む要素を強制非表示/内容を変更する



JS


$("a:contains('ニセモノ')").hide();
$("a:contains('バケモノ')").text("オバケモノ").css('background', '#000').css('color', '#FFF');


HTML


<nav class="class1">
  <ul class="class2">
    <li><a href="#">ホンモノ</a></li>
    <li><a href="#">ニセモノ</a></li>
    <li><a href="#">バケモノ</a></li>
  </ul>
</nav>



デモページ

何かしら禁止ワードなどがあれば、
強制的にその言葉が含まれる要素を非表示にしたり、内容を変更出来ます。



4.ユーザーエージェントによって表現を変える



JS


if(navigator.userAgent.indexOf("Chrome") != -1) {
  $("a:contains('Chrome')").toggleClass("on");
} else if(navigator.userAgent.indexOf("Firefox") != -1) {
  $("a:contains('Firefox')").toggleClass("on");
} else if(navigator.userAgent.indexOf("Safari") != -1) {
  $("a:contains('Safari')").toggleClass("on");
} else {
  $("a:contains('Other')").toggleClass("on");
}


HTML


<nav>
  <ul>
    <li><a href="#">Chrome</a></li>
    <li><a href="#">Firefox</a></li>
    <li><a href="#">Safari</a></li>
    <li><a href="#">Other</a></li>
  </ul>
</nav>



デモページ

ブラウザによって、コンテンツ振り分けやリダイレクトを行いたいときに便利です。
ここでは、ブラウザによって、アクティブ要素を切り替えています。
いろいろなブラウザで見てみてください。



以上です。

HTML/CSSコーダーあるいはWEBデザイナーがステップアップして、
フロントエンドエンジニアになるために、
JavaScript/jQueryは欠かせない技術になりますので、
実践していくきっかけになればと思います。

決定版?! スマホページ用のリストレイアウトHTMLテンプレートを書いてみた

こんにちは、鴨田です。

年の瀬ですね。
年をとる毎に一年があっという間に過ぎてしまうので、
もう今年も終わりかと嘆く日々です。

ということで、個人的には今年最後のブログとなります。

スマホサイトを作っていると、
見出しリストの作り方というのが、大分テンプレート化するので、
今日は自分メモも兼ねて、リストテンプレートを作りたいと思います。



● デザイン




こういう感じのいかにもなリストを作ります。
ポイントは特にありませんが、せっかくなので画像はどんなサイズが来ても対応できるように、
縦横中央揃えに出来るjQueryライブラリを使います。

画面サイズは、横320pxとします。
そろそろ640pxくらいにしておきたい気がするのですが、
広告が320px対応が多かったりしますので。



● HTML




<article>
  <h1><a href="#list">リストタイトル</a></h1>
  <ul>
    <li>
      <a href="#title1">
        <div>
          <a href="https://www.asial.co.jp4-3.png &mode=1" class="popupimg"><img src="https://www.asial.co.jp4-3.png"></a>
        </div>
        <p>記事タイトル1</p>
      </a>
    </li>
    <li>
      <a href="#title2">
        <div>
          <a href="https://www.asial.co.jp4-2.png &mode=1" class="popupimg"><img src="https://www.asial.co.jp4-2.png"></a>
        </div>
        <p>記事タイトル2</p>
      </a>
    </li>
    <li>
      <a href="#title3">
        <div>
          <a href="https://www.asial.co.jp2-3.png &mode=1" class="popupimg"><img src="https://www.asial.co.jp2-3.png"></a>
        </div>
        <p>記事タイトル3</p>
      </a>
    </li>
  </ul>
  <h2><a href="#list">一覧 &nbsp;>></a></h2>
</article>

ポイントは特にありませんが、画像の縦横中央配置を行うために、
img要素をdiv要素で囲っておいてください。



CSS




* {
  margin: 0;
  padding: 0;
}

article {
  width: 320px;
}

article h1 {
  font-size: 16px;
  padding: 10px;
  background: #333;
}

article h1 a {
  color: #fff;
  text-decoration: none;
}

article li {
  border-bottom: 1px solid #9FA0A0;
  width: 100%;
}

article li a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}

article li a:before {
  content: ">";
  float: right;
  margin: 26px 0 0 0;
  font-size: 24px;
  font-weight: bold;
  color: #666;
}

article li a:hover {
  background: #eee;
}

article div {
  width: 100px;
  height: 75px;
  border: 1px solid #333;
  margin: 0 5px 0 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  background: #fff;
}

article div img {
  position: absolute;
  max-width: 100px;
  max-height: 75px;
}

article p {
  display: inline-block;
  font-size: 14px;
}

article h2 {
  text-align: right;
  margin: 10px 0;
}

article h2 a {
  padding: 0 10px;
  font-size: 14px;
  color: #333;
}

こちらも特には説明は要らないのですが、
各見出しの右側に「>」を入れるために、
:before疑似要素で無理矢理突っ込んでいます。

本当は背景画像でやる方が細かい画像調整ができるはずです。
画像を使うのが面倒な場合、上記方法でも可能です。



● boxcenter.js


画像の縦横中央配置に関しては、boxcenter.jsを使用します。
詳しい説明は下記を参照してください。
http://labs.cybridge.jp/2011/05/boxcenter.html

外部ファイルとしておいてもいいですし、
head内に直接書いてもいいと思います。


$.fn.boxCenter = function() {
  return this.each(function(i){
    var w = $(this).width();
    var h = $(this).height();
    var mtop = (h/2)*(-1);
    var mleft = (w/2)*(-1);
    $(this).css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ 

"px"});
  });
};
$(window).bind("load",function(){
  $("article div img").boxCenter();
});

jQueryの読み込みは忘れないようにしてください。



● デモ





デモページ



こちら必要に応じて、いろいろとカスタマイズしてもらえたらと思います。
来年もよろしくお願いいたします。

パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」

こんにちは、鴨田です。

今年に入ってから、パララックス効果を用いたサイトをよく見かけますね。
春くらいに話題になって、定番のプラグインもあるので、最近もいろいろなところで見かけます。

とはいえ、最近は視差効果で奥行きを表現するというよりも、
単純にスクロールに連動してアニメーションさせることも含めて、
パララックスサイトと呼んでいるが多いのではとも思います。
何かと話題のスマホアプリ「comm」の紹介ページもそうですね。

そんな流行に従って、パララックスサイトの作り方を少しご紹介できればと思います。

今回ご紹介するのは、「ScrollTween.js」というプラグインです。
シーエーモバイル社のコーポレートサイトを作成するために開発され、
せっかくだからということで、公開されているようです。

経緯に関しては、下記スライドをご覧下さい。
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
作者である白石さんの体験談です。

ScrollTween.js | github
上記から、プラグインとサンプルをまとめて、ダウンロードすることが可能です。
サンプルにちょっとした使い方は載っているのですが、あまり詳しくは書いてないので、
この記事で補足できればと思います。

とはいえ、自分もちゃんとしたJavaScriptを書いたり読んだり出来るわけではなく、
見よう見まねのところもありますので、コード的におかしいところがあってもご容赦ください。



● ダウンロード



ScrollTween.js | github
上記ページ、「ZIP」ダウンロードボタンを押して、ダウンロードしてください。

中身は、プラグイン本体である「ScrollTween.js」、
ライブラリとしての「jquery.js」「jquery.mousewheel.js」、
デモページ「demo1.html」が入っています。



● サンプルページ構成



・demo.html
jquery-1.8.1.min.js
jquery.mousewheel.js
・ScrollTween.js

demo1.htmlを参考にして、demo.html新規で作成します



● demo.htmlコード





<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ScrollTween Demo</title>
<script src="jquery-1.8.1.min.js"></script>
<script src="jquery.mousewheel.js"></script>
<script src="ScrollTween.js"></script>
<script>
$(function() {
  'use strict';
  var containerDiv = $('#container');
  var container = ScrollTween.container(containerDiv);
    container.add("#cnt1", function(tween) {
      tween
        .to(100, tween.styles().topOut().center(100))
        .range(200, 300, tween.styles().middle(-100))
        .to(400, tween.styles().rightOut());
    });
    container.add("#cnt2", function(tween) {
      tween
        .to(200, tween.styles().bottomOut().center())
        .range(300, 400, tween.styles().middle())
        .to(500, tween.styles().leftOut());
    });
    container.add("#cnt3", function(tween) {
      tween
        .to(400, tween.styles().center().middle())
        .to(400, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 0) } })
        .to(600, 0 , { progress: function (tween) { $("#cnt3").css("opacity", tween) } })
        .to(800, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1) } })
        .to(1000, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1 - tween) } });
    });
    container.play();
});
</script>
<style>
html, body {margin: 0; padding: 0; height: 100%;}
#container {width: 100%;height: 100%; display: block;}
.style1 {padding: 20px; border: 2px dotted #009; font-size: 24px; color: #333; background: #ccc;}
</style>
</head>
<body>
<div id="container">
  <div id="cnt1" class="style1">Top - Center - Right</div>
  <div id="cnt2" class="style1">Bottom - Center - Left</div>
  <div id="cnt3" class="style1">Opacity 0 - 1 - 0</div> 
</div>
</body>
</html>




● HTMLのbody部分説明





<div id="container">
  <div id="cnt1" class="style1">Top - Center - Right</div>
  <div id="cnt2" class="style1">Bottom - Center - Left</div>
  <div id="cnt3" class="style1">Opacity 0 - 1 - 0</div> 
</div>


div#containerは必須要素ですので、
一番外側のラッパーとして、配置する必要があります。

そして、div#containerの内容要素がアニメーションの対象となります。
各要素に適切なidを振って下さい。

ここでは、3つの要素に#cnt1~#cnt3と名付けました。



JavaScriptの説明





$(function() {
  'use strict';
  var containerDiv = $('#container');
  var container = ScrollTween.container(containerDiv);
    container.add("#cnt1", function(tween) {
      tween
        .to(100, tween.styles().topOut().center())
        .range(200, 300, tween.styles().middle())
        .to(400, tween.styles().rightOut());
    });
    container.add("#cnt2", function(tween) {
      tween
        .to(200, tween.styles().bottomOut().center(100))
        .range(300, 400, tween.styles().middle(-100))
        .to(500, tween.styles().leftOut());
    });
    container.add("#cnt3", function(tween) {
      tween
        .to(400, tween.styles().center().middle())
        .to(400, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 0) } })
        .to(600, 0 , { progress: function (tween) { $("#cnt3").css("opacity", tween) } })
        .to(800, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1) } })
        .to(1000, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1 - tween) } });
    });
    container.play();
});


#cnt1では、移動アニメーションを用いています。

.to(100, tween.styles().topOut().center())
.range(200, 300, tween.styles().middle())
.to(400, tween.styles().rightOut());

スクロール100で、中央位置に#cnt1が画面インします。
スクロール100~200で画面上部から画面中央に移動します。
スクロール200~300は静止します。
スクロール300~400で画面中央から画面右側に移動します。
スクロール400で、画面アウトします。

#cnt2では、少し位置を変えています。

.to(200, tween.styles().bottomOut().center(100))
.range(300, 400, tween.styles().middle(-100))
.to(500, tween.styles().leftOut());

スクロール200で、中央位置から右に100pxずれた場所に#cnt1が画面インします。
スクロール200~300で画面上部から画面中央より上に100pxずれた場所に移動します。
スクロール300~400は静止します。
スクロール400~500で画面中央から画面右側に移動します。
スクロール500で、画面アウトします。

#cnt3は、透明度を変えています。

.to(400, tween.styles().center().middle())
.to(400, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 0) } })
.to(600, 0 , { progress: function (tween) { $("#cnt3").css("opacity", tween) } })
.to(800, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1) } })
.to(1000, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1 - tween) } });

スクロール400で、画面中央に配置します。
スクロール400~600で透明度を0から1へ変更します。
スクロール600~800は静止します。
スクロール800~1000で透明度を1から0へ変更します。
スクロール1000で、消滅します。

アニメーション用に用意されている機能でよく使うのは下記ではないかと思います。

遷移:topOut, bottomOut, leftOut, rightOut
位置:center, middle, top, bottom, left, right

その他、イージングやキーフレームも用意されているようなのですが、
ちゃんとした使い方がよく分かっていないので、
いろいろと試してみたい方はScrollTween.jsのソースコード
一度読んでみるといいのではないでしょうか。



● デモ


下のiframe内でスクロールしてください。


デモページ1



● デモ2


下のiframe内でスクロールしてください。


デモページ2
少し、それっぽい構成にしてみました。



いかがでしょうか。
結構、簡単にアニメーション出来るのではないかと思います。
皆様も是非試してみてください!

jQueryで簡単にドラッグ&ドロップのソートを実装する方法


読む:3分
試す:15分


はじめまして、4月にアシアルへ入社した噂の好青年こと高橋です。
今日はjQuery UIを使ったオシャンティなソートを紹介します。

まずはデモをご覧ください。



「こんなメンド・・・大変そうなUIできるかなぁ?」

心配ご無用!jQueryさんはやってくれます!!

まずは必要なソースを準備します。
下記からそれぞれ最新版をダンロードしてください。
http://jquery.com/download/24/7/19時点で ver 1.7.2)
http://jqueryui.com/download24/7/19時点で ver 1.8.21)

ファイル構造・読み込み等は割愛します。


今回覚えるべき、たったひとつのシンプルなキーワード
「sortable」

まずはHTMLいきます


<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>名前</th>
            <th>特徴</th>
        </tr>
    </thead>
    <tbody id="sortable">
        <tr>
            <th>とんこつラーメン</th>
            <td>コッテリ</td>
        </tr>
        <tr>
            <th>塩ラーメン</th>
            <td>うまい</td>
        </tr>
        <tr>
            <th>醤油ラーメン</th>
            <td>イケてる</td>
        </tr>
        <tr>
            <th>二郎</th>
            <td>関内</td>
        </tr>
    </tbody>
</table>

ちょっとこのtbodyのidに注目してください。さっそく出ましたね〜sortable。
tableのclassがごちゃごちゃしてますが、これはTwitter Bootstrap用です。


次にJavaScript ※bodyの閉じタグ前に


$('#sortable').sortable();
$('#sortable').disableSelection();

お〜い、高橋もっと仕事しろ〜。って言われそうですね
デモのJSソースってたったこれだけだったんですね〜。

そしてJSでも鍵になったのはsortableです!


ついでにドラッグできますよ〜!!アピールで


#sortable tr:hover { cursor: move; }

ま・・・また出た・・・ひぃいいい。
とこのようにスタイルを設定してあげると、ユーザがより感知しやすくて良いかと思います。


しかし、これだけではただ並び替えるだけでなんのこっちゃ、という機能ですね。
なので、ソートが実行されたら動的に何か書き換えるなどの操作をする必要があります。


応用編のデモです


HTML


<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>順番</th>
            <th>名前</th>
            <th>特徴</th>
        </tr>
    </thead>
    <tbody id="sortable">
        <tr>
            <td class="rank">1</td>
            <th>とんこつラーメン</th>
            <td>コッテリ</td>
        </tr>
        <tr>
            <td class="rank">2</td>
            <th>塩ラーメン</th>
            <td>うまい</td>
        </tr>
        <tr>
            <td class="rank">3</td>
            <th>醤油ラーメン</th>
            <td>イケてる</td>
        </tr>
        <tr>
            <td class="rank">4</td>
            <th>二郎</th>
            <td>関内</td>
        </tr>
    </tbody>
</table>



JS


$('#sortable').sortable();
$('#sortable').disableSelection();
    
$('#sortable').bind('sortstop', function (e, ui) {
    // ソートが完了したら実行される。
    var rows = $('#sortable .rank');
    for (var i = 0, rowTotal = rows.length; i < rowTotal; i += 1) {
        $($('.rank')[i]).text(i + 1);
    }
})



このようにjQuery UIの方でイベントが予め準備されています。
リファレンスを読めば一目瞭然できるでしょう。
http://jqueryui.com/demos/sortable/#events

私がプロダクトで利用したときは「sortstop」イベントをbindしておいて、ソートが完了した瞬間にtbody以下のinput nameを動的に書き換える処理で対応していました。

初のアシアルブログでしたが、お役に立てれば幸いです。

今後もデザイン・UI、フロントエンドをはじめ、バックエンドについて記事を書いていきます。
これからよろしくお願いします!

jQuery Mobileを試してみました

初めまして。4月からアシアルに入社した志田と申します。
大学院時代は、グループウェアと呼ばれる複数人で知識共有するシステムをメインに研究・開発を行ってきました。
みなさん、どうぞよろしくお願いいたします。

さて、今回はjQuery Mobileを使って簡単なブログページを作ってみたいと思います。
今回は、手元にAndroid端末であるIS03があるので、IS03の標準ブラウザで表示しながら説明していきます。

ブログ記入画面



まず、ブログ記入画面を作ってみます。



ここがトップで、リストをクリックすると





ページ内の各ページにジャンプします。
このトップページから各ページは、実は1つのHTMLファイルの中にすべて書かれています。
別ページのように見えていますが、ページ内リンクで実現しています。

各ページを表しているのが、divタグにつけられた data-role="page" というクラスです。このdata-roleが、そのボックスが何なのか(ページなのか、リストなのか…)を表します。

たとえば、次のソースの1番はじめのdivボックスを見てください。data-roleがpageとなっているので、このボックスが1ページを表しています。

ulタグには、listviewというdata-roleがつけられています。
「新しいエントリ」には、list-driverというdata-roleがつけられています。
「本文」「日付」等はリンク先が「#move-title」といったページ内リンクになっており、それらをクリックするとidがmove-titleであるdivボックスにジャンプします。

data-themeを決めることで、画面のデザインもすぐに変更することができます。



<div data-role="page" data-theme="e" id="jqm-home">
  <div data-role="header">
    <h1>Diary</h1>
  </div>
  <div data-role="content">
    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="e">
      <li data-role="list-divider">新しいエントリ</li>
      <li><a href="#move-title">タイトル:<span id="title_text"></span></a></li>
      <li><a href="#move-body">本文:<div style="margin-left:20px;" id="body_text"></div></a></li>
      <li><a href="#move-date">日付:<span id="date_text"></span></a></li>
    </ul>
    <input type="submit" value="この内容で日記を書く" data-role="button" />
  </div>
</div>

<div id="move-title" data-role="page" data-theme="e">
  <div data-role="header">
    <h1>タイトル</h1>
  </div>
  <div data-role="content">
    <div data-role="fieldcontain">
      <lavel for="name">
      <input type="text" name="title" id="title" /></label>
    </div>

    <a href="#jqm-home" data-role="button" data-inline="true">キャンセル</a>
    <a href="#jqm-home" data-role="button" data-theme="e" data-inline="true" onClick="inputAdd('title')">決定</a>
  </div>
</div>


<div id="move-body" data-role="page" data-theme="e">
  <div data-role="header">
    <h1>本文</h1>
  </div>
  <div data-role="content">
  	<div data-role="fieldcontain">
      <label for="textarea">
        <textarea cols="40" rows="10" name="body" id="body"></textarea>
      </label>
   	</div>
    <a href="#jqm-home" data-role="button" data-inline="true">キャンセル</a>
    <a href="#jqm-home" data-role="button" data-theme="e" data-inline="true" onClick="inputAdd('body')">決定</a>
  </div>
</div>


<div id="move-date" data-role="page" data-theme="e">
  <div data-role="header">
    <h1>日付</h1>
  </div>
  <div data-role="content">
    <div data-role="fieldcontain">
      <label for="date">Date Input:</label>
      <input type="date" name="date" id="date" value="" />
    </div>
    <a href="#jqm-home" data-role="button" data-inline="true">キャンセル</a>
    <a href="#jqm-home" data-role="button" data-theme="e" data-inline="true" onClick="inputAdd('date')">決定</a>
  </div>
</div>


カレンダーはdatepicker.mobileというものがgithubで公開されているので、そちらを利用させていただきました。

トップページから各ページ内ページにジャンプし、フォームに必要事項を記入します。
送信されるのは、一見別のページに書かれたフォーム内容のように見えますが、一つのHTMLに書かれたひとつのフォームの内容になっています。

この、1つのHTMLで複数ページを遷移するように見せるというのが、jQuery Mobileのひとつの魅力ではないでしょうか。

一覧画面



PHP等で記入内容をDBに登録したら、一覧となるページを表示します。
DBからブログ記事の一覧を取得するなどして、トップページと同様にlistviewで表示を行います。





トップページはひとつのフォームを各ページに分けたような見た目にしたかったために、リンクはすべて#付きのページ内リンクになっていました。

一覧ページから詳細ページに切り替わるような、別のHTMLへ遷移させる場合は、jQuery Mobileがローディング画面を出してくれます。

このAjaxローディング画面を無効にしたい場合は、jQueryを読み込んだ直後、jQuery Mobileを読み込む直前に


  <script>
    $( document ).bind( "mobileinit", function(){
      $.mobile.ajaxFormsEnabled = false;
    });
  </script>

このように、ajaxFormsEnabledをfalseにしないといけないようです。
2011.06.24 追記
みたけんさんからのコメントより、Beta1からはajaxFormsEnabledが削除されたとのことで、ajaxEnabledを使うほうが良いとのことです。
コメントありがとうございました!


今回は、jQuery Mobileでのページ作成について触れました。

まだjQuery Mobileにはバグも多く、実機で入力ができなかったり、datepickerが複数表示されるなど、疑問の残る点もあります。ですが、非常に簡単な記述で美しいページや、ダイナミックな表示をしてくれるということがわかると思います。

スマートフォンが流行していますので、是非サイト設計に取り入れていきたいですね!

jQuery用プラグイン「Autocomplete」を使って入力補完機能を実装してみる

こんにちは、中川です。



アシアルブログの検索でも利用している、suggest(入力補完)機能、便利ですよね。
以前「jQuery用プラグイン「jquery.suggest」を使って入力補完機能を実装してみる」という記事で松田がライブラリ紹介しています。

しかし、「jquery.suggest」ですが、表示が味気なかったり、カスタマイズ面で、若干モノ足りない部分が出てきました。。。
で、補完機能を実装する為のJavaScriptですが、いろいろ探せば結構たくさんでてきまして、その中でも使いやすく、機能も豊富でカスタマイズもしやすいjQueryプラグインの「Autocomplete」というものを見つけましたので紹介したいと思います。

■ダウンロード先
http://plugins.jquery.com/project/autocompletex


■デモ
※適当にアルファベットを2文字くらい入力してください。



■ソース
・sample.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery AUTOCOMPLETE</title>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(function() {
	$('#hoge').autocomplete('/search.php');
});
</script>
</head>
<body>
<input type="text" size="50" name="hoge" id="hoge" />
</body>
</html>


・search.php (プラグインのデモに含まれています)


<?php

$q = strtolower($_GET["q"]);
if (!$q) return;
$items = array(
"Great <em>Bittern</em>"=>"Botaurus stellaris",
"Little <em>Grebe</em>"=>"Tachybaptus ruficollis",
"Black-necked Grebe"=>"Podiceps nigricollis",
・
・
省略
・
・
"Green Heron"=>"Butorides virescens",
"Solitary Sandpiper"=>"Tringa solitaria",
"Heuglin's Gull"=>"Larus heuglini"
);

foreach ($items as $key=>$value) {
	if (strpos(strtolower($key), $q) !== false) {
		echo "$key|$value\n";
	}
}

?>



たったこれだけですね。

単純にAjaxでサーバ側に補完リストを問い合わせる実装の場合、JS側のコードはinputのID(もしくはクラスなどの対象のCSSセレクタ)を指定してあげて、



$('#hoge').autocomplete('/search.php');

だけとなります。

このautocompleteプラグインですが、動作も軽快ですし、数が多い時はちゃんとスクロール表示にしてくれたりとデフォルトのまま使用しても中々きれいだと思います。CSSの指定もオプションで変更できたりするので、表示も簡単に変更できます。

また、コールバック関数を指定できますので、JS側で補完候補を受け取ってから処理のカスタマイズを行えます。
オプションや、利用等については、Plugins/Autocomplete - jQuery JavaScript Libraryのページに詳しく載っています。

また、プラグインをダウンロード解凍した中に、多くのデモも含まれているので参考になると思います。
※デモはjQuery Autocomplete Plugin Demoでも確認できます。


ではでは、是非試してみてください。

phpImageCloudを使ってみました

皆さん、こんばんは。
先週にバレーボール(観戦)とa nationを堪能して、ヘトヘトな笹亀です。

今年の夏も終わりにさしかかり、いよいよPHPカンファレンスの時期を向かえます。
今年のカンファレンスはsymfony 開発者 Fabien Potencier 氏がいらっしゃるとのことでとても楽しみにしています^^
尚、カンファレンスには参加登録が必要になりますので登録を忘れずに。。

さて、本日はphpImageCloudを紹介したいと思います。
まずは画像をご欄ください。
このように画像を雲のようにたくさん表示して見せることができます。
画像を視覚的に楽しんでみることができてとてもおもしろいと思いました。


jQueryと一緒に使う事によって画像をクリックしてアニメーションをさせて表示させることもできます。
実際にサンプルを使ってみたい場合は下記をご参照ください。
http://phpimagecloud.sourceforge.net/examples/jquery/

実際にクラスを使って自分の画像を取り込んでみたいと思います。
リンク先よりダウンロードください。
http://sourceforge.net/projects/phpimagecloud/files/

2種類のファイルがありますが「phpimagecloud_0.1_full.zip」はサンプルの画像情報を含んだファイルになります。今回は「phpimagecloud_0.1_without_images.zip」のサンプルの画像情報を含んでいない方を利用してご紹介します。

早速ダウンロードをして、解凍するとファイル構成は下記のようになっております。


解凍したファイルとフォルダの説明を記載しておきます。


array.txt:generate.phpで実行すると作成されるファイル(phpImageCloudで表示する画像情報がシリアライズされている
generate.php:Cloud画像を生成するPHPファイル
 →items.txtに記載されているリストからitemsフォルダを参照してtagsに出力するスクリプト
index.php:Cloud画像を表示するスクリプト
items:Cloud画像にする元画像を格納するフォルダ
items.txt:itemsフォルダに入っているリストをCloud画像の設定情報付きでリスト化したもの
jquery.js:省略
jquery.pngFix.js: jQueryをつかった透過PNG処理するjavascript
tags:変換したCloud画像を格納するフォルダ


解凍したらまずはCloud画像を作成する必要があります。
itemsフォルダにCloud画像にするファイルを格納します。
ファイル形式はjpgのものを入れます。
 ※その他の形式は対応しているかわかりませんでした。

次にgenerate.phpを実行します。
items.txtから作成するようになっていたので、
itemsフォルダから読み込むように変更しました。
※書き込み処理を行うのでjqueryフォルダ以下のアクセス権限を書き込みができるように変更しておいてください。

参考までに変更した一部分のファイルです。


//read file with items list
//$items = file("items.txt");

$dir = "./items/";
//need add more item

$add = true;
if ($dh = opendir($dir)) {
      while (($file = readdir($dh)) !== false) {
          if ($file != '.'  & & $file != '..') {
          if ($add)
           {
            $item = explode(",",$file);
            $value = 20+5*(((int)$item[1])+2);  //just stupid calculation (value must be [0-100])
  
            //add item to cloud
            $id = $cl->additem("items/" . $file,$value,$item[0]);
  
            echo "Added file: items/".$file."<br>";
            flush();
            //save cloud piece
            $item = explode('.', $file);
            $cl->saveitemtofile($id-1, "tags/".$item[0].".png");
  
            echo "Saved tag: tags/".$item[0].".png<br>";  
            flush();
            if ($id === false)
            {
             $add = false;
   
             echo "That's all.<br>";
            } 
           } 
            else
            {
             echo "Not need to add, cloud is full.<br>";
            }
          }
      }
      closedir($dh);
}

 ※generate.phpでは50件くらいの画像変換が限界でした
  →「Not need to add, cloud is full.」のようにエラーが出力されました

実行後はtagsフォルダにCloud画像ができているのを確認してください。


最後にindex.phpへアクセスするとCloud画像が作成されて、下記ように表示がされるようになります。


SNSや画像リストを表示するときにこの表示方法で見せたらおもしろいなぁと思いました。
しかし。1つ1つ変換をしないといけないので動作が重くなるのとページング処理を作成したりするのが大変そうですね^^;

おもしろく表示ができるので、
皆さんも是非利用してみてください。