[3798] 兵法書を読む秋

投稿:  著者:


《「妄想の力」で戦う時代になった》

■まにまにころころ[65]
 兵法書を読む秋
 川合和史@コロ。 Kawai Kazuhito

■クリエイター手抜きプロジェクト[406]Adobe Photoshop CS3〜CC2014編
 選択したレイヤーと同じ階層のレイヤーを指定範囲内に納める
 古籏一浩

■講師だって、最初は初心者だもの[レポート]
 『CSSオジサン #0』で、CSS設計を学んできました
 森 和恵


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■まにまにころころ[65]
兵法書を読む秋

川合和史@コロ。 Kawai Kazuhito
< https://bn.dgcr.com/archives/20141110140300.html
>
───────────────────────────────────
こんにちわん、コロこと川合です。まにフェスが終わって、human noteの中継イベントもこなし、関西オープンフォーラム2014(KOF2014)も無事終了。秋のイベントラッシュをくぐり抜けて放心状態の川合です。まにフェスくらい、他の時期にすれば良かった……

その間たまりにたまった本業から目をそらし、『軍師官兵衛』を楽しむ日曜日。もう残すところあと5回なんですね。

96年の『秀吉』以来、18年ぶりにちゃんと観ている大河ドラマですが、面白く楽しんでいる反面で、毎週決まった時間にテレビの前にいることの大変さにあえいでいたりします。うち、録画機器ないんですよ。ずっと使ってたVHSデッキも壊れてしまい、そのままで。

仕事柄か、機械もの全般に詳しいと思われがち(同業の方はよく分かるはず!)ですが、パソコン使って仕事しているからといって、何でも詳しいわけじゃないと力説したい。ここで力説したところで、同じ悩みを持ってそうな方しか読まないんですけれど。

◎──兵法書

そんな話はさておき、官兵衛も堪能したし、今回は官兵衛や他の軍師でも紹介してみようかなと思ったら、既にそのネタはやった後でした。(まにころ49)そこで今回は、『軍師官兵衛』でも最初の方で官兵衛が読んでいた「兵法書」について書いてみたいと思います。「武経七書」と呼ばれる中国古典兵法書について。

◎──「武経七書」

「武経七書(ぶけいしちしょ)」とは、中国古典兵法書のうち、代表的な七つの兵法書のことです。『孫子』『呉子』『尉繚子』『六韜』『三略』『司馬法』『李衛公問対』の七つを指します。『孫子』だけが一般にもずば抜けて有名ですね。

◎──『孫子』(そんし)

中国・春秋時代末期の武将「孫武」の作と言われている超有名な兵法書。その名前は誰もが知っているといってもいいのではないでしょうか。ビジネス書で今なお「孫子に学ぶ〜」と言った内容のものが続々と刊行されています。日本だけで人気なのか、世界的に人気なのかは知りませんが、日本人は昔から『孫子』が大好きです。

武田信玄で有名な「風林火山」も『孫子』からの引用です。『孫子』の中で、軍事行動について書かれた「軍争篇」の中にある言葉で、

「その疾きこと風の如く、そのしずかなることは林の如く、侵掠することは火の如く、動かざることは山の如く」
(其疾如風、其徐如林、侵掠如火、不動如山)

とあるのがそれで、軍隊をどのように動かすべきかが述べられています。実際には「風林火山」だけでなくその後にもう少し続くのですが、旗に書くのにはこれくらいがちょうどいいのと、当時は教養として武将はみんな知ってたので、これで十分と割愛されたんじゃないですかね。想像ですけど。

そんな『孫子』を著したとされる「孫武」ですが、なんせ2500年ほど前の人で、その実在もあやふやで。つい40年ほど前に『孫子』と、孫武の子孫とされる、孫ぴん(「ぴん」は、「濱」の「さんずい」が「月」の漢字)の『孫兵法』の竹簡が発見されて、それぞれの古さの違いから孫武は孫武で存在した(『孫子』も孫ぴんが書いたのではないかと言われていた)のだろう、実在したと考えていいだろうという話が優勢になったくらいで。未だに謎多き存在です。

