[2928] 実案件で使うCSS3の使用範囲&CSS3だけで作る「ボヨヨンサブメニュー」

投稿:  著者:  読了時間:25分(本文:約12,100文字)


《どんなものにも必ずお作法がある》

■子だくさんIT社長のFileMaker日記[27]
 FileMaker GoのためのFileMaker学習法-2
 茂田カツノリ

■クリエイター手抜きプロジェクト[253]
 Illustrator CS/CS2/CS3/CS4/CS5編
 サブフォルダ内にある全てのAIファイルを開く
 古籏一浩

■明日もデザインで食べていこう![03]
 実案件で使うCSS3の使用範囲&CSS3だけで作る「ボヨヨンサブメニュー」
 秋葉秀樹

--PR------------------------------------------------------------------
★印刷通販「トクプレ」がリニューアルオープンしました!
┃ ≫≫≫ http://www.ddc.co.jp/tokupre/ ≪≪≪ PDF/X-1a・PDF/X-4対応♪
┃ A4サイズ 片面カラー印刷 500枚が 2,310円〜 など格安印刷提供中!
┃ 印刷ご発注の方にFlash電子カタログへの変換サービスを無料でご提供中
┃ 印刷物だけでなくウェブでの告知活動・販売促進活動にお役立て下さい
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■運営:株式会社吉田印刷所(TEL:0250-43-6144) http://www.ddc.co.jp/
-----------------------------------------------------------------PR---



━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■子だくさんIT社長のFileMaker日記[27]
FileMaker GoのためのFileMaker学習法-2

茂田カツノリ
< http://bn.dgcr.com/archives/20101004140300.html >
───────────────────────────────────
こんにちはっ、茂田です。

「FileMaker Goのための〜」という題名にはなっているけれど、実はGoはほぼ関係なく、FileMakerそのものの学習方法について語ってたりするのだ。

●プログラミング的感性とデータベース的感性の違い

FileMakerでデータベースを作る上の知識においては、実は大きく分けて2つの領域が存在する。それは、1)プログラミング的感性、2)データベース的感性、だ。このへんの話は何度かしているが、今回もうちょっと掘り下げてみる。

この理論を提唱したのはMITの教授、ではなく渋谷区でベンチャー企業を経営し、何年経っても成功できない子だくさん男性(45)が勝手に言ってるだけなのだが。

1)プログラミング的感性というのは、FileMakerでいえばスクリプトや計算式の処理にあたり、ある手順を踏んで目的を達成するような形のもの。BASICなどを含めた開発言語を使ったことあれば身に付いているし、FileMakerの場合はこの部分がすごくラクチンで、誰でもなんとかなる。

一方、2)データベース的感性は、具体的にいうとリレーションにからむ知識だ。FileMakerではここの扱いも実に洗練されているのだが、正しく利用するためには一定のお作法を学ぶ必要がある。そしてそのお作法に対する知識および意識は、開発者の実力をはかる大きな指標となる。

ここで気をつけたいのが、FileMakerにおいては1)より2)のほうが1,024倍(当社比)くらい重要だという点。1)は、プログラミングとかいう言葉が付いているから一見難しそうに思えるかもしれないが、この点はFileMakerにおいてはハードルが低い。しかし、2)はそうはいかない。

困ったことは、1)の世界だけでもある程度動いているように見えるものが作れてしまう点だ。動いているものが作れるからといって、2)のことも知っているとは限らない。

誰かに開発を依頼したり、誰かから習ったりするときは、こうした領域の違いというものを頭に入れておいてほしい。

●機能実現の方法に差が

いろんな人が作成したデータベースをみると、ある機能を実現するのに人によりさまざまな方法があることがわかる。

これを「人それぞれのやり方があってよい」とするのは一見聞こえが良いが、それは違う。どんなものにも必ずお作法があり、どんなお作法にもそう決めた理由と、先人の知恵や試行錯誤の結果が含まれているから、まずそれを学ぶことが大事なのだ。お作法に逆らうにしても、まずはそのお作法がどういうものかだけは学ぶべき。

FileMakerデータベースの作り方においては、1)しかわからない人と、2)を理解している人とでは、作られ方に明確な差がある。具体的には、1)の人はスクリプトで値を作ってフィールドに放り込むという作りをする。これはもちろん時と場合によるが、間違いと言い切れることが多い。

また、1)だけの人が作ったデータベースに特徴的なのは、フィールド数がやたら多く、それも似た性質を持ったものをたくさん作っていることだ。

2)を理解している人は、さまざまな処理や数値の集計をリレーションによって実現することを基本としている。複雑な集計において速度向上のためにスクリプトやスクリプトトリガを使うことはあるが、大原則としてリレーションをちゃんと組んで問題を解決するのだ。

