2006年7月10日 (月)

げっこげこDOCTYPE

最近気になるDOCTYPE。記述方法は何種類もあるらしい。

HTML4.01とXHTML 1.0 の違いってー?
loose.dtdとstrict.dtd、やっぱ語感からいって「ルーズ」より「ストリクト」?厳しくきっちりブラウザが表示してくれそうだし。

いかーん、こんな曖昧なままにしておくと思いがけないところでハマる可能性があるので、なんでも調べてみようと思いたち、レッツ・グーグル。

いろんなサイトを見た結果、現在の時点ではブラウザの対応範囲がひろそうな、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
を基本に使うことに。

この間ハマった、IE6がDOCTYPEの前にナニカ文字を記述すると互換モードになる、ってのも多くのサイトに書いてあった。有名なバグだったんだ・・・。

そして、 ここの の表にかいてあった「Gecko」とはなんぞや?と思いこれもしらべた。ブラウザの描画モジュールのことなんだ。"公式に「Gecko」の名称で発表が行われたのは1999年1月のこと"だって。

きっと業界標準な言葉なんだろう。知らないことばっかりだー。

| | コメント (0) | トラックバック (0)

2006年6月21日 (水)

EUCかS-JISか

htmlは<mata>を見ればわかるが、DW上でCSSファイルはEUCかS-JISかわからないので注意。しかも、DW上では変換の手段がない。

S-JISはトラブルが起こりやすいのでEUCで制作するほうがの方が安全とのこと。

| | コメント (0) | トラックバック (0)

2006年5月26日 (金)

当たり前のことを確認する

Webレイアウト・セオリー・ブック ~Webデザインのためのレイアウト基礎講座

矢野りん著 Webレイアウトのセオリーブックより

近い位置にある図形同士は遠い位置にある図形同士より関連性を感じる。という感覚は考える価値もないほど当たり前のことと言えるだろうか。ところが世の中にこうした当然の感覚を無視したようなデザインも多い。実は慣れ親しみすぎた感覚ほど、意識的に形に反映させるのは難しいのである。
認知科学では頭の中にある事柄を形にしたり、他の人に伝えたりすることを「外化」と呼ぶ。どんな感覚でも外化作業なしに真偽の検証はできないと考えたい。日頃会話の機会も少なく、PCに没頭するデザイナーは要注意。

矢野りんさんの本はとっても納得できる要素が多く、読んでいるとすごい技術力がついてくる「気」がする。あくまで気がするだけで、実際はそうじゃないのだけれど・・・・。でもすごいタメになるのは確か。

| | コメント (0) | トラックバック (0)

2006年5月22日 (月)

【作業メモ】アクティブ時背景の色がかわる

<input type="text" name="hoge" value-"{$case_data.titleescape:"html"}
onFocus="this.style.backgroundColor='#FFF2EF'" ←アクティブな時の色
onBlur="this.style.backgroundColor='#FFFFFF'" ←それ以外の時の色
class="case_edit_title"/>

| | コメント (0) | トラックバック (0)

【作業メモ】デザインタイムスタイルシートの使用

デザインタイムスタイルシートの使用

ヘッダーにCSSのリンクの記述がなくても、これを設定すればCSSをきかした状態がDW上で確認できる。 

DWヘルプより

デザインタイムスタイルシートを使用すると、Dreamweaver のドキュメントを編集しているときに、CSS スタイルシートによって適用されているデザインの表示と非表示を切り替えることができます。たとえば、このオプションを使用して、ページをデザインするときに Macintosh 固有または Windows 固有のスタイルシートの効果を追加または除外できます。

デザインタイムスタイルシートは、Dreamweaver のドキュメントで作業している間のみ適用されます。ページがブラウザウィンドウに表示されるときは、ドキュメントに実際に添付されているスタイルまたは埋め込まれているスタイルのみがブラウザに表示されます。

デザイン時に CSS スタイルシートの表示と非表示を切り替えるには :

次のいずれかの操作を実行して [デザインタイムスタイルシート] ダイアログボックスを開きます。
[CSS スタイル] パネル内を右クリックして、コンテキストメニューから [デザインタイム] を選択します。
[テキスト]-[CSS スタイル]-[デザインタイム] を選択します。
ダイアログボックスで、選択したスタイルシートの表示と非表示を切り替えるオプションを設定します。
デザイン時に CSS スタイルシートを表示するには、[デザイン中のみ表示] の上にある [+] ボタンをクリックし、[ファイルの選択] ダイアログボックスで、表示する CSS スタイルシートを参照します。
デザイン時に CSS スタイルシートを非表示にするには、[デザイン中は非表示] の上にある [+] ボタンをクリックし、[ファイルの選択] ダイアログボックスで CSS スタイルシートを参照します。
リストからスタイルシートを削除するには、削除するスタイルシートをクリックして、[-] ボタンをクリックします。
[OK] をクリックしてダイアログボックスを閉じます。
[CSS スタイル] パネルが更新され、選択したスタイルシートの名前と共にスタイルシートの状態を表す "非表示" または "デザイン" という文字列が表示されます。