ただその内容は割と簡潔に基本的なことが書かれていて、だからこそビジネスなどにも通じると、応用されやすいんでしょうね。2500年前の戦争の話なので、使えない部分もそれなりにありますけどね。火攻めとか。(笑)

書籍もたくさん出ていますし、ググれば原文も解説も山ほどでてきますので、一度ご覧ください。

なお「孫ぴん」は「ビン〜孫子異伝〜」というタイトルで、グランドジャンプで連載中の漫画の主人公になっています。孫子ともども謎の人なので、内容は完全創作の超展開ですけども。

◎──『呉子』(ごし)

「武経七書」といっても、『孫子』以外の六つは現代では一気にマイナーになります。なんせ兵法書は戦争についての書、戦国武将ならいざ知らず、なかなか現代に応用できる部分が少ないからでしょう。ただ、あくまで「現代では」って話です。『韓非子』には、『孫子』と『呉子』はどの家にもある、と記されています(「蔵孫呉之書者、家有之」)。

『呉子』も『孫子』と同じく中国・春秋時代の書とされていますが、その作者は不明。「呉起」を主人公として物語形式で書かれているので、著者も呉起か、その弟子あたりじゃないかと言われています。孫武よりちょっとだけ後の時代の人です。

六篇が現存しますが、『漢書』には「呉子四十八篇」と書かれているそうで、散逸したのでしょうか。そう聞くと残りがとても気になりますね。いつか発掘されることを祈りましょう。

『呉子』もたくさん書籍が出ています。『孫子』とセットになったものもあり。また『呉子』もググればあれこれ出てきます。

◎──『尉繚子』(うつりょうし)

さらにぐっとマイナーになります。著者も、書名から「尉繚」だかその弟子だろうと言った程度で、「じゃあ尉繚って誰よ?」という話になったりします(「呉子」はもう少しはっきり「あの呉さんだろう」って言われています)。

『尉繚子』の冒頭で「尉繚」は「梁(魏)の恵王」と会話しています。また、『史記』で、「尉繚」は「政(始皇帝)」を訪ねています。恵王が紀元前319年に亡くなっていて、始皇帝が紀元前246年の即位なので、両書の記述にあるのが同一人物であり真実であるとすれば、20歳で亡くなる直前の恵王に会っていたとして、即位したての始皇帝を訪ねていたら93歳の時のこと。長寿です。

なお内容に、『孫子』『呉子』『孟子』『韓非子』の影響があるとのことで、そこからは戦国時代から秦代くらいのものだろうと言われています。二十四篇。

2000年以上前のことですし、仮にもう少し後世に書かれていたとしても、古来から名著として読まれてきているわけなので、どうでもいいといえばどうでもいいことなんですけどね。

当時の戦争についての具体例が多いので、そのまま参考にはならないのですが、「夫心狂目盲耳聾、以三悖率人者、難矣。」と、精神が乱れていて、人の話を聞かないで、物事が見えないような奴はリーダー失格だと書かれています。
まったくだ、うん。

当然といえば当然ですが、兵法書の根本はリーダー論なので、その点が経営者に受けるんでしょうね。

◎──『六韜』(りくとう)

これまた成立年も著者も不明。呂尚(太公望)が周の文王・武王に指南する形で書かれています。前漢の軍師「張良」が黄石公という仙人から授かったとの伝説があります。日本では中臣鎌足も読んでたらしいですよ。真偽はともかく。

『六韜』なんて、書名も聞いたことがないという方も多いかもしれませんが、「虎の巻」という言葉は聞いたことがあるのではないでしょうか。「虎の巻」は『六韜』の第二巻にある「虎韜」のことです。

『尉繚子』『六韜』になると、現在発刊されている書籍もぐっと減りますね。『三略』『司馬法』『李衛公問対』も。Googleバンザイ。研究者バンザイ。

◎──『三略』(さんりゃく)