ほかの例をあげると、たとえば一部のレコードだけ処理を行うというスクリプトを作るにしても、1)の人は「検索」スクリプトステップを使うが、2)の人は多くの場合で「関連レコードへ移動」を使うという差がある。

●どうやって「データベース的感性」を身につける?

じゃあ、その「2)データベース的感性」とやらは、どうやったら身につけられるんだいという点について、僕はそれに明確な答えを持っている。

それは「データベース的感性というものの存在を認め、意識し、学ぼうと考えること」だ。

この領域についての知識が不足している人は、このあたりの知識を軽視してると僕には見える。だから第一歩として、こうした感性の存在を認めること。それだけでドアは半分開かれる。

また「〜的感性」なんて言葉が示すとおり、生身の人間に目の前でツバとばしながら解説されるのが一番の習得法である、という要素は強い。

ということで、『FileMakerを活かすにはデータベース的感性を身につけるべし!』ということを大声で暑苦しく主張している茂田カツノリの講習を受けてみてもいいと思った方、ぜひ弊社サイトをごらんください(宣伝モード)。

あ、なるべくツバは飛ばさないからっ。

【しげた・かつのり】FileMaker公認トレーナー/FileMaker11認定デベロッパー。システム開発およびコンサルティングが主な仕事だが、株式会社レクレアル代表取締役。FileMaker Goでのアンケートシステムや営業日報入力ツールなどの問い合わせ、そしてもちろんFileMakerのコンサルティングご要望など、ぜひともお待ちしております。

実は最近特に、「デジクリ読んで茂田を知って仕事の問い合わせしたよ」ってお話しが増えている。なんとも嬉しい限り。受託開発がお受けできるかはタイミング次第だけれど、コンサルティングや講師はどんどんお受けしているので、全国全世界からのご依頼よろしくです。先週は三重・大阪・岐阜・静岡と回った上で滋賀の方と大阪で打ち合わせもしたし、来週は北海道の北見・旭川と回ります。「来れるものなら来てみろ」というくらい移動が大変なところからのご依頼を期待しています。

Twitter(個人用)< http://twitter.com/shigezo >
Twitter(会社用)< http://twitter.com/FileMaker_etc >
Facebook(個人用)< http://www.facebook.com/k.shigeta >
株式会社レクレアル < http://www.recrear.jp/ >

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト[253]
Illustrator CS/CS2/CS3/CS4/CS5編
サブフォルダ内にある全てのAIファイルを開く

古籏一浩
< http://bn.dgcr.com/archives/20101004140200.html >
───────────────────────────────────
今回のスクリプトは、サブフォルダ内にある全てのAIファイルを開くものです。MacOS XにはSpotlight(ファイル検索機能)があるので、あまり必要ないかもしれません。手作業でなく自動的に処理する場合には便利だと思います。

サブフォルダがある場合は、再帰を使ってAIファイルを取得しないといけません。以下のスクリプトを実行すると、フォルダを選択するダイアログが表示されます。すると選択したフォルダと、そのサブフォルダ内にあるAIファイルが全て開かれます。


rootFolderObj = Folder.selectDialog("フォルダを選択してください");
fList = getAllFile(rootFolderObj, [".ai"]); // 拡張子は小文字で
alert(fList);
for(var i=0; i<fList.length; i++){
app.open(fList[i]);
}
// サブフォルダも含めたファイル一覧を取得する関数
function getAllFile(folderObj, ext){
if (!folderObj) return; // キャンセルされたら処理しない
var list = [];
getFolder(folderObj);
return list;
// フォルダ内の一覧を取得
function getFolder(folderObj){
var fileList = folderObj.getFiles();
for (var i=0; i<fileList.length; i++){
if (fileList[i].getFiles) {
getFolder(fileList[i]); // サブフォルダがある限り繰り返す
}else{
var f = fileList[i].name.toLowerCase();
for(var j=0; j<ext.length; j++){
if (f.indexOf(ext[j]) > -1) { list.push(fileList[i]); }
}
}
}
}
}

AIファイルでなくEPSファイルにしたい場合は以下のように変更します。

fList = getAllFile(rootFolderObj, [".ai"]);
  ↓
fList = getAllFile(rootFolderObj, [".eps"]);


AIファイルとEPSの両方を開きたい場合は以下のように変更します。

fList = getAllFile(rootFolderObj, [".ai"]);

fList = getAllFile(rootFolderObj, [".ai", ".eps"]);

開きたいファイルの拡張子を追加していけばpdfでも何でも対応できます。


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

