[3404] CSSメタ言語のLESSに注目

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■まにまにころころ［21］
今年もあれこれイベント事を

川合和史＠コロ。 Kawai Kazuhito
< https://bn.dgcr.com/archives/20130121140300.html
>
───────────────────────────────────
みなさん、新年明けましておめでとうございます......と言うにはもうずいぶん日が経ってしまいましたが、ともあれ本年もどうぞ宜しくお願いします。

◎──まつむらさんとはきっとどこかで祖先が同じなんだと思います

ここ半月ほど、年明け最初のまにころでは何を書こうかなーと日々考えつつも、これといって面白い話も思いつかないまま日はどんどん過ぎていったのですが、先週水曜日のデジクリで、まつむらさんの「ユーレカの日々」を読んだ時には、「あれ？　ここに自分のことが書いてあるぞ」と、そのままコピペして使ってしまいそうになりました。もう自分のMacBookの様子そのもののお話で。
< https://bn.dgcr.com/archives/20130116140300.html
>

恐れ多くてそんなことしませんでしたが、「デスクトップ・マトリョーシカ」はとても馴染みのある現象です。そして、うちのマシンでよく見かけるフォルダ名は「雑多」と「TMP」ですね。そしてこいつらもちょくちょくマトリョーシカに。

もちろん、リアルな部屋は「地層式整理法」が大活躍。先日、探し物をずいぶん深い層のAmazon箱から見事発掘した時は、自分に惚れそうになりました。

色んな物をポケットにつっこむのも同じ。ただ私は、ポケットの多い服が好きです。何でもかんでもポケットに入れるので、大きなポケットひとつだけでは、ポケット部分の生地が重みに耐えられなくなるので。探すのに苦労したって、どっかに入ってればいいじゃないですか。

そんな私は、事務所やお店といった室内でも上着を着たままでいることがよくあります。脱いだとしてもハンガーにかけたりすることは超レアケース。だって、手が届くところにその日のすべてのポケットがないと困るじゃないですか。

まつむらさんとの違いは、求めるポケットの数と、大片付けの頻度。まつむらさんは年に二度ほど大片付けをされるそうで。......私は二年に一度ほど。

散らかっていてもいいじゃないか。

◎──話は大きく変わって、イベントのお知らせいっぱい

さて、デジクリのバックナンバーが手元にない方には分からない話はひとまずこれくらいにして、新年最初のまにころではあれこれイベントのお知らせを。自分たち主催のものがふたつ、よそのがふたつ。どれも近々ですけどご紹介します。大阪のイベントがほとんどですが、遠方から来られるみなさんは雪による交通への影響にご注意くださいね。

◎──1月26日（土）まにゼミP7「おさわりFirefox OS」
< http://m2.cap-ut.co.jp/event/semi07.html
>

正式タイトルはもっと長いのつけたんですが、長すぎて自分でも覚えられずに、「おさわりFirefox OS」と呼んでいます。名付け親はMozillaの浅井さん。

Mozillaが開発するオープンソースのモバイル用OS「Firefox OS」は、その名の通り、FirefoxでありOS、OSでありFirefoxという、まさに、Webクリエイターにいじり倒されるために生まれてきたような存在。

アプリはもちろんWebアプリ同様の開発が可能。それだけでなく、スプラッシュ画面や、ロック解除画面、ホーム画面などの各画面のデザイン、そしてなんとデフォルトで入っている連絡帳やブラウザといったアプリのデザインさえも、HTML5やJavaScript、CSSといったWebの技術で思うままカスタマイズできます。

Webクリエイターにとって、お手持ちのスマートフォンを自分色に染められる、新しいモバイルOSなんです。

......と、告知文の概要から引っ張ってきましたが、これ書いた私もまだ触ったことがなくて、当日のおさわりを楽しみにしているところです。もっと詳しい内容やお申し込みは上記URL先をご覧ください。ちなみに、無料な上に浅井さんが全員にスイーツを用意してくださる！　そうです。そのひと言で開催決めました。

