たかはしりょうの開発メモ

2013年1月5日土曜日

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で書いてます。

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でよかった。

環境整備

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]%

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]%

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をビルド

とりあえず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.

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のメモ。

インストール方法

インストールはeasy_installで。これ以降easy_installは使わず、pipでインストールします。

# 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

特に書くことが無い・・・

使い方

環境を作る。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。

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

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

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

秘密鍵と公開鍵の作成

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

id_rsa（秘密鍵）とid_rsa.pub（公開鍵）ができている。秘密と公開となっているがどちらも人の目に触れないように管理しなければいけないので勘違いしないよう注意。
```
$ ls
id_rsa     id_rsa.pub
```

パスワード無しでログインしたいサーバーに登録する。クライアント側に秘密鍵（このままで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

続いて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

必ずパーミッションを変更する！クライアント側もサーバー側も、.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っていうボタンからジェネレータに飛んで以下の通りに取得してください。

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

次にテンプレートの編集です。

bloggerの設定画面のテンプレートから「HTMLの編集」をクリック
なんか言われるけど続行
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日木曜日

初投稿

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

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

登録: 投稿 (Atom)