CSS3+JavaScriptで勉強中。ブラウザごとプロパティ指定しないと動かないので、1行で済むはずが3行とか5行にもなってしまいます......。本来必要ないコードばかり増えてイマイチよろしくありません。プロパティ名だけ違うなら関数ひとつ書けばいいけど、指定する値も違ったりして面倒です。エントロピー増大の法則......

・プロならば知っておくべきWebコーディング&デザインの定石100
【10/26発売】
< http://www.amazon.co.jp/dp/4844361538/ >

・Google API Expertが解説するHTML5ガイドブック【発売中】
< http://www.amazon.co.jp/dp/4844329278 >

・逆引きGoogle Maps APIリファレンス ver 3
< http://www.openspc2.org/reibun/Google/Maps/API/ver3/ >

・フリー実写3D映像素材
< http://118.22.25.23/HDTV/footage/HD/3D/ >

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

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集 発売中
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/ >

毎度おなじみASCII.jpの連載もよろしく
・サーバー不要で保存できる「Web Storage」の使い方
< http://ascii.jp/elem/000/000/557/557064/ >

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■明日もデザインで食べていこう![03]
実案件で使うCSS3の使用範囲&CSS3だけで作る「ボヨヨンサブメニュー」

秋葉秀樹
< http://bn.dgcr.com/archives/20101004140100.html >
───────────────────────────────────
こんにちは、秋葉です、ども。急に寒くなったり暑くなったり、微妙な気温の変化が続いてます、体調には充分気をつけましょう〜。

IE9(InternetExploler9)ベータではCSS3の対応が進んでいるわけですが、色々調べてみて、実案件で使えるか? というようなお話を。

●意外にもIE8で使えるCSS3

意外だったのはIEは8の時点で@font-faceに対応してたってこと。
サーバ上にあるOpenTypeやTrueType、WOFFといったフォントファイルを読み込んでブラウザ上に「HTMLテキスト」として表示する、なんてやつ。有名なGoogle Font APIも簡単に使えるので、試してみようっと。
< http://code.google.com/intl/ja/apis/webfonts/ >

●IE9の登場でCSS3は実案件で使えるか?

▼結論:厳しい。

海外のCSS3事情を調べると、まあとにかくカッチョ良いデザインを見せつけてくれるんですが......。
ブログのタグにはちゃっかりと「Progressive Enhancement(プログレッシブ・エンハンスメント)」な〜んてあるように、要は「IEとかで効果ないけど、美しい人はもっと美しく〜」が本音ってところでしょうね、こりゃまた。「プログレッシブ・エンハンスメント」を強調されても嫌がるお客さんは必ずいます。

●同じデザインじゃないと嫌! なクライアントに、CSS3を使いたい場合の折衝方法

▼僕の手段:Twitterのトップを見せます。

口で説明しても分からんワガママでありがた〜いクライアント様には、割と流行っているサイトの実例で口説いたら落とせるかもしれません。IEと「別な意味でモダン」なブラウザで比べてみせます。

ただし、それはあくまで情報が差分なく伝わることが前提! サイト全体のデザインも、「CSS3を使っても使わなくても無理のないデザイン(デザイン=設計)」を、しっかり考えていかにゃならんのです。それが無理ならCSS3はすっぱりあきらめます。

●無難そうなCSS3プロパティ(上記のケースでいうと)

・border-radius
・gradient
・text-shadow
・box-shadow

僕はお客さんと直で交渉して制作までやることが多いので、実際あったやりとりでお客さんに了解を得やすいCSS3の使用範囲ってこんなところかな? と、勝手に私見で選んでみました。

○border-radius(ボックス境界の四辺を角丸にする)
 これはTwitterでも使われている有名な事例ですね。ただし、あまりに角丸の値が大きすぎて角丸の形が目立つと、IEで見たときとの差が大きいため、ダメだしを食らうかもしれません。
▼まとめ:角丸のサイズは極力小さい方が無難かも!?

○gradient(ボックスをグラデーションで塗る)
 これも角丸と同じような感覚でとらえてください。極端にかけ離れた色と色のグラデーションだと、差が目立っちゃうのでお客さんが嫌がります。できればあっさりしたボタンのグラデーションに留めておいた方が無難です。
▼まとめ:ボタンのグラデは縦方向のシンプルで、ちょっとだけ表面の立体感をだしたい時だけちょこっと使いましょう。

