Design Caption

Design Caption http://www.designcaption.com/ 脳がSE向きのデザイナーの考えるデザイン情報ブログ ja Nucleus CMS v3.3 ©Design Caption Weblog http://backend.userland.com/rss http://www.designcaption.com/skins/images/logo.jpg Design Caption http://www.designcaption.com/ New Blog 「MSLab」開始！ http://www.designcaption.com/ms-lab.html 独自のブログを作成予定で、ドメインも取得済みなのですが、時間がないので繋ぎで作った物です。

是非、ご覧ください。
MSLab [http://ms-lab.blogspot.com]/

ちなみに今はMacOSX にCentOS用に作られたオープンソースグループウェア「Aipo4」をインストールを試みる記事を書いています。

]]> Page News http://www.designcaption.com/?itemid=39 Sun, 13 Apr 2008 23:05:57 +0900 DesignCaption閉鎖のお知らせ http://www.designcaption.com/end.html
大した記事も書けませんでしたが、少ないながらも一定数のアクセスを毎日頂いておりました。
SEO対策的な作りをある程度やっておいた結果でしょう。

意外に「アクア」の検索ワードにヒットする件数が多く、ビックリしました。
下手な日本語で分かり難いかと思うのですが、参考にして頂けたのかな？

記事のアドレスにあまり使われないワードの「filemaker9」を仕様したことで、詳しいこと何もかいていないのに、検索でたどって来て下さった方も多数いました（迷惑だったかも？）。

次に制作する予定のBlogは当分FileMakerやPHP等の情報、特にTips系をお送り出来たらと思っております。
Blogはまだでき上がっておりませんので、でき上がり次第また掲載致します。

サイトの閉鎖の内容に関しては、JeditXのカラーリングファイルの件等もありますので、ある程度はこのブログは凍結状態で公開する予定です。

次のBlogも、もしご興味があれば是非アクセスしてみて下さい。
よろしくお願いいたします。
]]> Page News http://www.designcaption.com/?itemid=37 Fri, 11 Apr 2008 04:59:05 +0900 JeditでFIleMakerの計算式を書く２ http://www.designcaption.com/FileMaker-Jedit2.html JeditでFIleMakerの計算式を書く」でご紹介したカラーリングファイルに色々とミスがあったので、書き直しました。

また、Jedit Xは現在バージョン２を開発中で、β版が公開されています。
今まで開くと強制終了してしまっていた大きなファイルが開けるようになっていたり、タブ機能が備わっていたり、ベーシックな部分の機能追加や、入力補完機能や、エンコーディング判定のプレビュー、Word 2007書類サポートなども備わり、完成版ができ上がるのがとても楽しみとなっています。
詳しくはオフィシャルページをご覧ください。

今回カラーリングファイルを書き直すとともに、入力補完の辞書ファイルも作りました。
カラーリングファイルは各関数の種類毎に分けてルールを作成していますので、好みに合わせてカラーを変えてみたりしてください。

カラーリング、辞書ともにFileMaker Pro9をベースにつくってあります。7〜9までのバージョンでご利用頂けるかと思います。

制作環境はJedit X β2.003となっております。是非ご利用下さい。

]]> FileMaker http://www.designcaption.com/?itemid=35 Sun, 10 Feb 2008 21:59:09 +0900 Leopard 使用レポート http://www.designcaption.com/MacOSX_10_5_Leopard_report1.html 既に、色々な記事が上がっているので、マニアックな部分（？）に今回は触れて行きます。

今回は仕事的に便利なシステム変更点が多々みられます。
Mailのメモ、To Do機能や、どこでもMy MacというVPNシステム。

今回の一番注目されているだろう、Time MachineというBackupシステム。
Backupをもっと気楽に、便利に。という意味では現状考えられる最高のシステムです。Backupだけをみれば革命的なものなのでは無いでしょうか。

それと、Spaces。シングルディスプレイの方にとってはかなりいい機能だと思われるはず。
私の場合は、自宅ではデュアルディスプレイで仕事をしていますので、そこまで憧れを感じなかったのですが、作業環境の区分けとしてはとてもいい感じです。
１番は、グラフィックソフトなど、2番はブラウザーやMailといった感じですね。

