横浜のホームページ制作スタジオFIXの社長ブログ » Dreamweaver

WebデザイナーのためのOSX 復元計画(2) インストール編

admin — Wed, 19 Aug 2009 09:24:28 +0000

各種アプリの設定やMailデータのバックアップが済んだので
この際だからとついでに新調した 1.5TBのHDDにいよいよ、OSX再インストール。

またあるかもしれないこの事態に備えて
2回目以降がすごく楽になる Mac OS 再インストール : ☆ La Loopa ★☆☆
のナイスアイデアを参考に
「Leopard 完璧版」を作っておくことにしました。

1.5TBのHDDを3つのパテーションに分割
　　・1つ目のパテーション：いつでも初期化用 Leopard 完璧版 — 100GB
　　・2つ目のパテーション：Leopard 通常使用版 — 500GB
　　・3つ目のパテーション：データ保存用 — 800GB

こうしておいて…
普段は2つ目の「Leopard」を起動ディスクとして使用、
作ったデータは、3つ目の「Data Disk」に保存することに。
使いこんでいるうちにOSXの調子が悪くなってきたな〜と思ったら、
1つ目の「いつでも初期化用 Leopard 完璧版」を
普段使いの
2つ目の
HDDにペロリンチョと復元。

すると、OSXや各種アプリの再インストールを行わなくても
生まれたての快適サクサク状態へ。
大切なデータは3つ目の「Data Disk」に保存されているから
2つ目のHDDをフォーマットしちゃっても、全然OK!
なんて素晴らしいアイデア!!
☆ La Loopa ★☆☆ さん、貴方は天才です!!（・∀・）

━━━━━━━━━━━━━━━━━━━━━━━━━━━
●OSX 10.5をインストール
早速
1つ目のパテーション「Start Disk」に
OSX 10.5をインストール。
15分くらいで、インストール完了。
すぐにソフトウェアアップデートをかけて最新版に更新。
━━━━━━━━━━━━━━━━━━━━━━━━━━━
次に、以下の絶対使うアプリケーションを同じく「Start Disk」にインストール。
・Adobe Photoshop CS3
・Adobe Illustrator CS3
・Adobe Dreamweaver CS3
・ATOK2006
・Firefox
・Jedit X
・Microsoft Office
・Transmit
・Adium
・プリンタドライバ
・フォント
※たま〜にしか使わないアプリはココではインストールしません。
━━━━━━━━━━━━━━━━━━━━━━━━━━━

そして各種アプリケーション＆フォントの設定
●Photoshop
バックアップしてあった
スウォッチ、カスタムシェイプ、パターン、ブラシ、スタイルを置き換え。

●Dreamweaver
バックアップしてあった
ユーザ＞ライブラリ＞Application Support＞Adobe＞Dreamweaver 9以下の「Configuration」フォルダを丸ごと上書き。

●Transmit
バックアップしてあった
ユーザ＞ライブラリ＞Preferences 以下の「com.panic.Transmit3.plist」
を上書き。

●Mail
バックアップしてあった
ユーザ＞ライブラリ以下の「com.apple.mail.plist」を上書き。
※ユーザ＞ライブラリ＞Mail＞Mailboxes のデータはまだ復元しない。

●フォント
バックアップしてあった「Font」フォルダを
ユーザ＞ライブラリ以下にフォルダごと丸ごと上書き。

●ATOK2006
ATOKパレット＞バックアップツール＞バックアップを復元する
「復元データの指定」で、バックアップしてあった「ATOK 2006 Backup Data」フォルダを指定。

●FireFox
ブックマーク＞ブックマークの管理＞復元＞ファイルを選択
で、バックアップしてあった「ブックマーク 2009-08-18.json」を選択。
━━━━━━━━━━━━━━━━━━━━━━━━━━━
【あえて行わなかったこと】
・Mailを起動しない
・iTunes、iPhotoデータの移行はしない
━━━━━━━━━━━━━━━━━━━━━━━━━━━

OSXインストールから、ここまでの所要時間3時間くらい。
さすがにこの状態の OSXは、快適サクサクですYO!!（・∀・）

「よっしゃ！完璧！」だと思えたら…
最後に 2つ目のHDDに、この状態をコピペ（復元）します。

アプリケーション＞ユーティリティ＞ディスクユーティリティ
の「復元」で
ソース：1つ目のパテーション Leopard 完璧版用の「Start Disk」
復元先：2つ目のパテーション普段使い用の「Leopard」
「復元先を消去」にチェックを入れて「復元」を押すと
フォーマット＆丸ごとコピーが始まります。
これで、サクサク快適状態の「Start Disk」が丸ごと
2つ目のHDD「Leopard」にコピーされました。

