■Google JavaScript Style Guide

■Closure Linter

・インストール

1. $ sudo easy_install http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz

・動作確認

1. // sample.js
2. var params = { 
3.   name: "Asial",
4.   message: 'Hello',
5. };
6.  
7. hello(params.name,params.message);
8.  
9. function hello(name, message) {
10.   alert(name + ' : ' + message)
11. }

1. $ gjslint sample.js
3. FILE  :  /path/to/sample.js -----
4. Line 3, E:0131: Single-quoted string preferred over double-quoted string.
5. Line 4, E:0121: Illegal comma at end of object literal
6. Line 7, E:0002: Missing space after ","
7. Line 10, E:0010: (New error) Missing semicolon at end of line
8. Found 4 errors, including 1 new errors, in 1 files (0 files OK).
10. Some of the errors reported by GJsLint may be auto-fixable using the script
11. fixjsstyle. Please double check any changes it makes and report any bugs. The
12. script can be run by executing:
14. fixjsstyle sample.js

1. $ fixjsstyle sample.js
3. Fixed 4 errors in /path/to/sample.js

・修正内容

■Vimとの連携

Syntastic

1. $ cd ~/.vim/bundle
2. $ git clone https://github.com/scrooloose/syntastic.git

■最後に

バージョン管理ってなに？

バージョン管理をするには？

Subversionとは

Subversionのデメリット

gitとは

複数人での開発

gitとSubversionのいいとこどりをしよう！

gitプロジェクト作成

ファイルの作成

1. git status
2. # On branch master
3. #
4. # Initial commit
5. #
6. # Untracked files:
7. #   (use "git add <file>…" to include in what will be committed)
8. #
9. # edit.php
10. nothing added to commit but untracked files present (use "git add" to track)

ファイルを管理対象にする

1. git add edit.php
2. git status
3. # On branch master
4. #
5. # Initial commit
6. #
7. # Changes to be committed:
8. #   (use "git rm --cached <file>…" to unstage)
9. #
10. # new file:   edit.php
11. #

commitする

pushする

pullする

おさらい！

1. .hoge {
2.         background-color: #123456;    
3.     }

1. .hoge {
2.         background-color: red;
3.         color: rgb(255, 255, 255);
4.     }

1. .hoge {
2.         background-color: hsl(0, 100%, 50%) // 純色の赤
3.         color: hsl(60, 100%, 80%) // 明るい黄色
4.     }

1. /**
2.      *  hslからrgbに変換する関数
3.      * 
4.      *  hue 色相。0〜360の数値を指定
5.      *  saturation 彩度 0〜100%の値を指定
6.      *  lightness 明度 0〜100%の値を指定
7.      */
8.     var hslToRgb = function(hue, saturation, lightness){
9.         var h = Number(hue),
10.             s = Number(saturation.replace('%', '')) / 100,
11.             l = Number(lightness.replace('%', '')) / 100,
12.             max = l <= 0.5 ? l * (1 + s) : l * (1 - s) + s,
13.             min = 2 * l - max,
14.             rgb = {};
15.  
16.         if (s == 0) {
17.             rgb.r = rgb.g = rgb.b = l;
18.         } else {
19.             var list = {};
20.             
21.             list['r'] = h >= 240 ? h - 240 : h + 120;
22.             list['g'] = h;
23.             list['b'] = h < 120 ? h + 240 : h - 120; 
24.  
25.             for (var key in list) {
26.                 var val = list[key],
27.                     res;
28.  
29.                 switch (true) {
30.                     case val < 60:
31.                         res = min + (max - min) * val / 60;
32.                         break;
33.  
34.                     case val < 180:
35.                         res = max;
36.                         break;
37.  
38.                     case val < 240:
39.                         res = min + (max - min) * (240 - val) / 60;
40.                         break;
41.  
42.                     case val < 360:
43.                         res = min;
44.                         break;
45.                 }
46.  
47.                 rgb[key] = res;
48.             }
49.         }
50.  
51.         // CSS用に変換して返す
52.         return 'rgb(' + Math.round(rgb.r * 255) + ',' + Math.round(rgb.g * 255) + ',' + Math.round(rgb.b * 255) + ')';
53.     };
54.  
55.     /**
56.      *  rgbからhslに変換する関数
57.      * 
58.      *  red 赤。0〜255の数値を指定
59.      *  green 緑。 0〜255の値を指定
60.      *  blue 青。 0〜255の値を指定
61.      */
62.     var rgbToHsl = function(red, green, blue){
63.         var r = red / 255,
64.             g = green / 255,
65.             b = blue / 255,
66.             rgb = {
67.                 'r': r,
68.                 'g': g,
69.                 'b': b
70.             },
71.             max = Math.max(r, g, b),
72.             min = Math.min(r, g, b),
73.             hsl = {
74.                 'h': 0,
75.                 's': 0,
76.                 'l': (max + min) / 2
77.            };
78.  
79.         // 彩度と色相の算出
80.         if (max != min) {
81.             // 彩度
82.             var m = hsl.l <= 0.5 ? (max + min) : (2 - max - min);
83.             hsl.s = (max - min) / m;
84.  
85.             // 色相
86.             var c = {};
87.             for (var k in rgb) {
88.                 var v = rgb[k];
89.                 c[k] = (max - v) / (max - min);
90.             }
91.  
92.             var h;
93.             switch (max) {
94.                 case r:
95.                     h = c.b - c.g;
96.                     break;
97.  
98.                 case g:
99.                     h = 2 + c.r - c.b;
100.                     break;
101.                 case b:
102.                     h = 4 + c.g - c.r;
103.                     break;
104.             }
105.  
106.             h = h * 60;
107.  
108.             hsl.h = h < 0 ? h + 360 : h;
109.         }
110.  
111.         // CSS用に変換して返す
112.         return 'hsl(' + hsl.h + ', ' + hsl.s * 100 + '%, ' + hsl.l * 100 + '%)';
113.     };

