スクロールバーを上下左右どこでも出せるJqueryプラグイン

<p>複数のFacebookページを統合する方法のメモ。</p>
<p>オフィシャルで作ったけど誰かが別で作っていたり、<br />
コンセプトを変えて新たに作成した場合などに便利。</p>
<p>手順は以下の通り。</p>
<p>1. 自分が管理者のFacebookページのトップへ行く<br />
2. ページ上部の「Facebookページを編集」→ 「基本データを編集」をクリック<br />
3. 左サイド「リソース」をクリック<br />
4. 「重複しているページを統合」クリック</p>
<p>ここでつまずく場合が多い。<br />
「重複しているページを統合」というリンクが出ない場合は以下を確認してほしい。<br />
a. それぞれのFacebookページは住所が同じでなければならない<br />
b. いいねが多い方から少ない方を吸収しなければならない<br />
c. Facebookページ名がかなり似ていなければならない</p>
<p>cがわかりづらいと思う。<br />
しかも、全く同じページ名にすると<br />
&#8220;自動システムではその名前は認められません。「hogehoge」をご検討ください。&#8221;<br />
というエラーが出るはずだ。</p>
<p>その時は、ほどよいところにスペースを入れるとよい。</p>
<p>そうすると「重複しているページを統合」が表示されるはず。<br />
あとは手順に従えば一件落着</p>


複数のFacebookページを統合する方法

<p>webサイトの制作をしていて、</p>
<p>気をつけなければいけないのが、</p>
<p>すべてのブラウザに対応させなければいけないということ。</p>
<p>&nbsp;</p>
<p>どのブラウザで見ても同じようにサイトがみえてないといけないし、</p>
<p>あるブラウザで見れなくなってしまうと、</p>
<p>そのブラウザを使用しているユーザーにとっては、</p>
<p>そのサイトは見るのに、値しないサイトいになってしまう可能性があります。</p>
<p>&nbsp;</p>
<p>そのような概念を「<strong>クロスブラウザ</strong>」といい、サイト制作において前提にあるものでした。</p>
<p>まぁweb業界には基本的な話ですが、お客さんからすると、</p>
<p>ブラウザっていくつもあることも知らない人もいるし、</p>
<p>そもそもブラウザってなんだって言う人もいます。</p>
<p>&nbsp;</p>
<p>ですので、基本的に受注案件では、すべてのブラウザに対応しなければいけないことが大半です。</p>
<p>お客さん的にも、見れないユーザーがいるとそれだけで機械損失になる恐れがあるので、</p>
<p>避けたいところではあります。</p>
<p>&nbsp;</p>
<p>しかし、どんどん技術・表現が新しくなっていくなかで、</p>
<p>古いブラウザ、新しいブラウザで機能面に差がでています。</p>
<p>古いブラウザだと、最新の表現ができなかったり、対応させるのがとても難しい場合があります。</p>
<p>特にIE6とかだと非常に制限されていて、困りもんです。</p>
<p>&nbsp;</p>
<p>そこで、けっこう前から提唱されているのが、</p>
<p>「<strong>プログレッシブ・エンハンスメント</strong>」 という概念です。</p>
<p>&nbsp;</p>
<p>どういうものかというと、</p>
<p>「<strong>どのユーザーにも同じように情報コンテンツを提供しますが、環境が整っているユーザー（モダンブラウザ利用者）には、よりリッチな見せ方でコンテンツを提供する</strong>」</p>
<p>ということです。</p>
<p>つまり、ブラウザ間において見え方が変わってもいいじゃないかということです。</p>
<p>例えばcss3やhtml5を使用するといったような。</p>
<p>&nbsp;</p>
<p>ただし、古いブラウザでも問題なく情報を受け取れるようにしないといけない、</p>
<p>というのは大前提です。</p>
<p>&nbsp;</p>
<p>まったくコンテンツが見れなかったり、レイアウトが崩れていたりというのはダメということですね。</p>
<p>&nbsp;</p>
<p>ですので、現段階では、css3を利用して、角丸にしたり、シャドウをつけたり、</p>
<p>といった 表現を新しいブラウザでするといったところでしょうか。</p>
<p>&nbsp;</p>
<p>主にそれらがわかるサイトでいうと、</p>
<p><a href="https://twitter.com/" target="_blank">twitter</a>や<a href="http://www.youtube.com/" target="_blank">youtube</a>等です。</p>
<p>古いブラウザでも問題なく見れます。</p>
<p>新しいブラウザだと、表現（デザイン）が豊かに見えます。</p>
<p>&nbsp;</p>
<p>とはいえ、お客さんからすると「全部同じような見た目にしてよ」という方もいらっしゃるかもしれません。</p>
<p>そこは応相談ですね。</p>
<p>&nbsp;</p>
<p>制作側のメリットははっきりとわかりますが、</p>
<p>お客さんにとっては手抜きと取られるかもしれません。</p>
<p>&nbsp;</p>
<p>この考え方、僕は非常に好きですが、今後どうなることやら・・・</p>
<p>&nbsp;</p>
<p>そのうちie6もなくなり楽になりますが、 まだまだieはやっかいです。</p>
<p>&nbsp;</p>
<p>参考資料：</p>
<p><a href="http://www.atmarkit.co.jp/fwcr/design/tool/ichigeki15/01.html">「どのユーザーにも同じように情報コンテンツを提供しますが、環境が整っているユーザー（モダンブラウザ利用者）には、よりリッチな見せ方でコンテンツを提供しましょう」</a></p>


