【Ajax】本をめくるような効果が簡単に作れる『Moleskine Notebook with jQuery Booklet』

Flashを使わなくても簡単に本をめくるような効果が得られるAjax。

本・パンフレットをめくるような見せ方でサイトに表示させたいというご要望を頂きますが、やはりFlashを使ったりするとその制作費に結構な金額がかかってしまいます。
そこで思ったのが、Flashを使わずにそのような効果が得られないかということで、検索して探しました!
 
そうすると結構早く「Moleskine Notebook with jQuery Booklet」というjQueryを利用したツールを発見!
Flashでないので、Flash制作程の手間がかからない!っというか、設置は簡単!
下記の設置方法をご参考にして頂ければと思います。
 
【Ajax】本をめくるような効果が簡単に作れる『Moleskine Notebook with jQuery Booklet』
 
【1.ダウンロード】
まずは下記ページより、「DOWNLOAD」ボタンをクリックして、必要ファイルファイルをダウンロードします。
http://tympanus.net/codrops/2010/12/14/moleskine-notebook/
 
【2.タグ内の設定】
下記のタグを「タグ内」設置します。

 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>

<link href="booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

<script src="cufon/cufon-yui.js" type="text/javascript"></script>
<script src="cufon/ChunkFive_400.font.js" type="text/javascript"></script>
<script src="cufon/Note_this_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
	Cufon.replace('h1,p,.b-counter');
	Cufon.replace('.book_wrapper a', {hover:true});
	Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
	Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
	Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'});
</script>

【3.タグ内の設定】
下記のタグを「タグの直前」設置します。

 
<script type="text/javascript">
	$(function() {
		var $mybook 		= $('#mybook');
		var $bttn_next		= $('#next_page_button');
		var $bttn_prev		= $('#prev_page_button');
		var $loading		= $('#loading');
		var $mybook_images	= $mybook.find('img');
		var cnt_images		= $mybook_images.length;
		var loaded			= 0;
		//preload all the images in the book,
		//and then call the booklet plugin
			$mybook_images.each(function(){
			var $img 	= $(this);
			var source	= $img.attr('src');
			$('').load(function(){
				++loaded;
				if(loaded == cnt_images){
					$loading.hide();
					$bttn_next.show();
					$bttn_prev.show();
					$mybook.show().booklet({
						name:               null,                            // name of the booklet to display in the document title bar
						width:              800,                             // container width
						height:             500,                             // container height
						speed:              600,                             // speed of the transition between pages
						direction:          'LTR',                           // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left
						startingPage:       0,                               // index of the first page to be displayed
						easing:             'easeInOutQuad',                 // easing method for complete transition
						easeIn:             'easeInQuad',                    // easing method for first half of transition
						easeOut:            'easeOutQuad',                   // easing method for second half of transition
						closed:             true,                           // start with the book "closed", will add empty pages to beginning and end of book
						closedFrontTitle:   null,                            // used with "closed", "menu" and "pageSelector", determines title of blank starting page
						closedFrontChapter: null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
						closedBackTitle:    null,                            // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page
						closedBackChapter:  null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page
						covers:             false,                           // used with  "closed", makes first and last pages into covers, without page numbers (if enabled)
						pagePadding:        10,                              // padding for each page wrapper
						pageNumbers:        true,                            // display page numbers on each page
						hovers:             false,                            // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
						overlays:           false,                            // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
						tabs:               false,                           // adds tabs along the top of the pages
						tabWidth:           60,                              // set the width of the tabs
						tabHeight:          20,                              // set the height of the tabs
						arrows:             false,                           // adds arrows overlayed over the book edges
						cursor:             'pointer',                       // cursor css setting for side bar areas
						hash:               false,                           // enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled
						keyboard:           true,                            // enables navigation with arrow keys (left: previous, right: next)
						next:               $bttn_next,          			// selector for element to use as click trigger for next page
						prev:               $bttn_prev,          			// selector for element to use as click trigger for previous page

						menu:               null,                            // selector for element to use as the menu area, required for 'pageSelector'
						pageSelector:       false,                           // enables navigation with a dropdown menu of pages, requires 'menu'
						chapterSelector:    false,                           // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu'
						shadows:            true,                            // display shadows on page animations
						shadowTopFwdWidth:  166,                             // shadow width for top forward anim
						shadowTopBackWidth: 166,                             // shadow width for top back anim
						shadowBtmWidth:     50,                              // shadow width for bottom shadow
						before:             function(){},                    // callback invoked before each page turn animation
						after:              function(){}                     // callback invoked after each page turn animation
					});
					Cufon.refresh();
				}
			}).attr('src',source);
		});
		
	});
</script>

 
【4.本の表示部分のソース】
本を設置させたい部分に下記のタグを設置します。

 
<div class="book_wrapper">
<a id="next_page_button">Loading pages...</div>
<div id="mybook" style="display:none;">
<div class="b-load">