『六韜三略』とワンセットにされることも多い書。「上略」「中略」「下略」の三部構成のため『三略』と呼ばれています。太公望が書き、黄石公が編集したそうですよ。『六韜』とセットにされるのは、どちらも太公望由来だから。真偽? そんなことはどうでもいいんです。中身が大事!

これも読んだことある方は少ないと思いますが「柔よく剛を制す」は『三略』の言葉です。

「軍識曰、柔能制剛、弱能制強。柔者徳也、剛者賊也。弱者人之所助、強者怨之所攻。柔有所設、剛有所施、弱有所用、強有所加。兼此四者、而制其□。」とあり、(□はyiと発音する 宣 に似た漢字)

「軍事指針である軍識には、『柔』でも『剛』を制することができ、『弱』でも『強』を制することができると書かれている。柔の者は『徳』、剛の者は『賊』である。弱の者は人に助けてもらえるし、強の者は恨まれて攻められる。柔にも剛にも弱にも強にも使い所がある。この四者を適宜使い分けるのだ」

というのが元々の言葉です。柔がいい、弱がいい、って話じゃないんですね。それぞれ長短があって、要は使いようだって話。

◎──『司馬法』(しばほう)

斉の司馬穰苴を主人公に書かれた書。書かれたのは、戦国時代中期から秦代と言われています。元は百五十五編からなる書ですが、現存はそのうち五篇です。残念。

「攻其國愛其民、攻之可也、以戰止戰、雖戰可也」とあり、「攻めてもその国の民を愛するなら攻めてもいいし、戦争をすることで戦争が止むのならば戦争を起こしてもいい」と、一部の人には読ませたくないようなことが書かれていたりしますが、戦争を美化する書ではありません。面白いことにこれら兵法書の多くは戦争に否定的です。

◎──『李衛公問対』(りえいこうもんたい)

急にぐっと時代が下って、唐から宋の時代に書かれたとされる書です。李世民と李靖が、歴代の兵法家や政治家について問答する形をとっています。きちんと読んだことはないですが、色々な有名人が出てくるので面白いと思いますよ。

太宗「張良と韓信は兵法書を分類したらしいね」
李靖「張良は『六韜』『三略』、韓信は『孫子』『司馬法』で学んだってよ」
なんて感じで書かれています。

◎──兵法書を読む

長くなってきて明らかに途中で息切れしてしまいましたが、どれもそのままは使えなくても、どこか得るものはある書だと思います。まあそんなこと言えば、どんな書だってそうなんですけどね。

原文はもちろん訳書でも読みにくいものが多いのが難点ですが、別に読み通す必要もないので、何かの折にパラパラと眺めてみるといいのではないでしょうか。古代中国が舞台の小説を読むついでにでも。読書の秋ですしね。

◎──最後にイベントのお知らせ(大阪)

・まにゼミP13『Webデザイン・コミュニケーションの教科書』出版記念
「クライアントのバックグラウンドを考えたビジュアルデザインを実現するには?」
2014年12月20日(土)13:00〜
< http://kokucheese.com/event/index/233176
>

・まにカレ「忘年会というかクリスマス会というか、なんかそんなの」
2014年12月20日(土)18:15〜
< http://kokucheese.com/event/index/233412/
>

・「ぼくらの移住計画」

「ぼくらの移住計画」という、福岡・京都を中心に、大都市から地方都市へと移住して働くクリエイターのトークイベントに、なぜか出演することに。大阪が大都市か地方都市かはともかく、福岡や京都に人材を持っていかれたら困るんですけども。(笑)

2014年11月30日(土)14:00からグランフロント大阪にて。福岡市主催。
< http://fcc.city.fukuoka.lg.jp/event/osaka/
>

大阪近郊の方はぜひ。

【川合和史@コロ。】koro@cap-ut.co.jp
合同会社かぷっと代表
< https://www.facebook.com/korowan
>
< https://www.facebook.com/caputllc
>
< http://manikabe.net/
>


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト[406]Adobe Photoshop CS3〜CC2014編
選択したレイヤーと同じ階層のレイヤーを指定範囲内に納める