これは発売前から気になっていた点ですが、デュアルディスプレイの状態でSpecesを実行するとこうなります。
左右別々というのは無理なようですが、ちゃんと対応していた事に、感心しました。いや、Appleが造る物ですからちゃんと対応してるとは思っていましたが、これを確認したのは発売前にApple本社にいってデモを触ってきた時の感想だからです。

デュアルディスプレイでいいますともう一つ、面白い使い方があります。
Finderの新機能クイックビューを使う際、片方のディスプレイにフルスクリーン状態にして常時表示させておくと、プレビューがパッと出てくるので、スペースすら押す必要性も無く、Finderでは無いなにか別のビューアーソフトを使っているような便利感があります。

但し、現状バグなのかマウスポインターが消えて、迷子になることがあるのでフルスクリーンでは無く大きくしたクイックビューを使用しないといけませんが…。

あとは一番気になる点はソフトウェアの対応状況ですが、Photoshopは現状問題なく動いています。人によってはバグが起きた方も居るようですが。
パソコンを使用する上で一番大切な日本語変換ソフトに関しては、私はEGBRIDGEを使用しています。EGBRIDGEは先日アップデータを出したので問題はありません。ATOKではまだ問題が解決はされていないようですね。
Mac上で使う変換ソフトとしては、EGBRIDGEが対応も早く一番好きなのですが、WindowsとMacを併用されている方はATOKの方がやはり使いやすいのでしょうか。

さて、Webデザイナーとしては一番気になるSafariのCSS解釈とフォームのテキストフィールドの拡大可能という機能ですが、CSSの解釈はそこまで大きな変化は無いようですね。一部修正を加える必要性は勿論出てきますが、下手にHackなどの記述をCSSにしていなければ、問題は無いでしょう。
当サイトは基本Hack未使用のCSSもスタンダードな書き方をしているので、見た所問題は無さそうです（Safari3よりIEでの解釈の方が不安…）。

ブラウザー関連で、Flashに負担をかけるとSafariが強制終了しやすい。という問題があるようです。
ニコニコ動画などを見れいると動画によっては強制的に落ちてしまいます。

Adobeの日本語版ページを確認した限りでは、Leopardに関する公式発表がみられないので、対応はまだまだ先なのかなぁと思いますが、とりあえず問題はそこまで大きく無いので大丈夫でしょう。

また新しい発見がありましたら、書いて行こうと思います。]]> Apple http://www.designcaption.com/?itemid=33 Sun, 28 Oct 2007 22:51:30 +0900 JeditでFIleMakerの計算式を書く http://www.designcaption.com/FileMaker-Jedit.html 私もその一人で少しまえまでは、miを使って書いていた。

だが、最近はJeditを使い続けている。理由としては不等号などの記号をそのままコピーアンドペースト出来る点と、カラーリングの定義がとても細かく行える為だ。

Jeditでは、「正規表現」というパターンマッチの手法を使っている。詳しくはJeditの「6.5 正規表現について」を参照してほしい。
FileMaker的な説明をするとMiddle関数とPosition関数と、Substitute関数をまとめたような物で、これがFIleMakerに導入されたらどれだけHTMLの解析が楽になるか。と思うぐらい素晴らしい物だ。
このパターンマッチの手法を使ったカラーリングの定義で、計算式が今までと全く違った見え方をする。

サンプルにHTMLの文字抽出時に良く使う計算式をカラーリングした計算式のスクリーンショットを用意してみた。

Let関数にも対応させた為、変数が良く分かる。変数の設定等で定義したりする「＄」から始まる変数に関しては色を変えて、分かりやすくなっている。

コメントや、ダブルクオーテーションで囲われたテキストに関しては、元々あるカラーリングファイルの定義をそのまま使ったので、間違えは無いと思う。複雑な計算式を吐き出すプログラムを作る際にもとても分かりやすいと思う。

今回はこのカラーリングファイルを公開するので是非とも使ってお役に立てたら幸いです。
また、何か変な点等があればコメント等を頂ければ訂正を加えて行きたいと思いますので、よろしくお願いします。

【追記】
Jedit オフィシャルサイトのライブラリにも登録して頂きました！
ありがとうございます。

