Kaleidoscope このページをアンテナに追加 RSSフィード

2011-04-24 ブログ引越しました。 このエントリーを含むブックマーク このエントリーのブックマークコメント

こちらになります。

http://blog.kaleido-jp.net/

はてな好きなんだけどなー。

どうしてもデザイン凝り出すと限界があるので、引越しました。

2011-02-27

スマホサイト制作:URLバーをページ読

スマホサイト制作:URLバーをページ読込み完了時に引っ込める方法

今回もあまりがっつり書ける時間が無いので、超小技のエントリー( ̄▽ ̄;)

たとえば、Yahooさんとかがやっているんですが、

「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。

Yahoo! JAPAN (スマートフォンサイト)

Yahooさんの手法とは違うかもしれませんが)

その方法を紹介します。

僕の場合は、ページ読込みが完了した時に1ピクセルだけスクロールさせています。

そもそも、iOSSafariAndroidの「ブラウザ」は、

ページ読み込み完了時に、スクロール位置が1ピクセル以上あった場合、

URLバーが引っ込む仕様のようです。

(あくまで推測。ページ内リンクなどで、そうなるのが根拠です。)


まぁ、これのなにがいいのかというと、

ページの表示範囲を少し広く見せられる。

ってところでしょうか。


やり方は簡単です。

JavaScriptでWindowオブジェクトの読み込み完了時に、

1ピクセルのスクロールをしてあげます。

jQueryで記述すると

  $(window).bind('load',function(){ //←windowオブジェクトにloadイベントをバインド
    setTimeout(function(){
	window.scrollTo(0,1); //←windowオブジェクトを1ピクセルスクロール
 },1);
  });

setTimeoutについては、リロード時など読み込みが早すぎて動作が追いつかない場合があるため

やや遅らせるという処理をおこなっています。

記述は違えど、こういう手法が一般的のようです。

逆に他に良い方法があれば、教えていただければです!


動作デモ

iPhoneAndroidで見てください。iPhone 3GS/IS03で確認済み)




※ページ内容によっては、setTimeoutの遅延をもう少し大きくしてあげるといいかもです。

※前回のエントリーで「URLバーを隠す行為」とコメントがありましたが、今回についても隠すことを推奨しているわけではありません。

2011-02-19

izit_kosuke2011-02-19

スマホサイト:Webアプリモードで意外と書かれていない落とし穴

ちょっと今回はまめ知識的な内容です。

最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。

jQuery Mobileなどを利用した開発方法は置いといて)

HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。


とくに、よくmetaタグを使った「Webアプリモード(フルスクリーンモード)」にする方法が書かれていたりします。

<meta name="apple-mobile-web-app-capable" content="yes" />

これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。

これで、サイトをアプリっぽく見せられる!ってちょっと興奮しちゃいますよね。


ただ、これって意外な落とし穴があるんです( ̄▽ ̄;)


今回は、僕が知ってる大きな2つの注意点を挙げます。