<div>
<img src="images/1.jpg" alt=""/>
<h1>Slider Gallery</h1>
<p>This tutorial is about creating a creative gallery...</p>
<a href="#" class="article">Article</a>
<a href="#" class="demo">Demo</a>
</div>

<div>
...
</div>
</div>
</div>
</div>

 
上記タグの6行目から12行目を、同じ要領で繰り返し書き込めば、ページ数が増えていきます。
 
今回はこちらの抽象画家小屋哲雄様のサイトに設置させて頂きました。

【WordPressを使う際によく入れるプラグイン】記事に追加した画像を一覧ページでサムネイル化『QF-GetThumb』

カテゴリ、タグのページやアーカイブペジなど、普通のWordpressブログをであると記事全文が並んでしまったりすると思いますが、いろいろなサイト制作にてお客様の要望を聞くと。「文章の抜粋だけ載せて、あとは文章だけだと寂しいのでサムネイル画像を表示させたい!」というお話がよくある。

これまで何度かそのようなご要望があり、その都度いろいろサムネイル画像表示のプラグインを探して使ってきたが、個人的に一番使い勝手が良いのが『QF-GetThumb』 。
記事投稿と同時にサムネイル画像が自動的に表示できるので、とても重宝しております。

そのプラグインのインストール、設定方法は簡単!
下記ご参考になればと思います。

【インストール・設定方法】
1.管理画面の 「プラグイン」>「新規追加」 ページへ移動し、『QF-GetThumb』で検索。
2.検索結果に表示される、『QF-GetThumb』の「いますぐインストール」をクリックしてインストールします。
【WordPressを使う際によく入れるプラグイン】記事に追加した画像を一覧ページでサムネイル化『QF-GetThumb』
 
3.インストールが終了して下記の画面が表示されたら、「プラグインを有効化」をクリックし、インストール完了です。
 
4.その後はテンプレートの調整。サムネイル画像を表示させたい部分に下記のテンプレートタグを追記致します。

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permalink a <?php the_title_attribute(); ?>"><?php echo the_qf_get_thumb_one('num=0&width=75','/wp-content/plugins/qf-getthumb/default_image.png'); ?></a>

the_qf_get_thumb_oneの各パラメータの意味は次の通りです。

  • $gt_settings(設定値は&で区切ります):
    • num:何番目の画像を取り出すかを指定。省略可。デフォルトは「0」
    • width:サムネイルの幅を指定。デフォルトは「0」
    • height:サムネイルの高さを指定。デフォルトは「0」
    • tag:「1」を設定すればimg要素を出力。「0」を設定すれば画像のURLを出力。デフォルトは「1」
    • global:「0」を設定すれば、画像を同一サーバ内のデータに限定。「1」を設定すれば限定しない。場合デフォルトは「0」
    • crop_w:クロップ時の横幅を指定。デフォルトは「0」
    • crop_h:クロップ時の縦幅を指定。デフォルトは「0」
    • find=string:検索文字列を指定(全文検索一致データの画像指定)
    • $default_image:画像がない場合は、ここに指定された値を返却します(それもなければfalseを返却)
    • $source:ソース取得先の指定(なければ the_content を参照)

表示例は下記の様な感じ。
これで、文章だけよりもクリック率が上がりそうです。
【WordPressを使う際によく入れるプラグイン】記事に追加した画像を一覧ページでサムネイル化『QF-GetThumb』

【WordPressを使う際に必ず入れるプラグイン】Facebookなどのソーシャルメディアとの連動を実現『WP Social Bookmarking Light』

ここ2,3年のFacebook,Twitter等の急速な普及により、ブログはただ更新しているだけでなく、それらソーシャルメディア等との連動が、多くのユーザーにアプローチできる大きな方法の一つになっております。
 
そこはやっぱりWordpress!そのような連動するためのプラグインがあるんですね。
FacebookやTwitterのボタンを設置するプラグインは、複数存在しますが、いろいろ試した中で最も使いやすかったのが『WP Social Bookmarking Light』
インストールして管理画面の設定を行えば、3分以内に利用可能!

是非お試しを!インストール、設定方法は下記をご参照ください。

【インストール・設定方法】
1.管理画面の 「プラグイン」>「新規追加」 ページへ移動し、『WP Social Bookmarking Light』で検索。
2.検索結果に表示される、『WP Social Bookmarking Light』の「いますぐインストール」をクリックしてインストールします。
【WordPressを使う際に必ず入れるプラグイン】Facebookなどのソーシャルメディアとの連動を実現『WP Social Bookmarking Light』
 
3.インストールが終了して下記の画面が表示されたら、「プラグインを有効化」をクリックし、インストール完了
【WordPressを使う際に必ず入れるプラグイン】Facebookなどのソーシャルメディアとの連動を実現『WP Social Bookmarking Light』
 