http://www.artman21.com/jp/jedit_x/library.html]]> FileMaker http://www.designcaption.com/?itemid=30 Mon, 17 Sep 2007 11:55:21 +0900 FileMaker9を少し触ってみた。 http://www.designcaption.com/FileMaker9.html 勿論注目の機能はMySQLをテーブルとして簡単に呼び出すことが可能という点だ。これによって、今まで重いとされていたFileMaker Serverを直接使った、Web公開の負担を軽減できるということだけでは無く、自社サイトのSQLサーバーがFileMaker9互換であれば、CSVデータ等を作ることなく、直接書き換え可能になるのだ。とは言っても、互換性のあるSQLサーバーを使ったサーバーとの契約は私個人では全くしておらず、自宅のサーバーもきっと違うだろう…。と思っていたら、そうでも無いことが発覚！！

自宅サーバーのPHPのバージョンというか、実行アプリの保存場所がFileMaker（Server版の自動生成PHPと）と互換が無いらしく、インストールのし直しを余儀なくされている現状ではあまり面白いことは出来なさそうなのだが、今後CMSシステムをFileMakerを使ってどう操るかを色々と健闘したい。

また、個人的にはデザイナー出身のFileMakerユーザーとして、デザイン機能の強化が気になる所。

ウインドウサイズによって変化するオブジェクトの横幅、縦幅の設定が可能になった点は特に興味深い。
というのも、FileMakerを使うパソコンは色々ある訳で、バイト先では基本的に20inchのパソコンを対象に行えばいいのだが、最近は部署を超えたデータベースを作ることもあるので、17inchのパソコンにも対応させないといけないからだ。

ちなみに、サイズの定義の仕方はVB等と同じような形。各辺にロック・アンロックのチェックボックスが付いていて、ロックされていない辺に関しては勝手にウインドウに合わせて伸び縮みするという物。
CSSで蓄えた可変的レイアウトの知識を使って面白いレイアウトを作りたい所だが、FileMaker9の導入はバイト先では現在の所未定である為、個人的に会社のパソコンにインストールしているFileMaker9で楽しむことしか現段階では出来ない…。

他にもフィールド定義の部分で条件に合わせてフィールドの文字設定を変えることが出来るようになったのは面白い。
例えば、利率が2%以下の物は危険である場合は、文字色を2%以下の場合赤くする。などの設定が可能。この設定に使うのは独自の設定で、計算式等では無い為、定義は難しいかもしれない。

だが、今まで別フィールドを用意し、文字で警告していたりする場合はフィールドを減らすことも可能で、可視的に警告できるのでインターフェイスを考える上だけでは無くかなり効果的だと思われる。

それと、巨大なデータベースを作る上では絶対に欲しい機能だったScriptのフォルダー管理が可能になったのは個人的には一番嬉しい点である。
FileMaker 8.5までの場合Scriptは完全ただのリストだった為50個を超えた辺りから管理がし難く、古いデータベース等を見ると、もう使われないScriptが沢山残っている等の現実がある。フォルダー管理が出来ればバージョンアップの際にも「旧Ver6 Scripts」などのフォルダーに入れておけば、全く手を付けていないScriptがどれなのか一目で分かる。0からDBを作り直したい衝動に良く駆られる私としては、そういったストレスからも逃れられる助かる機能なのだ。

ある程度ご存知の方は多いと思うが、FileMaker9はFileMaker7〜8.5と互換性がある為、導入の手間は無いに等しいだろう。

また、FileMaker Serverに付いてきた、自動PHP精製プログラムも少しいじってみたが面白かった。FileMakerのDBを見て、PHPを自動で書き出すというそのままのプログラムだが、それを元に作り込めばCMSシステムも結構楽に作れるかもしれない。

Web業界に今後どの程度の影響を与えてくれるのか注目したい所だ。]]> FileMaker http://www.designcaption.com/?itemid=29 Mon, 17 Sep 2007 11:17:44 +0900 実際にPhotoshopで作るアクア風アイコン http://www.designcaption.com/Photoshop_gradation_Aqua.html
前回の記事では、誤字脱字等沢山あり、見難い記事を書いてしまいすみませんでした。
実は、バイト先の社員さんに突っ込まれて気付いたんですよね、お恥ずかしい限りです(´▽｀ ;)

修正してもまだ分かりにくい部分が多々あると思いますので、今回の記事理解して頂ければと思います。
まだまだブログ初心者なので、これからもご迷惑をおかけすると思いますが、よろしくお願いします。

