M1チップのMacBook Proを購入

MacBook Pro 13-inch 2013を使い始めて7年こんなに長持ちしてくれたパソコンは無かったです。

Apple信者ではないのですが(スマホはandroid使ってます)、windowsが一番安定して動くのがMacBookっていう記事を読んで、7年前にMac購入を決めました。

VMwareにwindowsインストールしてOffice使ったりしていました。

気に入って使っていたんですが、画面のコーティング剥がれて見にくかったり、底が膨らんでカタカタするようになってきたので、買い替えを検討していました。

2013MacBook Pro13インチの画面剥がれ
画面のコーティングが剥がれて見にくかったです

そしたら何やら新しいM1チップ搭載のMacBook Proが出て性能がめっちゃ上がってるらしい。(発表前に買わなくて良かった!!)

YouTubeでレビュー見ても良さげなのでポチりました。

11月20日にApple Storeで注文して12月8日に届きました。

2020、2013MacBook Pro
新しいM1チップのMacBook Proと7年頑張ってくれたMacBook Pro

古いMacから新しいMacへは移行アシスタント使わずに必要な物だけ入れるようにしました。

折角新しい環境になるので使わないアプリやデータはさようなら、古いMacは長女の練習台になる予定。

新しいMacにした設定

・Wifiの設定

・Touch IDに指紋登録

・セキュリティソフトのインストール

Big Surに対応しているか確認したほうがいいです、普通に入れようとしたらエラーになりました。

・Chromeブラウザのインストール

ブックマークはスマホとも連動させているので必須

Googleアカウント設定すれば、必要な事ほとんど出来るようになりました。

・DropBoxのインストール

必要最低限のデータはドロップボックスで管理

・フォントのインストール

Macintosh HD/Library/Fonts 

USBメモリーで古いMacから移行

・Officeアプリのインストール

前のMacはWindows用使っていたが、今回はMac用をインストール。

もし互換性の問題があれば嫁のWindows借りる予定です。

新しいMacBook Proの問題点

M1チップのMacBook ProにはThunderbolt / USB 4ポートが2個しかありません。

一つは充電用に利用したとすると、USB-C形状のポートしか残りません。

このままでは、USB typeAの外付けHDDやカメラの画像取り込み等が出来ません。

そこでこれを購入、充電、外付けHDD、デュアルモニタ、スマホの充電とメチャメチャ便利です。

USB C ハブ、Fansbe 9 in 1 USB Type C 変換 USB-C ハブ [HDMIアダプター、4 K HDMI、VGA、3 USB 3.0、SD/TFカード・リーダー、3.5 MMAUIOポート、TypeC PDポート], Dock互換アップルMacBook Pro 2016 / 2017 / 2018 / 2019のusb type c ハブ多機能アダプター、Macbook Pro TypeCハブに適しています
9 in 1 USB Cハブマルチポートアダプター

アマゾンで9 in 1 USB Cハブマルチポートアダプターを見る

USB typeA、HDMI、VGA、SD、micro SD、USB-C等使えて便利。

VGA使えるので、余っていたモニタをつないでデュアルモニタにしました。

Macのモニタが綺麗すぎて

古いモニタなのでMacと見比べると色も文字の読みやすさも全然違います。

いずれ、retina表示出来るような4Kモニタが欲しいです。

M1チップのMacBook Proを購入した結論

起動も早いし、動画編集もしやすくなり大満足です。

長女にも学割価格で購入出来る年齢になればMacBook Airを買うように進めています。

HPをレスポンシブwebデザイン対応に

こだわりのバジルソースのHPは元々800pxの幅で運営していましたが、モニターが大型化して1000pxのデザインに変更しても表示に問題がなそうなのでサーバーを引っ越しするついでにデザインも3カラムに変更しました。

3カラムになったこだわりのバジルソースのHP

アクセスの半分以上がスマホやタブレットになってきているのでスマホでもHPが見やすくなるように色々と調べたら、レスポンシブwebデザインに行き着いた。

1つのhtmlファイルを見る端末の大きさでcssを切り替えて対応するので、URLや遷移を気にしなくていいのでMTで構築しているbasil.scには対応しやすそうなのでチャレンジしてみました。

レスポンシブwebデザイン対応するのに気を付けた事

表示を切り替えるサイズ

1000px〜
pcや1000px以上のタブレットは3カラムの表示のまま。

761px〜999px
タブレットの幅の狭い方

401px〜760px
スマホの幅の広い方

〜400px
スマホの幅の狭い方

で切り分けてcssを書きました。

cssの記入方法

cssファイルを複数枚用意してデバイスで切り替える方法もありますが、

メンテナンスを重視して1枚のcssで各クラス毎に記入しました。

画像がはみ出さないように

img {
max-width : 100% ;
height : auto ;
}

イメージタグにmax-widthを100%で指定してはみ出しを解消して、

heightにautoを指定して縦横比を自動で調整。

検索結果にスマホ対応

サイト引越し3日後にスマホでこだわりのバジルソースを検索すると検索結果の横にスマホ対応をいただきました。