★基本的にリンクは全てJavaScript化、もしくはページ内リンク(#使ったやつ)にする必要がある。

★「戻る」ボタン的な用意がほぼ必須になる。


なぜかというと、ふつうのリンク記述だとせっかく設定したWebアプリモードから抜けて、

Safariに飛ばされてしまうのです


では、前回の記事のサンプルソースを使って、検証してみたいと思います。





前回使ったサンプルソースですが、ページとしてはこんな感じです。

f:id:izit_kosuke:20110219035000p:image


このサンプルに例のmetaタグとアイコンを設定して、Webアプリ風にしてみます。

<!--Webアプリモード(フルスクリーンモード)-->
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<!--ホームアイコンの設定-->
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />

(サンプルをサーバにアップしてみましたので、iPhoneお持ちの方はぜひお試しを)

サンプル(外部サイトです)

アクセスしたら、「ホーム画面に追加」をおこないます。

※下の画像は英語ですが、日本語環境の場合は「ホーム画面に追加」と出ているので、それを選んでください。

f:id:izit_kosuke:20110219040228p:image


そうするとこういう画面になります。

f:id:izit_kosuke:20110219040441p:image


右上の「追加」ボタンを押して、追加するとホーム画面にアイコンが追加されます。

f:id:izit_kosuke:20110219040442p:image


そして、このアイコンを押してサイトにアクセス、というかWebアプリを起動します。

すると…


URLバーなどが無くなり、ネイティブアプリっぽくなりました!

f:id:izit_kosuke:20110219040903p:image

ちなみに、ここでメニュー部分のHTMLソースがどうなっているか見てみましょう。

(※spanが多く入って、あまりかっこはよくないですが…)

      <!--globalNav-->
      <div id="globalNav" class="clearfix">
        <ul>
          <li><a href="second.html" title="iMac"><span><img src="images/icon1.png" width="48" height="48" /></span><span>iMac</span></a></li>
          <li><a href="second.html" title="MacBook Pro"><span><img src="images/icon2.png" width="48" height="48" /></span><span>MacBook Pro</span></a></li>
          <li><a href="second.html" title="iPhone"><span><img src="images/icon3.png" width="48" height="48" /></span><span>iPhone</span></a></li>
          <li><a href="second.html" title="Search"><span><img src="images/icon4.png" width="48" height="48" /></span><span>Search</span></a></li>
          <li><a href="second.html" title="RSS"><span><img src="images/icon5.png" width="48" height="48" /></span><span>RSS</span></a></li>
        </ul>
      </div><!--/globalNav-->

なんの変哲もないソースです。

全てリンク先はsecond.htmlに飛ぶようにしてます。

なので、当然Webアプリのリンクを押すと、画面が遷移すると思いますよね。


ところが、メニューを押してみると…


なんとSafariに飛ばされてしまったぁ。。。

f:id:izit_kosuke:20110219043034p:image:left

f:id:izit_kosuke:20110219041853p:image


こ、これではWebアプリにした意味があんまり無い。。。


これは、はっきりと仕様確認したわけじゃないのですが、

#〜なページ内リンク以外は、アプリの外とみなす仕様になっているんだと思います。



で、こんなときどうするかというと、

僕が知ってる手っとり早い方法は、リンクはJavaScriptのonClickイベントで処理することです。

わざわざページ内リンクにして、どうにか他のページに遷移する仕組みを作るのはけっこう大変です。

単純に画面遷移をおこないたいなら、これで事足りると思います。

記述がすっきりなjQuery使います。

jQuery読込み

<!--だいぶすっきりしてますが、一応HTML5記述で-->
<script src="js/jquery-1.5.min.js"></script>

下記のようなスクリプトを記述します。

(ページにスクリプトを直に書くのは好きじゃありませんが…今回はとりあえず直に)

  $(function(){
   //ページ内のaタグ群を取得。aTagsに配列として代入。
    var aTags = $('a'); 
       //全てのaタグについて処理
	aTags.each(function(){
          //aタグのhref属性からリンク先url取得
	  var url = $(this).attr('href');
   //念のため、href属性は削除
	  $(this).removeAttr('href');
          //クリックイベントをバインド
	  $(this).click(function(){
	    location.href = url;
	  });
    });
  });

そうすると、Safariに飛ばず画面遷移するようになりました。

f:id:izit_kosuke:20110219084845p:image



しかし…お気づきかと思いますが、ブラウザの各バーを消しているので、

戻ることができません。


そこで、2ページ目に「戻る」ボタンを付けます。

jQuery使うまでもありません。

    <div id="backButton"><a href="javascript:history.back();">←戻る</a></div>

f:id:izit_kosuke:20110219084846p:image


戻れるようになりました。

リンク飛べるようになった方は、こちらです。

サンプル2(外部サイトです)


徹底解説HTML5APIガイドブック ビジュアル系API編

徹底解説HTML5APIガイドブック ビジュアル系API編

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

izit_kosuke2011-02-17

スマホサイト:このブログで使ったサンプルソースのキャプチャ並べてみた。ソースDL可。

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



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

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

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

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


f:id:izit_kosuke:20110216201054j:image

smart_sample02.zip 直

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

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

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

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

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


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

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

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

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

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


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

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



【パターン1】

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; /*縦方向の中央寄せ。*/
  }
}