| | コメント (0) | トラックバック (0)

2006年5月16日 (火)

【作業メモ】イラレ・数ページの書類

イラストレーターでサイト提案書作り

数ページにまたがる場合は、アートボードを大きめにつくって、【画面】メニューから【ページ分割を表示】

【ファイル】から【プリント】、左のメニューの【セットアップ】
トリミング:アートボード
タイル:用紙サイズに区分ける

【ページツール】でアートボードの角とあわせる。

ココからは過去の応用。忘れないようにメモメモ。

・四角は一回書くと次、クリックしたら同じサイズを描画できる。
・optionを押しながらオブジェクトをコピー。林檎+Dで繰り返す。

ガイドは用紙サイズに合わせて四角を書いて、内側に6ミリくらい小さくして作ったけど、こんなんでいいんかしら。

| | コメント (0) | トラックバック (0)

2006年3月19日 (日)

バーチャルホストの設定忘備録

ローカルでファイルをテストできるようにターミナルを開いてapacheのVirtualHostの設定を変更する手順。
  1. 「システム環境設定」の「共有」でパーソナルWeb共有を開始にする。
  2. サイトフォルダの中に取引先別のフォルダをつくり、半角英数で名前をつける。この中にWebのファイルは保存していく。
  3. ターミナルを開く
    sudo vi /etc/httpd/httpd.conf(apcheの設定内容がviエディタで開かれる)

    コメントアウトしてある#はVirtualHost関連部分をxでとる。
    行をコピーするときはその行にカーソルを持っていって、行数yyでコピーされる。 viの使い方参考サイト
    Name VirtualHost 127.0.0.1:80(自分自身を指す)
    <VirtualHost>
    DocumentRoot (サイトの下の作ったフォルダの情報をみてパスを入力)
    ServerName www.XXX.toko-mac.com
    </VirtualHost>
  4. :wqでファイルを上書き保存
  5. apachectl gracefulで再起動
  6. ブラウザでhttp://www.XXX.toko-mac.comで見るとローカルのファイルがサーバー経由で動作確認することができる。

| | コメント (0) | トラックバック (0)

2006年3月 3日 (金)

スクリプトは”言語”

今日は雛祭りですね。ひなあられ食べないと(ここんとこ毎日食べているが・・・)

社長は某センターへ出向。一人、アクションスクリプトと向き合う。

今日のお題はスライドショーの次へボタンを押していって、11枚目が表示されるタイミングで、横に10枚出ているサムネイルも11〜20が表示されるようにするところからやってみる。

次へのボタンの制御はクリックするとsinryoku_mcの次のフレームにいくように書いてある。

next_mc.onPress = function() {
sinryoku_mc.nextFrame();
current_frame.text = sinryoku_mc._currentframe;
};

ここになにかを加えればいいと思った。
sinryoku_mcの10フレームから11フレームに進むときに何かをすればいい。でも20から21にいくときも同じことをやりたい。

フレーム数が10の倍数の時にサムネイルがのっているMC・thumnail_baseのy座標を動かせればいい。

フレーム数を10で割って答えが整数のときにthumnail_baseのy座標を動かせればいい。(むずかしそう。)

フレーム数を10で割って余りがゼロの時にthumnail_baseのy座標を動かせればいい。(これを採用!)

アクションスクリプトの本の算術演算子の説明を見ていて、%が「割ったあまりを求める」って書いてあったので、これを利用することを思いついた。

cf = sinryoku_mc._currentframe;
if( cf % 10 == 0){
thumnail_base._y += -360;
}

というのをボタンのスクリプトの中に追加したらできた!やったー。

こんなしょうもないことで喜んじゃって・・・とお思いの方もいらっしゃるでしょうが、できた時すごくうれしかったです。

続いてサムネイル10枚を一覧で表示する画面をつくる。
これはシーンを追加した。するとプレビューするとものすごい高速でシーン1とシーン2が切り替わってうまくいかない。
そこで、シーン1の一番したのレイヤーにstop();をいれてみた。
ボタンを配置してそれを押したらシーン2に移るようにした。(これが意外となかなかうまくいかず、フレームラベルをつけたらうまくいった。)

そしてサムネイル一覧。
AttachMovieでできたMCを横に8枚ならべて、9枚目からは下の行にくるように並べたい。ずーっと考えてもわからなかった。