◎──1月26日（土）第9回リクリセミナー
「マルチデバイス化を見据えたコンテンツ設計 基礎講座」
< http://recreators.doorkeeper.jp/events/2342
>

こちらは、リクリこと、Re:Creator's Kansaiさんのセミナー。日時が先のおさわりと丸被りですが、長谷川恭久さんによるセミナー＆ワークショップということで、これまた興味深い内容です。おそらくまだ、ギリギリ残席あると思いますが、そろそろ早い者勝ち状態じゃないかなと。

◎──1月28日（月）まにゼミP8
「制作者なら知っておきたいWebセキュリティの考え方」
< http://m2.cap-ut.co.jp/event/semi08.html
>

こちらは平日夜、Webセキュリティの基礎セミナーです。おなじみ村岡正和さんが熱く熱く語ってくれると思います。スピーカーは村岡さんに加えて、昨年のつくばでのセキュリティコンテスト内ハッカソンで最優秀作品賞を受賞されている、神戸デジタル・ラボの松本悦宜さんも登場。おふたりのトークセッションも予定しています。松本さんは、神戸で昨年やったTechLIONにもトップバッターとして登壇されていましたね。

◎──2月8日（金）「ウェブ配色 決める！チカラ」刊行記念イベント
「ウェブ配色 決める！チカラ」を育むワークショップ
< http://www.wgn.co.jp/store/blog/item-1285.html
>

こちらも平日の夜開催。フォルトゥナの坂本邦夫さんが新刊を出されるそうで、それを記念して開催されるイベントです。2/9には名古屋で、2/14には東京で開催される予定です。各地それぞれの地域でゲストが異なり、大阪のゲストは先ほどのリクリを主宰されているこやみーさんこと小山瑞穂さん。坂本さんとこやみーさんの絡みも楽しみです。

こちら、会場でその書籍を割引販売されるそうですが、セミナー前に入手して読んでおきたいですよね。事前に書店で買って、当日はさらに知人の分を購入してください。発売日が2/8ですが、前日には書店に並んでる気がします。

◎──ここでプレゼントのお知らせ

今ご紹介した坂本さんの新刊「ウェブ配色 決める！チカラ」を、デジクリ読者、いや、まにころ読者に一冊プレゼント！　ご希望の方は、私宛にメールで、件名を「坂本さんの本が欲しい」とでもしてお送りください。締め切りは今月末。当選された方には2/1にご連絡します。なお、おそらくセミナーには間に合いませんので、セミナー用はやはりご購入ください。2冊でも3冊でも是非。

あ、私のメールアドレスは、この下、最後の私の名前の横にあります。Facebookのメッセージで応募連絡いただいても構いません。電話や、口頭でも構いませんが、私がうっかり忘れると、抽選前に落選します。（笑）

◎──今年も宜しくお願いします

そんなこんなで新年最初のまにころでしたが、今年もこんな感じでゆるゆるで進行していく予定です。たまにはかちっとした文章も書かないと、いざ書こうとしても書けなくなってしまうなと危惧しなくもないのですが、ま、その時はその時ってことで。必要になってから考えます。

新年も引き続き、座右の銘は「なるようになる」です。
（Facebookのプロフィール「好きな言葉」欄参照）

では、本年もどうぞひとつ宜しくお願いします。

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

過去の例では、デジクリのプレゼントって、すっごい高確率で当たります。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト［340］電子書籍編
Kindle Fire HD　その1

古籏一浩
< https://bn.dgcr.com/archives/20130121140200.html
>
───────────────────────────────────
Kindle Paperwhiteに続いて、Kindle Fire HDも手元に来ました。Kindle Fire HDは12月中旬以後の到着だったので、昨年のデジクリには間に合いませんでした。ということで、2013年の最初がKindle Fire HDのネタです。

・Kindle Fire HD
< http://www.amazon.co.jp/dp/B008UAAE44/
>

例によってKindle Fire HDの使い方のページも作りました。こういうページを作ると、いろいろ把握できて便利です。