プログレッシブ・エンハンスメントってなに？

<p>スマホとPCを切り替えるjQueryプラグインを作っており、<br />
何かと必要かと思いまとめた。<br />
AndroidとiOSとその他、端末のユーザーエージェント一覧。</p>
<p>&nbsp;</p>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th>OS</th>
<th>キャリア</th>
<th>発売日</th>
<th>機種名</th>
<th>照合条件</th>
</tr>
<tr>
<td rowspan="123">Android</td>
<td rowspan="61">DoCoMo</td>
<td rowspan="18">2012.4 ~</td>
<td>MEDIAS X N-07D</td>
<td>N-07D</td>
</tr>
<tr>
<td>Optimus it L-05D</td>
<td>L-05D</td>
</tr>
<tr>
<td>Xperia SX SO-05D</td>
<td>SO-05D</td>
</tr>
<tr>
<td>F-09D ANTEPRIMA</td>
<td>F-09D</td>
</tr>
<tr>
<td>ARROWS Me F-11D</td>
<td>F-11D</td>
</tr>
<tr>
<td>ELUGA V P-06D</td>
<td>P-06D</td>
</tr>
<tr>
<td>AQUOS PHONE st SH-07D</td>
<td>SH-07D</td>
</tr>
<tr>
<td>GALAXY S III SC-06D</td>
<td>SC-06D</td>
</tr>
<tr>
<td>ARROWS X F-10D</td>
<td>F-10D</td>
</tr>
<tr>
<td>AQUOS PHONE sv SH-10D</td>
<td>SH-10D</td>
</tr>
<tr>
<td>REGZA Phone T-02D</td>
<td>T-02D</td>
</tr>
<tr>
<td>Optimus Vu L-06D</td>
<td>L-06D</td>
</tr>
<tr>
<td>L-06D JOJO</td>
<td>L-06D</td>
</tr>
<tr>
<td>AQUOS PHONE ZETA SH-09D</td>
<td>SH-09D</td>
</tr>
<tr>
<td>ELUGA power P-07D</td>
<td>P-07D</td>
</tr>
<tr>
<td>Xperia GX SO-04D</td>
<td>SO-04D</td>
</tr>
<tr>
<td>らくらくスマートフォン（F-12D）</td>
<td>F-12D</td>
</tr>
<tr>
<td>SH-06D NERV</td>
<td>SH-06D</td>
</tr>
<tr>
<td rowspan="26">2011.8 ~ 2012.4</td>
<td>GALAXY Note SC-05D</td>
<td>SC-05D</td>
</tr>
<tr>
<td>P-04D</td>
<td>P-04D</td>
</tr>
<tr>
<td>AQUOS PHONE SH-06D</td>
<td>SH-06D</td>
</tr>
<tr>
<td>Disney Mobile on docomo F-08D</td>
<td>F-08D</td>
</tr>
<tr>
<td>Disney Mobile on docomo P-05D</td>
<td>P-05D</td>
</tr>
<tr>
<td>MEDIAS ES N-05D</td>
<td>N-05D</td>
</tr>
<tr>
<td>Xperia NX SO-02D</td>
<td>SO-02D</td>
</tr>
<tr>
<td>Xperia acro HD SO-03D</td>
<td>SO-03D</td>
</tr>
<tr>
<td>PRADA phone by LG L-02D</td>
<td>L-02D</td>
</tr>
<tr>
<td>MEDIAS LTE N-04D</td>
<td>N-04D</td>
</tr>
<tr>
<td>GALAXY S II LTE SC-03D</td>
<td>SC-03D</td>
</tr>
<tr>
<td>ARROWS X LTE F-05D</td>
<td>F-05D</td>
</tr>
<tr>
<td>Optimus LTE L-01D</td>
<td>L-01D</td>
</tr>
<tr>
<td>ARROWS μ F-07D</td>
<td>F-07D</td>
</tr>
<tr>
<td>MEDIAS PP N-01D</td>
<td>N-01D</td>
</tr>
<tr>
<td>GALAXY NEXUS SC-04D</td>
<td>SC-04D</td>
</tr>
<tr>
<td>ARROWS kiss F-03D</td>
<td>F-03D</td>
</tr>
<tr>
<td>REGZA Phone T-01D</td>
<td>T-01D</td>
</tr>
<tr>
<td>F-03D Girls’</td>
<td>F-03D</td>
</tr>
<tr>
<td>Q-pot.Phone SH-04D</td>
<td>SH-04D</td>
</tr>
<tr>
<td>AQUOS PHONE SH-01D</td>
<td>SH-01D</td>
</tr>
<tr>
<td>AQUOS PHONE slider SH-02D</td>
<td>SH-02D</td>
</tr>
<tr>
<td>LUMIX Phone P-02D</td>
<td>P-02D</td>
</tr>
<tr>
<td>P-01D</td>
<td>P-01D</td>
</tr>
<tr>
<td>Xperia PLAY SO-01D</td>
<td>SO-01D</td>
</tr>
<tr>
<td>Xperia ray SO-03C</td>
<td>SO-03C</td>
</tr>
<tr>
<td rowspan="17">2009.7 ~ 2011.8</td>
<td>MEDIAS WP N-06C</td>
<td>N-06C</td>
</tr>
<tr>
<td>Xperia acro SO-02C</td>
<td>SO-02C</td>
</tr>
<tr>
<td>GALAXY S II SC-02C</td>
<td>SC-02C</td>
</tr>
<tr>
<td>P-07C</td>
<td>P-07C</td>
</tr>
<tr>
<td>F-12C</td>
<td>F-12C</td>
</tr>
<tr>
<td>AQUOS PHONE f SH-13C</td>
<td>SH-13C</td>
</tr>
<tr>
<td>Optimus bright L-07C</td>
<td>L-07C</td>
</tr>
<tr>
<td>AQUOS PHONE SH-12C</td>
<td>SH-12C</td>
</tr>
<tr>
<td>Xperia arc SO-01C</td>
<td>SO-01C</td>
</tr>
<tr>
<td>MEDIAS N-04C</td>
<td>N-04C</td>
</tr>
<tr>
<td>Optimus chat L-04C</td>
<td>L-04C</td>
</tr>
<tr>
<td>REGZA Phone T-01C</td>
<td>T-01C</td>
</tr>
<tr>
<td>LYNX 3D SH-03C</td>
<td>SH-03C</td>
</tr>
<tr>
<td>GALAXY S SC-02B</td>
<td>SC-02B</td>
</tr>
<tr>
<td>LYNX SH-10B</td>
<td>SH-10B</td>
</tr>
<tr>
<td>Xperia SO-01B</td>
<td>SO-01B</td>
</tr>
<tr>
<td>HT-03A</td>
<td>HT-03A</td>
</tr>
<tr>
<td rowspan="32">AU</td>
<td rowspan="6">2012.4 ~</td>
<td>AQUOS PHONE SERIE ISW16SH</td>
<td>ISW16SH</td>
</tr>
<tr>
<td>ARROWS Z ISW13F</td>
<td>ISW13F</td>
</tr>
<tr>
<td>URBANO PROGRESSO</td>
<td>URBANO PROGRESSO</td>
</tr>
<tr>
<td>AQUOS PHONE SL IS15SH</td>
<td>IS15SH</td>
</tr>
<tr>
<td>AQUOS PHONE CL IS17SH</td>
<td>IS17SH</td>
</tr>
<tr>
<td>HTC J ISW13HT</td>
<td>ISW13HT</td>
</tr>
<tr>
<td rowspan="13">2011.10 ~ 2012.4</td>
<td>Xperia acro HD IS12S</td>
<td>IS12S</td>
</tr>
<tr>
<td>INFOBAR C01</td>
<td>INFOBAR C01</td>
</tr>
<tr>
<td>MOTOROLA RAZR IS12M</td>
<td>IS12M</td>
</tr>
<tr>
<td>GALAXY SII WiMAX ISW11SC</td>
<td>ISW11SC</td>
</tr>
<tr>
<td>Optimus X IS11LG</td>
<td>IS11LG</td>
</tr>
<tr>
<td>AQUOS PHONE IS14SH</td>
<td>IS14SH</td>
</tr>
<tr>
<td>ARROWS ES IS12F</td>
<td>IS12F</td>
</tr>
<tr>
<td>MEDIAS BR IS11N</td>
<td>IS11N</td>
</tr>
<tr>
<td>ARROWS Z ISW11F</td>
<td>ISW11F</td>
</tr>
<tr>
<td>DIGNO ISW11K</td>
<td>ISW11K</td>
</tr>
<tr>
<td>htc EVO 3D ISW12HT</td>
<td>ISW12HT</td>
</tr>
<tr>
<td>MOTOROLA PHOTON ISW11M</td>
<td>ISW11M</td>
</tr>
<tr>
<td>AQUOS PHONE IS13SH</td>
<td>IS13SH</td>
</tr>
<tr>
<td rowspan="13">2010.6 ~ 2011.9</td>
<td>MIRACH IS11PT</td>
<td>IS11PT</td>
</tr>
<tr>
<td>Xperia acro IS11S</td>
<td>IS11S</td>
</tr>
<tr>
<td>INFOBAR A01</td>
<td>INFOBAR A01</td>
</tr>
<tr>
<td>G’zOne IS11CA</td>
<td>IS11CA</td>
</tr>
<tr>
<td>AQUOS PHONE IS11SH</td>
<td>IS11SH</td>
</tr>
<tr>
<td>AQUOS PHONE IS12SH</td>
<td>IS12SH</td>
</tr>
<tr>
<td>REGZA Phone IS11T</td>
<td>IS11T</td>
</tr>
<tr>
<td>htc EVO WiMAX ISW11HT</td>
<td>ISW11HT</td>
</tr>
<tr>
<td>SIRIUSα IS06</td>
<td>IS06</td>
</tr>
<tr>
<td>IS05</td>
<td>IS05</td>
</tr>
<tr>
<td>REGZA Phone IS04</td>
<td>IS04</td>
</tr>
<tr>
<td>IS03</td>
<td>IS03</td>
</tr>
<tr>
<td>IS01</td>
<td>IS01</td>
</tr>
<tr>
<td rowspan="30">Softbank</td>
<td rowspan="4">2012.4 ~</td>
<td>AQUOS PHONE 102SHII</td>
<td>102SHII</td>
</tr>
<tr>
<td>AQUOS PHONE Xx 106SH</td>
<td>106SH</td>
</tr>
<tr>
<td>ARROWS A 101F</td>
<td>101F</td>
</tr>
<tr>
<td>PANTONE 5 107SH</td>
<td>107SH</td>
</tr>
<tr>
<td rowspan="19">2011.6 ~ 2012.4</td>
<td>SoftBank 102P</td>
<td>102P</td>
</tr>
<tr>
<td>MEDIAS CH 101N</td>
<td>101N</td>
</tr>
<tr>
<td>AQUOS PHONE 102SH</td>
<td>102SH</td>
</tr>
<tr>
<td>AQUOS PHONE 103SH</td>
<td>103SH</td>
</tr>
<tr>
<td>AQUOS PHONE 104SH</td>
<td>104SH</td>
</tr>
<tr>
<td>AQUOS PHONE THE HYBRID 101SH</td>
<td>101SH</td>
</tr>
<tr>
<td>LUMIX Phone 101P</td>
<td>101P</td>
</tr>
<tr>
<td>HONEY BEE 101K</td>
<td>101K</td>
</tr>
<tr>
<td>STAR7 009Z</td>
<td>009Z</td>
</tr>
<tr>
<td>DELL Streak Pro 101DL</td>
<td>101DL</td>
</tr>
<tr>
<td>Vision 007HW</td>
<td>007HW</td>
</tr>
<tr>
<td>Yahoo! Phone 009SH Y</td>
<td>SBM009SH</td>
</tr>
<tr>
<td>007SH KT</td>
<td>007SH</td>
</tr>
<tr>
<td>AQUOS PHONE THE PREMIUM 009SH</td>
<td>SBM009SH</td>
</tr>
<tr>
<td>シンプルスマートフォン 008Z</td>
<td>008Z</td>
</tr>
<tr>
<td>AQUOS PHONE THE HYBRID 007SH J</td>
<td>007SH</td>
</tr>
<tr>
<td>Sweety 003P</td>
<td>003P</td>
</tr>
<tr>
<td>AQUOS PHONE THE HYBRID 007SH</td>
<td>007SH</td>
</tr>
<tr>
<td>AQUOS PHONE 006SH</td>
<td>006SH</td>
</tr>
<tr>
<td rowspan="7">2010.4 ~ 2011.2</td>
<td>GALAPAGOS 005SH</td>
<td>005SH</td>
</tr>
<tr>
<td>Libero 003Z</td>
<td>003Z</td>
</tr>
<tr>
<td>DELL Streak 001DL</td>
<td>001DL</td>
</tr>
<tr>
<td>GALAPAGOS 003SH</td>
<td>003SH</td>
</tr>
<tr>
<td>HTC Desire HD 001HT</td>
<td>001HT</td>
</tr>
<tr>
<td>Desire X06HTII（X06HT）</td>
<td>X06HT</td>
</tr>
<tr>
<td>SoftBank 004HW</td>
<td>004HW</td>
</tr>
<tr>
<td rowspan="3">iOS</td>
<td rowspan="3">&#8211;</td>
<td rowspan="3">&#8211;</td>
<td>iPhone</td>
<td>iPhone</td>
</tr>
<tr>
<td>iPad</td>
<td>iPad</td>
</tr>
<tr>
<td>iPod</td>
<td>iPod</td>
</tr>
<tr>
<td rowspan="5">その他</td>
<td rowspan="5">&#8211;</td>
<td rowspan="5">&#8211;</td>
<td>DIGNO DUAL WX04K</td>
<td>WX04K</td>
</tr>
<tr>
<td>DM012SH</td>
<td>DM012SH</td>
</tr>
<tr>
<td>DM010SH</td>
<td>DM010SH</td>
</tr>
<tr>
<td>DM011SH</td>
<td>DM011SH</td>
</tr>
<tr>
<td>DM009SH</td>
<td>DM009SH</td>
</tr>
</tbody>
</table>