古籏一浩
< https://bn.dgcr.com/archives/20141110140200.html
>
───────────────────────────────────
今回はPhotoshopで選択したレイヤーと、同じ階層のレイヤーを指定範囲の座標内に納めるスクリプトです。

以下のスクリプトを実行する前に、位置を変更する/リサイズするレイヤーを選択します。処理されるレイヤーは、選択したレイヤーと同じ階層にあるレイヤーに限定されます。

また、GUI部分で「レイヤーを縮小して納める」にチェックを入れると、指定範囲からはみ出しているレイヤーは自動的にリサイズされます。


// 選択されたレイヤーと同じ階層のレイヤーを範囲内に入れる
(function(){
if (app.documents.length < 1){ return; }
var w = app.activeDocument.width.value; // 横幅
var h = app.activeDocument.height.value; // 縦幅
// 内包するオブジェクトを指定する
var targetObj = {
x1 : 0,
y1 : 0,
x2 : w,
y2 : h,
width : w,
height : h
}
// GUI部分
var winObj = new Window("dialog", "ページ内に納める", [0,0,320,230]);
var cropSize1 = winObj.add("statictext", [20, 10, 300, 25], "収める範囲を入れてください");
winObj.add("statictext", [30, 50, 60, 70], "左");
winObj.add("statictext", [170, 50, 180, 70], "上");
winObj.add("statictext", [30, 80, 60, 100], "右");
winObj.add("statictext", [170, 80, 180, 100], "下");
var checkScale = winObj.add("checkbox", [30, 110, 310, 130], "レイヤーを縮小して納める");
var x1e = winObj.add("edittext", [50, 50, 150, 70], targetObj.x1);
var y1e = winObj.add("edittext", [190, 50, 290, 70], targetObj.y1);
var x2e = winObj.add("edittext", [50, 80, 150, 100], targetObj.x2);
var y2e = winObj.add("edittext", [190, 80, 290, 100], targetObj.y2);
var btnExtend = winObj.add("button", [20, 160, 300, 185], "実行する");
var btnEnd = winObj.add("button", [20, 190, 300, 215], "終了する");
// ボタンにイベントを割り当てる
btnExtend.onClick = function(){
targetObj.x1 = parseFloat(x1e.text);
targetObj.y1 = parseFloat(y1e.text);
targetObj.x2 = parseFloat(x2e.text);
targetObj.y2 = parseFloat(y2e.text);
// 指定された範囲の幅を計算
targetObj.width = targetObj.x2 - targetObj.x1;
targetObj.height = targetObj.y2 - targetObj.y1;
adjust();
refresh(); // スクリプトの処理結果を画面に反映させる(再描画)
}
// ウィンドウを閉じる
btnEnd.onClick = function(){
winObj.close();
}
winObj.center();
winObj.show();
// 位置を調整する処理
function adjust(){
// 選択された1つのレイヤーと同じ階層にあるレイヤーに対して処理する
var parentObj = app.activeDocument.activeLayer.parent;
for(var i=0; i<parentObj.artLayers.length; i++){
toInner(parentObj.artLayers[i], targetObj);
}
function toInner(selObj, targetObj){
// 図形の座標を読み出し
var rect = selObj.bounds;
var srcX1 = parseFloat(rect[0]);
var srcY1 = parseFloat(rect[1]);
var srcX2 = parseFloat(rect[2]);
var srcY2 = parseFloat(rect[3]);
// 自動リサイズ処理を行うかどうか
if(checkScale.value == true){
// 幅が範囲内より大きい場合にはサイズを縮小する
var sW = srcX2- srcX1;
var sH = srcY2 - srcY1;
if (sW > targetObj.width){
var s = (targetObj.width / sW) * 100;
selObj.resize(s, s);
}
if (sH > targetObj.height){
var s = (targetObj.height / sH) * 100;
selObj.resize(s, s);
}
// もう一度座標を読み出す
var rect = selObj.bounds;
var srcX1 = parseFloat(rect[0]);
var srcY1 = parseFloat(rect[1]);
var srcX2 = parseFloat(rect[2]);
var srcY2 = parseFloat(rect[3]);
}
// ページX座標よりも小さい場合
if (srcX1 < targetObj.x1){
selObj.translate(targetObj.x1-srcX1, 0);
}
// ページX座標よりも大きい場合
if (srcX2 > targetObj.x2){
selObj.translate(targetObj.x2-srcX2, 0);
}
// ページY座標よりも小さい場合
if (srcY1 < targetObj.y1){
selObj.translate(0, targetObj.y1-srcY1);
}
// ページY座標よりも大きい場合
if (srcY2 > targetObj.y2){
selObj.translate(0, targetObj.y2-srcY2);
}
}
}
})();