【パターン2】

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

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

      <!--globalNav-->
      <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><!--/globalNav-->

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 直

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

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


【パターン3】

f:id:izit_kosuke:20110217014900j:image

CSSのポイント★

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

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

これも全然簡単ですよ。


<リストメニュー部分(パターン2と違う部分のみ)>

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

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 直

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

かわいいですよね。




【パターン4】

f:id:izit_kosuke:20110217014902p:image

CSSのポイント★

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

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


<リストメニュー部分(パターン2・3と違う部分のみ)>

  • インナーシャドウ

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

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 の幅を含まないボックスサイズとなります。
}

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

mk_mizuhomk_mizuho 2011/02/17 08:49 初めまして。スマホサイトの作成にもうすぐ仕事で取り掛かるため、今情報収集中のデザイナーです。
非常にわかりやすいブログでついコメントしてしまいました。勉強になりました。ありがとうございます。
次回も楽しみにしてます!

izit_kosukeizit_kosuke 2011/02/17 10:22 >mk_mizuhoさま
ご覧いただきありがとうございます。
まだまだ自分も勉強中な部分が多いですが、少しでもお役に立てたようでしたら幸いです。
こちらも色々と教えていただければです。
今後ともよろしくお願いします!

2011-02-09

izit_kosuke2011-02-09

PCサイトをスマホ対応 CSSテク自己まとめ(1・2回まとめ)

PCサイトをスマホ対応するという記事を1・2回と続けてみて、意外とボリューム満載になってしまったので、

一旦ここまでのCSSテクについてまとめます。

■第1回 メニュー編

■記事はこちら 

f:id:izit_kosuke:20110130014951p:image


タグでViewportの設定。メディアクエリによるCSS振り分け。

スマホサイトを作る上で欠かせない準備。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!--viewportの指定-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--/viewportの指定-->
<!--メディアクエリでPC用・スマホ用CSSを振り分け-->
<link media="only screen and (min-device-width:481px)" href="css/main.css" type="text/css" rel="stylesheet" />
<link media="only screen and (max-device-width:480px)" href="css/imain.css" type="text/css" rel="stylesheet" />
<!--/メディアクエリでPC用・スマホ用CSSを振り分け-->

<link href="css/main.css" type="text/css" rel="stylesheet" />

★#containerブロックのリキッド化。overflow:hidden化。

ページの横幅より内部要素がハミ出して、無駄な横スクロールが発生するのを防ぐ。

iPhoneではかなり有効。Androidでは内部要素の横幅が親要素より上回らないように気をつける。


#container{
	margin:0 auto;
	/*スマホ向け*/
	width:100%;
	overflow:hidden;
	/*/スマホ向け*/
}


★グローバルメニューの縦並び化&リキッド化。

PCサイトで横並び(float:left; width:固定)となっているのを、

float:none; width:100% とすることで実現。

#globalNav li{
	margin:0;
	/*スマホ向け*/
     float:none;
	clear:both;
	width:100%;
	text-align:left;
	padding:10px 0 10px 20px;
	/*/スマホ向け*/
	border:1px #999 solid;
	background-color:#CCC;
    display:block;
}


■第2回 HTMLCSSで画像を操る編(前編)

■記事はこちら

f:id:izit_kosuke:20110207210143p:image


1.要素の取捨選択

要らない要素はdisplay:none;

    <!--header-->
      <div id="header">
        <div id="logo"><h1><a href="index.html"><img src="images/logo.jpg" alt="スマホ対応サイト制作" /></a></h1></div>
        <div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div> <!-- ←これがいらなそう。-->
      </div><!--/header-->