【Android】 端末 ユーザーエージェント一覧

スマートフォン対応の画像スライダー「flexslider」

[HTML5] File system API サンプル

エフェクトがかっこいい画像スライドショー &#8211; nivo slider &#8211;

<p>turn.jsというプラグインを使って、</p>
<p>コンテンツを本をめくったように遷移するページを作ってみました。</p>
<p>ちなみにHTML5でしか使用できないようです。</p>
<p>&nbsp;</p>
<p>コーポレートサイトで使用するのも特徴があっていいと思いますが、</p>
<p>電子書籍のアプリに使用できるかもしれません。</p>
<p>というか本家ではそのようなデモがありました。</p>
<p>&nbsp;</p>
<p>簡単ではありますが、デモを作成したので、</p>
<p>まずはそちらをご覧頂ければと思いますが、&nbsp;</p>
<p>IEでは見れないので、FirefoxかChromeでご覧ください。</p>
<p>四隅の角でページ送りができ、 ドラッグでページをめくるような動きもできます。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/abe/13/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>turn.jsの使用方法</h3>
<p>&nbsp;</p>
<p>まずは、head部分に、</p>
<p></p>

		<div id="crayon-64953fd57beda892293326" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="js/turn.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd57beda892293326-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57beda892293326-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd57beda892293326-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57beda892293326-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/turn.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>&nbsp;</p>