【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/
>

日曜日の朝にやっている子供向けの特撮番組やっているので見たのですけど、今やってる「烈車戦隊トッキュウジャー」は妄想(想像力/イマジネーション)で変身したり、ロボットが合体するんですねぇ。

・烈車戦隊トッキュウジャー
< http://www.tv-asahi.co.jp/tqg/
>

小学生の頃にやっていたのは「ゴレンジャー」とか「デンジマン」でした。確か「デンジマン」あたりだと「科学の力」だったのに、今は「妄想の力」で戦うそうで。今後の日本は科学の力では足りないので、妄想力でやっていきましょう、ということなんでしょうか。

・電子戦隊デンジマン
< http://www.super-sentai.net/sentai/denji.html
>

検索したら歴代戦隊シリーズまとめたページが出てきた。しかし、戦隊シリーズの名前を考えるのは大変そうだなあ。

・スーパー戦隊百科
< http://www.super-sentai.net/sentai/index.html
>

・jQuery+jQuery UI+jQuery Mobile逆引きハンドブック
< http://www.amazon.co.jp/dp/486354149X
>

・データビジュアライゼーションのためのD3.js徹底入門
< http://www.amazon.co.jp/dp/4797368861
>

・D3.js例文辞典
< http://www.openspc2.org/reibun/D3.js/
>

・ExtendScript Toolkit(ESTK)基本編
< http://www.amazon.co.jp/dp/B00JUBQKKY/
>

・Egison言語 例文辞典
< http://www.openspc2.org/reibun/Egison/3.3.2/
>

・4K/ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/
>

・JavaScript逆引きハンドブック
< http://www.amazon.co.jp/dp/4863541082
>

・Adobe JavaScriptリファレンス
< http://www.amazon.co.jp/dp/4844395955
>

・Nexus 7(アンドロイドタブレット)使い方辞典
< http://www.openspc2.org/reibun/Android/Nexus7/
>

・クリエイター手抜きプロジェクト
< http://www.openspc2.org/projectX/
>

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< https://www.ddc.co.jp/estore/cgi/item/start.cgi?m=DetailViewer&record_id=243
>
吉田印刷所の「印刷の泉」でも購入できるようになりました。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■講師だって、最初は初心者だもの[レポート]
『CSSオジサン #0』で、CSS設計を学んできました

森 和恵
< https://bn.dgcr.com/archives/20141110140100.html
>
───────────────────────────────────
こんにちは。森和恵です。

今回は、この土曜日に参加してきたイベントレポートをお届けしますね。
恐らく途中までになってしまうので、後日全文をこちら↓で公開予定です。
< http://r360studio.com/learn/learn20141108.html
>

さて、お話を始めましょうか。

●CSSオジサンに、オバサンが参加してきました。

この土曜日(2014年11月8日)に開催されたイベントはこれです。

CSSオジサン #0『Web制作者のためのCSS設計の教科書』出版記念イベント
< http://inkdesign.jp/event/css-architecture/
>

CSSオジサン…。なぜこの団体名がついたかというと、話せば長くなるのですが、

もともと、JSガールズ
< http://jsgirls.org/
>

という、JavaScriptを女性(girl)だけで集まって学びましょう! という素敵女子の集まりがありまして、参加した方によると、それはそれは、キラキラしたイベントだったそうです。

それを受けて、「女子ばっかり!ずるい!」という意見があり、JSオジサンという、おじさんのための集まりができました。
< https://www.facebook.com/groups/597267490365660/
>

