チラシの裏的備忘録

2013年11月26日火曜日

スマートフォン上での inputタグとキーボードの関係

よくある疑問

スマホで入力フォームタップしたときに立ち上がるキーボードって制御できないの？

結論としては制御はできません。但し、type属性に対応した初期キーボードの設定はOS側？でされているので、そちらでひっかけることはできるっぽい。

スマートフォン上での inputタグとキーボードの関係

正確には文字列を打ち込むタイプのinput

具体的には

input type="text"

input type="search"

input type="number"

input type="tel"

input type="email"

input type="password"

input type="url"

だいたいこんな感じ。他にもdatetimeなどもあるけど、端末やOSによってはテキストでない入力方法もあったりするので却下。

さてこの状態で、実際にスマートフォンからタップしてもらえるとわかるが、
各inputタップ後最初に起動するのは、

text → デフォルト
search → デフォルト
number → 数字入力
tel → 電話番号入力
email → 英字
password → 英字
url → デフォルト

となるかと。要するに、だいたいデフォルトなわけで。(「デフォルト」はデフォルトに設定されているキーボードタイプ)
きちんと入力させたいものに合わせてtypeを設定してやると、ユーザー的にはキーボード切り替えの手間は省ける。

ただし落とし穴があり、上記で「デフォルト」としたものは、タップしたとき必ずデフォルト設定キーボードが登場するわけではない。
たとえば上記であれば、

① type="text" のinputをタップし、数字キーボードに切り替えた後、
② type="search"をタップしてみる。

するとデフォルトが数字キーボードでもない限りデフォルトキーボードが出てくるはずなのだが…

答えは「数字キーボードが居座り続ける」

そもそもキーボードの入れ替え自体が発生しない。

ただし、今度は
① type="text" のinputをタップし、数字キーボードに切り替えた後、
② type="email"をタップ、さらに数字キーボードに切り替えておく
③ またtype="text" のinputのうち、どれかをタップすると…

答えは「デフォルトキーボードが立ち上がる」

自由すぎる…orz

また、「数字だけを入力させたいんだ！」ってところには type="tel"をわざと仕込んでやる、なんて手法もあるが、そのあたりでバグが一つ。

iOS5において、type="number"の仕様として、

① 「0930」など、"0"から始まる数字は、 valueにおいても0をないものと扱い、例ならば「930」と認識する
② 3ケタごとに、「123,456,789」のように、","を入れて表示する。但しこちらは表示だけで、valueに影響は与えない。

という仕様がある。そのため、「電話番号入力」や「パスコード入力」のように、先頭の0を認めるものに対して type="number"を使うと正しく値が取れなくなる。

なお、iOS6からは治っている模様。不評だったんだね…(・ω・`)

2013年10月31日木曜日

cssの強さ

ふと気になったのでまとめてみる

css強さ選手権

1. そもそも強さって？

基本的にhtmlやjavascript等は, 後に書いたものが優先されて反映される. cssも同様なのだが, たとえば

<div class="test_1" id="mytest_1">
    テスト１
</div>
<style>
    #mytest_1{color: red;}
    .test_1{color: blue;}
</style>

このように書いたとき, どちらも同じdivを指すため, 基本にのっとれば文字は, あとに指定した通り青くなるはず
しかし,

テスト１

赤くなる( ﾟдﾟ )

これが, 強さによってcssが上書きされる現象である.

2. 強さの順位

では順位はどうなっているのか

順位	名前	例
1位	直書き	<div style="width: 100%"></div>
2位	id	#id
3位	class	.class
3位	属性セレクタ	img[alt]
3位	疑似クラス	li:first-child
6位	要素名	body
7位	全選択	*

だいたいこんな感じ
但し単体での強さでの話
組み合わせることで

<div class="test_2" id="mytest_2">
    テスト２
</div>
<style>
    div.test_2{color: red;}
    .test_2{color: blue;}
</style>

テスト２

あとに書いたはずの青ではなく, 先に書いた赤になる. これは, それぞれの指定が
赤 → 要素名(6位) + クラス名(3位)
青 → クラス名(3位)
となっており、より多く条件を付けた方が強く反映されるのである.

ちなみに強さを重ねて同列だった場合は…？

<div class="test_3 test_4" id="mytest_3">
    テスト３
</div>
<br />
<style>
    .test_3.test_4{color: red;}
    .test_3[id]{color: blue;}
</style>

テスト３

赤 → クラス名(3位) + クラス名(3位)
青 → クラス名(3位) + 属性セレクタ(3位)
とした実験。結果は下に書いた青の勝利

最後の実験。classを重ねたらidに勝てるのか？

<div class="test_4 test_5 test_6 test_7 test_8 test_9 test_10" id="mytest_4">
    テスト４
</div>
<style>
    #mytest_4{color: red;}
    .test_4{color: blue;}
    .test_4.test_5{color: blue;}
    .test_4.test_5.test_6{color: blue;}
    .test_4.test_5.test_6.test_7{color: blue;}
    .test_4.test_5.test_6.test_7.test_8{color: blue;}
    .test_4.test_5.test_6.test_7.test_8.test_9{color: blue;}
    .test_4.test_5.test_6.test_7.test_8.test_9.test_10{color: blue;}
    .test_4.test_5.test_6.test_7.test_8.test_9.test_10[id]{color: blue;}
</style>

結果は…

テスト４

…うん(・ω・`)
まず一番強いやつがさらっていくんだね…

