2013年1月5日土曜日

今さらながらvirtualenv Windows8編

久々にWindows環境を整備することになり、手元にはWindos8マシンが用意できた。

すっかりvirtualenvを使わないと気持ち悪い体質になってしまったので、Windowsでのセットアップ手順や注意事項をメモしておく。

前提
  • どうやらコマンドプロンプトはもう時代遅れっぽいのでPowerShellにする。
  • C:\Python27\Lib\site-packagesにはvirtualenv.pyしかインストールしない!
    • setuptoolsとかpipはvirtualenv環境にのみ存在する状態にしておけば、環境切り替え忘れてpip install djangoとかしてもエラーになるだけなので環境が汚れない。
  • パッケージ管理はpipを使う。
    • virtualenv環境のパッケージ管理はpipに統一しておく。pip freezeでパッケージのリストを作っておけば、環境の再構築もとても簡単安全に行える。


pypiからtar.gzの最新パッケージをダウンロードして解凍する。

setup.pyでインストールする。

C:\Users\ryo\Downloads\virtualenv-1.8.4> C:\Python27\python.exe setup.py install

Note: without Setuptools installed you will have to use "python -m virtualenv ENV"
running install
running build
running build_py
creating build
creating build\lib
copying virtualenv.py -> build\lib
creating build\lib\virtualenv_support
copying virtualenv_support\__init__.py -> build\lib\virtualenv_support
copying virtualenv_support\setuptools-0.6c11-py2.7.egg -> build\lib\virtualenv_support
copying virtualenv_support\distribute-0.6.31.tar.gz -> build\lib\virtualenv_suppor
copying virtualenv_support\pip-1.2.1.tar.gz -> build\lib\virtualenv_support
running install_lib
copying build\lib\virtualenv.py -> C:\Python27\Lib\site-packages
creating C:\Python27\Lib\site-packages\virtualenv_support
copying build\lib\virtualenv_support\distribute-0.6.31.tar.gz -> C:\Python27\Lib\site-packages\virtualenv_support
copying build\lib\virtualenv_support\pip-1.2.1.tar.gz -> C:\Python27\Lib\site-packages\virtualenv_support
copying build\lib\virtualenv_support\setuptools-0.6c11-py2.7.egg -> C:\Python27\Lib\site-packages\virtualenv_support
copying build\lib\virtualenv_support\__init__.py -> C:\Python27\Lib\site-packages\virtualenv_support
byte-compiling C:\Python27\Lib\site-packages\virtualenv.py to virtualenv.pyc
byte-compiling C:\Python27\Lib\site-packages\virtualenv_support\__init__.py to __init__.pyc
running install_egg_info
Writing C:\Python27\Lib\site-packages\virtualenv-1.8.4-py2.7.egg-info

これでインストールは完了。簡単。 環境の作り方
C:\Users\ryo> python -m virtualenv --distribute venv
New python executable in venv\Scripts\python.exe
Installing distribute.............................................................................................................................................................................................................................done.
Installing pip..................done.
venv\Scripts\activte.ps1をpowershell上で実行するとプロンプトに環境名が表示される。これで準備完了。
C:\Users\ryo> .\venv\Scripts\activate.ps1
(venv) C:\Users\ryo>
これでC:\Python27\Libを見ずにvenv\Libを見るようになったのでパッケージインストールする。
(venv) C:\Users\ryo> pip install unittest2
(venv) C:\Users\ryo> pip freeze
distribute==0.6.31
unittest2==0.5.1

以上。

2012年4月4日水曜日

レスポンシブデザイン

bootstrapが2.0で対応したレスポンシブデザイン。どの様なものか、調べてみた。

最近のウェブサイトのデザインは、PC、タブレットPC、スマートフォン、ガラケー、と数多くのデバイスで表示されることを想定する必要がある。

昔はユーザーエイジェントでサイトデザインを切り分けたり、そもそもURLが別だったりするのが一般的だったけど、今はじょじょに画面解像度を見てレイアウトを変更する手法が主流になりつつあるらしい。ただしメリットもデメリットもある様なので全面的にレスポンシブデザインに移行するとは考えにくい。


仕組みの簡単な説明


一昔前から目にすることのあった、Media typesの拡張。Media typesでは「モニター出力用スタイルシート」「印刷用スタイルシート」といった切り替えが行われていた。
 
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
@media screen {
  * { font-family: sans-serif }
}

@media print {
  * { font-family: serif }
}

CSS3ではタイプでは無く解像度などで細かく指定できるようになっていて、Media Queriesという名称に変わった。

例)400ピクセル以上700ピクセル以下の幅を持つPCモニター出力の場合この設定
@media screen and (min-width: 400px) and (max-width: 700px) {
    background-color: #ff8888;
}

条件は複数マッチさせることも出来るけど、多少の重複は許してきっちり分けちゃった方が管理し易そう。
@media screen and (min-width: 400px) { 
    background-color: #ff8888;
}
@media screen and (min-width: 700px) {
    font-size: 1.2em;
}

InternetExplorer


respond.jsというスクリプトを使うとIE8以下のCSS3に対応していないブラウザでもメディアクエリーが使えるようになります。headタグの一番最後にscriptタグで読み込み指定しましょう。

メリットとデメリット


理想論だけど、仕様をある程度理解した上で感じた印象。
  • メリット
    • 見た目の切り替えを全てCSSの中で行うので、サーバーサイドの処理の切り替えが必要ない。つまりサーバーサイドスクリプトのメンテナンスコストが下がる
    • デバイスの解像度を見て自動的に切り替わるので、未知のデバイスにも対応できる。
  • デメリット
    • PC向けもガラケー向けも同じだけの通信量が発生する。むしろ両方のデータが渡される訳だから増える傾向にある。
    • CSS自体のメンテナンスコストは上がると思う。
今後はスマートフォンでも高解像度化は進むし、通信回線はwi-fiになるから通信料なんて気にしなくていいでしょ!みたいな軽いノリを感じる。

サンプル


一つのhtmlで、PC、タブレットPC、スマートフォンの対応を行うサンプルをgistに上げた。test.htmlをブラウザで開き、ウインドウサイズをじょじょに小さくしていくとレイアウトが変わって行く様子を確認できます。見た目悪いけど、分かり易さ重視で。
  • iPad横向き(768px)以上はPCと同じ扱い。タイトルとメニューは位置固定。
  • iPad横向き(768px)未満まではちょっとだけ画面が狭いのでメニューを画面上部に移動。ただし位置は固定。
  • iPhone横向き(480px)までは縦に羅列。フォントはやや小さく。
