WEB・アプリ開発・音楽制作 | Kaleidoscope » ダウンロード http://blog.kaleido-jp.net WEB・アプリ開発・音楽制作 Mon, 24 Nov 2014 00:40:02 +0000 ja hourly 1 http://wordpress.org/?v=3.6 スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン http://blog.kaleido-jp.net/web/%e3%83%95%e3%83%aa%e3%83%83%e3%82%af%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89/ http://blog.kaleido-jp.net/web/%e3%83%95%e3%83%aa%e3%83%83%e3%82%af%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89/#comments Fri, 29 Apr 2011 02:58:50 +0000 kosuke http://blog.kaleido-jp.net/?p=227

Demo of Flick Slide

フリック式スライド　デモ

※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。

スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。

【デモを見る（iPhone・Androidで見てください）】
【ダウンロード】



なぜプラグイン化したか

横向き対応がハードルを高くする

ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。

今現在、ディスプレイサイズが多様なAndroid端末が普及しており、横向きになったときにそれぞれの端末において横幅を変える必要があります。わざわざ各機種のディスプレイサイズを登録しておくようなことは、フロントエンドの処理としては非現実的です。

そこで、このプラグインはフレキシブルな端末対応をおこなうために、端末の向きが変わった際に横幅を取得しなおすという処理をおこなっています。

プラグイン化したことで、上記のような手の込んだことを毎回書かなくてもよくなります。

実装方法

ダウンロードしたファイルを解凍後、
jquery.flickslide.jsとflickslide.cssをご自身のサイトの任意の箇所に置いてください。

【解凍後のファイル】
js – jquery.flickslide.js　：プラグインJSファイル　
css – flickslide.css ：　プラグイン用CSSファイル
– arrowL.png 　：　左矢印画像
– arrowR.png　：　右矢印画像

HTML
[html]
<script src="js/jquery.flickslide.js"></script>
<link rel="stylesheet" href="css/flickslide.css" type="text/css" />
[/html]
JavaScript（jQuery）
[javascript]
$(‘適用したい繰返し要素’).flickSlide({target:’差換え要素’});
[/javascript]

※cssフォルダに入っている画像は、flickslide.cssと同じディレクトリに置いてください。
ただ、CSSのカスタマイズをすることで、ご自身でご用意された画像などに変更することができますので、
その場合は、同じディレクトリである必要はありません。


実装例

画像を並べたような下記HTMLがあったとします。

HTML
[html]
<div id="mainImages" class="mainImageInit">
<ul>
<li id="mainImage0">
<a href="/category/web/html5/">
<img src="/images/html5.jpg" />
</a>
</li>
<li id="mainImage1">
<a href="/category/web/smart/">
<img src="/images/smart.jpg" />
</a>
</li>
<li id="mainImage2">
<a href="/category/web/music/">
<img src="/images/music.jpg" />
</a>
</li>
<li id="mainImage3">
<a href="/category/web/iphone/">
<img src="/images/app.jpg" />
</a>
</li>
<li id="mainImage4">
<a href="/category/web/jquery/">
<img src="/images/lovejquery.jpg" />
</a>
</li>
<li id="mainImage5">
<a href="/category/web/moviemusic/">
<img src="/images/moviemusic.jpg" />
</a>
</li>
</ul>
</div>
[/html]

上記のようなHTMLがあった場合、JavaScriptは下記のように記述する。