3. おまけ

それでも上の奴に勝ちたい、そんなcssに最終兵器。

<div class="test_11" id="mytest_5">
    テスト５
</div>
<style>
    #mytest_5{color: red;}
    .test_11{color: green!important}
</style>

idとclassの一騎打ち。但しclassには

!important

が設定されている。これが切り札。

テスト５

と、クラスによる指定にも関わらず緑になっている。後に設定したimportantのおかげだけど、あくまで最終手段。これは、

<div class="test_12" id="mytest_6">
    テスト６
</div>
<style>
    #mytest_6{color: red;!important}
    .test_12{color: green!important}
</style>

テスト６

からわかる通り、強さの順位どうこうをなくし、単純に書かれた順に上書きになっていく模様。

ちなみに

<div class="test_13" id="mytest_7">
    テスト７外
<div class="test_14" id="mytest_8">
    テスト７
</div>
</div>
<style>
    #mytest_7{color: red;!important}
    .test_14{color: green}
</style>

テスト７外

テスト７

さすがに親の影響より、直接指定されたものが優先されるみたい。

css等はこの場で実験もできるから面白い+(・ω・0)*

2013年9月26日木曜日

302を飛ばさない「リダイレクト」

なんか引っかかったのでメモメモφ(・ω・ )

302を飛ばさないでリダイレクトみたいな動きをするタグ

とあるページの通信を調べていたところ, 明らかにリダイレクトじみた動きをしているのにステータスコード302が見当たらないと調べていたところ, 何やら変なタグを発見

<head>
<meta http-equiv="Refresh" content="0; URL=urlstring">
</head>

ヘッダにこんなのがいる真っ白なページを挟んでました
http-equiv="Refresh" は httpヘッダに refresh属性を仕込む宣言. もう一つの属性 contentと合わせて用いる. 内容はページのリフレッシュを行うことの宣言. なのでこれを仕込んでおくと自動でページを再読み込みしてくれる.
参考

content="0; URL=urlstring" が, リフレッシュまでの時間と, リフレッシュ後のURLの設定. 時間の単位は秒. この urlstringにリダイレクト先のURLを設定することで, 設定秒後に設定したURLにジャンプしてくれる.

移転したサイトの元サイトなんかに、メッセージとｋのタグを仕込んでおくと, ユーザーを自動で移転先のページに運ぶ, なんてのが一般的な使い方らしい.

ちょっと予想外だったのでびっくりした(・ω・`)

2013年8月19日月曜日

Sublime Text2使ってみた -前篇-

さすがにメモ帳レベルのテキストエディタでHTMLを書くのは限界なので…('A`)

Sublime Text2使ってみた

1. インストール

まずはここからバージョン, bitに合わせてダウンロードからインストール. 特にインストール項目を設定することもないかも.
Sublime Text2は, 初期状態のままではほぼ空っぽな状態. なので自分でカスタムしてやる必要がある.
ちなみに 3もベータ版だけど出ている模様.

2. 準備

A. Packageのインストール準備

様々カスタムしていく準備を行う. Packageとは要するにプラグイン.

まずは View→Show Console でコンソールを開く. 出てきたウィンドウのうち, 上が表示エリア, 下が入力エリア. 間違って表示エリアに入力しようとして, 「入力できない(・д・`)」とかググらないように. 自分だけか…('A`)

コンソールには以下をコピペ.

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