#headerMain{
	display:none;
}

2.HTMLCSSだけで画像を振り分ける

HTMLソースにPC用とスマホ用の両画像を配置。idやclass指定で、CSSでdisplay:none;

    <!--header-->
      <div id="header">
        <div id="logo">
        <h1>
          <a href="index.html">
            <img src="images/logo.jpg" alt="スマホ対応サイト制作" class="logo_pc" /><!--PC時のロゴ class=logo_pcを指定-->
            <img src="images/logo_i.jpg" alt="スマホ対応サイト制作" class="logo_i" /><!--スマートフォン時のロゴ class=logo_iを指定-->
            </a>
          </h1>
        </div>
        <div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>
      </div><!--/header-->

main.css(PC用CSS)→ .logo_i を display:none;

imain.cssスマホCSS) → .logo_pc をdisplay:none;


main.cssに追記

/*↓PCでは不可視にする↓*/
.logo_i{
	display:none;
}
/*↑PCでは不可視にする↑*/

imain.cssに追記

/*↓スマホでは不可視にする↓*/
.logo_pc{
	display:none;
}
/*↑スマホでは不可視にする↑*/


■第2回 HTMLCSSで画像を操る編(後編)

■記事はこちら

f:id:izit_kosuke:20110208020129p:image


3.CSS3グラデーションの活用&疑似要素を使ったカスタマイズ

画像の代わりにCSS3グラデーションを使う。疑似要素beforeとafterを活用する。

※この記事はぜひとも本文を読んでほしいです(笑)


まず、メニューの要素構成のイメージです。

イメージのように、CSSの疑似要素を活用することでHTMLを書き換えずに、

デザインを構成することができます。

f:id:izit_kosuke:20110209223434p:image


グラデーション

#globalNav li{
	/*↓スマホ向け (第1回 -メニュー編-)↓*/
	margin:0;
    float:none;
	clear:both;
	width:100%;
	text-align:left;
	/*/↑スマホ向け(第1回 -メニュー編-)↑*/
	/*↓スマホ向け (第2回 -画像編-)↓*/
	padding:0;
	border:1px #4294E6 solid;
	border-bottom:0px;
	/*画像どおりのグラデーション
    background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#79b3e6),
		color-stop(0.50, #0066cc),
		color-stop(0.50, #003399),
		color-stop(0.69, #2e63b8),
		to(#4793d1));
	*/
        /*グラデーション*/
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#6d95fc),
		to(#374ec4));
    display:block;
        /*テキストにドロップシャドウ*/
	text-shadow:
		0px 1px 1px rgba(0,0,0,1),
		0px -1px 0px rgba(255,255,255,0.3);
	/*/↑スマホ向け(第2回 -画像編-)↑*/
}

擬似要素でメニュー内容を表示。

/*aタグをブロック要素に*/
#globalNav li>a{
	display:block;
	width:100%; /*リキッドに*/
	height:auto; /*リキッドに*/
	padding:10px 0; /*paddingを上下に指定することで、少し高さを持たせる*/
	color:#333;
	text-align:left;
	text-decoration:none;
}
/*aタグ内の先頭に、疑似要素を追加。aタグのtitle属性の内容を表示させる */
#globalNav li>a:before{
	content:attr(title); /*aタグのtitle属性を表示*/
	width:100%; /*リキッドに。*/
	font-size:18px;
	font-weight:bold;
	padding-left:10px;
	color:#FFF;
	display:table-cell; /*table-cellにすることで、縦方向の中央寄せを可能に。*/
	vertical-align:middle; /*縦方向の中央寄せ。*/
}

擬似要素で「>」を表示。

/*矢印画像の追加*/
#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; /*縦方向の中央寄せ。*/
}


まとめだけでも随分長くなってしまった。。。

ソース書かなきゃいいのかな。

追記:連載のタイトル変えました。この連載の主旨って、「PCサイトをスマホ対応する」っていうことだな〜と気づきました(笑)