最後にソースをベタッと。CSSはlessで書いてます。
@media (max-width: 480px) {
/*
iPhone横向きまでは縦に羅列。フォントはやや小さく。
+------------------------+
|TITLE |
+------------------------+
|MENU |
+------------------------+
|AD |
+------------------------+
|CONTENTS |
| |
| |
+------------------------+
|FOOTER |
+------------------------+
*/
body {
font-size: 0.7em;
}
}
@media (min-width: 481px) and (max-width: 768px) {
/*
iPad横向き未満までは気持ち画面が狭いのでメニューを画面上部に移動。ただし位置は固定。
+------------------------+
|TITLE |
+------------------------+
|MENU |
+-------------+----------+
| CONTENTS | AD |
| | |
| | |
+-------------+----------+
|FOOTER |
+------------------------+
*/
body #title {
position: fixed;
top: 0;
width: 100%;
height: 40px;
}
body #menu {
position: fixed;
top: 40px;
width: 100%;
height: 30px;
}
body #menu li {
width: 140px;
display: inline;
}
body #main {
padding-left: 0;
padding-top: 70px;
}
body #main #adframe {
float: right;
width: 250px;
height: 1000px;
}
body #main #contents {
margin-right: 250px;
}
body footer {
clear: both;
}
}
@media (min-width: 769px) {
/*
iPad横向き以上はPCと同じ扱い。タイトルとメニューは位置固定。
+------------------------+
|TITLE |
+----+-------------+-----+
|MENU| CONTENTS | AD |
| | | |
| | | |
+---+--------------+-----+
|FOOTER |
+------------------------+
*/
body #title {
position: fixed;
top: 0;
width: 100%;
height: 40px;
}
body #menu {
position: fixed;
top: 40px;
width: 200px;
}
body #main {
padding-left: 200px;
padding-top: 40px;
}
body #main #adframe {
float: right;
width: 250px;
height: 1000px;
}
body #main #contents {
margin-right: 250px;
}
body footer {
clear: both;
}
}
/*
ブラウザー毎の差異を吸収する
*/
html,
head,
body,
div,
p,
table,
thead,
tbody,
tr,
td,
th,
h1,
h2,
h3,
h4,
h5,
li {
padding: 0;
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0 0 0 40px;
}
/*
色など、メディアクエリーで変化しない属性を定義
*/
body .blue {
background-color: #c8c8ff;
}
body .green {
background-color: #c8ffc9;
}
body .red {
background-color: #ffc8c9;
}
body .yellow {
background-color: #e9f50c;
}
body .cyan {
background-color: #0ce9f5;
}
/* EOF */
view raw all.css hosted with ❤ by GitHub
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="all.css" />
<title>mediaquery実験</title>
<!--[if lt IE 9]>
<script src="respond.src.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1 id="title" class="cyan">レスポンシブデザインのテスト</h1>
<div id="menu" class="blue">
<ul>
<li>メニューその1</li>
<li>メニューその2</li>
<li>メニューその3</li>
<li>メニューその4</li>
</ul>
</div>
<div id="main">
<div id="adframe" class="green">
<div class="ad">
広告 その1
</div>
<div class="ad">
広告 その2
</div>
<div class="ad">
広告 その3
</div>
</div>
<div id="contents_wrapper" class="red">
<h2>mediaqueryで解像度毎にレイアウトを切り替える</h2>
<div id="contents" class="">
内容
 吾輩
わがはい
は猫である。名前はまだ無い。
 どこで生れたかとんと見当
けんとう
がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪
どうあく
な種族であったそうだ。この書生というのは時々我々を捕
つかま
えて煮
て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌
てのひら
に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始
みはじめ
であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶
やかん
だ。その後
猫にもだいぶ逢
ったがこんな片輪
かたわ
には一度も出会
でく
わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙
けむり
を吹く。どうも咽
せぽくて実に弱った。これが人間の飲む煙草
たばこ
というものである事はようやくこの頃知った。
 この書生の掌の裏
うち
でしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗
むやみ
に眼が廻る。胸が悪くなる。到底
とうてい
助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。
 ふと気が付いて見ると書生はいない。たくさんおった兄弟が一疋
ぴき
も見えぬ。肝心
かんじん
の母親さえ姿を隠してしまった。その上今
いま
までの所とは違って無暗
むやみ
に明るい。眼を明いていられぬくらいだ。はてな何でも容子
ようす
がおかしいと、のそのそ這
い出して見ると非常に痛い。吾輩は藁
わら
の上から急に笹原の中へ棄てられたのである。
 ようやくの思いで笹原を這い出すと向うに大きな池がある。吾輩は池の前に坐ってどうしたらよかろうと考えて見た。別にこれという分別
ふんべつ
も出ない。しばらくして泣いたら書生がまた迎に来てくれるかと考え付いた。ニャー、ニャーと試みにやって見たが誰も来ない。そのうち池の上をさらさらと風が渡って日が暮れかかる。腹が非常に減って来た。泣きたくても声が出ない。仕方がない、何でもよいから食物
くいもの
のある所まであるこうと決心をしてそろりそろりと池を左
ひだ
りに廻り始めた。どうも非常に苦しい。そこを我慢して無理やりに這
って行くとようやくの事で何となく人間臭い所へ出た。ここへ這入
はい
ったら、どうにかなると思って竹垣の崩
くず
れた穴から、とある邸内にもぐり込んだ。縁は不思議なもので、もしこの竹垣が破れていなかったなら、吾輩はついに路傍
ろぼう
に餓死
がし
したかも知れんのである。一樹の蔭とはよく云
ったものだ。この垣根の穴は今日
こんにち
に至るまで吾輩が隣家
となり
の三毛を訪問する時の通路になっている。さて邸
やしき
へは忍び込んだもののこれから先どうして善
いか分らない。そのうちに暗くなる、腹は減る、寒さは寒し、雨が降って来るという始末でもう一刻の猶予
ゆうよ
が出来なくなった。仕方がないからとにかく明るくて暖かそうな方へ方へとあるいて行く。今から考えるとその時はすでに家の内に這入っておったのだ。ここで吾輩は彼
の書生以外の人間を再び見るべき機会に遭遇
そうぐう
したのである。第一に逢ったのがおさんである。これは前の書生より一層乱暴な方で吾輩を見るや否やいきなり頸筋
くびすじ
をつかんで表へ抛
ほう
り出した。いやこれは駄目だと思ったから眼をねぶって運を天に任せていた。しかしひもじいのと寒いのにはどうしても我慢が出来ん。吾輩は再びおさんの隙
すき
を見て台所へ這
い上
あが
った。すると間もなくまた投げ出された。吾輩は投げ出されては這い上り、這い上っては投げ出され、何でも同じ事を四五遍繰り返したのを記憶している。その時におさんと云う者はつくづくいやになった。この間おさんの三馬
さんま
を偸
ぬす
んでこの返報をしてやってから、やっと胸の痞
つかえ
が下りた。吾輩が最後につまみ出されようとしたときに、この家
うち
の主人が騒々しい何だといいながら出て来た。下女は吾輩をぶら下げて主人の方へ向けてこの宿
やど
なしの小猫がいくら出しても出しても御台所
おだいどころ
へ上
あが
って来て困りますという。主人は鼻の下の黒い毛を撚
ひね
りながら吾輩の顔をしばらく眺
なが
めておったが、やがてそんなら内へ置いてやれといったまま奥へ這入
はい
ってしまった。主人はあまり口を聞かぬ人と見えた。下女は口惜
くや
しそうに吾輩を台所へ抛
ほう
り出した。かくして吾輩はついにこの家
うち
を自分の住家
すみか
と極
める事にしたのである。
 吾輩の主人は滅多