実行すると Packageをインストールするためのプラグイン「Package Control」をインポートする. 終わったら再起動. たまにこいつが突然消えることがある. よくわからないヽ('A`)ﾉ

B. 日本語化

有志の方が用意してくれたファイルを使って, 一部ではあるが日本語化ができる.

詳しくはこちら

C. ユーザ設定
Preference → Setting - Userを選択し, 出てくる設定ファイルにJSON形式で入力していく. フォントサイズや行間距離, 空白の表示方法等色々設定できる.
設定内容は以下のようなものが…

キー値	バリュータイプ	デフォルト値	内容
font_size	number	11	そのままの通り, 表示するフォントサイズの意. デフォルトは(おそらく)11
line_numbers	boolean	true	左側の行番号の表示/非表示の切り替え.
gutter	boolean	true	左側の行番号を表示している部分(ガーターと呼ぶらしい)自体の表示/非表示. ↑をfalseにするならこっちごとfalseにしてしまった方がいいかも？
margin	number	?	ガーターとテキスト部の間の距離の指定. 負の値も設定可能.
fold_buttons	boolean	true	関数などの塊を"折りたたむ"機能のON/OFF. OFFにするとその分ガーターも狭まる.
fade_fold_buttons	boolean	true	↑の折りたたみ機能を常時表示/カーソルを当てたときに表示を切り替える. わかりにくい！って人はfalseにすると常に出ている.
rulers	number	[]	縦にガーターの横に出ているようなラインを引く機能. 20と設定すれば, 半角で20文字入力した位置に, 縦にラインが引かれる. インデント揃える時などに？ ","区切りで複数指定することも可能.
tab_size	number	4	Tabキーを１回押したときに表示されるスペースの量の設定. 10に設定すれば, Tabキー１回で半角スペース10個分進む. インデント幅にも影響する.
translate_tabs_to_spaces	boolean	false	Tabキーを押した際に, Tab文字ではなくスペースを入力する. 削除しようとするとなぜか出力した分全てが削除される.
use_tab_stops	boolean	true	↑の"なぜか"の答え. こちらもfalseにしてやると, 削除する際スペース１個ずつ削除するようになる.
auto_match_enabled	boolean	true	trueにしておくと, "("などを入力したとき, 自動で閉じる方も入力してくれる. 逆にこれが鬱陶しいなら falseで.
match_brackets	boolean	true	trueにしておくと, "("や")"にカーソルを合わせると, 対応するものに下線を引いてくれる.

…多いってばよorz
ちらっと上げようとしたのにキリが無いのでこのへんで.

ちょっと長くなってきたので続きは次で

2013年7月31日水曜日

ドロップキャップっていうらしい

こういうの

パラグラフの先頭文字だけ大きくするcss

といっても別に cssのプロパティであるわけではなく, 「先頭の文字」を指定して, font-sizeを大きいものを設定してやるだけ.

<div class="test1">
    といっても別に cssのプロパティであるわけではなく, font-sizeを先頭の文字だけ大きいものを設定してやるだけ.
</div>
<style>
.test1:first-letter{
    font-size: 3.0em;
    float: left;
    line-height: 1;
}
.test1{
    font-size: 1.0em;
}
</style>

コード的にはこんな感じ. ポイントは疑似要素 :first-letter. これで「最初の文字」を指定している.
ちなみに float: left;, line-height: 1;は演出用. これがないと,

たとえば------------------------------------------------改行した際に, こんな感じに次の行にいってしまう---------------------

じつはこんな要素指定していないのに一文字だけデカく表示されるバグのことを調べているときに見つけたのは内緒. しかもそのバグとは全く関係なかったし…(・ω・`).

2013年7月30日火曜日

selectタグで詰まった話

selectタグをいじってる際, スマホ上での見せ方で詰まったのでメモメモφ(・ω・ )

selectタグの高さとスマートフォン

selectタグを使ってドロップダウン？な選択をさせたい, といった時, なんか(表示領域)小さいね, といった一言から始まった問題.

問題点は「selectタグの領域に heightがうまくかからない端末がある」といった現象.

<select class="face_collection">
<option>ﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ </option>
<option>∩( ・ω・)∩</option>
<option>ヽ(;´Д`)ノﾀｽｹﾃ～</option>
</select><br />
<br />
<style>
.face_collection{
height: 40px;
}
</style>

PCで見ればなんら問題なくなんか太いドロップダウンメニューができるはず.
但し, このページを, おそらくAndroid4.1系のデフォルトブラウザで見ていただければわかるはず.

「別に太くなんて無いんだけど…(・д・`)」

iPhoneや Android2.x系では太くなるのに, なぜか Android4.1系では太く表示してもらえない.
また, 太くならないのはデフォルトブラウザでのみらしく, Chromeであれば "少し"太く見える.
一体なんなんだか…('A`)

まぁ font-sizeを大きくしてやれば, それに合わせて大きくなるんですがね( ´_ゝ｀)

2013年7月22日月曜日

cssのアニメーション

jQueryのfadeやらなにやら, アニメーションを表現するものの中には機種依存を起こす物がちらほら. そんななか, 「cssの animationを使えばなんとかなるよー」ということなのでやってみた.

cssでアニメーション

1. やりたいこと

いわゆるフェードイン/アウト. しかしjQueryの.fade系は機種依存起こすかも, だとか. なので cssの animationで, cssのプロパティの opacityを操作する.

( ﾟдﾟ )

おわかりいただけただろうか…

2. アニメーション内容の宣言

いじるのは css. jsはあくまで addClassしてクラスを切り替えるだけ. この切り替えられたクラスに合わせて cssで表現してやると, 再利用性は格段にアップするはず.

用意するコードはいつもとはちょっと異なり, 「アニメーションの動作内容」の部分と「作ったアニメーションを使うことを宣言する」部分に分けられる. 要するにアニメーションメソッドを作って, それを呼び出す, みたいな流れ.

<div class="testface">
( ﾟдﾟ )
</div>

上の例の場合は, まずはフェードするアニメーションを作成する.

@-webkit-keyframes anime1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes anime1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

注意点としては, レンダリングエンジンごとに用意してやる必要があること. Chromeや Safariなら webkit. firefoxならmoz.
上が webkit用, 下は moz用の宣言. 中身を変えてしまうと当然動きも変わってしまうから注意. コピペ推奨.
1行目がレンダリングエンジンの設定とそのアニメーションの名前. 名前は自由に設定できるので, わかりやすい名前を付けてやろう.
2行目から4行目は, 開始の状態. この場合は「opacity: 0;」透明度100%状態からスタート, となる.
そして5行目から7行目が終わりの状態. 「opacity: 1;」透明度0%状態となり, 完全に出現した状態となる.
この fromと toは, それぞれ 0%, 100%と書くこともでき, また 33%等, 途中の状態も設定できる.
これでアニメーションの内容は宣言できた. 割と簡単.

3. アニメーションの実行を宣言

アニメーションを作ったら, それを付与してやる. この時いろいろプロパティがあり, これがまたいろいろ悩ませてくれる.

.testface{
    color: red;
    -webkit-animation: anime1 2s linear infinite alternate;
    -moz-animation: anime1 2s linear infinite alternate;    
}

color: red;はキニシナイ. webkit, moz用に2つ設定. 内容は同じ.
最初の anime1は 2.で設定したアニメーションの名前. ここでどのアニメーションを使うか宣言する.
2s は「2秒」. アニメーション1周期を何秒で描画するか, を設定する.
linearはアニメーション方法の指定, この場合は fromから toまで一定の速度で変化する方法. 他にもいろいろ.
infiniteは描画回数. 単に 6など数字を入れればその回数描画してくれる. この場合は無限回の指定.
alternateはアニメーション方向. 要するに fromから toへアニメーションするか, その逆に toから fromへアニメーションするか, といった設定. alternateは「奇数回目は from→ to, 偶数回目は to→from」という特別な設定. 例にあるとおり, from→ to→ from→ toと, アニメーションの設定を行き来してくれる.
他にも, アニメーションの開始を遅らせるプロパティなども. これらをセットしたら準備OK.

ちなみに opacityをいじっていたところを marginをいじるように変更すれば, こんなものもcssだけでできる.↓

ガクガク (((( ﾟдﾟ；)))) ブルブル

参考

登録: 投稿 (Atom)

チラシの裏的備忘録

2013年11月26日火曜日

スマートフォン上での inputタグとキーボードの関係

スマートフォン上での inputタグとキーボードの関係

2013年10月31日木曜日

cssの強さ

css強さ選手権

2013年9月26日木曜日

302を飛ばさない「リダイレクト」

302を飛ばさないでリダイレクトみたいな動きをするタグ

2013年8月19日月曜日

Sublime Text2使ってみた -前篇-

Sublime Text2使ってみた

1. インストール

2. 準備

2013年7月31日水曜日

ドロップキャップっていうらしい

パラグラフの先頭文字だけ大きくするcss

2013年7月30日火曜日

selectタグで詰まった話

selectタグの高さとスマートフォン

2013年7月22日月曜日

cssのアニメーション

cssでアニメーション

1. やりたいこと

2. アニメーション内容の宣言

3. アニメーションの実行を宣言

AWS CDKで立てたEC2インスタンスのTimeZoneとかいじりたかった話

お気に入り, 見よう.

不正行為を報告