2010-09-28

border-radius

なんかFirefoxのときの、個別に角を指定する書き方間違えたのでめもっとく

/* webkit */
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;

/* mozilla */
/* topleft とかって書く。webkitと違うので注意する */
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;

/* normal+IE */
border-top-left-radius: 5px;
border-top-right-radius: 5px;

たぶんあってる。
最近は結構IEの古いのとかスルーして角丸にしちゃう。

2010-01-26

iPhoneを判別する

iPhone

Webkit Detect

Webkitからのアクセスを判別するスクリプト。
iPhone/iPod touchに対応してます。

Detecting WebKit with JavaScript
- http://trac.webkit.org/wiki/DetectingWebKit

function isMobile()

の結果で携帯端末のWebkitかどうか（＝iPhone/iPod touch かどうか）を判別できるみたい。
適当に組み合わせてリダイレクトかけるなどして使えますかね。
*1

    var isMobile = WebKitDetect.isMobile();
    if (isMobile) {
        location.href = ほげほげ;
    }

修正前に書いてたようにファイル名を置換してリダイレクトしたい場合は

loctionとかってなにー

最初に書いていたのはこれ

    var isMobile = WebKitDetect.isMobile();
    if (isMobile) {
        var urlStr = location.search;
        var ipnUrl = urlStr.replace('PAGE1','ipn_PAGE1');
        location.href = ipnUrl;
    }

location.searchで取得した値に対して置換をかけるようになっています。

ただ、説明として「別のファイルにリダイレクト」、みたいに書いていたのですが、
location.searchではパラメータの変数名と値しかとってこれないため、
これだとファイル名の置換にはならないのでした。

たまたま自分が作業してる環境では、テンプレート名（ファイル名）がパラメータに値として入っていたため、
なんとなく「これを置換してあげれば別ページにリダイレクトできる」と思って書いていました。

そもそもlocationオブジェクトとは…

■ アドレス情報
◆ window.location (e3/N2)
現在表示しているアドレス（URL）に関する情報を持つオブジェクトです。
◆ window.location.protocol (e3/N2)
◆ window.location.host (e3/N2)
◆ window.location.hostname (e3/N2)
◆ window.location.port (e3/N2)
◆ window.location.pathname (e3/N2)
◆ window.location.search (e3/N2)
◆ window.location.hash (e3/N2)
URL の各部を示す文字列を返します。href の値が "http://www.yyy.zzz:8000/aaa/bbb/ccc.cgi?KEY=CGI#XYZ" だとすると、それぞれの値は以下のようになります。
protocol: "http:"
host: "www.yyy.zzz:8000"
hostname: "www.yyy.zzz"
port: "8000"
pathname: "/aaa/bbb/ccc.cgi"
search: "?KEY=CGI"
hash: "#XYZ"
http://www.tohoho-web.com/js/location.htm

こんな感じで、そのページのURLから色々値を取得できるようになってます。*2

なので、ファイル名を置換->リダイレクトとしたい場合、
ファイル名を取得して置換したいならば「location.pathname」を使う必要がありました。
そもそも、url内の該当文字列を別の文字列に置換してリダイレクトでよければ、以下のようにすれば済みます。

var url = location.href;
location.href = url.replace('hoge', 'fuga');

//by id:ama-ch ><

書式
　元の文字列.replace(文字列１,文字列２)
http://www.scollabo.com/banban/jsindex/sample/sample_225.html

というわけでフォローアップでした。
もっと勉強します…＞＜ thx id:ama-ch!

*1:id:ama-chにそれじゃできないよって教えてもらったので修正しました。

*2:jsはブラウザによって実装が違うらしいので、色々調べたほうがいいみたい。mozillaはこれ：location - MDC https://developer.mozilla.org/ja/DOM/window.location

2009-12-31

サンプルデータ配布

本日(2009-12-31)スペース"西よ-27a"にお越しくださった皆様、
わざわざお越しいただいたのに、新刊ご用意できず申し訳ありませんでした…。

新刊とあわせてご覧いただく予定だったサンプルデータを配布いたします。
夏にはリリースいたしますので、またよろしくお願いいたしますm(_)m