めった
に吾輩と顔を合せる事がない。職業は教師だそうだ。学校から帰ると終日書斎に這入ったぎりほとんど出て来る事がない。家のものは大変な勉強家だと思っている。当人も勉強家であるかのごとく見せている。しかし実際はうちのものがいうような勤勉家ではない。吾輩は時々忍び足に彼の書斎を覗
のぞ
いて見るが、彼はよく昼寝
ひるね
をしている事がある。時々読みかけてある本の上に涎
よだれ
をたらしている。彼は胃弱で皮膚の色が淡黄色
たんこうしょく
を帯びて弾力のない不活溌
ふかっぱつ
な徴候をあらわしている。その癖に大飯を食う。大飯を食った後
あと
でタカジヤスターゼを飲む。飲んだ後で書物をひろげる。二三ページ読むと眠くなる。涎を本の上へ垂らす。これが彼の毎夜繰り返す日課である。吾輩は猫ながら時々考える事がある。教師というものは実に楽
らく
なものだ。人間と生れたら教師となるに限る。こんなに寝ていて勤まるものなら猫にでも出来ぬ事はないと。それでも主人に云わせると教師ほどつらいものはないそうで彼は友達が来る度
たび
に何とかかんとか不平を鳴らしている。
 吾輩がこの家へ住み込んだ当時は、主人以外のものにははなはだ不人望であった。どこへ行っても跳
ね付けられて相手にしてくれ手がなかった。いかに珍重されなかったかは、今日
こんにち
に至るまで名前さえつけてくれないのでも分る。吾輩は仕方がないから、出来得る限り吾輩を入れてくれた主人の傍
そば
にいる事をつとめた。朝主人が新聞を読むときは必ず彼の膝
ひざ
の上に乗る。彼が昼寝をするときは必ずその背中
せなか
に乗る。これはあながち主人が好きという訳ではないが別に構い手がなかったからやむを得んのである。その後いろいろ経験の上、朝は飯櫃
めしびつ
の上、夜は炬燵
こたつ
の上、天気のよい昼は椽側
えんがわ
へ寝る事とした。しかし一番心持の好いのは夜
に入
ってここのうちの小供の寝床へもぐり込んでいっしょにねる事である。この小供というのは五つと三つで夜になると二人が一つ床へ入
はい
って一間
ひとま
へ寝る。吾輩はいつでも彼等の中間に己
おの
れを容
るべき余地を見出
みいだ
してどうにか、こうにか割り込むのであるが、運悪く小供の一人が眼を醒
ますが最後大変な事になる。小供は――ことに小さい方が質
たち
がわるい――猫が来た猫が来たといって夜中でも何でも大きな声で泣き出すのである。すると例の神経胃弱性の主人は必
かなら
ず眼をさまして次の部屋から飛び出してくる。現にせんだってなどは物指
ものさし
で尻ぺたをひどく叩
たた
かれた。
 吾輩は人間と同居して彼等を観察すればするほど、彼等は我儘
わがまま
なものだと断言せざるを得ないようになった。ことに吾輩が時々同衾
どうきん
する小供のごときに至っては言語同断
ごんごどうだん
である。自分の勝手な時は人を逆さにしたり、頭へ袋をかぶせたり、抛
ほう
り出したり、へっついの中へ押し込んだりする。しかも吾輩の方で少しでも手出しをしようものなら家内
かない
総がかりで追い廻して迫害を加える。この間もちょっと畳で爪を磨
いだら細君が非常に怒
おこ
ってそれから容易に座敷へ入
れない。台所の板の間で他
ひと
が顫
ふる
えていても一向
いっこう
平気なものである。吾輩の尊敬する筋向
すじむこう
の白君などは逢
う度毎
たびごと
に人間ほど不人情なものはないと言っておらるる。白君は先日玉のような子猫を四疋産
まれたのである。ところがそこの家
うち
の書生が三日目にそいつを裏の池へ持って行って四疋ながら棄てて来たそうだ。白君は涙を流してその一部始終を話した上、どうしても我等猫族
ねこぞく
が親子の愛を完
まった
くして美しい家族的生活をするには人間と戦ってこれを剿滅
そうめつ
せねばならぬといわれた。一々もっともの議論と思う。また隣りの三毛
みけ
君などは人間が所有権という事を解していないといって大
おおい
に憤慨している。元来我々同族間では目刺
めざし
の頭でも鰡
ぼら
の臍
へそ
でも一番先に見付けたものがこれを食う権利があるものとなっている。もし相手がこの規約を守らなければ腕力に訴えて善
いくらいのものだ。しかるに彼等人間は毫
ごう
もこの観念がないと見えて我等が見付けた御馳走は必ず彼等のために掠奪
りゃくだつ
せらるるのである。彼等はその強力を頼んで正当に吾人が食い得べきものを奪
うば
ってすましている。白君は軍人の家におり三毛君は代言の主人を持っている。吾輩は教師の家に住んでいるだけ、こんな事に関すると両君よりもむしろ楽天である。ただその日その日がどうにかこうにか送られればよい。いくら人間だって、そういつまでも栄える事もあるまい。まあ気を永く猫の時節を待つがよかろう。
 我儘