<p>記入します。</p>
<p>&nbsp;</p>
<p>そしてhtmlは、</p>
<p></p>

		<div id="crayon-64953fd57bede856020415" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div id="magazine"&gt;
　&lt;div&gt;&lt;/div&gt;
　&lt;div&gt;&lt;/div&gt;
　&lt;div&gt;&lt;/div&gt;
　&lt;div&gt;&lt;/div&gt;
　&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd57bede856020415-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57bede856020415-2">2</div><div class="crayon-num" data-line="crayon-64953fd57bede856020415-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57bede856020415-4">4</div><div class="crayon-num" data-line="crayon-64953fd57bede856020415-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57bede856020415-6">6</div><div class="crayon-num" data-line="crayon-64953fd57bede856020415-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd57bede856020415-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"magazine"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57bede856020415-2"><span class="crayon-i ">　</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd57bede856020415-3"><span class="crayon-i ">　</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57bede856020415-4"><span class="crayon-i ">　</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd57bede856020415-5"><span class="crayon-i ">　</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57bede856020415-6"><span class="crayon-i ">　</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd57bede856020415-7"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>&nbsp;</p>
<p>奇数番目が、右側のページ(1番目は表紙)で、</p>
<p>偶数番目が、左側のページになります。</p>
<p>&nbsp;</p>
<p>最後が重要なのですが、bodyの閉じタグの直前に、</p>
<p>&nbsp;</p>
<p></p>

		<div id="crayon-64953fd57bee0207369303" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script&gt;
  $('#magazine').turn();
