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

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

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

~/.weinre/server.propertiesに以下を追加
boundHost: -all-

実機で起動したサーバへアクセス
http://192.168.1.150:8080/
※hostは適当に

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

デバッグパネル
PCブラウザで上記にアクセスするとhtmlやcss,jsの確認ができる

開発ページに埋め込む
各ページに読み込む
もしくはブックマークに登録

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コーディングフロー
  1. 情報構造の骨組み
    • ツリー構造の検討
    • 適切なタグの利用について検討
  2. 構造の調整
    • CSSレイアウトを考慮し、隙間なく四角形のブロックで埋めるように構造を調整
  3. デザインの肉付け
    • CSSでのレイアウト
    • 装飾
    • 画像の配置
    • 読み込み

DataStoreの辛いところ

# DataStoreの限界 FacebookやインスタグラムのようなSNSで、投稿、公開範囲、お気に入りなどの機能をDataStoreで実現しようとするとどうしても辛くなる。 ## DataStoreで実現可能? - users - id - feeds - i...