CrossRoad

Unity、VR、MR、ARを中心とした技術ブログ

【2018/11/11更新】MacOSをMojaveにして、各種開発ツールをダークテーマでまとめてみました

2018/11/7 Babylon.js Editorのダークテーマ変更方法を追記しました 2018/11/11 Chromeで表示されるWebサイトをダークモードにするChrome拡張の利用方法を追記しました

MacOSの新しいバージョンMojave(モハベ)が9月下旬から公開されており、新機能の1つに「ダークモード」があります。これは、見た目の色合いを黒くする機能です。私の場合、夜中に開発や文書作成でMacを使う頻度が高く、目に優しそうだったので気になっていました。

そこで、今回はOSをアップデートする手順と、普段よく使う開発環境をダークモードにする方法を紹介します。

なお、以下の環境で動作確認しています。

  • MacBook Pro 13 inch 2017

  • Mac OS X 10.14.1

  • Android Studio 3.2.1

  • Chrome 70.0.3538.77

  • Xcode 10.1

  • Adobe CCの各種ソフトウェア

  • Visual Studio Code 1.28.2

  • Babylon.js Editor v2.3.5

【スポンサーリンク】

1. OSのアップデート手順

Macの場合、OSをアップデートするだけだと動作が重くなる傾向があり、クリーンインストールするのがよいとされています。

クリーンインストール=全てのデータが消えることになりますが、Macの中の不要ファイルやキャッシュなどを一掃できるので、これを機会にクリーンインストールをお勧めします。

1.1 データのバックアップを取る

Timemachine機能を使う、iCloud、Google Drive、OneDriveなどにアップロードするなどして主要なデータをバックアップします。

1.2 Mojaveにアップデートする

Mac App Storeから入手するか、ランチャー画面にインストーラがある場合はそれを実行します。実行すると、ユーティリティ画面が表示されます。 Macのユーティリティ画面

ここで、「macOSを再インストール」を選ぶとMojaveのインストール画面になります。この時点で画面右上の無線LAN設定を実施しないと、エラー画面が出るので、無線LANを再設定します。 macOS Mojaveのインストール開始前に無線LAN設定を忘れた場合のエラー画面

後は指示に沿って進めるだけです。

1.3 Macを起動し、Mojaveになっていることを確認する

起動してMacの初期設定をすると、Mojaveになっています。この状態では全てのアプリケーションやファイルはそのままです。つまり、このまま使うことができます。しかし、UnityやPremiere Proを試したところ、少し遅くなっているように感じました。

たとえば、UnityでSphereのGameObjectを表示し、Transformでドラッグした時、ほんの少し遅れて移動しました。

ということで、Mojaveに上げた状態でクリーンインストールをします。

1.4 Macを終了し、Cmd + Rで起動する

先ほどと同じユーティリティ画面が表示されるので「ディスクユーティリティ」を選択します。「Macintosh HD」を選択してウインドウ上部の「消去」をクリックすると、SSDを初期化します。

ディスクユーティリティでSSDの中身を初期化している画面

1.5 「macOSを再インストール」を選択し、Mojaveをインストールする

SSDの中身は消えましたが、Mojaveのインストーラはマウントした状態で残っています。1.2と同じように進めれば空っぽのSSDにMojaveをインストールできます。

【スポンサーリンク】

2. インストールした開発ツールのダークテーマ変更方法

2.1 Unity

PlusかProライセンスを持っていないと設定できないので割愛します。

2.2 Adobe CCの各種ソフトウェア

元々ダークテーマが採用されているのでそのまま使うことができます。

2.3 Xcode

起動時からダークテーマになっていました。

Mojaveで起動したXcodeの画面

2.4 Visual Studio Code

最初から「Default Dark +」というテーマが設定されています。このままでもよいのですが、暗いところだと「Default High Contrast」の方が見やすかったのでこっちに変更しました。

ちなみに、1.28.2時点でのテーマ色変更方法は、Preference / Settings画面を出した後、Workbench / appearance を選択し、Color Themeから選びます。このように色々と変更できます。

Visual Studio Code1.28.2でテーマ色を変更する画面

2.5 Android Studio

インストール時に「Darcula」を選択します。

Android Studio 3.2.1の初期設定でテーマ色を変更する画面

Android Studio 3.2.1でDarculaを選択した時の画面

後から変更する場合、PreferenceのAppearance & Behavior のAppearanceからテーマの色を変更できます。

Android Studio 3.2.1の設定画面でテーマの色を変更するときの画面

2.6 Chrome

Web系の開発をするときは必要なので入れました。Chromeを起動し、下記のリンクをクリックするとChromeストアからインストールできます。

Material Incognito Dark Theme - Chrome ウェブストア

変更前と後です。

ChromeでMaterial Incognito Dark Themeを入れる前の画面

ChromeでMaterial Incognito Dark Themeを入れた後の画面

2.7 Chrome (検索画面、サイト全体)

2018/11/11 追記

2.6に紹介したChrome拡張では、一部しかダークモードになりませんでした。もっと幅広いページをダークモードにしたい場合、下記を使う方法があります。

Darkness - Beautiful Dark Themes - Chrome Web Store

Chromeを使っていれば、拡張を追加、を選択するだけで使えるようになります。このプラグインには無償版と有償版があります。無償版だとGoogle検索画面、Facebook画面のみで、有償版にすると対応範囲が一気に広がります。

無償版でGoogle検索表示をダークモードにした例

Chrome拡張「Darkness」無償版を使った時のGoogle検索画面

有償版でTwitter画面をダークモードにした例

Chrome拡張「Darkness」有償版を使った時のTwitter画面

有償版は$4.99です。Paypalかクレジットカードで決済できます。

ただし、有償版でもあらゆるサイトをダーク表示するわけではありません。少なくとも、はてなブログ、Yahoo Japan、MSNニュースなど、適当に試しましたが1つもダーク表示変更ができませんでした。下記の範囲と思ってから購入した方がよいかもしれません。

GoogleとFacebook向けのダークテーマ。$5でProにアップグレードするとYouTube、Gmail、Googleドキュメント、Reddit、Twitter、Messenger、Inbox、Dropbox、GitHub、Trello、StackOverflowなどのウェブサイトでもご利用になれます。

引用元:Darkness - Beautiful Dark Themes - Chrome Web Store

2.8 Babylon.js Editor

Babylon.js EditorをDark Themeに変更するためのボタン配置場所

EditからDark Themeを選ぶだけです。Babylon.jsについては、下記の記事をご参考ください。

Babylon.js向けデータをUnityから出力する - CrossRoad

Babylon.jsを使った開発方法が色々あるので整理しました - CrossRoad

【スポンサーリンク】

3. 終わりに

それぞれのソフトウェアを軽く触った限りでは、動作不具合やクラッシュなどは起きていませんが、何か起きた場合はここに追記しようと思います。