○text-shadow/box-shadow(文字/ボックス境界に影をつける)
 考えなしにゴツい影(濃かったり、影までの距離がありすぎたり)を付けると視覚的な奥行き感を崩壊させます。

 なので、影を付けるときにデザイナーが冷静に確認するべき事は、
 ・ボタン内の文字、そこには宙に浮くほどボタンと文字の距離が必要か?
 ・実際手書きのメモをボックスモデルに見立ててみる。その手書きメモには影がつくほど奥行きがあるか?
 ・影を入れたら重ね順に矛盾が生じないか?

▼まとめ:まず本当に必要かどうかを見極める必要があります。理由があればいいけど、「視覚的奥行き感」を惑わすようなものであれば、情報が正しく伝わらないのと同じぐらい質の低いサイトに早変わりする危険性があるので、奥行きのロジックを考えましょう。

●上記以外のCSS3プロパティを使う場合に注意したいこと

僕がこないだ納品した案件で、JavaScriptによって写真スライドショーを実装したんですが、やわらかい感じを狙って、ちょっと傾かせました。ところがIE8で見ると、まっすぐ立った状態なわけです。IEではrotateをサポートしてないんですよね。お客さんにはあらかじめ伝えておきました、「Windowsで見るとまっすぐ見えるかもしれませんよ」と。もちろん、傾かせてもまっすぐでも隠れる箇所がないように配慮しました。

●今回のデモ! CSS3だけで作る「ボヨヨンサブメニュー」

つらつらと書きましたが、やっと今回のデモをやりましょう。
はじめに言っておきます、IE9 Beta、さらになんとFirefox4 Betaも、アニメーションが効きませんっ! 最低限の目的は果たせるポップアップメニューをJavaScriptナシで、CSSだけでつくってみましょう。

今回の超シンプルなサンプルはこちら。menuAにマウスを置いてみてください。(Safari、Chormeだとアニメーションします)
< http://www.akibahideki.com/digicre/case_03/submenu.html >

【HTMLコード】
<ul>
<li class="sub">
<ul class="anime">
<li><a href="http://www.yahoo.co.jp/">subMenuA</a></li>
<li><a href="#">subMenuB</a></li>
<li><a href="#">subMenuC</a></li>
<li><a href="#">subMenuD</a></li>
<li><a href="#">subMenuE</a></li>
</ul>

<a href="#">menuA</a>

</li>
<li><a href="#">menuB</a></li>
<li><a href="#">menuC</a></li>
<li><a href="#">menuD</a></li>
<li><a href="#">menuE</a></li>
</ul>


よく見るli要素の中にリストの入れ子が入っている例ですね。
li.subがhoverしたとき、ul.animeをdisplay:blockにする、それ以外はnone。これだけだと唐突なので「フワッと」感を出したいわけで。

【CSS3コード】
li.sub:hover ul.anime {
display: block;
}



li.sub:hover ul.anime {
display: block;
-webkit-animation-name: "anime01";
-webkit-animation-duration: 0.5s;
-webkit-animation-property: opacity, left;
-webkit-animation-iteration-count: 1;
}

と書いておきます。

さて、出てきました「animation」。「transition」と似てます。何が違うのかというと、transitionの場合、始点と終点の2点の動きでつなぐ事が目的で、それに対してanimationは、「始点から20%の位置でどうなって、70%の位置でどうなって、それを何回繰り返す」といったように、細かい動きを付ける事ができるところです。

【アニメーション設定の解説】
○「アニメーションの名前(識別名)」をつけます。
 -webkit-animation-name: "anime01";
 ここでは「anime01」、これが後でkeyframesによって紐付けられます。

○アニメーション時間を設定。
 -webkit-animation-duration: 0.5s;
 これで0.5秒

○アニメーションで使うプロパティを指定。
 -webkit-animation-property: opacity, left;
 これで透明度と左からの位置を「使うよ!」って宣言

○アニメーションを何回繰り返すか
 -webkit-animation-iteration-count: 1;
 これで1回、ちなみに無限ループはinfiniteを入れる

動きの細かい設定のため、animationの場合は、上記以外にこんなの書いてあげる必要があります。

@-webkit-keyframes "anime01" {
0% {opacity: 0; left: 100px;}
100% {opacity: 1; left: 150px;}
}

うわープログラム的だ(素人感覚なんで)。見ての通り-webkit-がついています。Safari、Chrome対応です。Firefox4 Betaでは対応していないんです......何故!? animationとkeyframesでワンセットとなります。上記の内容だと、最初(0%)の時点でopacity(透明度)をゼロ、左からの位置を100pxに配置。次に、最初(100%)の時点でopacity(透明度)を100%、左からの位置を150pxに配置。(これをアニメーションとして動きでつなぎます)