4.インストールが完了すると「設定」部分に『WP Social Bookmarking Light』が表示されるので、そのページで詳細の設定が可能です(下記参照)。
【WordPressを使う際に必ず入れるプラグイン】Facebookなどのソーシャルメディアとの連動を実現『WP Social Bookmarking Light』
 
ちなみに個のプラグインで利用できるものは下記です。

サービス一覧 説明
hatena Hatena Bookmark
hatena_users Hatena Bookmark Users
hatena_button Hatena Bookmark Button
twib Twib – Twitter
twib_users Twib Users – Twitter
tweetmeme TweetMeme – Twitter
twitter Tweet Button – Twitter
livedoor Livedoor Clip
livedoor_users Livedoor Clip Users
yahoo Yahoo!JAPAN Bookmark
yahoo_users Yahoo!JAPAN Bookmark Users
yahoo_buzz Yahoo!Buzz
buzzurl BuzzURL
buzzurl_users BuzzURL Users
nifty @nifty Clip
nifty_users @nifty Clip Users
tumblr Tumblr
fc2 FC2 Bookmark
fc2_users FC2 Bookmark Users
newsing newsing
choix Choix
google Google Bookmarks
google_buzz Google Buzz
google_plus_one Google +1
delicious Delicious
digg Digg
friendfeed FriendFeed
facebook Facebook Share
facebook_like Facebook Like Button
facebook_send Facebook Send Button
reddit reddit
linkedin LinkedIn
evernote Evernote
instapaper Instapaper
stumbleupon StumbleUpon
mixi mixi Check (require mixi check key)
mixi_like mixi Like (require mixi check key)
gree GREE Social Feedback
atode atode (toread)

 
既にGoogleプラスワンも含まれています。さすが対応が早いですね。
つい先日「Google+1(グーグルプラスワン)の設置方法・効果」という記事を整理したのですが、Wordpressを利用する場合は、こちらで十分ですね。

【WordPressを使う際に必ず入れるプラグイン】サイトマップ(sitemap.xml)作成『Google XML Sitemaps』

「WordPressはSEOのメカニズムの80-90%を考慮した設計」となっていると言われており、SEOに向いたサイトを作るにはもってこいのCMSツールとなっておりますが、さらに検索エンジンにページを認識してもらいやすくするためには、Googleウェブマスターツールを使います。
 
そのGoogleウェブマスターツールでは、sitemap.xmlを登録し、こちらからそのファイルをGoogleに見てもらうような設定をするのですが、その「sitemap.xml」ファイルを作るためのプラグインが、今回紹介させて頂く『Google XML Sitemaps』になります。
 
このプラグインを使う事により、新規のページ追加、投稿の際に自動的にsitemap.xmlを再構築してくれるようになり、毎回作成する手間などを省く事が出来ます。

【インストール方法はこちら】
1.管理画面の 「プラグイン」>「新規追加」 ページへ移動し、『Google XML Sitemaps』で検索。
2.検索結果に表示される、『Google XML Sitemaps』の「いますぐインストール」をクリックしてインストールします。

 
3.インストールが終了して下記の画面が表示されたら、「プラグインを有効化」をクリックし、インストール完了

 
4.インストールが完了すると「設定」部分に『XML-Sitemap』が表示されるので、そのページで詳細の設定が可能です(下記参照)。

まずは上記ページの「サイトマップはまだ構築されていません。こちらをクリックしてまず構築して下さい。」の部分で、クリックしてsitemap.xmlを構築しましょう!
 
その後は、「ブログのコンテンツを変更したらサイトマップを再構築する」にチェックを入れておけば、ページの更新、投稿の度にsitemap.xmlも更新されるのでとても便利です。
 
sitemap.xml構築後は、Googleウェブマスターツールでアカウントを作成し、sitemap.xmlを登録しておきましょう^^

WordPress「WPtouch」でのテーマの変更方法

前回の記事『WordPressのスマートフォン表示最適化プラグイン「WPtouch」』で、Wordpressサイトをスマートフォンで閲覧した際に表示を切り替えることができるようになったかと思います。
 
しかし「このデザインをもう少し変えたい」という事を考える方もとても多いのではないでしょうか。
 
普通に「WPtouch」のプラグインを使うだけでは、テーマが変更できないんだな~ってことが分かった瞬間から、もちろん私もこのようなことを考えました。
 
いろいろ検索で調べたところ、結構簡単に変更できる事が判明!
その方法は下記の手順になります。

【「WPtouch」でのテーマ・デザインの変更方法】
(1)まずは適応させたいテーマファイルを、フォルダごと下記「themes」フォルダ内にアップ
 「wp-content/plugins/wptouch/themes/」