*「30分経って分からなかったら、別の問題を考えよう」

1. "We should think another task 30 minutes later."

*「これって面倒くさいね」

1. "It's troublesome."

*「仕方ないね」

1. "It's no choice."

*「これの使い方、分かった！」

1. "I've got how to use it!"

*「そっちはどう？」

1. "How about on your side?"

*「まだできていない」

1. "Not yet."

*「腑に落ちていないね」

1. "You don't make sense."

*「今日は何時ぐらいまで居られますか？」

1. "How long can you stay here today?"

*「これとは別の問題だと思う」

1. "I think that it's another problem."

*「これは共用です」

1. "Share."

*「ビールとカクテル、どっちが良い？」

1. "Which do you like beer or cocktail?"

*「回転寿司に行ったことある？」

1. "Have you ever went to sushi-go-round?"
2. "Have you ever gone to sushi-go-round?"

* 終わりに

１. 特定のサーバーにSSHログインする時に、特定の設定を使用する

1. Host xxx.yyy.zzz.aaa
2.   IdentityFile /home/asial/.ssh/id_rsa_test

２. ホストキーをチェックしないようにする

1.  ssh -o StrictHostKeyChecking=no server-name

３．SSHでログインした時に、指定したコマンドしか実行できないようにする

1. command="(実行したいコマンド)"[,オプション1,オプション2,...] (その人の公開鍵データ)
2. command="(実行したいコマンド)"[,オプション1,オプション2,...] (その人の公開鍵データ)
3. ...

1. #!/bin/bash
2. logger -p security.notice "Logged in $1 $2"
4. if [[ $SSH_ORIGINAL_COMMAND = "" ]];
5. then
6.   bash
7. else
8.   logger -p security.notice "Running $SSH_ORIGINAL_COMMAND"
9.   $SSH_ORIGINAL_COMMAND
10. fi

1. command="/home/asial/.ssh/logging.sh" ssh-rsa ... 

４．最初に使用した秘密鍵を使って別のサーバーにログインする

1. eval `ssh-agent` (もしくは、ssh-agent bash など)
3. ssh-add [秘密鍵ファイルのパス]

５. 踏み台サーバーを経由して別のサーバーにログインする

1. ssh ユーザー名@ログインしたいサーバーIP -o 'ProxyCommand ssh 踏み台サーバーユーザー名@踏み台サーバーIP nc %h %p'

1. Host ログインしたいサーバーIP
2.   ProxyCommand ssh 踏み台サーバーユーザー名@踏み台サーバーIP nc %h %p

Twitter Bootstrapとはなにか

サイトにTwitter Bootstrapを導入しよう！

1. <link href="css/bootstrap.css" rel="stylesheet">
2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
3. <script src="js/bootstrap.js"></script>

レイアウト

1. <div class="container">
2.   <div class="row">
3.     <div class="span4">
4.       Span4の中身
5.     </div>
6.     <div class="span8">
7.       Span8の中身
8.     </div>
9.   </div>
10. </div>

1. <div class="container-fluid">
2.   <div class="row-fluid">
3.     <div class="span4">
4.       Span4の中身
5.     </div>
6.     <div class="span8">
7.       Span8の中身
8.     </div>
9.   </div>
10. </div>

Preタグで囲むコード

1. .com {
2.       color: #93A1A1;
3. }
4. .lit {
5.       color: #195F91;
6. }
7. .pun, .opn, .clo {
8.       color: #93A1A1;
9. }
10. .fun {
11.       color: #DC322F;
12. }
13. .str, .atv {
14.       color: #DD1144;
15. }
16. .kwd, .linenums .tag {
17.       color: #1E347B;
18. }
19. .typ, .atn, .dec, .var {
20.       color: teal;
21. }
22. .pln {
23.       color: #48484C;
24. }
25. .prettyprint {
26.       background-color: #F7F7F9;
27.       border: 1px solid #E1E1E8;
28.       padding: 8px;
29. }
30. .prettyprint.linenums {
31.       box-shadow: 40px 0 0 #FBFBFC inset, 41px 0 0 #ECECF0 inset;
32. }
33. ol.linenums {
34.       margin: 0 0 0 33px;
35. }
36. ol.linenums li {
37.   color: #BEBEC5;
38.   line-height: 18px;
39.   padding-left: 12px;
40.   text-shadow: 0 1px 0 #FFFFFF;
41. }

テーブル

フォーム

ボタン、ラベル

アイコン

1. <a class="btn"><i class="icon-pencil"></i> 黒いアイコンを使うとき</a>
2. <a class="btn btn-primary"><i class="icon-pencil icon-white"></a> 白抜きアイコンを使うとき</a>

ひな形がほしい！

色を変えたい！