・Kindle Fire HD使い方辞典
< http://www.openspc2.org/reibun/Kindle/Fire_HD/
>

設定は一般的なAndroidタブレットと同じように進みます。最初に使用言語を設定し、Wi-Fi接続の設定を行います。ここらへんはKindle Paperwhiteより快適です。

というのも、単純に処理速度が速いからです。やはり、レスポンスが速いというのは重要です。Wi-Fi接続なのでテザリングできるiPhone 5を経由してKindle Fire HDを外で使うこともできます。高速LTEが使えるならば、光回線はあまり用がないかもしれません。

Kindle Fire HD自体はAndroid OSなのですが、Android搭載のスマートフォンやNexus 7とは違ったホーム画面になっています。一般的なAndroid端末ではホーム画面はアプリのアイコンが並んでいます。

これに対してKindle Fire HDでは、iTunesやMacのFinderのカバーフローのような表示です（以後スライダーと表記）。つまり、指で左右に画面をはじいてアプリなどを起動するという感じになっています。

アプリは大きく表示されるので、老人でも押し間違えることはすくないでしょう。計ってみると5cmの正方形サイズです。これだけ大きければ視力が弱くても、何のアプリなのか認識できます。

このスライダーですが、アプリも書類もWebも本も混在して表示されます。つまり、フラット構造なのでアプリだからとか本だからという区分けがありません。これは便利と言えば便利です。

この便利そうなスライダーなんですが欠点もあります。本や書類が増えてくると、そのまま全部表示してしまうため選択が大変です。一応、スライダーで表示したくないものは消せるのですが、一度に大量にPDFを追加した時は大変です。スライダーがPDFだらけになります。

おまけにPDFはサムネールが表示されないので、ファイル名だけが頼りです。本であれば表紙が、Webであればページ内容のサムネールが表示され便利なのですが。

便利なスライダーですが、この点を改良しないとかえって不便です。最近読んだ本とか、最近使ったアプリだけを表示させるような機能が欲しいところです。ぜひ、PDFもサムネール表示できるように改良して欲しいところです。

Kindle Fire HDではスライダーの上にメニューがあります。「お買い物　ゲーム　アプリ　本　ミュージック　ビデオ　ウェブ　写真　ドキュメント」のメニューです。ゲーム、アプリ、本は購入できたのですが、なぜか音楽だけは購入したことになっているにも関わらず、ダウンロードできない状態です。とりあえずiTunesからKindle Fire HDに転送してますが、原因不明です。何か設定しないといけないのかもしれませんが。

Kindle Fire HDはAndroid端末なので、Android用のアプリも入ります。ストアが用意されているので、そこからダウンロードすればOK。アプリの数は多くありませんが、それなりにはあるので、必要なものを入れておけばよいでしょう。

あまり使わないだろうと思って購入したKindle Fire HDですが、思っている以上に便利な端末でした。便利というよりも、本やアプリを手軽に購入してしまう可能性が高い端末というべきでしょうか。

困るのはスライダー画面で一番大きく表示された本や、アプリなどに対応した、おすすめ品がホーム画面下にずらりと表示されることです。漫画本で第1巻を購入すると、以後の2巻や関連する漫画本の一覧が表示されます。

タッチすると、すぐに購入画面に移動し「さあ、いかがですか？　今すぐ買えるんですよ？　ほら」というような感じになります。ですので、お金に余裕がある人か、誘惑に負けない人であればKindle Fire HDを購入しても大丈夫でしょう。

Kindle Fire HDは電子書籍リーダーというよりも、アマゾンのお買い物専用端末でした。つづく

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

今年もよろしくお願いします。例年になく原稿のストックが少ないので、適当なネタがいろいろ入るかも。せっかくなのでSony Readerも買ってみました。これも実際にいじってみると、予想とは違った部分がいくつかありました。

・Sony Reader 使い方辞典
< http://www.openspc2.org/reibun/Sony/Reader/PRS-T2/
>

少し時間がとれたのでいつもの自動化関連のページを作成しました。