(2)Wordpressの管理画面にログインし、『プラグイン > プラグイン編集』ページへ
 
(3)画面右上の「編集するプラグイン」で「WPtouch」を選択
 
(4)その下に表示される「プラグインファイル」の中で、「wptouch/wptouch.php」を選択
 
(5)(4)で選んだファイルのソースが画面に表示されるのでその中で
『return ‘default’;』となっている部分を見つけ、その中の『default』の部分を、先ほどアップしたテーマファイルの入っているフォルダ名に変更
  

 
 
この流れで作業すればOK
簡単にスマートフォン用のテーマを変更する事が出来ます!

WordPressのスマートフォン表示最適化プラグイン「WPtouch」

もう既にスマートフォンの時代ですね。
Webサイトも同じように、新しいものをドンドン対応していかないといけません。

私はこれまでWordpressを良く使いますが、その「Wordpressカスタマイズは得意!」と今後も言えるよう、スマートフォン対応もできないとですね。
 
そこでいつも優れているプラグインのあるWordpress。やはりスマートフォン対応のプラグインもすでに多数存在しています。

PCで見ていたらPCのレイアウト、スマートフォンで見たらスマートフォン用のレイアウトが切り替えられる「WPtouch」を試しました。

【作業手順】
(1)まずは「WPtouch」をダウンロード
http://wordpress.org/extend/plugins/wptouch/

 
ダウンロードしたファイルを解凍し、「/wp-content/plugins/」内にアップロードします。

(2)「プラグイン」のページに移動し、「WPtouch」を有効化します。

 
(3)これだけで終了
この作業をするだけで、
下記の様なPCサイトが、

↓↓↓
スマートフォン対応となります。

 
後の細かな「WPtouch」の設定は、下記のプラグインのページから「設定」をクリックして

 
下記の詳細設定ページで設定してください。
(一番上部の「WPtouchの言語」で日本語に設定できます。)

 
ぜひお試しを。

会員・顧客管理も可能!メール・アンケートフォームが簡単に作れるGoogleドキュメント

Googleドキュメントでのメール・アンケートフォームの作成は既にだいぶ前から可能だったのですが、あらためてその機能の充実ぶりに驚き・感動したのでブログに書こうと思います。
 
まずはGoogleドキュメントにログイン

Googleアカウントを持っていない人は新たに登録しましょう。
 

ログイン後に表示される画面の左上。
「新規作成」をクリックして、表示される「フォーム」をクリック!
 

そこで表示されるフォームの作成画面にて、お好みの項目を登録し、質問の形式を選択。必須項目などもここで調整できます。
 

作成したフォームを保存すると、直ぐにこのようなフォームが簡単にできちゃいます。
 

フォームが完成して、Googleドキュメントの画面に戻ってみると、自動的にスプレッドシートができている。
そのスプレッドシートをクリックすると。
 

お手軽すぎてビックリです。フォームに作成した項目も追加されていて、そのままデータが保存されていきます。
 

フォームの編集画面やスプレッドシートから、上記のような画面で登録データを視覚的に確認する事も可能です。
 
作成方法も簡単だし、SSLでセキュリティもOK!
Googleなので、一時的なアクセスアップ等にも対応できそうですね。
期間限定のキャンペーンのサイトなどでもバッチリ。
 
この機能を使ってアンケートフォームを作成してみました。
皆さんお気軽にご回答いただけると嬉しいです。

 
また上記フォームの回答がどのように保存されるか、スプレッドシートも公開してみました。
ご参考までに。

使える・しかもカッコイイ無料ブラウザーチェックツールの「BrowserLab(ブラウザーラボ)」

これまで新たにWebサイトを制作する際に行ってきたブラウザーチェック、このチェックを行うために、私のパソコンには複数のブラウザがインストールされている。
 
いつも問題になるのは「InternetExplorer」。。。シェアだけは立派に多いが、いつも問題を起こす。
そのため「InternetExplorer」のチェックはしっかりと行わないければならないので、古いバージョンの「InternetExplorer」のチェックには、MultipleIEsというソフトを使ってチェックしてきた。
 
しかし今回問題を起こしたのが「Firefox」くん。いつも優等生の君がめずらしく問題を起こしたので、古いバージョンのチェックに困ってしまった。
 
いろいろなブラウザーチェックツールがあるが、動作が遅かったり、有料だったり。。。
そこで行きついたのが、無料ブラウザーチェックツールの「BrowserLab(ブラウザーラボ)」。これがとても使えるツールだった!
 

BrowserLab(ブラウザーラボ)
 
1回に10個のブラウザまで設定して、まとめてチェックできる!
動作も軽い!しかもカッコイイ!今後お世話になります!
 
しかしここに行きつきのに2時間かかった。。。
制作を行っていると作業以外に、こういうツールを探し出すのに結構な時間がかかってしまう。