最後に、普段使いは2つ目のHDDにしたいので、
システム環境設定＞起動ディスク
で、2つ目のパテーション「Leopard」を選択して再起動すればOK！

WebデザイナーのためのOSX 復元計画(1) バックアップ編

admin — Tue, 18 Aug 2009 09:22:11 +0000

そんなこんなで急遽、OSX復元計画を実行するハメになったのですが
その途中で、大変な事態に気がついてしまいました。

この状態で Timemachine から復元すると、
当然、変な挙動まで復元されちゃうんですね!!
それぢゃまるで意味がないので、
結局 OSX再インストールを選択するしかありません…。orz　

ということで、バックアップ開始。
貴重なデータは日頃から複数のHDDにバックアップを取っているので
特に問題は無いのですが、厄介なのは各種アプリの設定やMail。

【Photoshop】
スウォッチパレットの右上をクリックして「スウォッチを保存」する。
同様の手順で、カスタムシェイプ、パターン、ブラシ、スタイルもバックアップ。
これが引き継げなかったら、たぶん死にたくなる。

【Dreamweaver】
ユーザ＞ライブラリ＞Application Support＞Adobe＞Dreamweaver 9以下の「Configuration」フォルダを丸ごとバックアップ。
【iTune】
ユーザ＞ミュージック＞iTunes以下のデータをバックアップ。
しなかったところで、後から iPodから同期できるので良し。

【iPhoto】
ユーザ＞ピクチャ＞iPhoto Library以下のデータをバックアップ。
子供達の写真が無くなったら、死んでも死にきれないので慎重に。

【Transmit】
ユーザ＞ライブラリ＞Preferences 以下の
「com.panic.Transmit3.plist」をバックアップ。
複数のサーバを管理していても、バックアップはこのファイル1つでOK。

【Mailアカウント】
十数個のメールを受信しているので、ひとつづつ
アカウントを作り直すなんてことはやっていられない！
ユーザ＞ライブラリ＞Preferences 以下の「com.apple.mail.plist」をバックアップ。
これで面倒なアカウントの設定はしなくてOK。
署名（シグネイチャー）は、ユーザ＞Mail＞Signatures以下にあるhtmlファイル。

【Mailメッセージ】
ユーザ＞ライブラリ以下の「Mail」フォルダを丸ごとバックアップ。
6GBもありました…。
この方法だと、後から権限の設定で苦労する可能性大ですが、
その時は「chown -R」コマンドを叩いて対応しちゃうつもり。

【フォント】
ユーザ＞ライブラリ以下の「Font」フォルダを丸ごとバックアップ。

【ATOK2006】
ATOKパレット＞バックアップツール＞データのバックアップをとる
「すべてのデータを保存する」にチェックを入れてバックアップを作成すると
「ATOK 2006 Backup Data」というフォルダが生成されるのでこれを保存。
このフォルダの名前を変更しちゃうと復元できなくなるので
フォルダの名前は変更しない。

【FireFox】
ブックマーク＞ブックマークの管理＞バックアップ
保存ファイル形式：JSONとすると「ブックマーク 2009-08-18.json」
のようなバックアップファイルが生成されるので、これを保存。

━━━━━━━━━━━━━━━━━━━━━━━━━━━
いざとなったらT起動
━━━━━━━━━━━━━━━━━━━━━━━━━━━
幸いなことに私の場合、余っているG5があるので…
データの詰まったHDDを余っているG5に挿して、
メインマシンの Intel MacとFirewire接続。

「T」を押しながらG5をターゲットディスクモードで起動すれば、
Intel Macから、G5を外付HDDのように扱えるので
抜き忘れたデータがあっても後から抽出することができるため、
バックアップはこの程度にしておきました。

css @import

admin — Tue, 13 Jan 2009 08:40:49 +0000

Web標準に準拠したコーディングを行うと、
必然的にCSSファイルに記述される内容が複雑になります。
1枚のCSSファイルに何千行もの記述があると、
目的の箇所を探すだけでも時間がかかってしまいます。
そんな時は、複数のCSSファイルを使う方法がオススメです。

CSSファイル（スタイルシート）を読み込ませるためには、
htmlファイルの内に

という記述をします。

複数のCSSファイルを読み込ませるためには

のように、複数行を内に記載してもよいのですが、
これではあまりスマートではありませんね。

そこで、@import という方法を使って、
複数のCSSファイルを読み込む方法を使います。
まず、「import.css」という名前のCSSファイルを作成します。

# 任意のファイル名でOKです。
# 「import.css」、「main.css」、「style.css」
# などのファイル名が一般的です。