&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd57bee0207369303-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57bee0207369303-2">2</div><div class="crayon-num" data-line="crayon-64953fd57bee0207369303-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd57bee0207369303-1"><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57bee0207369303-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#magazine'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">turn</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd57bee0207369303-3"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>&nbsp;</p>
<p>を入れるだけです。</p>
<p>&nbsp;</p>
<p>要はコンテンツの後に記述しないと動きません。</p>
<p>ここは気をつけて下さい。</p>
<p>&nbsp;</p>
<p>デモでもこれしか記述してませんが、オプションがあります。</p>
<p>また、自分で作ることになりますが、javascriptで</p>
<p>ページ数を表示したり、メニューをつけたりできるようです。&nbsp;</p>
<p>今回そこまで余裕がなかったので、</p>
<p>割愛させていただきました。</p>
<p>&nbsp;</p>
<p>海外のサイトですがメニュー付きのデモは以下になります。</p>
<p><a href="http://www.turnjs.com/" target="_blank">http://www.turnjs.com/</a></p>
<p>&nbsp;</p>
<p>冒頭で紹介した、電子書籍のデモは以下になります。</p>
<p><a href="/demo/abe/13/magazine/" target="_blank">電子書籍のようなページ</a></p>
<p>&nbsp;</p>
<p>IEとか気にせず作れるようになりたいですね！</p>