AttachMovieってMCを生み出す関数なので、並べようと思うのは私だけじゃないはず、と思いネットで色々調べる。ん~、まだ人のスクリプト見ても全然わからない(泣

しかし、またif関数でやってとりあえず思ったように並ぶには並んだ。が、きっとこれはイケてないやり方だと思う・・・。
ちなみに、一枚の大きさが隣との隙間を含め43X63px。

for (i=0; i<10; i++) {
mc = thumnail_base.attachMovie("sinryoku", "thum"+(i+1), i+1);
mc._xscale = 10;
mc._yscale = 10;
//2行目のサムネイルをずらす
if (i>=8) {
mc._x = i*63-504;
mc._y = 43;
} else {
mc._x = i*63;
mc._y = 0;
}
mc.gotoAndStop(i+1);
//サムネイルとメイン画像との関連づけ部分(ここはうまくいっていません)
mc.onPress = function() {
gotoAndPlay("scene1");
sinryoku_mc.gotoAndStop(this._currentframe);
current_frame.text = sinryoku_mc._currentframe;
trace(sinryoku_mc._currentframe._name);
};
}

サムネイル一覧のサムネイルをクリックしたら、シーン1の同じサムネイルがクリックされた状態を作り出したくてまたあれこれやるも、シーン1に戻りはするが、1枚目が表示されたまま。だんだん頭が疲れてきて、今日のところは断念。

しかし、スクリプトが言語と呼ばれる意味がなんとなくわった気がした。日本語で、この部品をこのようにしたい、と具体的に言葉にすることができると次のステップに進める。
”言語”なんだから、理数系が苦手な私でもなんとかなるかなぁ。

| | コメント (0) | トラックバック (0)

2006年2月 4日 (土)

自分用作業メモまとめ

[イラストレーター]

Beta

  • 文字組みは基本的に「ベタ」に設定する。そうすると句読点や中黒がつまって表示される。
  • クリッピングマスクのかかった画像を置き換えるには、画像を選択して配置で置き換える画像を選ぶ。置換にチェックを入れる。
  • マスクしているオブジェクトの整列はガイドを利用。
  • CMYKは10区切りで指定。5%で指定してもさほど差がでない。
  • 「“」引用開始、「”」引用終了。正しく使う。参考ページ
  • オブジェクトの大きさを変えるとき、線幅も拡大縮小したい場合は、拡大・縮小ツールをダブルクリック、オプション 線幅/効果も拡大縮小にチェックを入れる。

| | コメント (0) | トラックバック (0)

2006年1月24日 (火)

自分用作業メモまとめ

[イラストレーター]

・パスの平均化 林檎+J
・パスのオフセットorパスのアウトラインでオブジェクトのまわりをぐるっと同じ距離にパスがかける。
・control+ガイドをクリック
・カドマルの四角を書く時:四角を書いて効果→スタイライズ→角を丸くする(後にカドマルの修正が可能)
・shift+X 塗りと線の反転
・ロゴなどイラレのデータをflashに読みこむときはイラレ上からデータの書き出しswf形式にする。

[フォトショップ]

・画像解像度、数値入力に失敗したらoptionキーを押すと、もとに戻る。
・画像は縮小したらアンシャープマスクをかけることが多い。
・flashに読み込む画像の場合、サイズはflashで表示させるよりも少し大きめ。
・psdのままでよい。

[flash]

・メインのウインドウのサイズを変えない。意味なくプロパティなどのウインドウを動かさない。
・新規シンボルにグラフィックを配置、さらに別のシンボルにソレを配置するとアルファや明度を調整できる。

[Mac]

・アプリの切り替えは林檎+tabでやること。(林檎+shift+tabで逆に動く)

| | コメント (0) | トラックバック (0)

2006年1月12日 (木)

終日Fireworks8で作業

今日も9時少し前に出勤。掃除したりコーヒーを入れたりした後、昨日からの続きの作業。まだ3合目といった状態で社長に見ていただく。

作業にもどり、教えに従ってなるべくキーボードでツールを切り替えるように気をつける。
”アプリは思考の流れをさまたげないようにスマートに使うべし。非効率な動きは徹底的に排除せよ!”
・・・・と社訓?を心で唱えながら作業するもあることに気がつく。Fireworks8(Mac)では英数キーで入力モードの切り替えが上手くいかない。ことえりでもATOKでも同じ。コマンド+スペースではうまくいくのだけれど。これって昔マックのコマンドキーがもう少し大きかった頃はよく使っていたなぁ。ツールをキーボードで選択するためには英数入力モードに頻繁に切り替える必要があるので英数キーでやりたい。

夕方なんとかトップページの形にして社長に赤ペンチェックしていただく。明日はそのチェック項目を修正して土曜日の打ち合わせに間に合うよう頑張ろう。

| | コメント (0) | トラックバック (0)