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

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

各種アプリの設定や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！

2009/08/19

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

そんなこんなで急遽、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のように扱えるので
抜き忘れたデータがあっても後から抽出することができるため、
バックアップはこの程度にしておきました。

2009/08/18

css @import

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


CSSファイル（スタイルシート）を読み込ませるためには、
htmlファイルの内に
<link href="●●.css" rel="stylesheet" type="text/css" />
という記述をします。


複数のCSSファイルを読み込ませるためには
<link href="●●.css" rel="stylesheet" type="text/css" />
<link href="■■.css" rel="stylesheet" type="text/css" />
<link href="★★.css" rel="stylesheet" type="text/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」を読み込みこませます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━
<link href="import.css" rel="stylesheet" type="text/css" />
━━━━━━━━━━━━━━━━━━━━━━━━━━━


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

2009/01/13

Webデザイン3種の神器

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

Adobe Photoshop

Adobe Dreamweaver

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

2009/01/08

Dreamweaverが重い

外注さんに制作してもらったファイルを確認しようと、
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名に
「-（ハイフン）」が使われていないかどうか確認してみてくださいね。

2008/12/01