turn.jsを使った本をめくるようなコンテンツページ

様々な効果にできるイメージスライダー

css3で立体的にくるっと回転させるメニュー

要素を小刻みに動かしたり、浮かしているようにするjQuery

よく使用している汎用的で簡単なjQueryのコード

<p>最近ちょくちょくみかける パララックス効果や、スクロールの効果のプラグインを紹介します。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>jQuery Scroll Path</h3>
<p>パスを設定し、そのパスに沿って動かせるというもの。</p>
<p>今までのスクロールとは奇想天外な動きをするので、ちょっとびっくりします。</p>
<p>ランディングページとかに利用するとインパクト与えられるかも。</p>
<p>&nbsp;</p>
<p><a class="demo" href="http://joelb.me/scrollpath/" target="_blank">DEMO</a><br />
<a class="demo" href="https://github.com/JoelBesada/scrollpath/downloads" target="_blank">DOWNLOAD</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>Curtain.js</h3>
<p>コンテンツがするすると切り替わるプラグイン。</p>
<p>紙芝居みたいですね。</p>
<p>&nbsp;</p>
<p>こちらは、以前実際に試したものがありますので、そちらをご覧下さい。</p>
<p>使用方法等も記載しています。</p>
<p><a href="https://sterfield.co.jp/designer/jquery/%E3%82%AB%E3%83%BC%E3%83%86%E3%83%B3%E3%80%81%E3%81%A8%E3%81%84%E3%81%86%E3%81%8B%E3%82%B7%E3%83%A3%E3%83%83%E3%82%BF%E3%83%BC%EF%BC%9F%E3%81%BF%E3%81%9F%E3%81%84%E3%81%AB%E3%83%9A%E3%83%BC%E3%82%B8.html" target="_blank">カーテン、というかシャッター？みたいにページが切り替わるJS</a></p>
<p>&nbsp;</p>
<h2>jQuery-Parallax</h3>
<p>背景画像とコンテンツのスクロールした時の速度をずらし、インパクトとユニークさを感じることができます。 Nikeのサイトでも使用されたみたいですね。</p>
<p><a class="demo" href="http://johnpolacek.github.com/scrolldeck.js/decks/parallax/" target="_blank">DEMO</a><br />
<a class="demo" href="https://github.com/IanLunn/jQuery-Parallax/downloads" target="_blank">DOWNLOAD</a></p>
<p>&nbsp;</p>
<h2>Sequence.js</h3>
<p>このプラグインで3つの表現ができるプラグイン。</p>
<p>ちょっとオシャレなスライドと、パララックス効果のあるスライド、</p>
<p>そして、appleのようなスライド（？）とあります。</p>
<p><a class="demo" href="http://www.sequencejs.com/" target="_blank">DEMO</a><br />
<a class="demo" href="https://github.com/IanLunn/Sequence/downloads" target="_blank">DOWNLOAD</a></p>
<p>&nbsp;</p>
<h2>Parallax Content Slider with CSS3 and jQuery</h3>
<p>上記のパララックス効果のあるスライドと同等のものですね。</p>
<p>メインビジュアルとかによさそうですね。</p>
<p>&nbsp;</p>
<p><a class="demo" href="http://tympanus.net/Development/ParallaxContentSlider/" target="_blank">DEMO</a><br />
<a class="demo" href="http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/" target="_blank">DOWNLOAD</a></p>
<p>&nbsp;</p>
<h2>Parallax Slider with jQuery</h3>
<p>こちらもパララックス効果のスライドですが、サムネイル付にすることができます。</p>
<p><a class="demo" href="http://tympanus.net/Tutorials/ParallaxSlider/" target="_blank">DEMO</a><br />
<a class="demo" href="http://tympanus.net/codrops/2011/01/03/parallax-slider/" target="_blank">DOWNLOAD</a></p>
<p>&nbsp;</p>
<p>メインビジュアルであったり、サイト自体に 比較的簡単にこのような動きをつけられるようになってきてますので、</p>
<p>今後そのような流れになっていくのでしょうか。</p>
<p>&nbsp;</p>
<p>新しい技術はどんどんでてきますねー。</p>
<p>最新の表現、技術に乗り遅れないようにして、</p>
<p>よいwebサイトを制作しつづけれらるよう精進します。</p>
<p>&nbsp;</p>
<p>近々上記のようなプラグインを使ってなにか試してみたいと思います。</p>