JavaScript
[javascript]
$(‘#mainImages li’).flickslide({target:’#mainImages ul’});
[/javascript]

適用したい繰返し要素：#mainImages li
スライドとしたいのはli要素の中身なので、上記の用に指定。

差換え要素：#mainImages ul
プラグインが発動されると、UIを生成。差換え要素で指定された箇所と置き換わります。

※iPhone・Androidでアクセスしないとプラグインが自動的に発動を止めますので、テストする際は必ず実機やシミュレータでおこなってください。Mac・PC版のSafariなどのユーザーエージェント変更では、見た目がだいぶ異なると思います。


機能説明

・自動的に5秒ごとにスライド
・スワイプによるスライド
・フリックによるスライド
・横向き時に自動的にサイズ補正・センター寄せレイアウト
・ページング的UIの自動生成
・「前へ」「次へ」のボタン自動生成
・ユーザーエージェント判定し、iPhone・Androidでない場合は発動しません。
・CSSのカスタマイズによるデザイン変更

※ごく稀にAndroidでバグが起きるようです。激しいスワイプやフリックについていけないようです。
　これについてはOSなどに依存するのかなぁという認識です。ゆっくりスワイプしなおすと正常に動作します。
※内部的にはかなりベタ書きで、美しいプログラムではありませんのでご了承ください。
　ご自身でUIなどの開発ができず、とりあえずUIを組込みたい方向けです。
※ライセンスはMITでお願いします。ご使用については一切の責任を持ちませんので、ご理解いただけますようお願いいたします。
※ご要望があれば、これらの設定はパラメータ制御できるようにバージョンアップ予定です。
カスタマイズやご自身のサイトへの最適化のご相談・ご依頼などはコメントもしくはメールでお願いいたします。あくまで業務としてのご相談やご依頼を前提としてください。Web関連の業者の方に無条件での回答などはいたしませんので、ご了承ください。
※Android端末はIS03のみしか確認できていません。他のAndroid端末で表示をご報告いただけたら幸いです。
※【追記（2011.4.30 23:55）】1ページにつき1つまでの実装可能です。またスライドさせる要素は極めてシンプルな要素の方が良いです。
※【追記：2011.5.1 23:36】デモについて最初大きい画像が表示されますが、単純に画像を並べただけのHTMLソースですのでそのようになります。このサイトトップでは、CSSでdisplay:noneしておきページロード後に表示という処理をおこなっているため綺麗に表示されます。プラグイン自体は、あくまでUIの生成・置換えのみの機能ですので、同様の処理をおこなう場合は、対象となる要素をdisplay:noneするなど、独自でCSSやJSの追加をおこなってください。
※【追記：2011.5.2 21:45】上記の画像が一瞬大きく表示されるのをプラグイン側でもある程度制御できたので、修正版をアップしております。2011/5/2 21:45以前にダウンロードされた方は、よろしければダウンロードしなおすことをおすすめいたします。
※【追記：2011.5.6】Androidではブラウザのメニューを開いた際、ローテーションスクロールのキューが溜まり、バグが起きてしまうようです。ブラウザメニューを開いた検知などができないため、次回バージョンアップでローテーションをOFFする設定を設けたいと思っています。


レイアウトや内部の解説

スマートフォンサイトでは横向き時のサイズ変更に対応した、手の込んだレイアウトを組める必要があります。
そのレイアウト術は、スマートフォンサイトを組む上で、今後必要となるスキルだと思われるので、次回のエントリで紹介したいと思っています。

このサイトのスマートフォン対応の全体的なことは、下記エントリーに書いていますので、こちらも合わせてご一読いただけると幸いです。

スマホ最適化でやったこと

また、今回のプラグインはサイトトップで実装されています。

サイトトップ

【追記：2011.5.1】エントリのタイトルに「1行」という表現は不適切であるとのご指摘をいただきました。
エントリ名から削除いたしました。誤解を与えてしまうような表現を用いまして、大変申し訳ありませんでした。

他の人気エントリ

]]> http://blog.kaleido-jp.net/web/%e3%83%95%e3%83%aa%e3%83%83%e3%82%af%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89/feed/ 8 スマホサイト：このブログで使ったサンプルソースのキャプチャ並べてみた。ソースDL可。 http://blog.kaleido-jp.net/web/iphone/%e3%82%b9%e3%83%9e%e3%83%9b%e3%82%b5%e3%82%a4%e3%83%88%ef%bc%9a%e3%81%93%e3%81%ae%e3%83%96%e3%83%ad%e3%82%b0%e3%81%a7%e4%bd%bf%e3%81%a3%e3%81%9f%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%82%bd%e3%83%bc/ http://blog.kaleido-jp.net/web/iphone/%e3%82%b9%e3%83%9e%e3%83%9b%e3%82%b5%e3%82%a4%e3%83%88%ef%bc%9a%e3%81%93%e3%81%ae%e3%83%96%e3%83%ad%e3%82%b0%e3%81%a7%e4%bd%bf%e3%81%a3%e3%81%9f%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%82%bd%e3%83%bc/#comments Thu, 17 Feb 2011 05:56:33 +0000 kosuke http://blog.kaleido-jp.net/%e6%9c%aa%e5%88%86%e9%a1%9e/%e3%82%b9%e3%83%9e%e3%83%9b%e3%82%b5%e3%82%a4%e3%83%88%ef%bc%9a%e3%81%93%e3%81%ae%e3%83%96%e3%83%ad%e3%82%b0%e3%81%a7%e4%bd%bf%e3%81%a3%e3%81%9f%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%82%bd%e3%83%bc/

即座にDLできるようにアーカイブ化。

※naruさんのご指摘により、2.19以前のサンプルソースのCSSが微妙だったことがわかりました。矢印部分のリンクが有効になってなかったです。