わがまま
で思い出したからちょっと吾輩の家の主人がこの我儘で失敗した話をしよう。元来この主人は何といって人に勝
すぐ
れて出来る事もないが、何にでもよく手を出したがる。俳句をやってほととぎすへ投書をしたり、新体詩を明星へ出したり、間違いだらけの英文をかいたり、時によると弓に凝
ったり、謡
うたい
を習ったり、またあるときはヴァイオリンなどをブーブー鳴らしたりするが、気の毒な事には、どれもこれも物になっておらん。その癖やり出すと胃弱の癖にいやに熱心だ。後架
こうか
の中で謡をうたって、近所で後架先生
こうかせんせい
と渾名
あだな
をつけられているにも関せず一向
いっこう
平気なもので、やはりこれは平
たいら
の宗盛
むねもり
にて候
そうろう
を繰返している。みんながそら宗盛だと吹き出すくらいである。この主人がどういう考になったものか吾輩の住み込んでから一月ばかり後
のち
のある月の月給日に、大きな包みを提
げてあわただしく帰って来た。何を買って来たのかと思うと水彩絵具と毛筆とワットマンという紙で今日から謡や俳句をやめて絵をかく決心と見えた。果して翌日から当分の間というものは毎日毎日書斎で昼寝もしないで絵ばかりかいている。しかしそのかき上げたものを見ると何をかいたものやら誰にも鑑定がつかない。当人もあまり甘
うま
くないと思ったものか、ある日その友人で美学とかをやっている人が来た時に下
しも
のような話をしているのを聞いた。
「どうも甘
うま
くかけないものだね。人のを見ると何でもないようだが自
みずか
ら筆をとって見ると今更
いまさら
のようにむずかしく感ずる」これは主人の述懐
じゅっかい
である。なるほど詐
いつわ
りのない処だ。彼の友は金縁の眼鏡越
めがねごし
に主人の顔を見ながら、「そう初めから上手にはかけないさ、第一室内の想像ばかりで画
がかける訳のものではない。昔
むか
し以太利
イタリー
の大家アンドレア・デル・サルトが言った事がある。画をかくなら何でも自然その物を写せ。天に星辰
せいしん
あり。地に露華
ろか
あり。飛ぶに禽
とり
あり。走るに獣
けもの
あり。池に金魚あり。枯木
こぼく
に寒鴉
かんあ
あり。自然はこれ一幅の大活画
だいかつが
なりと。どうだ君も画らしい画をかこうと思うならちと写生をしたら」
「へえアンドレア・デル・サルトがそんな事をいった事があるかい。ちっとも知らなかった。なるほどこりゃもっともだ。実にその通りだ」と主人は無暗
むやみ
に感心している。金縁の裏には嘲
あざ
けるような笑
わらい
が見えた。
 その翌日吾輩は例のごとく椽側
えんがわ
に出て心持善く昼寝
ひるね
をしていたら、主人が例になく書斎から出て来て吾輩の後
うし
ろで何かしきりにやっている。ふと眼が覚
めて何をしているかと一分
いちぶ
ばかり細目に眼をあけて見ると、彼は余念もなくアンドレア・デル・サルトを極
め込んでいる。吾輩はこの有様を見て覚えず失笑するのを禁じ得なかった。彼は彼の友に揶揄
やゆ
せられたる結果としてまず手初めに吾輩を写生しつつあるのである。吾輩はすでに十分
じゅうぶん
寝た。欠伸
あくび
がしたくてたまらない。しかしせっかく主人が熱心に筆を執
っているのを動いては気の毒だと思って、じっと辛棒
しんぼう
しておった。彼は今吾輩の輪廓をかき上げて顔のあたりを色彩
いろど
っている。吾輩は自白する。吾輩は猫として決して上乗の出来ではない。背といい毛並といい顔の造作といいあえて他の猫に勝
まさ
るとは決して思っておらん。しかしいくら不器量の吾輩でも、今吾輩の主人に描
えが
き出されつつあるような妙な姿とは、どうしても思われない。第一色が違う。吾輩は波斯産
ペルシャさん
の猫のごとく黄を含める淡灰色に漆
うるし
のごとき斑入
ふい
りの皮膚を有している。これだけは誰が見ても疑うべからざる事実と思う。しかるに今主人の彩色を見ると、黄でもなければ黒でもない、灰色でもなければ褐色
とびいろ
でもない、さればとてこれらを交ぜた色でもない。ただ一種の色であるというよりほかに評し方のない色である。その上不思議な事は眼がない。もっともこれは寝ているところを写生したのだから無理もないが眼らしい所さえ見えないから盲猫
めくら
だか寝ている猫だか判然しないのである。吾輩は心中ひそかにいくらアンドレア・デル・サルトでもこれではしようがないと思った。しかしその熱心には感服せざるを得ない。なるべくなら動かずにおってやりたいと思ったが、さっきから小便が催うしている。身内
みうち
の筋肉はむずむずする。最早
もはや
一分も猶予
ゆうよ
が出来ぬ仕儀
しぎ
となったから、やむをえず失敬して両足を前へ存分のして、首を低く押し出してあーあと大
だい
なる欠伸をした。さてこうなって見ると、もうおとなしくしていても仕方がない。どうせ主人の予定は打
ち壊
わしたのだから、ついでに裏へ行って用を足
そうと思ってのそのそ這い出した。すると主人は失望と怒りを掻
き交ぜたような声をして、座敷の中から「この馬鹿野郎」と怒鳴
どな
った。この主人は人を罵
ののし
るときは必ず馬鹿野郎というのが癖である。ほかに悪口の言いようを知らないのだから仕方がないが、今まで辛棒した人の気も知らないで、無暗
むやみ
に馬鹿野郎呼
よば
わりは失敬だと思う。それも平生吾輩が彼の背中
せなか
へ乗る時に少しは好い顔でもするならこの漫罵
まんば
も甘んじて受けるが、こっちの便利になる事は何一つ快くしてくれた事もないのに、小便に立ったのを馬鹿野郎とは酷
ひど
い。元来人間というものは自己の力量に慢じてみんな増長している。少し人間より強いものが出て来て窘
いじ
めてやらなくてはこの先どこまで増長するか分らない。
 我儘
わがまま
もこのくらいなら我慢するが吾輩は人間の不徳についてこれよりも数倍悲しむべき報道を耳にした事がある。
 吾輩の家の裏に十坪ばかりの茶園