いずれ使用してみたいパララックス及びスクロール効果プラグイン

コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」

<p>HTML5のCANVASで、円グラフジェネレーターを作ってみた。<br />
<a href="/demo/hoshino/02/">/demo/hoshino/02/</a></p>
<p><iframe loading="lazy" width="320" height="240" style="border: none; overflow: hidden; width: 560px; height: 400px;" src="/demo/hoshino/02/sf_pie_chart_201203191011.html" frameborder="0"></iframe></p>
<p>1. ページ上部でキャンバスの大きさを設定<br />
※デフォルトは画面サイズ<br />
2. 左サイドで項目を編集<br />
3. ページ上部でフォントサイズや背景色を調整<br />
4. 左サイドパブリッシュボタンで設定を反映</p>
<p>その後、ソースをダウンロードするか、埋め込みタグを取得できます。<br />
よろしければ自由に使って下さい。</p>
<p>ソースを埋め込む場合、HTML5で構築されたページでないと表示されないのでご注意を。<br />
ちなみに上記の円グラフはソースをダウンロードしてiframeで読み込んでいます。</p>


HTML5 CANVAS 円グラフジェネレーター

【symfony2】参考リンク集　＆　学習ノート

<p>Active contents design(アクティブコンテンツデザイン)<br />
というデザインの概念を提唱したい。</p>
<p>これは、ページ単位でユーザーが見ているコンテンツ、<br />
見せたいコンテンツをページを見るフローの中で<br />
細分化、最適化してユーザーに提供するデザインである。</p>
<p>具体的には、ユーザーがその瞬間見ている場所において<br />
最適なコンテンツとインターフェイスを提供する。<br />
デザイナーは、ユーザーが今見ている位置を<br />
ブラウザのx軸、y軸から判別する。</p>
<p>例えば、1ページが長い場合、自分がページ全体のどの部分にいるかを示し、<br />
あるいはページが終盤であれば次のステップをサジェストするような情報を<br />
ユーザーに対しx軸、y軸によって動的にその時必要な情報だけを提供する。</p>
<p>レスポンシブwebデザインは、とても良い概念だが、<br />
これはサイトとしてデバイスや画面サイズの違いに合わせ<br />
コンテンツとインターフェイスを最適化する考え方だ。</p>
<p>一方でアクティブコンテンツデザインは、<br />
ユーザーが見ている場所によって、<br />
コンテンツとインターフェイスを最適化する概念だ。</p>
<p>技術的には、先にも述べたがブラウザのx軸、y軸のスクロール情報により<br />
ユーザーの今見ている場所を判断してその時の処理を定義する。<br />
これはjavascriptをメインとして行い、<br />
onScrollイベントにより座標を取得する。</p>
<p>要は、「どこを見ているときに、何をするか」<br />
を制御する必要がある。</p>
<p>実装については、これを実現するためのスクリプトを作成したので、<br />
詳しくは以下の記事を参考にしていただきたい。</p>
<p>■sf_scroll_trick.js<br />
<a href="/officer/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0/100.html">/officer/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0/100.html</a></p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2012/07/05

2012/06/21

2012/06/14

2012/06/12

2012/06/07

2012/05/31

2012/05/31

2012/05/24

2012/05/17

2012/05/10

2012/05/03

2012/04/26

2012/04/05

2012/03/22

2012/03/20

2012/03/15

2012/03/11

2012/03/11