・Adobe Illustrator CS6自動化作戦
< http://www.openspc2.org/book/IllustratorCS6/
>

・InDesign CS6自動化作戦 with JavaScript
< http://www.openspc2.org/book/InDesignCS6/
>

・AfterEffects CS6自動化作戦
< http://www.openspc2.org/book/AfterEffectsCS6/
>

・Kindle Fire HD使い方辞典
< http://www.openspc2.org/reibun/Kindle/Fire_HD/
>

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

・iPad mini（アイパッドミニ）使い方辞典
< http://www.openspc2.org/reibun/iPad/mini/2012/
>

・すべての人に知っておいてほしい jQuery & jQuery Mobileの基本原則
< http://www.amazon.co.jp/dp/4844362984
>

・HTML5ガイドブック 増補改訂版
< http://www.amazon.co.jp/dp/4844332937
>

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

・改訂5版JavaScriptポケットリファレンス
< http://www.amazon.co.jp/dp/4774148199
>

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

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

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>
吉田印刷所の「印刷の泉」でも購入できるようになりました。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■講師だって、最初は初心者だもの［番外］
2013年は、がんばらずに、自分らしくしなやかに
CSSメタ言語の LESS に注目

森　和恵
< https://bn.dgcr.com/archives/20130121140100.html
>
───────────────────────────────────
こんにちは。森和恵です。あけましておめでとうございます。今年もよろしくお願いいたします。......と、去年と同じ書き出しで今年もスタートしました。まずは、今年の抱負を語りたいと思います。

■抱負に振り回されるようじゃイカン。

　　そろそろ、変わらなきゃイカン。〜2012年の抱負〜
　　< https://bn.dgcr.com/archives/20120130140100.html
>

去年は、張り切ってこのような抱負を掲げてみたものの......。仕事に流されてしまい、ほとんど手つかずで終えてしまいました。一年中、時間に追われていたような気がします。

理由は何となくわかってて、第一が41歳を超えて体力がついていかなくなったことが大きいなと思います。「若い時と同じ調子で仕事をしようと思ったって、ダメだよ（笑）」なんて、友達に言われる始末だし（恥）。

日々の仕事に追われるし、目標をぜんぜん達成できない自分が情けなくて、責めてばかり。割と苦しい一年を過ごしました。

なので、今年は「がんばらずに、自分らしくしなやかに」を掲げてみました。無理できないのなら、できない自分を認めて、できることからコツコツやっていこうかなと思っています。

まずは、春までの目標として、志低めに最低限「これはしなきゃまずいだろ？」と思うものだけに絞ってみました（迷ったときは、短いスパンで小さな目標かかげ、達成感を得て自信をつけるのがいいらしいです）。

●まずは、自分改造を

体力が衰えてきているのに、体重は増加する一方......なんて最悪なループから脱出したいと思います。ええ、何としてでも。もうじき42才。ここで失敗したら戻れない......気がします（苦笑）。

・睡眠は6時間キープで、早寝・早起き（11時〜5時）をする
・甘いものは午前中に、お昼ご飯をちゃんと食べる
・ジムに最低でも週1回は行く

当たり前のことだけど、これが習慣化したらずいぶん生活改善できるはず。

●物事を深くインプットする

講師業という仕事柄、浅く広くのインプットを心がけて来ました。が、どうやらそれでは、役に立ちそうにないんだなと思い知らされました。みんなが知っていることを知ってても、必要とされないんだなと。

なので、興味を持ったことをこれまでより、もう少しだけ深く掘り下げて消化させたいなと思います。当面は、それをするためのアウトプットを目指そうかなと思います（知識をモノにするには、アウトプットする過程で根付くからです）。

●好きなことにじっくり取り組む

週に一度は、完全にオフを取って、好きなことに取り組みたいと思います。好きなことは、なんでもいいのですが、仕事意外のことにすること。日記の記録でもいいので、形に残すこと。あと、オフの日に疲れすぎてて一日寝て過ごすなんてことがないように体調管理も必要ですね。


■CSSメタ言語の LESS に注目