するとまっすぐフワッと左から右に、だんだん濃くなっていくわけですね。
で、「ボヨヨっ」とバネのような動きをつけるには、webkit-animation-timing-functionという設定がありますが、ちょっとややこしいので今回は別の方法をとります。

@-webkit-keyframes "anime01" {
0% {opacity: 0; left: 100px;}
100% {opacity: 1; left: 150px;}
}



@-webkit-keyframes "anime01" {
0% {opacity: 0; left: 120px;}
50% {opacity: 0.1; left: 100px;}
70% {opacity: 0.9; left: 160px;}
100% {opacity: 1; left: 150px;}
}

にしましょう。
「一回戻って、行き過ぎて落ち着く」。そんな若気のいたりのようなポップアップメニューがつくれました。

しかしFirefoxくん。
キミには期待してたのに。。。(正規版Firefox4では期待してるよ)


【あきば・ひでき】hidetaro7@gmail.com
< http://www.akibahideki.com/blog/ >

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記(10/4)

・菅首相の所信表明演説の中にびっくり仰天な個所がある。主体的な外交の展開、という段で「国民一人ひとりが自分の問題としてとらえ、国民全体で考える主体的で能動的な外交を展開していかなければならない」と主張する。これについて読売は「説明不足で、真意が分かりづらい。国民が外交に関心を持つのは大切だが、政府が責任逃れをしているような印象を与えかねない」、朝日は尖閣諸島沖事件や普天間問題の政府の対応を挙げ、「国民への説明がおざなりに過ぎる」と書く。尖閣問題では首相も外相も法相も"敵前逃亡"して、ローカル地検ごときに国家危機管理を押し付けた。次いで、国民一人ひとりに「主体的で能動的な外交を考えてくれ」と来たもんだ。政治主導が聞いてあきれる。常に責任回避しか考えていない。統治能力ゼロの政府はいらない。まあとにかく一国民として考えてみるから、尖閣事件の全貌を国民に明らかにせよ。漁船体当たりビデオをいまからでも遅くないから(いや、致命的に遅いけど)公表せよ。YouTubeに投稿せよ。ところが、政府はこのビデオの国会提出を先送りした。最大の理由は、これを国民に見せたら歴史的外交敗北に批判が再び沸騰し、民主党の支持がさらに下がるのが怖いかららしい。/政治家ほどかりゆしウェアが似合わない職種はない。沖縄県知事と手をとりあう馬淵沖縄北方相はヤ○○みたいだし、鳩山サンはフィリピンのポン引きと言われていたな。/東国原知事が「2期目の知事選には出馬させていただかない」と発言。させていただく症候群も、こんな使われ方されるとますます醜い。テレビで聞いて驚愕、耳を疑ったが、新聞にもそのまま掲載された。不出馬を期待する層に向けての皮肉の意味もあるとか。しかし、とんでもない日本語だ。(柴田)

・お坊さんがお経を唱えていると、甥らは笑いを堪えるのに苦しんでいる。その姿を見て、こちらまで笑いを堪える羽目になる。/ダメージジーンズを履いていたら、甥ら(小学校2年生と幼稚園児2人)に「こけたん?」「痛かった?」と言われ、これは元からと言ったら「またまた〜」と冷やかされた。/たぶんローライズでボクサーパンツを見せている人も笑われるのであろう。「見えてんで〜」。ちょっと前までおむつしていたくせに。/ジーンズと言えば、最近またまた太ってしまってやばい。ローライズは若い人限定でいいと思う今日この頃。大人のための上品なハイライズジーンズを買いにいかねばでござる。いや、このままローライズを履き続け、痩せなきゃな〜と反省していた方がいいのかもしれぬ。/ついにスポーツジムに入会したのだが、忙しくて行っていない......。徒歩3分なのに。書類を記入後、軽いアンケートに答えていた。きっかけ欄があって、マンション入居時に無料券を何度かもらっていたけど行けなくって......と話したら、担当者さんが「どこのマンションですか?」と、がしっと聞いてこられたので(近すぎて恥ずかしいからあえてマンション名は伏せていた)、ぬぼーっと答えたら、「そちらでしたら、提携特典があるはずです! お待ちください!」と慌ててマニュアルを探しはじめた。近いからいらないやと一番上の会員(タオルレンタルあり)にはしなかったのだが、うちのマンションはその会員だと割引がきくという。申し込んだ会員種別より安くなる。雑談するもんだねぇ、タオルや招待券がついてきたよ。/馬淵大臣はボディビルダー。最初警察官か自衛隊出身かと思ったよ、その体つき。 (hammer.mule)
< http://ja.wikipedia.org/w/index.php?oldid=34278464 >  馬淵澄夫