ちゃえん
がある。広くはないが瀟洒
さっぱり
とした心持ち好く日の当
あた
る所だ。うちの小供があまり騒いで楽々昼寝の出来ない時や、あまり退屈で腹加減のよくない折などは、吾輩はいつでもここへ出て浩然
こうぜん
の気を養うのが例である。ある小春の穏かな日の二時頃であったが、吾輩は昼飯後
ちゅうはんご
快よく一睡した後
のち
、運動かたがたこの茶園へと歩
を運ばした。茶の木の根を一本一本嗅ぎながら、西側の杉垣のそばまでくると、枯菊を押し倒してその上に大きな猫が前後不覚に寝ている。彼は吾輩の近づくのも一向
いっこう
心付かざるごとく、また心付くも無頓着なるごとく、大きな鼾
いびき
をして長々と体を横
よこた
えて眠っている。他
ひと
の庭内に忍び入りたるものがかくまで平気に睡
ねむ
られるものかと、吾輩は窃
ひそ
かにその大胆なる度胸に驚かざるを得なかった。彼は純粋の黒猫である。わずかに午
を過ぎたる太陽は、透明なる光線を彼の皮膚の上に抛
げかけて、きらきらする柔毛
にこげ
の間より眼に見えぬ炎でも燃
え出
ずるように思われた。彼は猫中の大王とも云うべきほどの偉大なる体格を有している。吾輩の倍はたしかにある。吾輩は嘆賞の念と、好奇の心に前後を忘れて彼の前に佇立
ちょりつ
して余念もなく眺
なが
めていると、静かなる小春の風が、杉垣の上から出たる梧桐
ごとう
の枝を軽
かろ
く誘ってばらばらと二三枚の葉が枯菊の茂みに落ちた。大王はかっとその真丸
まんまる
の眼を開いた。今でも記憶している。その眼は人間の珍重する琥珀
こはく
というものよりも遥
はる
かに美しく輝いていた。彼は身動きもしない。双眸
そうぼう
の奥から射るごとき光を吾輩の矮小
わいしょう
なる額
ひたい
の上にあつめて、御めえは一体何だと云った。大王にしては少々言葉が卑
いや
しいと思ったが何しろその声の底に犬をも挫
しぐべき力が籠
こも
っているので吾輩は少なからず恐れを抱
いだ
いた。しかし挨拶
あいさつ
をしないと険呑
けんのん
だと思ったから「吾輩は猫である。名前はまだない」となるべく平気を装
よそお
って冷然と答えた。しかしこの時吾輩の心臓はたしかに平時よりも烈しく鼓動しておった。彼は大
おおい
に軽蔑
けいべつ
せる調子で「何、猫だ? 猫が聞いてあきれらあ。全
ぜん
てえどこに住んでるんだ」随分傍若無人
ぼうじゃくぶじん
である。「吾輩はここの教師の家
うち
にいるのだ」「どうせそんな事だろうと思った。いやに瘠
せてるじゃねえか」と大王だけに気焔
きえん
を吹きかける。言葉付から察するとどうも良家の猫とも思われない。しかしその膏切
あぶらぎ
って肥満しているところを見ると御馳走を食ってるらしい、豊かに暮しているらしい。吾輩は「そう云う君は一体誰だい」と聞かざるを得なかった。「己
れあ車屋の黒
くろ
よ」昂然
こうぜん
たるものだ。車屋の黒はこの近辺で知らぬ者なき乱暴猫である。しかし車屋だけに強いばかりでちっとも教育がないからあまり誰も交際しない。同盟敬遠主義の的
まと
になっている奴だ。吾輩は彼の名を聞いて少々尻こそばゆき感じを起すと同時に、一方では少々軽侮
けいぶ
の念も生じたのである。吾輩はまず彼がどのくらい無学であるかを試
ため
してみようと思って左
の問答をして見た。
「一体車屋と教師とはどっちがえらいだろう」
「車屋の方が強いに極
きま
っていらあな。御めえのうちの主人を見ねえ、まるで骨と皮ばかりだぜ」
「君も車屋の猫だけに大分
だいぶ
強そうだ。車屋にいると御馳走
ごちそう
が食えると見えるね」
「何
なあ
におれなんざ、どこの国へ行ったって食い物に不自由はしねえつもりだ。御めえなんかも茶畠
ちゃばたけ
ばかりぐるぐる廻っていねえで、ちっと己
おれ
の後
あと
へくっ付いて来て見ねえ。一と月とたたねえうちに見違えるように太れるぜ」
「追ってそう願う事にしよう。しかし家
うち
は教師の方が車屋より大きいのに住んでいるように思われる」
「箆棒
べらぼう
め、うちなんかいくら大きくたって腹の足
しになるもんか」
 彼は大
おおい
に肝癪
かんしゃく
に障
さわ
った様子で、寒竹
かんちく
をそいだような耳をしきりとぴく付かせてあららかに立ち去った。吾輩が車屋の黒と知己
ちき
になったのはこれからである。
 その後
吾輩は度々
たびたび
黒と邂逅
かいこう
する。邂逅する毎
ごと
に彼は車屋相当の気焔
きえん
を吐く。先に吾輩が耳にしたという不徳事件も実は黒から聞いたのである。
 或る日例のごとく吾輩と黒は暖かい茶畠