それでは、前回の記事の最後紹介した画像を実際にPhotoshopを使って作ってみましょう。

基本的なグラデーションを作ってみよう

前回の記事で紹介したのと同じアクア風アイコンの作り方をご紹介します。
前回紹介したように、グラデーションのかかったレイヤー２つを使って行います。

１，「グラデーション」レイヤーを作成

グラデーションレイヤーの作り方はもしかしたら、知らない方も居るかもしれないので、簡単にですが、作り方を説明します。分かる方は「２，２つのグラデーションを描く」まで飛ばして下さい。

I,「角丸長方形ツール」等のツールでパスを書ける状態にします(図1-1)。パスを描く前に、画面上部のオプションメニューでパスを選択します(図1−2)。

そして、適当な大きさのパスを描きます。

II,グラデーションレイヤーを作成します(図1−3)。その後グラデーションの編集画面が現れるので「OK」を押します。

これで、グラデーションレイヤーが完成します。
グラデーションレイヤーの特徴はベクトルマスクや、レイヤーマスクで、グラデーションをかける範囲を決めるグラデーションのみのレイヤーです。これはもう好みの問題ですが、ベタ塗りのシェイプレイヤーを作ってレイヤースタイルでグラデーションを付けたり等をするよりも、正しいやり方といえるでしょう。

更に、グラデーションレイヤーの場合は、各レイヤーの左端にある四角い「レイヤープレビュー」をダブルクリックすることで、すぐにグラデーション定義の変更が出来るのでとても便利です。それらの理由から、私はこのつくり方をお勧めしますので、この方法を使った作り方をご説明します。

２，２つのグラデーションを描く

では、グラデーションを描いてみましょう。グラデーションレイヤーを適当な大きさの角丸長方形ツールを使って作ります。

「グラデーションエディタ」画面を表示し、画像(図2−1)と同じ設定にし「OK」を押して、次もまた「OK」を押してグラデーションを保存して下さい。

その後今作ったグラデーションレイヤーをコピーし、コピーしたレイヤーの「グラデーションエディタ」画面を表示します。
そして、今回はグラデーショングラフの上にある「不透明度の分岐点」を使って、白い色の透過グラデーションを作成します(図2−2)。

その後、「OK」を押してグラデーションを保存すれば、完成です。

さらに、少しいじってみるとイメージも変わります。例えば一番上の白のグラデーションレイヤーにレイヤースタイルで「境界線」をＯＮにし、
サイズを「1px」に設定、
位置を「内側」に設定、
あとはグラデーションの一番暗い所より少し暗めの色を設定すればこんな感じになります(図2−3)。

一応今回は使用したファイルを添付しておきます。何か分からない所等がありましたら参考にしてみて下さい。

最後に、透過グラデーションの作り難いillustratorで透過グラデーションを使わずに、アクア風のアイコンを作っている記事があったので、紹介します。
（少し前回の記事に内容が似ている気がする…）
■今更だけどAqua風デザイン分解

「ひとこと」

先日色々とシステムの簡単な変更を行いました。主にシステムなコアな部分（URLとか）と、Ajaxを使って、画像をポップアップ表示するようにしました。JavaScriptをONにして見て頂けると、記事が見やすいと思います。
さらに、あとカテゴリもJavaを使ってます。あ！Java OFFの方のカテゴリメニューも作らないと…忘れていました。]]> Design http://www.designcaption.com/?itemid=20 Sat, 11 Aug 2007 03:44:54 +0900 感覚で作るWeb2.0的アクア風アイコン http://www.designcaption.com/Concept_of_aqua_icon.html
Web2.0的といわれるサイトで多く使われているアクア風のアイコン。
みなさんはどうやって作っていますか？感覚的に作れますか？思い道理の色が作れますか？

今バイト先の先輩が「Web2.0的デザインが２週間で身に付く！！」なんて題して、メールで課題を社内の人に出しているんですが、そこにも出てきたアクア風のグラデーション。

元々はAppleがMacOSXでボタン等に使い出した事が始まりだとは思うんですが、最初自分もPhotoshopで作ろうと色々試行錯誤したんです。ベベルをかけて、サテンをかけて…なんてやってたのですが上手くいかなかったんですよね。