自分の抱負を書いたら、次は、Web業界的に何に注目するか？を挙げたいと思います。

私が注目しているのは、Twitter BootstrapとLESSです。どちらも、最近の流行といえば流行なのですが、どちらも「CSSを拡張する」ものです。導入にはてこずりますが、組み込んでしまえば、Web制作を効率化できるものです。

この辺りの現状を見るために、お正月明け早々にイベントに参加してきました。このイベント、有料にもかかわらず240名の定員があっというまに満席になるほどの盛況ぶりで、ここへの関心の高さを伺わせてくれました。

　　CSS Preprocessor Shootout
　　< http://lp26.cssnite.jp/
>

イベントのテーマは、CSS Preprocessor（CSSメタ言語）。CSSを記述するときに変数やMixinと言われる関数が使えたりし、ベタでCSSを管理するよりかなり楽になります。LESSは、Sass、Stylusに次ぐCSSメタ言語のひとつで、機能はそれほど高くないけれど、それ故に初心者に取り組みやすい言語です。

　　LESS
　　< http://lesscss.org/
>

LESSコードの便利さについて、一例をあげてみます。

LESSのコードで「@変数名：値」を定義しCSSの値を変数に持つことができます。

@color: #4D926F;

#header {
　color: @color;
}
h2 {
　color: @color;
}

これを、通常のCSSコードに直すと、変数名が展開されて値がセットされます。

#header {
　color: #4D926F;
}

h2 {
　color: #4D926F;
}

プログラム系が嫌いではない人にとって、「えー！　なにこれ？　すげー！」的なものだと思います。それでなくても、Webサイト制作業務に携わるなら、楽したいなら、ぜひ覚えておいて損はないはず。

LESS→CSSに直す方法（コンパイルするというそうです）は、いろいろありますが、一番手軽なのがWeb上で試せるLESS2CSSです。

　｜LESS2CSS
　< http://less2css.org/
>

Twitter Bootstrap は、Twitterが提供する CSSフレームワークです。 一言でいうと、Twitterのサイトで使われているさまざまなCSSのテクニックをテンプレートにして、配布してくれています。

　｜Twitter Bootstrap
　< http://twitter.github.com/bootstrap/
>

例えば、Twitterで使われているボタンのデザインを適応する時は、タグにclass="btn btn-large" という属性をつけただけで使えてしまうというすぐれものです。

< button class="btn btn-large" type="button" >Large button< /button >

　｜Twitter Bootstrap の Buttons 例
　< http://twitter.github.com/bootstrap/base-css.html#buttons
>

実は、Twitter Bootstrap をカスタマイズするのにLESSが使えるとのこと。最初からあるデザインを自分好みにカスタマイズできるそうです。やはり、LESSが大切。

ということで、今回は触りだけご紹介しました。
また、次回以降の記事で、いろいろと描きたいなと思います。

さて、今回は年の初め......ということもあり、サラッとした感じで終わります。
次回は2月初めごろです。興味が熱いうちにLESSをもう少し掘り下げます。
ではまた！（＾θ＾）

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

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

大阪の会場なのですが、新しいセミナーの告知をさせてください。そう、自分がいいなと思ったことは、すぐにセミナーでお伝えしたいなと思っております。インプットしたら、アウトプットが大切ですね。(^^)

　　Twitter Bootstrap活用入門（2月23日）
　　< http://www.sansokan.jp/events/eve_detail.san?H_A_NO=14923
>
　　はじめてのLESS入門（3月16日）
　　< http://www.sansokan.jp/events/eve_detail.san?H_A_NO=14926
>


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編集後記（01/21）

●ネットで一日に何度も遭遇する「Vitz Cielキャンペーン」の広告がものすごくうっとうしい。スッピンで冴えない男顔の女性が、メイクして派手な別人になるさまを高速で見せる。ビフォー＆アフターの激しい落差。化粧って化けることをいうんだなと納得するが、なんとも不愉快な映像だ。出演者には悪いが、ビフォーもアフターも美しいとは思わない。これが予告なく頻繁に出てくるんだからうんざりだ。※今日はまだ遭遇していない。終わった？