ちゃばたけ
の中で寝転
ねころ
びながらいろいろ雑談をしていると、彼はいつもの自慢話
じまんばな
しをさも新しそうに繰り返したあとで、吾輩に向って下
しも
のごとく質問した。「御めえは今までに鼠を何匹とった事がある」智識は黒よりも余程発達しているつもりだが腕力と勇気とに至っては到底
とうてい
黒の比較にはならないと覚悟はしていたものの、この問に接したる時は、さすがに極
きま
りが善
くはなかった。けれども事実は事実で詐
いつわ
る訳には行かないから、吾輩は「実はとろうとろうと思ってまだ捕
らない」と答えた。黒は彼の鼻の先からぴんと突張
つっぱ
っている長い髭
ひげ
をびりびりと震
ふる
わせて非常に笑った。元来黒は自慢をする丈
だけ
にどこか足りないところがあって、彼の気焔
きえん
を感心したように咽喉
のど
をころころ鳴らして謹聴していればはなはだ御
ぎょ
しやすい猫である。吾輩は彼と近付になってから直
すぐ
にこの呼吸を飲み込んだからこの場合にもなまじい己
おの
れを弁護してますます形勢をわるくするのも愚
である、いっその事彼に自分の手柄話をしゃべらして御茶を濁すに若
くはないと思案を定
さだ
めた。そこでおとなしく「君などは年が年であるから大分
だいぶん
とったろう」とそそのかして見た。果然彼は墻壁
しょうへき
の欠所
けっしょ
に吶喊
とっかん
して来た。「たんとでもねえが三四十はとったろう」とは得意気なる彼の答であった。彼はなお語をつづけて「鼠の百や二百は一人でいつでも引き受けるがいたちってえ奴は手に合わねえ。一度いたちに向って酷
ひど
い目に逢
った」「へえなるほど」と相槌
あいづち
を打つ。黒は大きな眼をぱちつかせて云う。「去年の大掃除の時だ。うちの亭主が石灰
いしばい
の袋を持って椽
えん
の下へ這
い込んだら御めえ大きないたちの野郎が面喰
めんくら
って飛び出したと思いねえ」「ふん」と感心して見せる。「いたちってけども何鼠の少し大きいぐれえのものだ。こん畜生
ちきしょう
って気で追っかけてとうとう泥溝
どぶ
の中へ追い込んだと思いねえ」「うまくやったね」と喝采
かっさい
してやる。「ところが御めえいざってえ段になると奴め最後
さいご
っ屁
をこきゃがった。臭
くせ
えの臭くねえのってそれからってえものはいたちを見ると胸が悪くならあ」彼はここに至ってあたかも去年の臭気を今
いま
なお感ずるごとく前足を揚げて鼻の頭を二三遍なで廻わした。吾輩も少々気の毒な感じがする。ちっと景気を付けてやろうと思って「しかし鼠なら君に睨
にら
まれては百年目だろう。君はあまり鼠を捕
るのが名人で鼠ばかり食うものだからそんなに肥って色つやが善いのだろう」黒の御機嫌をとるためのこの質問は不思議にも反対の結果を呈出
ていしゅつ
した。彼は喟然
きぜん
として大息
たいそく
していう。「考
かん
げえるとつまらねえ。いくら稼いで鼠をとったって――一てえ人間ほどふてえ奴は世の中にいねえぜ。人のとった鼠をみんな取り上げやがって交番へ持って行きゃあがる。交番じゃ誰が捕
ったか分らねえからそのたんびに五銭ずつくれるじゃねえか。うちの亭主なんか己
おれ
の御蔭でもう壱円五十銭くらい儲
もう
けていやがる癖に、碌
ろく
なものを食わせた事もありゃしねえ。おい人間てものあ体
てい
の善
い泥棒だぜ」さすが無学の黒もこのくらいの理窟
りくつ
はわかると見えてすこぶる怒
おこ
った容子
ようす
で背中の毛を逆立
さかだ
てている。吾輩は少々気味が悪くなったから善い加減にその場を胡魔化
ごまか
して家
うち
へ帰った。この時から吾輩は決して鼠をとるまいと決心した。しかし黒の子分になって鼠以外の御馳走を猟
あさ
ってあるく事もしなかった。御馳走を食うよりも寝ていた方が気楽でいい。教師の家
うち
にいると猫も教師のような性質になると見える。要心しないと今に胃弱になるかも知れない。
 教師といえば吾輩の主人も近頃に至っては到底
とうてい
水彩画において望
のぞみ
のない事を悟ったものと見えて十二月一日の日記にこんな事をかきつけた。
</div>
</div>
</div>
<footer class="yellow">
&copy; rt. 2012
</footer>
</div>
</body>
</html>
view raw test.html hosted with ❤ by GitHub

2012年4月2日月曜日

bootstrapをmake(lesscとuglifyjsをインストール)

githubのtwitter-bootstrapをビルドしたのでメモ。

Makefileがあるのでmakeコマンドでlessからcss(bootstrap.min.css)と、各モジュール毎にバラバラに用意されているファイルをまとめ、さらに圧縮されたjavascriptファイル(bootstrap.min.js)を作成することが出来る。簡単だけど、環境を用意する必要がある。

  • lessc
    lessコンパイラ。lessファイルからcssファイルを生成する。
  • uglify-js
    javascript圧縮ツール。

lesscもuglify-jsもnode.jsベースのコマンドラインツールなので、node.jsのインストールから行う必要がある。

Windowsではとてもめんどくさかったけど、Macではhomebrew使って簡単だった。Macでよかった。

環境整備

  1. node.jsをインストール。brewコマンド(homebrew)は予め用意しておく必要があります。
    [150]% brew install node
    ==> Downloading http://nodejs.org/dist/v0.6.14/node-v0.6.14.tar.gz
    ######################################################################## 100.0%
    ==> ./configure --prefix=/usr/local/Cellar/node/0.6.14 --without-npm
    ==> make install
    ==> Caveats
    Homebrew has NOT installed npm. We recommend the following method of
    installation:
    curl http://npmjs.org/install.sh | sh
    After installing, add the following path to your NODE_PATH environment
    variable to have npm libraries picked up:
    /usr/local/lib/node_modules
    ==> Summary
    /usr/local/Cellar/node/0.6.14: 80 files, 7.6M, built in 7.0 minutes
    [151]% 
    
    
    
  2. npmをインストール
    [153]% curl http://npmjs.org/install.sh | sh
    % Total % Received % Xferd Average Speed Time Time Time Current
    Dload Upload Total Spent Left Speed
    100 7881 100 7881 0 0 9741 0 --:--:-- --:--:-- --:--:-- 22013
    tar=/usr/bin/tar
    version:
    bsdtar 2.8.3 - libarchive 2.8.3
    install npm@1.1
    fetching: http://registry.npmjs.org/npm/-/npm-1.1.15.tgz
    0.6.14
    1.1.15
    cleanup prefix=/usr/local
    All clean!
    /usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
    npm@1.1.15 /usr/local/lib/node_modules/npm
    It worked
    [154]% 
    
    
    
  3. npmでlesscとuglify-jsをインストール。-gオプションをつけると/usr/local/binにインストールしてくれる。
    [156]% [156]% npm install less uglify-js -g
    npm http GET https://registry.npmjs.org/less
    npm http 200 https://registry.npmjs.org/less
    npm http GET https://registry.npmjs.org/less/-/less-1.3.0.tgz
    npm http 200 https://registry.npmjs.org/less/-/less-1.3.0.tgz
    /usr/local/bin/lessc -> /usr/local/lib/node_modules/less/bin/lessc
    less@1.3.0 /usr/local/lib/node_modules/less
    
    npm http GET https://registry.npmjs.org/uglify-js
    npm http 200 https://registry.npmjs.org/uglify-js
    npm http GET https://registry.npmjs.org/uglify-js/-/uglify-js-1.2.6.tgz
    npm http 200 https://registry.npmjs.org/uglify-js/-/uglify-js-1.2.6.tgz
    /usr/local/bin/uglifyjs -> /usr/local/lib/node_modules/uglify-js/bin/uglifyjs
    uglify-js@1.2.6 /usr/local/lib/node_modules/uglify-js
    
    [157]% 
    
    
    これで準備OK。