その頃私は高校生の始め頃だったと思うのです。当時も解説サイトは沢山あったんですが、どれもいまいち。今はサンプルも沢山あって、グラデーションだけでいいのか！とかすぐそういうヒントがあるのですよね。本当に良い時代になった物だ…。

では、今回はアクア風のアイコンの色付けの原理（？）を覚え、好きな色で色々なアクア風アイコンを作れるようになりましょう！

アクア風アイコンって何だ？

まず、アクアアイコンを作る際に皆さんは何を考えて作っていますか？グラデーションのパターンで覚えていますか？サンプルを元に作ってはいませんか？

私は画像のような潰れた筒状の物だと考えています。それを元に考えて行くとグラデーションをイメージしやすくなるはずです！

では3Dソフトを使って画像を作ってみたので解説して行きましょう。

立体的に考えるアクア風アイコン

では、まず青色のアクア風アイコンを3Dソフトで作って行きましょう。

色の付いているのは潰れた筒状の半分だけなので、半分に割って、色をつけてみました。普通の青の板です。
（少しグラデーションがかかっていますが、光の加減です）

次に、最も重要な照明を加えます。証明は真上から真っ白な蛍光板を当てているようなイメージです。

黒から、青、白へのグラデーションがかかりました。
ここで、よく見て頂きたいのは、上から光が当たっている為、半分にした筒の上の方は暗くなっているという事です。

次に、割って使ってなかったもう半分の筒を透明にして合わせてみました。

このように、潰れた筒状の物の手前が半透明になっていて、上から光を受けている状況がアクア風と言われる画像のイメージに近いと思いませんか？

まだよく分からないかもしれませんが、後ろ半分が上から下へ明るくなるグラデーション、手前半分が上の真ん中あたりまで明るく、下に行くにつれて、薄れて行く白いグラデーションで出来ていますよね。

じゃあ、これを前から見てみましょう

すると、普段見ているアクアのアイコンのイメージにかなり近い物になったと思います。
これが私の考えるアクア風アイコンのリアルなイメージです。

簡単にいうと、
「手前は上部に光が当たり、奥は下部に光が当たったグラデーションのイメージ。」

イメージを元にPhotoshopで作ってみよう！

それでは、Photoshopを使ってアクア画像を作ってみましょう。

まずは先ほどの筒でいう後ろの部分のグラデーションは上から、黒、青、明るい青というグラデーションでした（１）。

そして、手前の部分は真ん中までが明るく、その後はかすかなグラデーション（２）。
このグラデーションを作る際は、色は白のみで、透明度のみでこのグラデーションを表現して下さい。

あとはこれを重ね合わせればOK!!

どうですか？イメージはしやすくなったでしょうか。
ではこの概念を応用したPhotoshopでのグラデーションの作り方をに次回の記事で行いたいと思います。

お楽しみに！

訂正　2007/08/08
寝ぼけて記事を書いていた為、意味が分からない記事になっていたので、元を崩さずになるべく分かりやすくなるように全体を訂正致しました。]]> Design http://www.designcaption.com/?itemid=12 Tue, 7 Aug 2007 10:23:25 +0900 DesignCaption Début!! http://www.designcaption.com/DesignCaptionDebut.html
はじめまして、当サイトの管理者のDarkDaftです。

当サイトは管理人「脳」整理場です。将来的にはポートフォリオとしてのコンテンツも追加予定ですが、現在の所はとりあえずアイディアや、配信して行きたいと思う情報、更にはTips、小技チュートリアル等もBlogの記事として配信して行こうと考えております。

主に情報はWebで言えば、HTMLやCSS、CMSシステムの話や、これから始めようと思っているPHPのお話。ローカルアプリケーションでいうと、PhotoshopやFileMaker Pro等を中心として取り上げて行きたいと思っています。

実は当サイトはまだ作りかけです。サイドメニューをご覧頂くと分かるように、何もございません。HTMLもCMSシステムのデフォルトファイルを元に改造しただけの物です。これから、タグ機能やブログパーツを追加して行く予定です。

少しでも多くの方にRSS登録して頂き、情報を役立てて頂ければと思っております。

それでは、今日の所はこの辺で。
画像や、出来れば動画をふんだんに使った情報を沢山配信して行きたいと思ってます。よろしくお願いします。]]> Page News http://www.designcaption.com/?itemid=10 Mon, 6 Aug 2007 00:46:46 +0900