sample.zip
- データの注意点
  - CD-R用に作成したもので、本来はCD挿入と同時に"entrance.html"が立ち上がる仕様です。
  - そちらのファイルから開いていただくのがスムースかと思います。
  - あくまで本と同時にみていただくことを考えていたため、ただのHTMLが入っているだけです。ソースを眺めてツッコミをいれるぐらいしか使い道はないかもしれません…。

そのほか

こんな本にしてほしい、こういうことがしたい/知りたいなど、ご意見ご質問募集中です。
御気軽にコメントください。
Twitterで適当に話しかけていただいても構いませんー

- Twitter アカウント
  - http://twitter.com/htomine

2009-12-04

フルスクリーン表示にする

webkit iphone

フルスクリーンでWebを表示させる

webアプリモード的な感じ。
上下のアドレスバーや、お気に入りに追加などのメニューバーが消える
- アドレスバーや戻る進むボタンでの移動ができなくなるため、Webアプリ内のナビゲーションをしっかりしておく必要がある。
ホーム画面に設置したWebクリップから起動した場合のみ有効
- metaが効いてないページにリンクすると、強制的にバーが復活する

metaタグ追加

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

2009-12-04

「ホーム画面に追加」したとき用のWebクリップアイコンを設定する

webkit iphone

アイコンを用意する

57*57
png形式
ファイル名は「apple-touch-icon.png」
- 適当に四角いので作っておくと、自動でiPhoneアプリっぽいエフェクトがつくよ
  - できたら、サーバーの適当なとこに置く

ヘッダで呼び出す

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

2009-11-26

基本的な設定など

css iphone

CSSをiPhone向けに切り替える

CSS 3のメディアクエリというのを利用して、画面の横幅が480px(iPhoneを横にしたときの最大サイズ)以下になった場合にiPhone用のCSSに切り替えるような設定ができるよ。

<!-- iPhone 用だよ -->
<link media="only screen and (max-width:480px)" href="iphone.css" type="text/css" rel="stylesheet" />
<!-- PC 用だよ -->
<link media="screen and (min-width:481px)" href="pc.css" type="text/css" rel="stylesheet" />
<!-- メディアクエリをIEが無視するので、IE用に別途PC用CSSを指定するよ -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="pc.css" />
<![endif]-->

viewportの設定でiPhoneからの操作をしやすくする

metaのviewportっていう属性を設定することで、iPhone(Safari)の表示領域の挙動を操作できるよ。
- 縮尺の設定や、ユーザーに拡大縮小の操作（iPhoneだとピンチイン/アウトとかだね）をさせるかなどの設定があるみたい。
- iPhoneに最適化したページを作る場合、ピンチイン/アウトをオフにしたほうが操作性が上がる場合があるかも。

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

HolyGrail

viewportに

maximum-scale=0.6667

を設定して、画面を縦画面（portraitっていうらしいよ）と横画面（landscapet）で文字サイズが変わらないようにするっていうハックらしいよー

その他

viewport自体の仕組みについてはこの説明がわかりやすかったかも。

Safari on iPhone/iPod touch が通常のウェブブラウザと違うのは、ウインドウを持たないことです。そこで、この viewport という概念が出てきます。
viewport というのは仮想的なウインドウのサイズだと思えばいいでしょう。デフォルトでは、980 ピクセル幅となっています。viewport の値は最小 200 ピクセルから、最大 10,000 ピクセルを取ることができます。
何も設定されていない素のウェッブサイトを Safari on iPhone/iPod touch で見た場合、980 ピクセル幅のウインドウでブラウズした状態になるわけです。
http://travel-lab.info/tech/pblog/article.php?id=157

どうでもいいけどダイアリーはてブテーマ、引用のデザインしてなかったみたいだね…

2009-11-26

リストっぽいデザイン

css webkit iphone

を書いていくところ

        div#hoge ul.item li {
            padding: 7px 10px 5px;
            border-top: 1px solid #fff;     /*ここんとこがそれっぽいポイント＞＜*/
            border-bottom:1px solid #aea084;/*上に#fff、下に濃い目の色を指定すると、並べたときそれっぽくみえるよ*/
            background-color: #f2efe9;
            font-size: 20px;                /*フォントサイズは20pxぐらいが指で押しやすいみたい。*/
            font-weight: bold;
            letter-spacing: 0.01em;
        }
        div#hoge ul.item li a{
            color: #333;
            text-decoration: none;
        }

display:blockとか矢印つけたりとかはまだー