bootstrapをビルド

  1. とりあえずgithubから取得
    [126]% git clone https://github.com/twitter/bootstrap.git
    Cloning into 'bootstrap'...
    remote: Counting objects: 16437, done.
    remote: Compressing objects: 100% (5901/5901), done.
    remote: Total 16437 (delta 11451), reused 15137 (delta 10358)
    Receiving objects: 100% (16437/16437), 10.75 MiB | 248 KiB/s, done.
    Resolving deltas: 100% (11451/11451), done.
    
    
    
  2. Makefileがおかしい気がする。make docsしてからmake bootstrapしないとうまくいかないかも。
    [268]% cd bootstrap
    [269]% make bootstrap
    mkdir -p bootstrap/img
    mkdir -p bootstrap/css
    mkdir -p bootstrap/js
    cp img/* bootstrap/img/
    lessc ./less/bootstrap.less > bootstrap/css/bootstrap.css
    lessc --compress ./less/bootstrap.less > bootstrap/css/bootstrap.min.css
    lessc ./less/responsive.less > bootstrap/css/bootstrap-responsive.css
    lessc --compress ./less/responsive.less > bootstrap/css/bootstrap-responsive.min.css
    cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > bootstrap/js/bootstrap.js
    uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.tmp.js
    echo "/**\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js
    cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js
    rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js
     
    [270]% ls bootstrap/*
    bootstrap/css:
    bootstrap-responsive.css bootstrap.css
    bootstrap-responsive.min.css bootstrap.min.css
    
    bootstrap/img:
    glyphicons-halflings-white.png glyphicons-halflings.png
    
    bootstrap/js:
    bootstrap.js bootstrap.min.js
    [271]%
    
    
    bootstrapディレクトリの下にcssとjavascriptが生成されている。bootstrap-responsive.min.cssはレンスポンシブデザインのcss。

2012年3月25日日曜日

今さらながらvirtualenv

pythonbrewとかの方が流行なんじゃないかとは思いますが、今さらvirtualenv

Pythonの環境を切り替えるためのツールです。site-packagesのパスを切り替える感じ。それに対してpythonbrewの方は/usr/bin/pythonから丸ごと切り替える感じ。

同じpython2.7でも、使用するモジュールのバージョンを変えたいことがあると思います。

  • gaeはDjango1.2
  • herokuはDjango1.4

とか。今日はgae環境で作業、明日はheroku環境で作業、といったことがコマンド一つでできてします。それがvirtualenv。

自分としては仮想環境でOS丸ごと切り替えるのが流行だったのですが(雑でスイマセン)、herokuが推奨してたのでたまには使ってやろうかな、と。
herokuはrubyだけじゃなくてpythonもコミュニティの文化を良く理解してる感じがして、期待できそう。

そんな感じなvirtualenvのメモ。

 インストール方法 


  1. インストールはeasy_installで。これ以降easy_installは使わず、pipでインストールします。
  2. # easy_install virtualenv
    Searching for virtualenv
    Reading http://pypi.python.org/simple/virtualenv/
    Reading http://www.virtualenv.org
    Reading http://virtualenv.openplans.org
    Best match: virtualenv 1.7.1.2
    Downloading http://pypi.python.org/packages/source/v/virtualenv/virtualenv-1.7.1.2.tar.gz#md5=3be8a014c27340f48b56465f9109d9fa
    Processing virtualenv-1.7.1.2.tar.gz
    Running virtualenv-1.7.1.2/setup.py -q bdist_egg --dist-dir /tmp/easy_install-7Nfz5N/virtualenv-1.7.1.2/egg-dist-tmp-GxwbmV
    warning: no previously-included files matching '*.*' found under directory 'docs/_templates'
    Adding virtualenv 1.7.1.2 to easy-install.pth file
    Installing virtualenv script to /usr/local/bin
    
    Installed /Library/Python/2.7/site-packages/virtualenv-1.7.1.2-py2.7.egg
    Processing dependencies for virtualenv
    Finished processing dependencies for virtualenv
    
  3. 特に書くことが無い・・・


 使い方


  • 環境を作る。venvという名前でディレクトリが作成される。
    % virtualenv  venv
    New python executable in venv/bin/python
    Installing setuptools............done.
    Installing pip...............done.
    % ls
    venv/ 
    
  • 環境を切り替える。プロンプトに環境名が表示される。
    % source venv/bin/activate
    (venv)% 
    
  • パッケージのインストールはpipで行う。uninstallもできるよ!
    (venv)% pip install Django psycopg2
    Downloading/unpacking Django
      Downloading Django-1.4.tar.gz (7.6Mb): 7.6Mb downloaded
      Running setup.py egg_info for package Django
        
    Downloading/unpacking psycopg2
      Downloading psycopg2-2.4.4.tar.gz (648Kb): 648Kb downloaded
      Running setup.py egg_info for package psycopg2
        
    
    (中略)
    
        
        no previously-included directories found matching 'doc/src/_build'
    Successfully installed Django psycopg2
    Cleaning up...
    
    
    venvディレクトリのsite-packagesを見ると、djangoとpsycopg2がインストールされている。Django1.4!!
    (venv)% ls venv/lib/python2.7/site-packages/
    Django-1.4-py2.7.egg-info/     
    django/ 
    psycopg2-2.4.4-py2.7.egg-info/
    pip-1.1-py2.7.egg/        
    psycopg2/
    easy-install.pth               
    setuptools.pth
    
  • 設定について。インタープリターでsys.pathを確認してみてください。
    (venv)% python
    Python 2.7.1 (r271:86832, Jun 16 2011, 16:59:05) 
    [GCC 4.2.1 (Based on Apple Inc. build 5658) (LLVM build 2335.15.00)] on darwin
    Type "help", "copyright", "credits" or "license" for more information.
    >>> import sys
    >>> sys.path
    (秘密。だけど、venvの下のパスが並ぶ)
    >>> 
    
    

こりゃ簡単便利。試してみたいモジュールがあったら一つ環境を作ってインストールするとよさそう。

2012年3月22日木曜日

sshの便利な設定

便利な便利なssh。

  • 結構ハマりどころも多いので、ググって適当に設定しても上手くいかないことがある
  • たまにしか設定しないので忘れがちで、少し調べると「あー、そうだった」なんて思うことが多い

ので一通りの手順をまとめ。


パスワード無しでログイン

  1. 秘密鍵と公開鍵の作成

    ssh-keygenコマンドで秘密鍵と公開鍵を生成する。
    $ ssh-keygen -t rsa -C "myaddress@gmail.com"
    Generating public/private rsa key pair.
    Enter file in which to save the key (~/.ssh/id_rsa): 空欄でよろしい
    Enter passphrase (empty for no passphrase): 任意の文字列を入力!
    Enter same passphrase again: もう一度任意の文字列を入力!
    Your identification has been saved in ~/.ssh/id_rsa.
    Your public key has been saved in ~/.ssh/id_rsa.pub.
    The key fingerprint is:
    3f:dc:4e:ff:ff:ff:db:55:a3:52:ee:ee:ee:7a:64:47 myaddress@gmail.com
    
  2. id_rsa(秘密鍵)とid_rsa.pub(公開鍵)ができている。秘密と公開となっているがどちらも人の目に触れないように管理しなければいけないので勘違いしないよう注意。
    $ ls
    id_rsa     id_rsa.pub
    
  3. パスワード無しでログインしたいサーバーに登録する。クライアント側に秘密鍵(このままでOK)、サーバーのauthorized_keysの中に公開鍵を登録するのが最終目標。

    とりあえず一度ログインして、known_hostsにサーバーのキーを自動登録。
    $ ssh server-01
    The authenticity of host 'server01 (127.0.0.1)' can't be established.
    RSA key fingerprint is 3f:dc:4e:ff:ff:ff:db:55:a3:52:ee:ee:ee:7a:64:47.
    Are you sure you want to continue connecting (yes/no)? yes
    Warning: Permanently added 'server01' (RSA) to the list of known hosts.
    your_name@server01's password:
    Last login: Thu Mar 22 16:18:31 2012 from 192.168.0.0
    
    $ exit
    
  4. 続いてid_rsa.pubの内容をauthorized_keysに追加。

    scpでコピーしておいてからログインし追記でもいいし、
    $ scp ~/.ssh/id_rsa.pub your_name@server01
    $ ssh your_name@server01
    your_name@server01's password:ここは普通にログインパスワード
    Last login: Thu Mar 22 16:18:31 2012 from 192.168.0.0
    $ cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys
    
    エディタで開いてコピペでもよろしい
    $ vi ~/.ssh/authorized_keys
    
  5. 必ずパーミッションを変更する!クライアント側もサーバー側も、.sshは自分だけが見れる状態にするのを忘れずに!これを怠るとパスワード聞かれちゃうよ!
    $ chmod 700 ~/.ssh
    $ chmod 600 ~/.ssh/*
    


複数の設定を使い分ける


  • 複数のサーバーがあり、別々の秘密鍵でアクセスしたい場合がある。社内や自分で用意したサーバーだけならば全て同じ秘密鍵でもいいんだけど、githubとかは別にしておきたい、とか。

    さらに、ホスト名を短縮した形で登録する機能も併せ持っているので、
    $ ssh 長いユーザー名@長いホスト名
    
    なんて毎回打ちたくない人にもオススメ。

  • .ssh/configファイルに記述します。詳しくはman ssh-configを見てください。
    $ vi ~/.ssh/config
    
    Host myserver
        HostName        long_long_host_name.localdomain.com
        IdentityFile    ~/.ssh/id_rsa
        User            long_long_user_name
    
    Host github
        HostName        github.com
        IdentityFile    ~/.ssh/id_dsa
        User            git
        PreferredAuthentications publickey
    
  • ssh myserverだけでパスワードも聞かれずにスパーンとログインできる!
    $ ssh myserver
    Last login: Thu Mar 22 16:48:27 2012 from 127.0.0.1
    $ 
    
  • githubの接続テスト。id_dsaを使用して接続を行う!
    $ ssh -T github
    Hi sporty! You've successfully authenticated, but GitHub does not provide shell access.
    $ 
    


これだけ押さえておけば特に問題ないはず。

2012年2月25日土曜日

bloggerでシンタックスハイライト

今後意欲的にブログを書こうかと思うけど、下準備として細かい懸念点を解決しておきたい。

まずは、ソースコードやコマンドをシンタックスで色分けして表示したい。

こういうの

bloggerの基本機能ではもちろんそのようなものは見つからなかったので、調べました。
そして解決まで苦労したのでメモしておくことにします。

よしけんActivity: まずBloggerにSyntax Highlighter 3.0を適用してみる
など参考にさせてもらいました。

仕組みとしては、指定されたタグの中をJavaScriptで解析してクラス定義し、テーマとして用意したcssで色付けされているような感じ。jsファイルなどは外部サイトを直接参照することになるので、特にダウンロードなど必要ありません。テンプレートに読み込み指定のタグをちょちょいと書いておけばいいだけ。

ここからテンプレートのheadタグに埋め込むhtmlソースコードを取得します。
GENERATE SCRIPTSっていうボタンからジェネレータに飛んで以下の通りに取得してください。

  1. 乱暴ですけどテーマと必要な言語を全て選び 
  2. Copy To ClipBoardボタンを押してクリップボードにコピーしておきます。

次にテンプレートの編集です。
  1. bloggerの設定画面のテンプレートから「HTMLの編集」をクリック
  2. なんか言われるけど続行
  3. headタグを検索して、閉じる直前にコピーしておいたコードをペースト!

これで設定完了。ブログのHTMLソースを開いて、preタグを以下のようにclass指定しながら使うとハイライティングしてくれます。
<pre class="brush: python" title="Python大好き" >
pythonのコードを表示すると以下の通り。
#!/usr/bin/env python
# coding:utf-8

"""
サンプルソースコードだよ
"""

import os

for name in os.listdir("./"):
    if not os.path.isdir(name):
        continue
    if not os.path.isfile(u"%s/%s.txt" % (name, name)):
        continue

    cmd = u"ls"
    print cmd
    os.system(cmd)

# EOF




せっかくだからテンプレートに加えるタグの解説も入れておこう。



<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
というような構成になっているので、自分で対応言語を増やしたい場合にも対応しやすい。なかなかいい構成。
以上。

2011年7月14日木曜日

初投稿

グーグルにブログスペース作成。

なんか情報分散しまくりな気がするので、グーグルですむものはグーグルにしておきたい。