<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Re:Creator&#039;s Kansai （リクリ） &#187; KWSN</title>
	<atom:link href="http://www.re-creators.jp/author/kwsn/feed" rel="self" type="application/rss+xml" />
	<link>http://www.re-creators.jp</link>
	<description>Re:Creator&#039;s Kansai（リクリ）は関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。</description>
	<lastBuildDate>Fri, 27 Jan 2012 10:08:25 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Erlang のおはなし (2)</title>
		<link>http://www.re-creators.jp/blog/2008/07/24_67.html</link>
		<comments>http://www.re-creators.jp/blog/2008/07/24_67.html#comments</comments>
		<pubDate>Thu, 24 Jul 2008 11:25:14 +0000</pubDate>
		<dc:creator>KWSN</dc:creator>
				<category><![CDATA[ブログ]]></category>
		<category><![CDATA[Erlang]]></category>

		<guid isPermaLink="false">http://re-creators.weblike.jp/?p=67</guid>
		<description><![CDATA[Erlang をぼちぼちと使ってみるお話の第2回目です。前回は Erlang のシェルを使って簡単な計算をしたり、変数をご紹介しました。今回は、Erlang で扱うデータの「型」として、「アトム」と「タプル」と「リスト」 [...]]]></description>
			<content:encoded><![CDATA[<p>Erlang をぼちぼちと使ってみるお話の第2回目です。前回は Erlang のシェルを使って簡単な計算をしたり、変数をご紹介しました。今回は、Erlang で扱うデータの「型」として、「アトム」と「タプル」と「リスト」をご説明します。それから、筆者が Erlang を動かしている環境もご紹介しておきます。今回も少々長いのでご了承ください。</p>
<p><span id="more-67"></span></p>
<h3>アトム</h3>
<p>「<span style="color: #339966;"><strong>アトム</strong></span>（atom）」は、Erlang で使う定値のことです（数値は除く）。アトムの値は、英数字やアットマークあるいはアンダースコアが使えます。ちなみに大文字で始めると変数として解釈されてしまうため、シングルクォートで囲む癖をつけるとよいです（シングルクォートで囲むと、アットマークやアンダースコア以外の文字も使えます）。例えば、</p>
<blockquote><p>1&gt; Lang = &#8216;japanese&#8217;.<br />
japanese</p>
<p>2&gt; Resid = Osaka.<br />
* 1: variable &#8216;Osaka&#8217; is unbound<br />
（Osaka を変数と解釈するので、まだ値で束縛されていないというエラーが出る）</p>
<p>3&gt; Resid = &#8216;Osaka&#8217;.<br />
&#8216;Osaka&#8217;</p></blockquote>
<p>となります。</p>
<p>アトムも Erlang の式として扱われ、値を持ちます。当然、アトムの値はアトム自身なので、&#8217;japanese&#8217; というアトムは japanese という値を持つと考えてください。したがって、上記の 1&gt; では、Lang という変数を &#8216;japanese&#8217; というアトム（これは japanese という値で束縛されている）で束縛していることになります。</p>
<blockquote><p>4&gt; &#8216;kwsn@kwsn.com&#8217;.<br />
&#8216;kwsn@kwsn.com&#8217; # アトムはアトム自身を値としてもっています</p></blockquote>
<h3>タプル</h3>
<p>さて、数値や浮動小数点数あるいはアトムを一つのまとまったデータとして扱いたいときがあると思います。例えば、個人のプロフィールを、</p>
<blockquote><p>氏名、性別、現在地、キャリア、機種</p></blockquote>
<p>という項目でまとめて扱いたいとき、</p>
<blockquote><p>kwsn, Male, Dojima, au, W51H</p></blockquote>
<p>という幾つかのデータの集まりに名前をつけて扱えたら、</p>
<blockquote><p>kwkw, Male, Dojima, au, W51H</p></blockquote>
<p>という他の集まりと比較したときに、「氏名だけが違う」との結果から、例えば他人であると判断できたりするわけです。Erlang では、ひとまとまりの値（表記するときは変数やアトムなのですが）を取り扱う方法として、「<span style="color: #339966;"><strong>タプル</strong></span>（tuple）」と「<span style="color: #339966;"><strong>リスト</strong></span>（list）」という二つの方法が用意されています。</p>
<p>まず、上記のプロフィールからタプルを作ってみましょう。</p>
<blockquote><p>5&gt; Tuple = <strong>{</strong> &#8216;kwsn&#8217;, &#8216;Male&#8217;, &#8216;Dojima&#8217;, &#8216;au&#8217;, &#8216;W51H&#8217; <strong>}</strong>.<br />
{ kwsn, &#8216;Make&#8217;, &#8216;Dojima&#8217;, au, &#8216;W51H&#8217; }<br />
#（大文字で始まるアトムは変数と解釈されないように、シングルクォートで囲まれて表示されます）</p></blockquote>
<p>これで、Tuple を5つの値から成るタプルで束縛したことになります。タプルは波括弧（ブレース）で囲んで表記するという点に注意してください。また、タプルは入れ子にもできるので、｛式, ｛式, ｛式, 式｝, 式, 式｝, 式, 式｝のようにも作れます。</p>
<h3>リスト</h3>
<p>リストも同じように幾つかの値で作れますが、タプルと違う特徴があります。試しにリストを作ってみましょう。</p>
<blockquote><p>6&gt; List = [ 'kwsn', 'Male', 'Dojima', 'au', 'W51H' ].<br />
[ kwsn, 'Male', 'Dojima', au, 'W51H' ]</p></blockquote>
<p>表記としては、値を鍵括弧（ブラケット）で囲むのがタプルとの違いです。ここまでは括弧の違いだけですが、<span style="color: #339966;"><strong>タプルは要素の個数を変えられません</strong></span>。いちど作ったら、中身はずっと同じままです。これに対して、リストは後から要素を先頭に追加できます。</p>
<p>それからリストには、パイプ「｜」で、先頭の要素である「ヘッダ」と先頭以降の要素からなる「テイル」に、それぞれリストとして分割できるという特徴があります。</p>
<blockquote><p>7&gt; [ <strong>ListHead</strong> <strong>|</strong> <strong>ListTail</strong> ] = List.<br />
[ kwsn, 'Male', 'Dojima', au, 'W51H' ] # 見た目は同じ<br />
8&gt; ListHead. # 先頭<br />
kwsn<br />
9&gt; ListTail. # 残り<br />
[ 'Male', 'Dojima', au, 'W51H' ]</p></blockquote>
<p>のように、先頭と残りに分割できます。そこで、次のような事例を見てみましょう。</p>
<blockquote><p>10&gt; List = [ 1, 2 ].<br />
[1,2]<br />
11&gt; [ Prior | Posterior ] = List. # List を前後に分割します<br />
[1,2]<br />
12&gt; Posterior.<br />
[2]<br />
13&gt; [ PrePosterior | PostPosterior ] = Posterior. # 残りを更に前後に分割します<br />
[2]<br />
14&gt; PostPosterior.<br />
[]</p></blockquote>
<p>ここで分かることは、<span style="color: #339966;"><strong>要素が一つの場合でも作れる</strong></span>ことと、<span style="color: #339966;"><strong>要素がない場合でも作れる</strong></span>ということです。もちろんタプルについても、要素が一つだけでもかまいませんし、要素がなくてもかまいません。</p>
<p>では次に、前後に分割できるという特徴を使って、次のようにどんどん分割するとどうなるでしょうか。</p>
<blockquote><p>15&gt; A = [ 1, { 2, 3 } ].<br />
[ 1, { 2, 3 } ]<br />
16&gt; [ B | C ] = A.<br />
[ 1, { 2, 3 } ]<br />
17&gt; [ D | E ] = C.<br />
[ { 2, 3 } ]<br />
18&gt; [ F | G ] = E.<br />
** exception error: no match of right hand side value []</p></blockquote>
<p>最後にエラーが出てしまいました。この理由は、<span style="color: #339966;"><strong>「リストの分割」とは、或るリストを前半のリストと後半のリストに分けること</strong></span>だからです。16&gt; では、A というリストを分割して、1 と [ { 2, 3 } ] という二つのリストにしています。それから、17&gt; では、[ { 2, 3 } ] というリストを分割して、[ { 2, 3 } ] と [] という二つのリストにしているのです（実際、E. を入力すれば、E が [] であると分かります）。したがって、18&gt; では空のリストを更に分割しようとしているため、エラーとなっているわけです（リストとして分けなければならないので、タプルである { 2, 3 } は分割できません）。</p>
<p>タプルとリストはどちらも、お互いの要素として使えます。つまり、タプルの要素としてリストがあってもよいですし、その逆も可能です。</p>
<blockquote><p>19&gt; A = [ 1, 2, { 3, 4 } ].<br />
[ 1, 2, { 3, 4 } ]<br />
20&gt; B = { 1, 2, [ 3, 4 ] }.<br />
{ 1, 2, [ 3, 4 ] }</p></blockquote>
<h3>タプルとリストから値を取り出す</h3>
<p>次に、タプルとリストから値を一つ取り出す手順についてご紹介しておきましょう。要素を取り出せたら、要素ごとに比較したり、他の目的に値を使えますね。それでは、まずリストからお話しすると、これはさきほどの「先頭とそれ以外にリストを分割する」という操作を繰り返して値を取り出します。いま、[ 1, 2, 3 ] というリストがあって、2番目の要素（「2」）を取り出したいとすれば、</p>
<blockquote><p>21&gt; TestList = [ 1, 2, 3 ].<br />
[ 1, 2, 3 ]<br />
22&gt; [ L1 | L2 ] = TestList.<br />
[ 1, 2, 3 ]<br />
23&gt; [ L3 | L4 ] = L2.<br />
[ 2, 3 ]<br />
24&gt; L3.<br />
<strong>2</strong></p></blockquote>
<p>として、目的の2を取り出せます。また、取り出したい要素の数が分かっているなら、</p>
<blockquote><p>25&gt; [ Li1, Li2, Li3 ] = TestList.<br />
[ 1, 2, 3 ]<br />
26&gt; Li2.<br />
<strong>2</strong></p></blockquote>
<p>のように、元の TestList というリストと同じ数の要素でパターンを作り、変数を取り出したい値の束縛対象として指定してもよいでしょう。あるいは、元のリストの要素が分かっていれば、他の要素を全く同じ値にして、</p>
<blockquote><p>27&gt; [ 1, List2, 3 ] = TestList.<br />
[ 1, 2, 3 ]<br />
28&gt; List2.<br />
<strong>2</strong></p></blockquote>
<p>のようにしても、取り出せます。</p>
<p>後半の二つの方法は、Erlang のプログラミングでは「＝」記号を使った<span style="color: #339966;"><strong>パターンマッチング</strong></span>と呼ばれていて、左辺と右辺のパターンを照合するという操作を行います。この照合が正しく行えたら、左辺の変数やリストなどは、右辺で該当している変数の値などによって束縛されるのです。ですから、もともとの要素が分かっていて、それを単独の変数に割り当てたいときは、</p>
<blockquote><p>29&gt; [ One, Two ] = [ 295, 'foo' ].<br />
[ 295, foo ]<br />
30&gt; One.<br />
295<br />
31&gt; Two.<br />
foo</p></blockquote>
<p>とすれば、One, Two それぞれにリストの値を割り当てられます。</p>
<p>次に、タプルの場合はどうでしょうか。タプルの場合は、ヘッダとテイルに分割できないので、このパターンマッチングを使います。</p>
<blockquote><p>32&gt; Tup = { &#8216;die&#8217;, &#8216;der&#8217;, &#8216;den&#8217;, &#8216;die&#8217; }.<br />
{ die, der, den, die }<br />
33&gt; { D1, D2, D3, D4 } = Tup.<br />
{ die, der, den, die }<br />
34&gt; D3.<br />
den</p></blockquote>
<p>上記の例は、三つ目の &#8220;den&#8221; を取り出そうとした場合です。もちろん、</p>
<blockquote><p>35&gt; { die, der, DX, die } = Tup.<br />
{ die, der, den, die }<br />
36&gt; DX.<br />
den</p></blockquote>
<p>として、取り出したい要素だけに変数を割り当ててもOKです。</p>
<h3>無名変数</h3>
<p>それでは、今回最後に、「無名変数」をご紹介しておきます。さきほどのようにパターンマッチングでリストやタプルから要素を取り出せますが、全ての要素に一時的であれ変数を割り当てるのはメモリの無駄遣いですし・・・それよりなにより面倒くさい（笑。そこで、取り出したい要素以外は「どうでもよい要素」ですから、どうでもよい要素はどうでもいいように扱えたら便利ですね。そこで、「どうでもよい変数」というのが用意されています。実際、無名変数を <span id="aptureStartContent">”don’t care variable”（どうでもよい変数）と呼んでいる解説ドキュメントがあります。</span></p>
<p>無名変数は、アンダースコア（＿）で表されます。そこで、上記の 35&gt;, 36&gt; を無名変数を使って書き換えると、</p>
<blockquote><p>37&gt; { _, _, DX, _ } = Tup.<br />
{ die, der, den, die }<br />
38&gt; DX.<br />
den</p></blockquote>
<p>となって、一つだけ要素を取り出すのが楽になります（ちなみに、このようにパターンマッチングを使って値を取り出す方法を「ユニフィケーション」と呼びます）。リストやタプルの要素が幾つあるのかわかっていて、ユニフィケーションで値を取り出すときは、無名変数を使うと楽ですね。</p>
<p>以上で今回のお話は終わりです。次回は、簡単なプログラムを書いてみたいと思います。</p>
<h2>おまけ: Erlang の環境を作ってみる</h2>
<p>会社で使っているテスト用のマシンは、MacMini（PowerPC 1.4GHz, MacOS X 10.4）です。Erlang をインストールするには、Linux 用のソースファイルから自力でコンパイルする方法と、<a href="http://www.macports.org/">MacPorts</a> というインストールソフト（GUI でインストールするために、別途 <a href="http://porticus.alittledrop.com/index.html">Porticus</a> というソフトも使えます）を使う方法があります。MacPorts でインストールするよりも好きな場所へ自力でインストールする方が、僕個人の精神衛生によいため（笑、自力でインストールしています。MacPorts か自力のどちらにしても、インストールした後は、bin の中にある erl という Erlang の実行ファイルにパスが通るように（フルパスを入力しなくても erl と入力するだけで起動するように）、環境変数に Erlang のフォルダを追加しておきましょう。なお、MacMini は社内の LAN にぶら下がっているのですが、モニターは繋いでいないので、別のマシン（僕が業務用に使っている個人マシン）からアクセスする際は TeraTerm や Putty などの ssh ターミナルを使っています。ファイルを送るときは共有アクセスできるフォルダに入れています。</p>
<p>Erlang を入れるだけだと、Windows 用の Erlang を個人マシンに入れてシェルを使っているのとさほど使い勝手は変わりません。そのため、<a href="http://yaws.hyber.org/">Yaws</a> という名前の、Erlang（一部 C ）で書かれたウェブサーバを入れています。これは Linux 用のソースをダウンロードしてから、make, make install で、</p>
<blockquote><p>** etc files went into        /usr/local/etc<br />
** executables went into      /usr/local/bin<br />
** library files went into    /usr/local/lib/yaws<br />
** var files went into        /usr/local/var<br />
** default docroot went into  /usr/local/var/yaws/www</p></blockquote>
<p>という場所にそれぞれインストールされます。設定ファイルは /usr/local/etc/yaws.conf にありますので、&lt;server&gt;～&lt;/server&gt; で指定する、ちょうど Apache の VirtualHost 設定のような項目を次のように書いています。</p>
<blockquote><p>&lt;server 192.168.1.***&gt;<br />
port = 8080<br />
listen = 0.0.0.0<br />
docroot = /Users/*******/htdocs<br />
appmods = &lt;cgi-bin, yaws_appmod_cgi&gt;<br />
&lt;/server&gt;</p></blockquote>
<p>設定をご覧頂くと、8080 ポートを使って他のマシンからアクセスすると、/htdocs がドキュメントルートになります。通常の 80 ポートは Apache 用に使っているため、LAN でのブロードキャストされた IP で 80 番ポートにアクセスすると、Apache で使っているドキュメントルートが表示されるので、使い分けができます。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.re-creators.jp/blog/2008/07/24_67.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Erlang のおはなし (1)</title>
		<link>http://www.re-creators.jp/blog/2008/06/26_40.html</link>
		<comments>http://www.re-creators.jp/blog/2008/06/26_40.html#comments</comments>
		<pubDate>Thu, 26 Jun 2008 12:37:31 +0000</pubDate>
		<dc:creator>KWSN</dc:creator>
				<category><![CDATA[ブログ]]></category>

		<guid isPermaLink="false">http://re-creators.weblike.jp/?p=40</guid>
		<description><![CDATA[ＳｈａｒｅｄＯｂｊｅｃｔの話を期待していたみなさん、ごめんなさい！　代打で登場したときだけ、少しプログラムの話にお付き合いください。

で、この Erlang（あーらん）というのは「関数型」と呼ばれているプログラミング言 [...]]]></description>
			<content:encoded><![CDATA[<p>ＳｈａｒｅｄＯｂｊｅｃｔの話を期待していたみなさん、ごめんなさい！　代打で登場したときだけ、少しプログラムの話にお付き合いください。</p>
<p><span id="more-40"></span></p>
<p>で、この Erlang（あーらん）というのは「関数型」と呼ばれているプログラミング言語の一つで、携帯でもおなじみエリクソンという会社が 1987 年頃から自社用に開発して使ってきました。現在は誰でも使えるので、<a href="http://erlang.org/">公式サイト</a>へ行って、<a href="http://erlang.org/download.html">Downloads</a> のページから最新版をダウンロードするとよいでしょう。</p>
<p>インストールは、ふつうのアプリケーションと同じように、インストールするフォルダを指定するだけで殆ど終わります。インストールが終わると、Windows ならスタートメニューに「Erlang OTP ****」というメニューができるので、Erlang というショートカットを使ってください。すると、</p>
<p><a href="http://www.re-creators.jp/wp-content/uploads/2008/06/erlang.png"><img class="aligncenter size-full wp-image-41" title="Erlangのコンソール画面" src="http://www.re-creators.jp/wp-content/uploads/2008/06/erlang.png" alt="" width="500" height="172" /></a></p>
<p>こんな感じで DOS プロンプトみたいな画面が出てきます。これが、Erlang に命令するためのコンソール画面となっていて、プログラムを打ち込んで動かしてみたりできます。ちなみに、この画面を終了させるときは、終了ボタンを押してもよいですし、「1＞　」と出ているところで halt(). と入力し Enter キーを押してもよいです。</p>
<p>では、このコンソール画面で少し色々試してみましょう。まず、数を入力してみます。例えば、</p>
<blockquote><p>1&gt; 1098778899</p></blockquote>
<p>と、適当な数を入力してみて、<strong>最後にピリオドを入力してから Enter を押します</strong>。すると、いま入力した数がそのまま次の行に表示されたと思います。同じようにして、「3.141592613」とか「-08977678」とか、色々な数を入力して、ピリオドを入力し Enter を押してみましょう。どれもそのまま表示されますね。では次に、</p>
<blockquote><p>2&gt; 23 + 78.</p></blockquote>
<p>とやってみると、ちゃんと 101 という答えが表示されたと思います。計算もできますね。Erlang では、普通の電卓などでは表示しきれない桁も扱えるので、</p>
<blockquote><p>3&gt; 8989808098099870908768769876598769 * 908237140923847230942137012398.</p></blockquote>
<p>なんて計算も、ちゃんとやってくれます。</p>
<p>すると、こういう数を入れておく「変数」はどうやって使うんだろう？　ということになりますね。Erlang では、変数は必ずアルファベットの大文字で始めることになっているので、</p>
<blockquote><p>4&gt; T = 64.</p></blockquote>
<p>と書いてみましょう。すると、次の行にも 64 と表示されてめでたしめでたし。じゃあ、今度は変数を使って計算してみましょう・・・</p>
<blockquote><p>5&gt; T = 12.<br />
** exception error: no match of right hand side value 12</p></blockquote>
<p>・・・おっと？　エラーですね。これは Erlang のようなプログラム言語の特徴とも言える点で、<strong>いちど値を振った変数には、二度と値を振れない</strong>のです。違う値を振りなおそうとすると、いったんこれまでの入力内容を全てクリアしなくてはなりません。</p>
<blockquote><p>6&gt; f().</p></blockquote>
<p>と入力すると、変数と値の結びつきが開放されて、T = 12. というふうに新しい値を振れるようになれますが、それまで振ってきた値がすっかりなくなってしまうので、Erlang と直に対話しているコンソール画面ならでわの方法だというくらいに理解したほうがよいです。こんな具合で、</p>
<blockquote><p>7&gt; R = 123.<br />
123<br />
8&gt; S = 55.<br />
55</p></blockquote>
<p>とやってから、R + S. と入力すると、ちゃんと 178 と表示されます。その他、</p>
<blockquote><p>9&gt; R*S/S*R+R*S*R*S*R-S+R*R*S*S/S/R/R*S/R+R.<br />
5629137896.593496</p></blockquote>
<p>こんな感じでどんどん計算します。</p>
<p>今回はこのあたりまでで終わります。電卓代わりくらいにはなるでしょうか・・・</p>
<h3>追記: リンク集など</h3>
<p>Erlang-users.jp<br />
<a href="http://erlang-users.jp/">http://erlang-users.jp/</a><br />
日本の Erlang ユーザのためのハブサイト。できたて。</p>
<p>www.trapexit.org<br />
<a href="http://www.trapexit.org/">http://www.trapexit.org/</a><br />
London Erlang Training and Consulting Ltd.</p>
<p>Open Source Erlang<br />
<a href="http://www.erlang.org/">http://www.erlang.org/</a><br />
the Ericsson Computer Science Laboratory（本家）</p>
<p>Computer Science Laboratory<br />
<a href="http://web.telia.com/~u83304791/">http://web.telia.com/~u83304791/</a><br />
The Software Architecture Laboratory, SARC（出生地です）</p>
<p><a href="http://armstrongonsoftware.blogspot.com/">http://armstrongonsoftware.blogspot.com/</a><br />
Joe Armstrong（『プログラミング Erlang』の原著者。Erlang で学位をとった人）<br />
<a href="http://www.klab.org/">http://www.klab.org/</a><br />
KLab（クラブ）株式会社さん。ブログの記事がたいへん勉強になります。<a href="http://d.hatena.ne.jp/m-hiyama/"><br />
http://d.hatena.ne.jp/m-hiyama/<br />
</a>檜山正幸さん<br />
<a href="http://www.thinkit.co.jp/free/article/0711/4/4/">http://www.thinkit.co.jp/free/article/0711/4/4/</a><br />
並列処理が可能な関数型言語「Erlang」<br />
<a href="http://jp.rubyist.net/magazine/?0017-Legwork">http://jp.rubyist.net/magazine/?0017-Legwork</a><br />
Rubyist のための他言語探訪 【第 10 回】 Erlang（まつもとゆきひろさん）<br />
<a href="http://gihyo.jp/dev/clip/01/orangenews/vol39/0004">http://gihyo.jp/dev/clip/01/orangenews/vol39/0004</a><br />
濃縮還元オレンジニュース: これから15分でErlangを始めるための資料（リンク先の Scribd で翻訳が読めます）</p>
]]></content:encoded>
			<wfw:commentRss>http://www.re-creators.jp/blog/2008/06/26_40.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>スタイルシートのレギュレーションについて</title>
		<link>http://www.re-creators.jp/blog/2008/06/05_25.html</link>
		<comments>http://www.re-creators.jp/blog/2008/06/05_25.html#comments</comments>
		<pubDate>Thu, 05 Jun 2008 13:33:35 +0000</pubDate>
		<dc:creator>KWSN</dc:creator>
				<category><![CDATA[ブログ]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[スタイル]]></category>
		<category><![CDATA[フォーマット]]></category>
		<category><![CDATA[レギュレーション]]></category>

		<guid isPermaLink="false">http://re-creators.weblike.jp/?p=25</guid>
		<description><![CDATA[既にいろいろなブログなどで話題になっている、スタイルシートの「フレームワーク」について、思っているところと、自分なりにこだわっているところをご紹介します。

BlueprintCSS をはじめ、スタイルシートの雛形が話題 [...]]]></description>
			<content:encoded><![CDATA[<p>既にいろいろなブログなどで話題になっている、スタイルシートの「フレームワーク」について、思っているところと、自分なりにこだわっているところをご紹介します。</p>
<p><span id="more-25"></span></p>
<p><a href="http://code.google.com/p/blueprintcss/">BlueprintCSS</a> をはじめ、スタイルシートの雛形が話題になっていたのですが、幾つかの制作会社に在籍していた経験から言うと、それぞれの会社には「フレームワーク」とまではいかなくても、それぞれのルールがあります。</p>
<p>まず個人的な言い方ですが、フォントサイズを絶対単位で固定しないといったコンセプトのことを「レギュレーション」と呼んでいます。それから、.css ファイルとして用意されている雛形のことを「フォーマット」と呼んでいます。</p>
<p>或る会社では有料会員サイトを運営していたのですが、Mac ユーザをターゲットから外していたので、当時は margin や padding のショートハンドが効かなかった Safari ではレイアウトがおかしくなるという、ヘンなフォーマットを使っていました。もともと会社の中で「これを使ってくれ」と言われて渡されたものではありますが、そのうち、フォーマットはそのままにしておいて、自分なりに margin-top: 20px; などと書いた値でオーバーライドするようになりました。</p>
<p>しかし、考えようによっては、自分なりに書いた「オーバーロード用のフォーマット」をいつもヘッド部で読み込んでいたので、これは業務の問題として解決しなければならないでしょう。デザイナーが単独でそのようなことをやると、レギュレーションの意味がありません。もちろん受託案件の場合は、クライアント側からフォーマットが提供されていることもあるので、なるべくフォーマットにしたがいつつ、問題のある箇所にだけ独自の値やプロパティを使っています。</p>
<p>それから違う会社では、いわゆる Web 標準のコーディングができるスタッフに不足していたので、テーブルレイアウト用のフォーマットを使っていました。業務としては、コーディングが僕だけ専任という案件では Web 標準に準拠していましたが、それ以外の案件では生産性などの要素を優先しなくてはなりません。もちろん会社でスキルを標準化するのも一つの手なのですが、それだけでは不十分と言えるのも事実です。例えば受託案件で、納品先の担当者に Web 標準のスキルを強要したりできない筈です。</p>
<p>次に、フォーマットの具体例をご紹介して、ひとまず自分なりにこだわっているところをご説明したいと思います。</p>
<p>&#8230;<br />
margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;<br />
&#8230;</p>
<p>このような記述を、div や p などボックス要素に対して適用しています。-top, -right といった記述の順番は、ショートハンドの記述順と同じです。「上・右・下・左」となっています。また、そもそも僕が個人的に使っているフォーマットでは、ショートハンドを使うとデバッグの際に原因を特定しにくくなるので、ショートハンドは使いません。</p>
<p>また、レイアウトに div 要素を使うことは多いと思うのですが、div マニアと呼ばれないていどに他のブロック要素と使い分けておき、基本的に div 要素には margin, padding を使わないというレギュレーションを立てています。スペーシングしたいときは子要素の margin, padding で行い、特にブラウザのモードによってボックス要素の解釈が異なるため、水平方向には padding を使わないというのもあります。もちろん、JavaScript 有効であることが前提で作られているようなサイトでは、UA およびバージョンを判定して使い分けたりもするでしょうし、特定のブラウザだけで無効となるバグを利用したりもするでしょうが、これらも基本的にやりません。そういう意味では、仕事ではともかくとして、個人的にはリセット用途のフォーマットは使わないという <a href="http://snook.ca/archives/html_and_css/no_css_reset/">Snook さん</a>に同意できる点があると考えています。</p>
<p>その他、フォーマットではフォントに対して font-style: normal; を適用しています。特に、address 要素にスラントがかかると読みづらいという単純な理由です。また、5年くらい前にスタイルシートを使い始めた頃は a 要素に text-decoration: none; を適用していたのですが、初心者や高齢者はありありとした「いかにもリンク」に見える箇所しかクリックしないものだという指摘をもらって、現在も検討しているところです。</p>
<p>あーと。簡単に自己紹介を・・・macca, kgm と同じ会社で、管理本部が所属の事務屋さんですー。また機会があれば、PHP のデザインパターンについていきなりお話しするかもしれません。でわでわ。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.re-creators.jp/blog/2008/06/05_25.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