（あまりいらっしゃらないとは思いますが…）もしそれ以前にDLされた方は、現在修正版をお使いください。

ご報告いただいたnaruさん、ありがとうございました。

（ちなみに、ここでDLできるサンプルなどなど、動作保証をするものではないのでご了承ください）

f:id:izit_kosuke:20110216201054j:image

smart_sample02.zip 直

スマホサイトのリスト型メニューを何パターンか作ってみた

仕事がいったん落ち着きはしたものの、やっぱり僕の周りでも今まで以上にスマホスマホと騒いでます。

スマホサイトといえば、リスト型メニュー？がスマホならではですよね。

今後のスマホサイト対応の波に速攻対応できるように

今のうちに、リスト型メニューをいくつかのパターンで作っておくことにしました。

（だいぶ行き当たりばったりのエントリーになってきました。。。）

スマホサイトのデザインで重要になってくるのが、CSS3の活用だと思ってます。

なぜなら、3G回線などでは通信速度が遅いため、ページ全体のデータ量を軽くする必要があるのです。

となると、極力画像使用を抑えることになるのですが、やっぱり見た目にきれいなページにしたいですよね。

そこでCSS3が活躍してくれるのです。

ポイントとなるCSSを載せておきます。

参考になる部分はご活用いただいて、ここはこうしたほうがいいんじゃ？って部分はツッコミおねがいします！

【パターン１】

f:id:izit_kosuke:20110216201054j:image:left

★CSSのポイント★

●前回までのエントリで紹介したPC⇔スマホサイトのパターン

↓サンプルファイルのダウンロード

smart_sample02.zip 直

