技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。

viewport設定

html5 Tips Android

素のHTML5のページを作ってみる。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>disable viewport</title>
</head>
<style>
    article, aside, figure, footer, header, hgroup,
    menu, nav, section { display:block; }
    p { font-size:12px; }
</style>
<body>
    <p>viewport metadata disabled!</p>
</body>
</html>

これで表示すると、Android 端末において、「viewport metadata disabled!」が非常に小さく映る。というか、画面全体サイズがさらに大きい前提でレンダリングされる。
そこに、以下の viewport 属性を指定する。

    <meta name="viewport"
        content="width=device-width,user-scalable=yes,
            initial-scale=1.0, maximum-scale=3.0" />

user-scalable がキモ。レンダリング時にはブラウザ側が任意のサイズでレンダリングできるようになる。
何か色々便利そうなので、メモ。

続きを読む

ヘッダの見た目をかっこ良くする。

html5 Tips Android

ヘッダとか色々用意してみた。教科書は、O'Reillyの「Building Android Apps with HTML, CSS, and JavaScript」日本語版はまだ無い。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="screen.css" />
    <meta name="viewport"
        content="width=device-width,user-scalable=yes,
            initial-scale=1.0, maximum-scale=3.0" />
    <title>index</title>
</head>
<body>
    <div id="container">
        <div id="header">
            <h1><a href="http://www.white-azalea.net/">Azalea's Study page.</a></h1>
            <div id="utility">
                <ul>
                    <li><a href="about.html">About</a></li>
                    <li><a href="http://d.hatena.ne.jp/white-azalea/">Blog</a></li>
                </ul>
            </div>
        </div>

        <div id="content">
            <p>Sorry, contents and projects are deleted.<br />
            Now create azalea's experiments and studing pages.</p>
        </div>
    </div>
</body>
</html>

で、CSSをこんなことしてみる。

body {
    background-color: #ddd;
    color: #222;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

#header h1 {
    margin: 0;
    padding: 0;
}

#header h1 a {
    /* drawing as block */
    background-color: #ccc;
    border-bottom: 1px solid #666;
    color: #222;
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
}

ここまでは普通のCSSそのまま。ヘッダ部分にもう一声入れる。

#header h1 a {
    /* drawing as block */
    background-color: #ccc;
    border-bottom: 1px solid #666;
    color: #222;
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    
    /* draw shadow in text */
    text-shadow: 0px 1px 1px #fff;
    /* draw background as linear. only webkit(chrome/iOS/Android) */
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
}

文字のまわりに影を入れて、背景イメージに webkit 特有のスタイル指定を行う。
見た目どうなるかは、こっち。

続きを読む

リストの操作

F# 勉強

リストの宣言から順に

  • 先頭に要素追加
  • リスト結合
  • 整数の範囲指定表記
  • ステップ指定での整数範囲指定表記
  • リスト内包表記
  • リスト内包表記を使った1 - 10倍リスト作成関数
  • 同関数のラムダ表記
let basicList = ["BattleField"; "BioHazard"; "MatHazard"]
let appendTop = "CallOfDuty" :: basicList
let connectList = ["GodEater"; "LostPlanet"] @ basicList
let integers = [0 .. 20]
let evens = [2 .. 2 .. 100]
let nearNums x =
    [
        yield x - 1
        yield x
        yield x + 1
    ]
let multipleLists x =
    [ for i in [1 .. 10] do yield x * i ]
let multiplesLambda x =
    [ for i in [1 .. 10] -> x * i ]

基本型

F# 勉強

基本型一覧

型 サンプル
unit ()
int, float 32, 42.195
'a, 'b (generic type)
'a -> 'b fun x -> x+1
'a * 'b (1, 32)
'a list [1; 32]
'a option Same(3), None

上から

  • unit 型(他言語で言う void?)
  • int, float (L付きで64bit整数)
  • 汎用型（型推論出来ない場合はコレ）
  • 関数
  • タプル型
  • リスト型
  • オプション型（戻り値が不定とか）

特にタプルは、関数の返り値何かでルカうと、2つ以上の返り値をreturnできる。
そういう使い方がいいかどうかはしらんけど。