更にそれを受けて、おじさんがCSSを学ぶ会、ということで生まれたのが、CSSオジサンです。

Webの業界は、こういうノリが面白くて、私は大好きです。オジサンという名前ですが、誰が参加してもいいということでしたので、オバサンの私も参加してきました。

お友達が大阪で開催するということもあり、一般申し込みもしたのですが、ついでに受付のお手伝いをしてきました。

#受付で、アンケートを配っておりましたのが、わたくしです。
#よかったら、お友達になってください。
< http://twitter.com/r360studio
>

スピーカーは、Webコーディングでは、そうそうたるメンバーの方々で、メインスピーカーの谷 拓樹(@hiloki)さんは、『Web制作者のためのCSS設計の教科書』の著者です。この本は、勉強会テーマの主軸になったのですが、すごくいい本なので、コーダーの方は読んだ方がいいです。マジでマジで。

< http://book.impress.co.jp/books/1113101128
>

そして、CSS設計手法のひとつ、SMACSSの日本語訳を手がけた斉藤祐也さん(@cssradar)、世界も注目するCSS解析・評価ツールのStyleStatsの開発者である石本光司さん(@t32k)と続きます。

「ちゃんとCSSを書きたい人は損をしない、内容の濃いイベントになること間違いなしです。CSS、CSS設計のトピックに関心のある方はぜひお越しください!」という、勉強会のうたい文句に嘘はない、とても濃い内容でした。

当日のツイートの様子は、ハッシュタグ「#cssオジサン」で確認できるので、追ってみてください。

< https://twitter.com/hashtag/css%E3%82%AA%E3%82%B8%E3%82%B5%E3%83%B3
>

●「メンテなブルであり続けるためのCSS設計」

まずは、谷拓樹さんのメインセッションのお話から。
当日のスライドがすでに公開されています。

< http://www.slideshare.net/hiloki/maintainable-css
>

執筆された書籍の内容でもある、「OOCSS」の考え方を取り入れたCSS設計のお話でした。「OOCSS」とは、「Object Oriented Cascading Style Sheets」の略で、プログラミングの世界でおなじみの、オブジェクト指向的な感覚でCSSのクラスを定義していくという方法です。

「お・・・おぶじぇくとしこう???」
と頭がパニックになった方のために、スライドから抜粋して説明をしてみます。

余談ですが、私自身、プログラマーではないものの、大学でプログラミングの経験が多少あるので、こういうときに、なんとかなってきました。どんな言語でもいいから、一つ言語をやりこんでみておくと、アレルギーがないかもしれませんね。

では、先ほどのスライド26〜28枚目を見ながら話をすすめますね。

画像が左、テキストが右側にあるレイアウトが3種類ある場合に、「OOCSS」では、役割の同じ部品(オブジェクト)ごとにクラスを指定します。

ここでは、レイアウト全体に「media」という共通の名称をつけ、レイアウト内の部品を「画像」と「テキスト」に分け、「画像」を「image」、「テキスト」を「body」と名付けています。

そこから対応するクラス名を

.media(フロート解除のスタイルのみ指定)
.media__image(左フロートと右余白のスタイルのみ指定)
.media__body(オーバーフロー時に隠すスタイルのみ指定)

と、その部品の役割として、最低限のスタイルのみを割り当てます。そしてこのスタイルを、3種類のレイアウト枠で共通して使います。

では、それぞれのレイアウトの個別スタイルはどこで持たせるのか?というと、スライドの27と30枚目に注目してください。

一番目のレイアウトの外側に、<div class="media speaker">としている部分です。

先に登場した共通のクラス「.media」に加えて、このレイアウト枠独自の部分だけを指定した「.speaker」というクラスも割り当てています。

そして、「.speaker」には、このレイアウトのみで指定する「余白や背景色」の指定がされています。

このように、スタイルをつけるページの部品の役割を徹底的に見直し、これがどのようなオブジェクト化かを考え、その役割に応じて細分化したスタイルをつけていく手法が「OOCSS」と呼ばれる手法なのです。

