kazumich.log

jQueryって面白い その1

この記事は公開日より年以上経過しています

情報が古くなっている可能性がありますのでご注意ください。

昨日の3時間ほど、今朝1時間ほど、 jQuery って何かというところから勉強を始めてみました。 これは面白い!って事で「その1」です。



例えば、以下のような感じで


<script type="text/javascript"><!--
function changeTitle(){
	$(".title").text("jQueryでタイトルを書き換え!");
}
-->
</script>

と書いて、onClick="changeTitle();return false;" と書いたリンクを用意します。( return false; を付ける事でリンクが機能しなくなりますので、#に飛ばなくなります ) タイトルがリロード無しに変更できたんじゃないかと思います。実際にはDBは変更されていませんので、見ている人だけになります。


ココ をクリックすると、タイトルが大きくなります。(h1にしています)そしてタイトル部分の文字をクリックすると.... こんな感じにいろいろな事ができそうな気がしてきました!


残念ながら、現在リリース中の a-blog では、$や{}が実態参照になってしまうので、フォームの中から JavaScript を書く事ができません。理由は書くと長いのでやめておきますが、その問題も解決し次のバージョンからは、なんとかなる事になりそうです。


更新

Recommendation

ベースキャンプ名古屋 jQueryの日をやってよかった!

1月17日(木)に ベースキャンプ名古屋 jQueryの日 2013/01 というイベントを開催しました。幹事不在のまま、とりあえず予定を入れてみたところ、他の日と比べると何をするとか、集まりの一体感が無い感じで残念ではあったのですが、開催に大きな意味がありました。 なんと、これをきっかけに jQueryの日本語リファレンスサイト「Qrefy」を公開されている人が来てくれました。そして、ベースキャンプ名古屋の会員になってくれたのです! イロイロな人に出会う事ができるのがコワーキングスペースのいいところですね。 で、今日書いてる理由としては、本日「jQuery API Documentation 日本語訳」が公開になったそうで、その事の紹介と 2月のjQueryの日 の紹介をするために今月最初のエントリーを書いています。 Qrefy - jQuery日本語リファレンス 最近 1.9 がリリースされた jQuery ですが、リファレンスのデータを Ajax で表示できるようになっているのですが、localStorage に切り替える事もできるようになっていてサーバへのアクセス無しで表示できるようにもなっています。まだ、完全にオフラインでアクセスできるようになってないようですが、それも考えているとの事です。 jQueryの日 2013/02 日時:2013年2月21日(木)13:00 - 21:00 / 毎月第3木曜日 場所:ベースキャンプ名古屋 受付:Facebookのイベントページ 費用:ドロップイン代のみ もちろん @s3pw さんも参加頂けます。 jQueryの日本語の情報というのは、うさぎさんがヘッダーにいる jQuery 日本語リファレンス が有名な感じ(私でも知ってる)ですが、Qrefy - jQuery日本語リファレンス の時代がやってくるんじゃないかと思って応援したいと思います。 そして、このエントリーに興味を持った方は、ついでに phpを触る事なくカスタマイズ可能なCMS にも興味を持って欲しい!

Flex Slider をa-blog cmsのユニットグループで利用する

Flex Slider という jQuery を利用した画像スライダーを a-blog cms の本文部分であるユニット内で活用できるようにする事の提案を書いてみます。トップページに使うような事は皆さんされているんじゃないかと思います。その際には、バナーモジュール等を利用する事も多いんじゃないでしょうか。 実際には、もう少ししっかり実装したいところですが、そこの部分は本職にお任せする事にして、考え方としてお伝えしておきます。 実装方法 Flex Slider をダウンロードして blog テーマ内にセットアップする ダウンロードして以下のようにファイルをセットアップします。a-blog cms は標準で jQuery は読み込まれていますので、用意する必要はありません。 /themes/blog/js/jquery.flexslider-min.js /themes/blog/css/flexslider.css /themes/blog/images/bg_direction_nav.png index.html を編集する 上記をテンプレート側に記述します。 $(window).load(function() { $('.slides').flexslider({ selector: "div" }); }); ここでポイントになるところとしては、オプションで selector を div にするってトコロです。通常は li がデフォルトになっていますが、a-blog cms の画像を囲んでいるのは div になっているので設定を変更しておきます。この部分をオプションで設定できるようになっている事が Flex Slider を採用した理由になります。 ユニットグループの設定を追加する 今回の大事な部分は a-blog cms のユニットグループという機能を利用し、通常の画像を表示する部分を div class="slides"で囲む事です。その設定を行います。 カスタマイズ管理 &gt; コンフィグ &gt; エントリー &gt; 編集設定 &gt; ユニットグループ に上記の画像のような設定画面があります。ココに slides というユニットグループを追加します。 実際に設定する ユニットグループのところで選択するだけで複数の画像部分が1つになります。文章の前で1カラムを選択しておかないとテキスト部分も入ってしますので注意が必要です。 キチンと利用できるようにするには と標準では設定するべきところを一番外の div class="flexslider" がありません。このために画像と一緒に表示される矢印のナビゲーションが出てきません。ここら辺をなんとかすると、より完成度の高い実装ができるようになるかと思います。 レスポンシブにも対応して画像の幅が変更になっても利用できるようになっていますので、便利でオススメです。

初心者向けのjQuery勉強会をするよ

マークアップエンジニアさん向けの jQuery 勉強会を始めようと思っています。目的としては、社内のマークアップエンジニアのスキルアップのためなので社内勉強会というところなのですが、一般の方の参加もできるような事を考えています。 まだイロイロ決まってないのですが、回数は4回か6回くらいで毎週開催。 目標設定をどこら辺にするのか。一般の方は「払った分は仕事で必ず取り返す!」ってくらいの気持ちで参加して欲しいので有償に。アップルップルの会議室で開催するつもりですので最大8人の少人数制。なんらかの本を教科書にした方がいいか?それとも独自にする? どんな感じにするのかを決め、5月の連休明けくらいから始めたいと思います。参加したいと思っている方は @kazumich 宛にDMとか、ココにコメントとか下さい。 追記(4月18日) 打ち合わせをして決まってきた事を少し追記しておきます。 5月9日(水)19:00-21:00 が1回目で、毎週水曜日という事で16 , 23 , 30 日の4回コースとします。 ホント基礎からスタートし、どうして動かないのかデバッグする方法を確実にマスターする事ができるように指示を出しておきました。 毎回宿題も出て提出の義務があり、宿題は担当がチェックとアドバイスもできたらいいなって思っています。定員は8人で、費用としては4回コースで21,000円とする事になりました。 詳細の情報は アップルップルのセミナー のコンテンツに近日中に公開される予定です。 追記(4月29日) 5月にやります! 「 マークアップエンジニアのための初心者向けjQuery勉強会 2012/05 」参加者募集中です。

スクロール時に画像の読み込みを開始する Lazyload

今までの a-blog cms では jQuery のバージョンが 1.2.6 という事で、最新のプラグイン的なものが動作しないでいたので、あまり導入のチャレンジをしていませんでしたが、a-blog cms 1.3.0 になって jQuery も最新版になった事から気にせず使えるようになったのが、とても嬉しいですね。 今回のエントリーでは、jQueryのプラグインで見えてない部分は画像の読み込みをしないでおいて、スクロールして表示されるようになってから読み込む「Lazyload.js」というのを試してみましたので、その実装方法をメモっておきます。 以前は jquery.dimensions.js というものが必要だったようですが、jQuery に含まれる事になったようで、現在のバージョン(1.4.2) では読み込まなくても問題なく動作するようです。 Lazyload.js download Lazyload.mini.js download $(function() { $("img").lazyload({ placeholder: "images/lazyDummy.gif", effect : "fadeIn" }); }); 上記のような感じで書く事で見えてない部分が見えるようになった時に、フェードインで表示されます。最初、このフェードインの設定が無かったら動いてるかどうか分かりませんでした。 placeholder : 代替画像ファイルのパスを指定します。いろいろな画像で共用で利用するのなら単色のGIFファイルくらいにしておくのがいいと思います。 threshold : 画像読込み開始までのしきい値を設定します。書かないと 0 です。 effect : fadeIn と show の2つで、書かないと show のようです。この js を使ってるよ!って分かるように fadeIn にしています。 event : デフォルトはスクロールして画像が見えてきた時に動作するような scroll という指定になっていますが、click とか sporty という設定もあります。 failurelimit : 同時読込み最大数の指定です。デフォルトでは 0 です。

画像拡大時のjsをhighslideからprettyPhotoに

a-blog cms では、画像の拡大で利用するJSはHighslide のものを利用していますが、Lightbox で表示させたい人もいるのではないかと思います。 そんな中で、私としては prettyPhoto がお気に入りだったりします。理由としては、表示時に画面サイズが狭かったら、収まるように表示してくれるところがイイと思ってます。 以下に、その実装方法を書いておきます。 1. ファイルをダウンロードします prettyPhoto からファイルをダウンロードしてきます。そして、テーマの中の js , css , images にファイルをアップロードします。 2. テーマを修正して js 等を読み込んだりします $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); }); 3. コンフィグの設定を変更します Entry_Bodyの設定に、イメージビューアーという設定があります。ここに rel="highslide" と書かれていますので、ここを rel="prettyPhoto" にします。これでとりあえず1枚毎ですが、背景が黒っぽくなって表示できるようになります。 複数枚をセットにしてページをおくれるようにする事ができるような機能があります。これを実装する際には、 rel="prettyPhoto[999]" のように書くことで実現できますが、一覧表示時に他のエントリーのものも含んでページ上の全件の写真が出てきてしまいます。 正式版の1.3.0では rel="prettyPhoto[{unit_eid}]" と少し無理矢理な仕様な気もしますが、1.3.0の正式版でエントリーIDを設定できるようにしておきました。ココでは既に対応済ですので、一覧時もこのエントリー内では3枚になっていると思います。

Contact

お問い合わせはこちら