#globalNav li{
/*リストの基本的なレイアウト*/
margin:0;
float:none;
clear:both;
width:100%;
text-align:left;
padding:0;
border:1px #4294E6 solid;
border-bottom:0px;
　display:block;
/*グラデーション*/
background: -webkit-gradient(
linear, left top, left bottom,
from(#6d95fc),
to(#374ec4));
/*テキストにドロップシャドウ*/
text-shadow:
0px 1px 1px rgba(0,0,0,1),
0px -1px 0px rgba(255,255,255,0.3);
　　/*矢印画像の追加*/
　　#globalNav li>a:after{
　　　content:url(../images/arrowR.png); /*矢印画像URI*/
　　　font-size:18px;
　　　font-weight:bold;
　　　padding-right:10px;
　　　color:#FFF;
　　　display:table-cell; /*table-cellにすることで、縦方向の中央寄せを可能に。*/
　　　vertical-align:middle; /*縦方向の中央寄せ。*/
　　}
}

【パターン２】

パターン２以降、いずれも基本的なHTMLソースは下記です。

基本パターンの方は、いずれも画像を使ってないですよ！

<div id="globalNav">
<ul>
<li><a href="menu1.html" title="メニュー1">メニュー1</a></li>
<li><a href="menu2.html" title="メニュー2">メニュー2</a></li>
<li><a href="menu3.html" title="メニュー3">メニュー3</a></li>
<li><a href="menu4.html" title="メニュー4">メニュー4</a></li>
<li><a href="menu5.html" title="メニュー5">メニュー5</a></li>
</ul>
</div>

f:id:izit_kosuke:20110216203144j:image

★CSSのポイント★

＜サイトの背景部分＞

  • グラデーション

＜リストメニュー部分＞

  • 横幅いっぱいではなく、ちょっと余白（padding）付ける
  • 最初と最後の行のみ角丸
  • ドロップシャドウ
  • グラデーション

↓サンプルファイルのダウンロード↓

02.zip 直

/*＜サイトの背景部分＞*/
body{
margin:0;
padding:0;
font-size:12px;
/*ここでグラデーション*/
background: -webkit-gradient(
linear, left top, left bottom,
from(#50e2ff),/*グラデーションの上端の色*/
to(#ffffff));/*グラデーションの下端の色*/
　　/*グラデーションをY方向に繰り返さないようにする*/
background-repeat:repeat-x;
}
/*＜リストメニュー部分＞*/
/*メニューを画面いっぱいではなく、ちょっと余白付きに*/
#globalNav ul{
list-style:none;
display:block;
padding:10px 10px; /* ここで余白をつける */
}
/*リストの基本的なCSS*/
#globalNav li{
margin:0;
float:none;
clear:both;
width:100%;
text-align:left;
padding:0;
border:1px #8cf solid;
border-bottom:0px;
display:block;
/*1行ごとのグラデーション*/
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
to(#b5e8ff));
-webkit-box-shadow: /*リスト一行ごとにドロップシャドウ。
　　　　　　　　　　　　　　ULにつければ良さそうだが、ULは角丸してないので*/
0px 3px 3px rgba(000,000,000,0.1);
}
/*一番上の行を、左上と右上の角だけ丸くする*/
#globalNav li:first-child{
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
/*一番下の行を、左下と右下の角だけ丸くする*/
#globalNav li:last-child{
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-bottom:1px #8cf solid;
}

たとえばこんなふうに発展できます！

f:id:izit_kosuke:20110217013934j:image

↓サンプルファイルのダウンロード↓

02v.zip 直

さわやかかつ落ちついた感じです。

見てるだけで気分がいいですね。

【パターン３】

f:id:izit_kosuke:20110217014900j:image

★CSSのポイント★

パターン２と違うのは、メニューをボーダーで囲んでいる部分です。

色使いを変えて太めのボーダーを描くだけで、こんなにかわいくなっちゃいます。

これも全然簡単ですよ。

＜リストメニュー部分（パターン２と違う部分のみ）＞

  • ボーダー
  • リストのサイジング
  • 途中経過も指定したグラデーション

↓サンプルファイルのダウンロード↓

03.zip 直

#globalNav li{
…
/*ボーダーを5pxで描く*/
border:5px #F9C solid;
/*ボーダー分、リストの幅が広がるので、ボーダー込みでサイジングする*/
-webkit-box-sizing: border-box;
…
/*リスト1行ごとのグラデーション*/
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff), /* 上端の色 */
color-stop(0.50, #ffffff), /* 途中経過の色1 */
color-stop(0.50, #fff0f8),　/* 途中経過の色2 */
color-stop(0.95, #ffd1e7), /* 途中経過の色3 */
to(#ffffff));/* 下端の色 */
}

発展させるとこうなります！

f:id:izit_kosuke:20110217014901j:image

↓サンプルファイルのダウンロード↓

03v.zip 直

なぜか相当気の早いクリスマスなデザインを作ってしまいましたが…

かわいいですよね。

【パターン４】

f:id:izit_kosuke:20110217014902p:image

★CSSのポイント★

パターン１～３と違うのは、リストのグラデーションの淵がうっすらと明るめになってますよね。

CSS3はこんなディティールの指定までできちゃうんです。

＜リストメニュー部分（パターン２・３と違う部分のみ）＞

  • インナーシャドウ

↓サンプルファイルのダウンロード↓

04.zip 直

#globalNav li{
　　　…
-webkit-box-shadow:
/*1行ごとにドロップシャドウ（幅いっぱいとってるので見えないですが…） */
0px 3px 3px rgba(000,000,000,0.1),
/*1行ごとのインナーシャドウ */
inset 0px 0px 3px rgba(255,255,255,0.7);
}

発展させるとこうなります！

f:id:izit_kosuke:20110217014903j:image

↓サンプルファイルのダウンロード↓

04v.zip 直

ディティールを調整することで、クールな印象をより強くすることができます。

★登場したCSS3を簡単に解説★

グラデーション

example{
background:-webkit-gradient(
linear,
開始位置, /* 単純に上から下にグラデーションする場合は、left top　でよいでしょう*/
終了位置, /* 単純に上から下にグラデーションする場合は、left bottom　でよいでしょう*/
from(開始色),
to(終了色),
color-stop(追加位置, 色)); /*　今回は、「追加位置」は0～100の間で指定しています。0～1.0の間でも良いみたいです*/
}

角丸

example{
-webkit-border-top-left-radius: 8px; /*左上を指定*/
-webkit-border-top-right-radius: 8px; /*右上を指定*/
-webkit-border-bottom-left-radius: 8px;　/*左下を指定*/
-webkit-border-bottom-right-radius: 8px;　/*右下を指定*/
/*全ての角を同じピクセル数で指定する場合は、
        -webkit-border-radius:8px;
        と指定することができます。*/
}

ボックスサイジング

example{
-webkit-box-sizing: border-box; /* border-boxでボーダー幅込みでの、ボックスサイズに。
                                                                   content-boxでpadding と border の幅を含まないボックスサイズとなります。
}

今回は、比較的シンプルなリストメニューでしたが、次回はもうすこし複雑なレイアウトのものを作りたいと思ってます。

他の人気エントリ

]]> http://blog.kaleido-jp.net/web/iphone/%e3%82%b9%e3%83%9e%e3%83%9b%e3%82%b5%e3%82%a4%e3%83%88%ef%bc%9a%e3%81%93%e3%81%ae%e3%83%96%e3%83%ad%e3%82%b0%e3%81%a7%e4%bd%bf%e3%81%a3%e3%81%9f%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%82%bd%e3%83%bc/feed/ 5