まずオブジェクトありきで、そこへ部品の役割ごとにまとめたスタイルを指定するという手法です。つまりは、「コンポーネント化したスタイルを用いる、オブジェクト指向のCSS」ということになります。

ああ…専門用語の連発ですみません。とにもかくにも、これがOOCSSというスタイルなのだそう。

その後のスタイルをコンポーネント化するための具体的なコツについては、スライドに7つのポイントがあげられているのでぜひ見て欲しいと思います。

話を聞いて、私が感じたのは次の三点です。

○ページを部品に分ける時(オブジェクト化する時)に、俯瞰して客観的に見れるかどうか?

○管理しやすく、第三者にも理解しやすい、クラスの命名(コンポーネントに命名)ができるか?

○どこまで、細分化して、クラス分け(コンポーネント化)するのか?

この手法をどこまでの深さ・広さで用いるのか? というさじ加減がむずかしいだろうと思います。

懇親会後に、谷さんにそこを質問してみました。するとやはり、OOCSSのルールをきちんと理解しつつも、現場レベルでは柔軟に対応しているそうです。

実際の現場では、ページの内容に合わせて、どこまで使うかのさじ加減は必要で、従来のCSS組の方法も、「それがそのオブジェクトに適している」ならば、使っている。とのことでした。

スライドや執筆した書籍などでの説明は、どうしても端的に、画一的に書き表すことになるけれど、やはり、現場ではケースバイケースなんだなとお話の中で感じました。

同時に思ったことは、「それって、どれだけのケースを経験して来たか? で、コーディングの良しあしが決まるのでは…」と不安にもなりました。

どうやったら、経験を増やすことができるのか? についても質問したところ、よいコーディングをしているサイトを徹底的に読んでみるという答えをもらいました。例として、Twitterのサイトがあげられました。

コーディングの経験が浅いのであれば、読んでみよう。たしかに、いままでCSSを勉強してきた時の最終段階は、いかにいいお手本に巡り合えるか、だったような気がします。

OOCSSによるCSS設計を最初にみると、どうしても、極端に走ってしまい、クラスをたくさんつけていく、ともすれば、回りくどい面倒なやり方と思いがちですが、一番大事なことは、部品分けの設計(オブジェクト化)をきちんとすること。次に大事なのは、重複することなく、スタイルをつけていくこと。

あとは、そのうまいさじ加減さえつかめれば、というところのようです。

最初のCSS設計に時間が取られてしまい、形にするまでの時間がかかるのには、ヤキモキさせられるけれど、うまく整理・設計できれば、後の保守が格段に楽になるはずなので、がんばって、この考え方をモノにしたいと思います。

まずは、いろいろと読んで・試して、ルールを手に馴染ませるところからスタートするのがよさそうです。

プログラミングしかり、コーディングを伴う技術は、その手法が進歩していくものだけれど、ようやく、Webのコーディングも、一歩進んだ考え方が登場したのだと感じました。

・・・さて、今回はここまで。
続きは、後日↓のページにて公開します。
< http://r360studio.com/learn/learn20141108.html
>
#Twitterフォローしといてもらえれば、公開したらお知らせしますね。

さてさて。今回は、尻切れな感じでスミマセン。次回は、12月にお会いしましょう。年末近くになってきたので、今年の振り返りみたいなことをやるかも…。ではまた!

※記事へのご意見・ご要望は下記より受付ます。
< http://goo.gl/rN5Dg
>

【 森和恵 r360studio 〜 Web系インストラクター 〜 】
<site: http://r360studio.com
> <twitter: http://twitter.com/r360studio
>
<mail: r360studio@gmail.com >
<サイト制作の教科書 r360study: http://www.facebook.com/r360study
>

最近、ぼつぼつと自分のサイトを更新しています。コンテンツの追加や開催セミナーの告知をおりますので、よかったらちらりとご覧くださいませ。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編集後記(11/10)