ビフォー＆アフターといえば、我が家の南側テラスに面した障子が美しいのがうれしい。2枚しかないけど。紙の色がくすみ、少し破れたり剥がれたりしていたのにとうとう我慢できず、昨年末に張り替えたばかりだ。前回の張り替えに続き、今回もアイロン張りのプラスチック障子紙だ。

一戸建て時代の8枚の障子紙張り替えは、まず全体を水で湿らせて紙を剥ぎ、乾いてから糊を使って張っていたから半日仕事だった。当時はアイロン張りなんて手法は存在しなかった。集合住宅に来てからは、糊張りが2回、アイロン張りがこれで2回。前回のアイロン張りは成功したとはいえず、ときどき剥がれた部分にアイロンをあて直したり、テープでとめたりしていて、見映えはよくなかった。

そこで、今度こそはと丁寧な仕事をしたつもりだったが、翌朝見ると剥がれや皺が寄った部分もあるではないか。なんでこうなるんだ。やり方に間違いはなかったはずだ。思いついて、アイロンの温度を指定された「中」から少し熱いほうに設定して、問題個所にあててみたらきれいに接着したのだった。よっていた皺も数日経ったら消えて、いまはピンと張られてきれいなもんだ。

ところで障子は「張る」のか、「貼る」のか。「張る」が正しいと思ったが、意外に「貼る」の使用も多い。「障子貼る」は仲秋の季語である。アサヒペンのサイトでも「貼る」だ。「張る」派としては不満だが、プロセスとしては「貼る」で、仕上がった状態は「張る」という感じよねという妻の説はなかなかいいと思う。いまマスコミで頻繁に使われているのが「情報がサクソウしている」だ。意味がわからない、漢字がわからない若い人は多いだろうな。混乱とか、入り乱れてとかいったほうがストレートでいいじゃないか。（柴田）


●そうなの高確率で当たるの。みんな応募するより買うほうを選ぶんじゃないかしら。ということでワークスさんから打診はあったものの、川合氏に任せることに。／古籏さんお持ちのデバイス類の一覧表が見てみたいです。／LESSも勉強しなきゃなぁ......。私も今年は変わろうとしています。

体組成計。毎日手軽に測り、グラフ化したい。仕事が詰まってくると、健康やら家事やらすべてほっぽり出してしまい、後で困ったことになる。半年ぐらい測っていなかったら、恐ろしいことになっていた。

家には壊れない従来型の体組成計があるため、新しいものを買うのをためらってしまう。PCやAndroidとの連携はあってもMacやiPhone対応のものはほとんどない。対応するWiFiの体組成計『WiFi Body Scale』が欲しいと思っていた。デザインがすてき。記録できる項目数は体重、BMI、体脂肪。Twitter連携やWebサービスまである。

Bluetoothで記録でき、Webサービスとも連携できる日本発の『体組成計UC-411PBT-C』を見つけて検討。Bluetoothを毎回オンにするのはメンドクサイかも。オンにし続けるとバッテリーを消耗しそう。WiFiでいつの間にか登録される方が楽そう。

ただしこの『UC-411PBT-C』は、体重、BMI、体脂肪に加え、水分量と筋肉量が測れ、『gooからだログ』に自動的に記録されるようになっている。続く。（hammer.mule）

< http://shop.covia.co.jp/shopdetail/003000000001/order/
>
WiFi Body Scale
< http://www.wellnessconnected.jp/product/body_meter/
>
Continua規格対応 体組成計UC-411PBT-C
< http://nttxstore.jp/_RH_2501?LID=RH_2501_120618
>
血圧計もある。イメージ動画あり
< http://karada.goo.ne.jp
> 　gooからだログ
< http://karada.goo.ne.jp/continua
>
「からだログ対応」測定器
< http://www.lifehacker.jp/2013/01/130121math_magic.html
>
なぜこれが日本式!? 日本人が知らない線と点を使ったかけ算の方法