hrk's blog: 3月 2012

SSHで複数の公開鍵認証を行う

githubやsshを使う場合、公開鍵認証を行う必要がある（sshはないけど）

githubの公開鍵設定では、既存の公開鍵をバックアップに入れて新規に作らせるような案内で、
そのまま利用すると、既存の公開鍵認証は使えなくなります。

なので、複数の公開鍵を使い分ける方法を備忘録として残しておく

キーの作成
$ ssh-keygen -C foo@var.com -f ~/.ssh/id_rsa.var

sshのログインでは-iで指定する事ができる
$ ssh -i ~/.ssh/id_rsa.var for@var.com

ただ毎回指定するのはめんどくさいので、.ssh/configに書く事も可能
IdentityFile ~/.ssh/id_rsa
IdentityFile ~/.ssh/id_rsa.var
IdentityFile ~/.ssh/id_rsa.foo

JavaScript エラーを捕まえる

JavaScriptのエラーをonerrorイベントで捕まえる

(function() {

var __s = new Date().getTime();

window.onerror = function(message, url, line) {

var param = 'message=' + E(message) + '&url=' + E(url) + '&line=' + line +

'&caller=' + String(arguments.callee.caller).slice(0, 200) +

'&ready=' + jQuery.isReady + '&time=' + (new Date().getTime() - __s);

alert(param);

function E(s) {

return encodeURIComponent(s);

}

})();

arguments.callee

関数自身を保持

JavaScript weinre

インストール

http://callback.github.com/callback-weinre/Installing.html

今回はmac用のためweinre-mac-x.y.z.zipをダウンロード

解答したファイルのweinre.appを起動する

~/.weinre/server.propertiesに以下を追加

boundHost: -all-

実機で起動したサーバへアクセス

http://192.168.1.150:8080/

※hostは適当に

サンプルページでの動作確認

http://192.168.1.150:8080/demo/weinre-demo-min.html#anonymous

http://192.168.1.150:8080/demo/weinre-demo.html#anonymous

デバッグパネル

http://192.168.1.150:8080/client/#anonymous

PCブラウザで上記にアクセスするとhtmlやcss,jsの確認ができる

開発ページに埋め込む

各ページに読み込む

<script src="http://192.168.1.150:8080/target/target-script-min.js#anonymous"></script>

もしくはブックマークに登録

javascript:(function(e){e.setAttribute("src","http://192.168.1.150:8080/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

Haskellをたしなむ

関数プログラミングを勉強してみる

Haskellの環境整備

Macだとインストーラが存在するため、パッケージをダウンロードして実行するだけ。

Haskell Platform 2011.4.0.0 64bit.pkg

インストール後にバージョンを確認

$ ghc -V
The Glorious Glasgow Haskell Compilation System, version 7.0.4

$ cabal -V
cabal-install version 0.10.2
using version 1.10.2.0 of the Cabal library

念のためアップデート
$ sudo cabal update

対話環境の起動

$ ghci
GHCi, version 7.0.4: http://www.haskell.org/ghc/ :? for help
Loading package ghc-prim ... linking ... done.
Loading package integer-gmp ... linking ... done.
Loading package base ... linking ... done.
Loading package ffi-1.0 ... linking ... done.

Prelude>

関数の型
::を使って表す
isDigit :: Char -> Bool
isDigit c = c >= '0' && c <= '9'

複数に引数
makeString :: Char -> Int -> [Char]
makeString c 0 = []
makeString c n = c : makeString c (n - 1)

型変換
length :: [a] -> Int
型変数は小文字で書く

リスト

   * リストの先頭に加える
      * 二項演算子(:)を使う
         * > let xs =['b', 'o', 'a']
         * > let ys = 'a' : xs
         * > ys
         * "aboa"
   * リストから先頭要素を取り出す
      * head
         * > head ys
         * 'a'
   * リストから先頭要素を取り除いた残り
      * tail
         * > tail yx
         * "boa"
木構造とハッシュ

型の定義
列挙型

   * data Bool = False | True
   * data Ordering = LT | EQ | GT
      * 右側の値を構成子と呼ぶ(False, True, Lt, EQ, GT)
型変数を取る型

   * data Maybe a = Nothing | Just a
構造体

   * data Pair = MkPair Int Char
      * 構造体 Pair は、型IntとCharを格納する型で、構成子はMkPair
再起型

   * data Tree = Leaf | Node Tree Int Tree
      * LeafとNodeが構成子、Nodeの右にあるTreeとIntは型

関数一覧

   * putStrLn 標準出力
   * zip 二つのリストをペアリストにする
   * map 第一引数に関数を、第二引数にリストを受け取り、各リストに関数を適用する
   * foldl リストの要素を1つの値に集約する
      * 第一引数に演算子、第二引数に初期値、第三引数にリス
関数の引数はカンマではなく、スペースで区切る

CSSについて

レイアウト

ブロック要素とfloat

横並びデザインの表現
基本的にfloat: leftを指定して横並びを実現するが、
<div style="float: left;">A</div>
<div style="float: left;">B</div>
<div>C</div>
上記の場合、Cまで横に並んでしまう
<div style="clear: both;">C</div>
で解除する必要がある

flot要素の高さ
<style>

     cf:after {
       content: '';
       display: block;
       clear: both;
     }
    .cf {
        zoom: 1;
     }
     </style>

paddingとmarginの使い分け
- paddingはグリープングする要素に指定する
- margninはグルーピングされた要素に指定する

区切り線を含むリスト構造
<style>
.imgListWrapper {
    overflow: hidden; /* 内包要素がはみ出た部分を隠す事ができる */
}
.imgList {
    width: 300px;
    margin-left: -1px;
}
.imgList li {
    float: left;
    width: 79px;
    margin-top: 10;
    padding-right: 10px;
    padding-left: 10px;
    border-left: 1px dashed #333;
}
</style>
<div class="imgListWrapper">
    <ul class="imgList cf">
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
    </ul>
</div>

縦編
<style>
.imgListWrapper {
    overflow: hidden; /* 内包要素がはみ出た部分を隠す事ができる */
}
.imgList {
    margin-top: -1px;
}
.list li {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px dashed #333;
}
</style>
<div class="listWrapper">
    <ul class="list cf">
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
    </ul>
</div>

HTMLについて

ブロック要素、インライン要素、インラインブロック要素

ブロック要素

タグ	用途
h1-6	見出し
p	段落・文章
ul	順序なしリスト
ol	順序ありリスト
dl	定義リスト
form	フォーム
hr	区切り線
table	表
div	構造

インライン要素

タグ	用途
a	アンカー
span	文字修飾
em	強調（弱い）
string	強調（強い）

インラインブロック要素

タグ	用途
img	画像読み込み
input	単一行テキスト入力
textarea	複数行入力テキスト
select	プルダウンメニュー

メモ的にHTML非推奨タグを記述

非推奨タグ	代替えCSS	効果
center	text-align:center;	水平センタリング
font	font-size、color	フォントサイズ、色指定
s、strike	text-decoration: line-throught;	打ち消し線
u	text-decoration: underline;	下線

非推奨属性の代替手段

非推奨属性	代替えCSS	効果
color属性	color	フォント色指定
bgcolor属性	background-color	背景色指定
align属性	float	ブロックの要素を整列
clear属性	clear	align(float)の解除
nowrap属性	white-space: nowrap;	要素内での改行禁止

連続した情報を表現する

順序なしリスト ul ナビゲーションなど
順序ありリスト ol パンくずリストなど
定義リスト dl

TD(title/description)構造を表現する

ページ内容に対して関わりが大きいTD構造はh1-h6を使う
小さなブロックの場合、dl、dt。ddを使う
表形式はtableを使う

文章ブロック（段落）p

文章のひとかたまり=段落

構造のグルーピング

divを正しく使うには
- 連続性のあるリスト構造ではない
- 見出し構造ではない
- 段落構造ではない
- 表構造ではない

HTMLコーディングフロー

情報構造の骨組み

ツリー構造の検討

適切なタグの利用について検討

構造の調整

CSSレイアウトを考慮し、隙間なく四角形のブロックで埋めるように構造を調整

デザインの肉付け

CSSでのレイアウト
装飾
画像の配置
読み込み

hrk's blog