●プリンターが、突然「インクカートリッジ[C]を認識できません。セットし直してください」と言う。いや、本体小窓でメッセージが出た。すぐにセットし直したが、再び同じメッセージが出る。以前はこれで簡単に復元したはずだが。数回繰り返すがダメ。プリンター側のICチップ読み込み部分の掃除をしてもダメ。4本のカートリッジをすべてはずし、電源を抜いて、5分以上たったら、電源を入れカートリッジを戻す。この裏技で復元するはずだ。しかし相変わらず[C]だけ認識しない。ICチップのせいだろうか。あいにく換えのインクカートリッジ[C]がないからわからない。アマゾンで注文だ。プリントはあきらめてスキャンしようと思ったら、相変わらず同じメッセージが出てスキャンもコピーも不可能。インクが届いて、差し替えて、それでもだめだったら、このプリンタはアウトなのか。

昼食に餅を食べていたら、なぜこのシーズンに餅かというのはおいといて、いやな感触が。奥歯の詰め物が餅にくっついてはずれてしまったのだ。ああ、なんてことだ。こういう事態はそれほど珍しいことではない。しかし、やっぱりショック。大の苦手の歯科医に行かなければならない。ゆううつだ。翌日の夕方に、いつもの歯科医に行くと、先生は外れた金属を元あったところに置いて、このまま使えるよ、と言う。ラッキー! その付近をきれいにして付け直し、簡単に元通りになった。ほんの数分である。その後、ブラウン電動歯ブラシのおかげか、歯石も少なくクリーニングもすぐに終わった。一回で完了。それなりの出費を覚悟していたから、予想外の展開がうれしく、久しぶりに普通のビールで祝杯をあげた。

アマゾンでエポック社の「野球盤K」を買った。小3男子と遊ぶためだ。中学生になった姉は部活に忙しくて、めったに我が家に来ることがない。弟の方は今も学校帰りは高層階の自宅に直接帰らず、まずは一階のわが家に寄る。ランドセルを置いて友達と遊びに行くことが多いが、ときどきは遊び相手がいなくて、ソファで寝転がって漫画を読んだりしている。かつてはトランプや花札に熱中したものだが、最近は遊んでくれない。家に帰ればゲーム機で遊んでいるらしい。せめて我が家に来たときは、一緒に遊びたいと思って買ったのがこの「野球盤K」なのだ。さっそくセッティングして妻に相手をさせた。

野球のルールならわたしより知っている妻だから説明不要だ。要はピッチャーとバッターのアナログな対決だ。金属球を金属バットで打ち返す。しかし、いまどきのピッチャーは速球はもちろん、変化球を投げられるのだ。投球レバーと変化球レバーを併用し、カーブ、シュート、シンカー、スライダー、そしてチェンジアップ。さらに消える魔球も! 一方バッターは右打ちと左打ちに切り替え可能だ。おもしろい。単に投げて打ってだけではなく、駆け引きできるところがいい。前期高齢者の夫とそれより少し若い妻が、かなり熱中できるのだからすごいゲーム盤だ。対象年齢は5歳からだった……。(柴田)

<http://www.amazon.co.jp/exec/obidos/ASIN/B004KJBEOI/dgcrcom-22/>

野球盤K


●どなたかデザイン、WordPress、コーディング、Flashなどのお仕事を手伝ってくださいませんか? フットワークが軽く、連絡を密にしてくださる方。実績や費用目安などを教えてください。zacke@days-i.comまで。手を挙げてくださった方々、ありがとうございます。

「TAKARAZUKA 1万人のラインダンス」続き。

参加人数は受付での番号入りリストバンドの引き替えでのカウントと、ブロックごとにスタッフが目視カウント。キャンセル待ち含めて5,000人以上の応募があり、5,435番まで発番されていた。時間と雨とで脱落者が出てしまい、参加者数は結局4,563。

1,000人もの人はどこに行ったの? 体調不良が1,000人ってことはないでしょう。子連れが子供の体調管理のためにドタキャンしたのかなと思ったものの、未就学児も多数参加していたから、それだけが原因ではないと思う。

参加者プレゼントに当選した人にインタビューしようとしたら、そこの団体がまるまる参加していなかったという事件まであったよ……。 (hammer.mule)