Google Chromeでスマホサイト制作
Google Chromeでスマホサイト制作 @ichigamiさんからTwitterで「Chrome の開発者ツール、下でなくて右に表示させることができるの知らんかったー」とコメントを貰ったので、普段わたしがどんな感じでスマホサイト制作をしているかご紹介します。 追記：最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う 基本的には開発者ツールは右に表示。これは開発者ツールの左下のアイコンを長押しで設定できます。 他にも右下の歯車の設定から、「Device metrics」にチェックを入れ「Screen resolution」を320×480に設定して表示領域をスマートフォンと同じくらいになるように設定して、「Emulate touch events」にチェックを入れタッチイベントをエミュレートしています。案件によ
Androidのposition:absoluteとフォームの問題
Androidのposition:absoluteとフォームの問題 Androidではposition:absoluteをした要素内にフォーム部品があると色々と不具合があるようです。 例えば、次のようにフォーム部品の背景になにか文字列があるような状態にしてしまうとAndroid2.2でフォームが選択できなくなります。Android2.1ではちゃんと選択できた。 <style> body{ margin:0; } #search{ width:100%; height:100px; background:blue; position:absolute; } #back{ width:100%; height:100px; } </style> <div id="search"> <br> <select> <option>選択1</option> <option>選択2</option> <
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
Androidでfont-weight:boldを適用する方法
Androidでfont-weight:boldを適用する方法 Androidでは日本語にfont-weight:boldが適用されません。 <p style="font-weight:normal">ノーマル normal</p> <p style="font-weight:bold">ボールド bold</p> このHTMLをAndroidで確認すると次のようになります。 日本語だけ太字になっていないですね、デフォルトのフォントにbold体がないらしいんですが、デバイス毎にフォントも変わるのでfont-familyでは回避できず。 対策としてはfont-weightの代わりにtext-shadowを利用して太字にします。 <p style="text-shadow:1px 0 0 black">ボールド bold</p> ただ、この方法だとiPhoneでは太字になるけどAndroidで
Android端末のdevicePixelRatio
Android端末のdevicePixelRatio WebKit系のブラウザではdevicePixelRatioというプロパティが定義されています。これは画像1pxを実際のデバイス上で何pxとしてレンダリングを行うかというもの。 CSSでdevicePixelRatioを特定できる -webkit-min-device-pixel-ratioなどは iPhone4のRetina Display対応などで一時期注目されましたね。 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG JavaScriptでは次のように取得できます。 window.devicePixelRatio そこで、Android端末のdevicePixelRatioがどうなってるかTwitterで色々な方に協力いただき調べてみました。
Androidブラウザでviewportのwidth指定
Androidブラウザでviewportのwidth指定 AndroidブラウザはiPhoneのようにviewportのwidthに数値が指定できません。(ネットを見ていると指定できると書いているページもよくあるのでデバイスによって違うのかも？) タイムリーに@takazudoが同じようなことをやっていて、対応方法が公開されていました。 ただ、私の検証環境、IS01やGALAXY S、Androidシミュレータだとうまく動かず。デバイスの実装差異かなんかかな。 で、色々と試行錯誤していたのですが、meta要素で「content="width"」を指定せず、JavaScriptで次のように指定すると「content="width=640"」っぽい表現が可能です。 $(window).bind('resize load', function(){ $("html").css("zoom" ,
Google Chrome でAjaxを利用しローカルファイルにアクセスする
Google Chrome でAjaxを利用しローカルファイルにアクセスする Google Chrome5.0.335以降でどうやらローカルファイへのアクセスポリシーが変更されており、AjaxのXMLHttpRequest でローカルのHTMLなどからローカルファイルにアクセスが出来なくなってしまったようです。[5.0.335 Update] ローカルサーバーなどを立てて開発している場合は問題ないんですが、たんなるローカルファイルとして開発しているとやっかいですね。 解決方法としては、Google Chromeの起動オプションに次のコードを追加します。 -allow-file-access-from-files 起動オプションはWindowsですと、アプリのショートカットアイコンを右クリックしてプロパティを選択、リンク先を次のように変更することで付加できます。 C:\Users\...(中
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transitionAnimate」[to-R]
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」 iPhone / iPadではjQueryのanimateメソッドが重いのでCSS3のアニメーションを使いましょうというのがセオリーになっていますが、CSSでアニメーションって結構めんどくさかったりします。 そこで、jQueryのanimateメソッドと同じような記述をするとCSS3のtransition でアニメーションするjQueryプラグイン「jQuery transitionAnimate」を作成しました。 jQuery.transitionAnimate.js 新しいバージョンを「transitionAnimateをバージョンアップ」からダウンロード可能です $(セレクタ).transitionAnimate(params, duration, easi
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」 iPhone/iPadでダブルタップをJavaScriptで実装するで紹介してたダブルタップの実装方法をjQueryプラグインにしてみました。 利用方法 jQuery本体とjquery.event.dblTap.jsをhead要素などで読み込みます。 <script src="jquery-.min.js"></script> <script src="jquery.event.dblTap.js"></script> 後は「dblTap」をbindするとdblTapイベントが実装できます(クリックにも反応するようにしています)。 $("button").bind("dblTap",function(){ alert("duble tap"); }) デモ 初期設定では5
jQueryでiPhone/iPadの向きを検出する[to-R]
jQueryでiPhone/iPadの向きを検出する iPhone/iPadで向きの概念が存在し、横向き(landscape)と縦向き(portrait)によって幅が変わるのでデザインやスクリプトを変更することがあります。 そういった場合に利用できるのがメディアクエリーのorientationです。 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> このように記述をすると縦向き(portrait)の場合はportrait.cssを横向き(landscape)の場合はlandscape.cssを読み込むことが出
![jQueryでiPhone/iPadの向きを検出する[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1788fe5c4e0abeec501baa392c032db6a3514abe/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimages%2F20100817_01.jpg)
iPhone/iPadでPCと同じJavaScriptのイベントを実装する
iPhone/iPadでPCと同じJavaScriptのイベントを実装する PC向けに作ったサイトをiPhoneやiPadでも利用できるようにする際に注意しなくてはいけないのがJavaScriptのイベントです。 iPhone/iPadではonmouseoverやonmousedownなどのonMouse系のイベントが利用できず、代わりにontouchstartやontouchmove、ontouchendなどのonTouch系のイベントが用意されています。 使い分けとしてはだいたい次のようになります。 ontouchstart = onmousedown ontouchmove = onmousemove ontouchend ≒onmouseup ですのでjQueryを利用した場合、 var ua =navigator.userAgent; if(ua.indexOf('iPhone'
PC用とiPhone用のサイトを切り替える.htaccess
PC用とiPhone用のサイトを切り替える.htaccess PC用のサイトにiPhoneでアクセスがあった場合にiPhone用のサイトに転送するというのはよくあるケースだと思います。更にiPhoneで「PC用」のボタンをクリックされた場合にPC用のサイトが閲覧できる.htaccessを考えてみました。 iPhoneからPC用のサイトへのリンクには「?mode=pc」というパラメーターをつけておきます。 RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod) RewriteCond %{QUERY_STRING} !mode=pc RewriteRule ^/$ /iphone/ [R] これでiPhoneで「?mode=pc」というパラメーターがない場合のみiPhone用のサイトに転送されます。 つまり、iPhoneで「http://bar.net」にア
iPhone用CSSをメディアクエリで分岐する問題点
iPhone用CSSをメディアクエリで分岐する問題点 これまで1つのHTMLソースでPC用とiPhone用のスタイルシートを切り替えるテクニックとしてCSS3のメディアクエリが用いられることが多かったのですが、iPhone 4の登場によりこのテクニックはバッドノウハウになりつつあります。 追記(2010/07/09) 本エントリーはiPhone 4の発売前に書いたものです。 iPhone 4のSafariに関しては画面サイズが320×480として計算されている為、問題ないようです。 参考：Fonland: iPhone 4 の viewport は iPhone 3G と同じ これまでは次のようなコードでiPhone用にiphone.cssをそれ以外のデバイスにimport.cssを読み込むことが出来ました。 <link media="only screen and (max-device
Fireworksでfaviconを作成
Fireworksでfaviconを作成 CSS Nite in Omotesando, Vol.1 「Fireworksビギナーのための120分徹底トレーニング」でFireworksでは拡張機能を利用すればfavicon(ファビコン)を作成できると紹介されていたので早速試してみました。 拡張機能のダウンロードとインストール Favicon - Adobe Fireworks Extensionsより拡張機能（ExportAsFavicon-100.mxp）をダウンロードします。 mxpはAdobe Extension Managerで利用できる拡張子で実行することでAdobe製品に拡張機能をインストールすることができます。 実行後、Adobe Extension Managerが立ち上がり拡張機能インストールの免責が表示されますので承認してインストールを行います。 (注意:Windows
Re:PHPで誰でも簡単Webサービス製作！でなんか作って公開した奴ちょっと来い
Re:PHPで誰でも簡単Webサービス製作！でなんか作って公開した奴ちょっと来い ネタ元：PHPで誰でも簡単Webサービス製作！でなんか作って公開した奴ちょっと来い PHPのXSSとSQLインジェクションの解説が書かれています。丁寧に書かれていますのでぜひ一読ください。ただ、読む上で1点注意することがあります。 XSSはそれほど単純じゃない！ ネタもとのXSS対策済みのソースコードの１行目で次のようなコードがあります。 <form action="<?=$_SERVER['PHP_SELF']?>" method="get"> 実はここにもXSSの脆弱性が含まれています。次のようなURLでアクセスされた場合、任意のスクリプトを実行することが出来ます。 http://www.example.jp/ example.php/%22%3E%3Cscript%3Ealert(document.co
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
MTで特定の文字数以降を「...」とトリミングする方法
MTで特定の文字数以降を「...」とトリミングする方法 何文字以降は「...」と省略するのは、よくあるケースだと思います。 MTの場合、trim_toモディファイアを利用すれば何文字以降をトリミングすることは可能です。 また、何文字以上の場合にトリミングを行うと言う処理は、count_charactersモディファイアで文字数を取得しmtifで条件分岐することにより可能です。 合わせるとこんな感じ。 <mtentrybody strip_tags="1" count_characters="1" setvar="countbody"> <mtif name="countbody" gt="70"> <mtentrybody strip_tags="1" trim_to="70">... <mtelse> <mtentrybody strip_tags="1"> </mtif> 関連エントリ
IE6,7,8の確認ツールの決定版!?Microsoft Expression Web SuperPreview
IE6,7,8の確認ツールの決定版!?Microsoft Expression Web SuperPreview マイクロソフトのWEBオーサリングツール「Microsoft Expression Web 2」の次期バージョンに含まれる新機能Microsoft Expression Web SuperPreviewがベータ版として公開されました。 このSuperPreviewを利用すればIE6,7,8での検証作業が可能です。(製品版にはFirefox、Safariなども搭載予定) 公式ブログよりダウンロード可能で、インストールには.Net 3.5 frameworkが必要なので結構時間がかかります。 (インストーラーを実行すると最初に.Net 3.5 frameworkをインストールし再起動、次にインストーラーを実行するとSuperPreviewがインストールされる) 検証ブラウザの切り替
IE8における拡大縮小バグ
IE8における拡大縮小バグ 先日リリースされたIE8だが、多くのバグを含んでおり、まだまだWEB製作者を悩ませそうです。 (追記)Firefox3でも発生しますね。検証不足でした。 例えば、私が見つけたのは拡大縮小に関するバグ。(文字ではなくズームによる) ul{ margin:10px; width:600px; border:1px blue solid; } ul li{ list-style-type:none; margin:2px; border:1px red solid; width:194px; height:194px; float:left; display:inline; } サンプル などのようにリスト要素を利用して表状の形態を表現した際、通常は以下のように表示される。 IE8 100%で表示。 これを95%に変更すると以下のようになる。 IE8 95%で表示。
8のjQueryのすごいTIPS
8のjQueryのすごいTIPS 原文：8 awesome JQuery tips and tricks 微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。 target="_blank" のリンクの作成 XHTML 1.0 Strict ではtarget=blank属性が利用できない。そこでjQueryを利用して別ウィンドウを開く方法を紹介しよう。 $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); <a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a> [to-R補足] 実際に利用する際はjavascript部分を$(function(){...})などで包む必要があります。[
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