「import.css」内に記述する内容は、以下の通りです。
━━━━━━━━━━━━━━━━━━━━━━━━━━━
@import url(●●.css);
@import url(■■.css);
@import url(★★.css);
━━━━━━━━━━━━━━━━━━━━━━━━━━━
この「import.css」を読み込ませれば、「import.css」に書かれた
●●.css
■■.css
★★.css
を読み込む仕掛けになっています。

# この時、読み込みまれる順位は上からとなりますので
# 優先度の高い（重要な要素を記述した）CSSファイル名から順に記載しましょう。

そして、htmlファイルの内に以下のように1行記述して
「import.css」を読み込みこませます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━

━━━━━━━━━━━━━━━━━━━━━━━━━━━

CSSファイル（スタイルシート）が複雑になってしまって
お困りの方は、ぜひお試しあれ〜。

Webデザイン3種の神器

admin — Thu, 08 Jan 2009 03:53:28 +0000

私にとっての3種の神器といえば、絶対コレ！
(1) Adobe Photoshop
(2) Adobe Dreamweaver
(3) モリサワフォント「新ゴファミリー」

Adobe Photoshop

世界中のデザイナーが、みんなコレを使っている
世界水準の画像編集ソフトです。
写真を加工するための様々な機能があります。

このアプリは多機能であるがゆえ、ツールパレットがたくさんあり、
小さなモニタでPhotoshopを立ち上げると、
画面のほとんどがツールパレットで埋まってしまいます。
最低でも 1680 x 1050 ピクセル以上のモニタが必要です。

デュアルモニタ（2台構成）にすれば、
1台目のモニタを実際のグラフィックを制作する領域に、
2台目のモニタをパレット群の置き場所にすると、
快適にサクサクとお仕事がはかどります。

Adobe Dreamweaver

値段の安さからでしょうか、素人の方には「ホームページビルダー」が有名ですが、
Web制作のプロは、みんなコレを使ってhtmlを作成しています。

このように画面上部には、ソースコードを
画面下部は、デザインビューを表示させながら作業を行います。
htmlやcssのスキルが無い方でも、Microsoft Wordのような感覚で
htmlを作成することもできます。

よく使うタグを登録できる「スニペット機能」、
サイト全体のファイルの管理できる「サイト管理機能」など、
このアプリの機能を見事に使いこなせれば
htmlコーディングの手間と時間を大幅に軽減できるようになります。

モリサワフォント「新ゴファミリー」

素人の方は、あまり重要視してくださいませんが…
フォント（書体）は、デザインに大きな影響を与える重要な要素です。
なかでも、このモリサワフォント「新ゴファミリー」は本当に優れた書体です。

いくらステキなデザインを作ったとしても、
仕上げに載せる文字のフォントがダサかったら、
出来上がりはダサくなってしまうからです。
13万円もするこのフォントですが、

もし私がお金の無い駆け出しのデザイナーだったとしたら
借金してでも、絶対に買いますね。
それでデザインのクオリティが上がるのなら安い投資ですYO!

Dreamweaverが重い

admin — Mon, 01 Dec 2008 04:44:59 +0000

外注さんに制作してもらったファイルを確認しようと、
Dreamweaverで htmlファイルを開いたのですが、
Dreamweaverが、異常に重い…。

htmlも、CSSも、たいした内容じゃないのに、
ファイルを開く度に「固まった？」と思うほど、いちいち時間がかかります。

私の環境は、Macintosh OSX / Dreamweaver CS3なのですが、
試しに、Windows XP / Dreamweaver2004で開いてみたところ
なーんの不具合もなく、サクサク動きます。

最初は我慢して使っていたのですが、
あんまりのヒドさにストレスがMAXを迎え、原因究明に乗り出したところ、
どうやら、id、class名に「-」（ハイフン）が使われていることが原因のようでした。

スタイルシート上で、idや、class名に「-」（ハイフン）を
利用すること自体は、W3C基準に準拠しているのですが、
「ハイフン」と「マイナス」は、どちらも同じ「-」という記号です。

id、class名に「-」を使うと、それに対して
「これはマイナス要素じゃなかろうか？」という検証を
いちいちDWが行っているせいで
プレビュー画面が極端に遅くなってしまうようです。

試しに、id、class名に使われていた「-（ハイフン）」を
「＿（アンダーバー）」にしてみたところ、
いつものように、軽快にDreamweaverが動きだしたからビックリです。

軽いファイルなのに、Macintosh OSX / Dreamweaver CS3環境で
動作が重くて困っていらっしゃる方がいたら、
スタイルシート内で、id、class名に
「-（ハイフン）」が使われていないかどうか確認してみてくださいね。

横浜のホームページ制作 スタジオFIXの社長ブログ » Dreamweaver