20200406のMacに関する記事は7件です。

テレワークを楽しく!バ美肉おじさんがテレワークする方法

お疲れ様です!
モバイルコムの石黒です!

新型コロナの影響により、外出自粛が求められるようになってきました。
弊社でもその状況を鑑みて、史上初のテレワークを実施しています。

しかし、家で一人で過ごすというのはとても退屈なものです。
日を追うにつれ、テレワークに感じていた最初のワクワクが段々と薄れてきてしまいます。

そこで、テレワークを楽しく!と思い、誰でも美少女キャラでテレワークできる方法をご紹介します!

スクリーンショット 2020-04-06 22.23.52.png

用意するもの

  • Mac PC(MacBook pro 10.14.6、iMac 10.15.3で確認)
  • Macで動かすビデオチャットツール(Meet、Zoomなど)
  • CamTwist(v3.4.3で確認)
  • QuickTime Player
  • iPhone(iPhoneでキャプチャする場合)
  • REALITY(iPhoneでキャプチャする場合)(ホロライブ、FaceRigなどでも可)

※Windowsの場合はOBSのVirtualCamプラグインを使うか、Unityを使う方法があるようですが、この記事では取り扱いません。

iPhoneにモーションキャプチャアプリ(REALITY)をインストール

REALITYとはアプリの名前で、プリセットからアバターを作成して配信することができるiPhoneアプリです。
※今回は配信ではなく、顔のモーションキャプチャ機能のみを利用させてもらいますので、そのほかのモーションキャプチャアプリでも代用可能です。

インストールしたら適当なアバターを作成して、Macに接続します。

QuickTime PlayerでiPhoneの画面をMacに表示

新規ムービー収録を開始

image.png

録画ボタン右側の▽からiPhoneを選択して画面を表示

image.png
image.png
スクリーンショット 2020-04-06 22.23.52.png

CamTwistで仮想Webカメラにアウトプット

CamTwistを使うと、DesktopのWindowをキャプチャして仮想Webカメラにアウトプットすることができます。

インストールして起動すると、以下のような画面が表示されます。
スクリーンショット 2020-04-06 22.23.52.png

設定のポイント

  • チャットツールを立ち上げて画面を確認しながらやると良いです
  • Desktop+を選択して[Select]ボタンをクリック
  • 右端のSettings欄の[Full Screen]は外して[Continue to Application windows]を選択
  • [Select from existing window]から、QuickTime Playerのウィンドウを選択
  • 必要に応じて、[Do not scale]や[Select capture area]でサイズを調整

ここでビデオチャットツールを立ち上げると、以下のようにCamTwistという仮想Webカメラが選択できるようになります。
※環境によっては再起動が必要だったり、読み込んでくれなかったりします。
image.png

以上!

これであなたも明日から美少女です。

https://twitter.com/GroGroPHP/status/1247145828805824515?s=20

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Macアプリで常に最前面に表示する方法(Swift)

はじめに

タイトルに示す通りのことを実現したくて「常に最前面 MacApp」でググったら、クリアメモリさんの『【Swift】常に最前面に表示されるOSXアプリの作り方』のページがヒットしました。この記事に書いてある手順で無事に実現できたのですが、OS他のバージョンが上がっており多少の変更が必要でしたので、元記事からの変更点をまとめておきます。
ほとんどはコンパイルエラーが出て教えてくれますが、元記事への恩返しの意味です。

前提とする環境

当方の環境(執筆時点);

  • maxOS Catalina version 10.15.3
  • Xcode version 11.1 (11E148)
  • Apple Swift version 5.2 (swiftlang-1103.0.32.1 clang-1103.0.32.29)

変更点

AppDelegate.swift

「Stay in Front」メニューをクリックした時の、チェックオン/オフのトグル処理のコードにおいて、NSMenuItem.stateの値が変更になっています。

元記事のコード
func toggleMenuChecked(){
    if stayInFrontMenu.state == NSOnState {
        stayInFrontMenu.state = NSOffState
    }else if stayInFrontMenu.state == NSOffState{
        stayInFrontMenu.state = NSOnState
    }
}
新しいコード
func toggleMenuChecked() {
    if stayInFrontMenu.state == .on {   
        stayInFrontMenu.state = .off
    } else if stayInFrontMenu.state == .off {
        stayInFrontMenu.state = .on
    }
}

WindowController.swift

実際にウィンドウを最前面に設定する処理のコードにおいてNSWindow.Levelの値が変更になっています。

元記事のコード
func stayInFront(){
    let normalWindow = Int(CGWindowLevelForKey(.normalWindow))
    let floatingWindow = Int(CGWindowLevelForKey(.floatingWindow))

    if window?.level == normalWindow{
        window?.level = floatingWindow
    }else if window?.level == floatingWindow{
        window?.level = normalWindow
    }
}   
新しいコード
func stayInFront() {
    if window?.level == .normal {
        window?.level = .floating
    } else if window?.level == .floating {
        window?.level = .normal
    }
}

WindowController.swift (2箇所目)

NotificationCenterのオブザーバから呼び出されるメソッドに@objcattributeが必要です。1 2

元記事のコード
func nCenter(notification: NSNotification) {
    stayInFront()
}
新しいコード
@objc
func nCenter(notification: NSNotification) {
    stayInFront()
}

その他

変更点ではありませんが、コンパイルエラーが出ないので気付きにくい点として;

新しく「WindowController」というクラスを作成し、ストーリーボードで設定してあります。
この工程は省くので、各自設定しておいてください。

下図の様にカスタムクラスを設定する必要があります。これを忘れるとWindowControllerが機能しません期待通りに動きません。
スクリーンショット

終わりに

元記事では、他にもOutletActionの接続手順も省略しています。もしこの記事をご覧の方で、これらの手順も知りたい方は、コメントいただければ追加いたします。


  1. なぜ@objcが必要なのか、こちらに説明があります。 

  2. @objc他のSwiftのattributeについてはこちらに説明があります。 

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Swift自体の基礎知識

iPhoneアプリを開発してみたい!

iPhoneアプリを開発してみたいという方で、調べたことがあるという方は
少しばかりそれについてご存知かもしれませんが、
iPhoneアプリを開発するのに使う言語がSwiftです。
似た言語に、Objective-Cがありますが、このページではSwiftの説明をしていきます。

そもそもSwiftとは何か

Swiftは、Apple社の製品、iPhoneなどで動作するアプリを作るための言語です。
Swiftは、XcodeというIDLE(統合開発環境)で書くことができます。image.png
↑Swiftはアマツバメを指す英語

Swiftの特徴的な仕様

Swiftの特徴的な仕様の一つに、オプショナルバリューの対応があります。
オプショナルバリューとは、値が未定義の可能性がある変数、定数のことです。
簡単にいうと、配列などの値がなかった場合に返ってくるnil(未定義)を防ぐために、変数や定数にnilを代入することはできない仕組みです。

また、オプショナルバリューの値を変数に代入することは、変数定義の後に、
「let Kazu:Int?」
のように、定義の後に?をつけることによって実現する仕様です。

ちなみに、optional型の値を計算に使うには、print(表示する関数)するときにカッコの最後に!をつける必要があります。
「//kazuをラップ
let kazu:int?

kazu = 8
let nedan = 100

if let count = kazu{

  //kazuがnilでない場合
  let kingaku = nedan * kazu
  print(kingaku)

} else {

 //kazuがnilの場合
 print('定数kazuはnilです')


この操作は、アンラップと呼ばれます。

Xcodeをダウンロード・アプリ配布の仕方

Xcodeは、App Storeから入手できます。
作成したアプリを配布、販売するには、Apple developer Programに登録することが必要です。
年会費99ドルが必要になりますからご注意ください。
学習用に入手する場合は料金はかかりません。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【zsh対応】Laravel6 環境構築(MacOS Catalina)

はじめに

元々Railsを触っていましたが、色々あってLaravelに移行することにしたので、環境構築について自分なりにまとめておきます。

PC情報

  • macOS Catalina 10.15.3
  • Macbook Pro (16-inch 2019)
  • PHP version (7.2.29)

構築手順

(1) Composer

composerのダウンロード

PHPのパッケージ管理システムであるComposerをインストールします。
上記リンクから

Download >> Manual Download(下の方)

にアクセスし最新バージョンをダウンロードします。
(2020年4月時点では、1.10.1が最新のためこれをダウンロード)

ダウンロードフォルダにcomposer.pharがダウンロードされたかと思います。

composerをいつても呼び出せるようにする

ターミナルを起動し、以下のコマンド入力

$ cd ~/Downloads
$ sudo mv composer.phar /usr/local/bin/composer

パスワードを聞かれるので、自分のOSログイン時のパスワードを入力します。
これでcomposerがbinファイルに移行され、いつでもcomposerが呼び出せるようになりました。

実行権限の設定

このままだと、composerへのアクセス権が制限されている場合があるので、アクセス権限を変更します。

$ chmod a+x /usr/local/bin/composer

Composerが実行可能か確認する

$ composer -v

インストールしたバージョン(1.10.1)が表示されていれば完了です。

(2) Laravel Installerのインストール

Composerを用いたLaravel Installerのインストール

ターミナル上で以下のコマンドを実行します。

$ composer global require laravel/installer

少し待つとインストールが完了します。

環境変数の追加

このままだと、LaravelのInstallerを実行するたびにファイルパスを指定する必要があります。
そのため、PATHを通しておきます。

$ echo "export PATH=~/.composer/vendor/bin:$PATH" >> ~/.bash_profile
$ source ~/.bash_profile

なお、zshを使用している場合は、以下のコマンドを使用します。

$ echo "export PATH=~/.composer/vendor/bin:$PATH" >> ~/.zshenv
$ source ~/.zshenv

(3) Laravelがインストールできてるか確認

testappの作成

1つプロジェクトを作ってみます。
ディレクトリをデスクトップに移動した上で、以下を実行します。

$ laravel new testapp

これでデスクトップ上にtestappというLaravelアプリケーションが作成されたと思います。

アプリケーションを実行してみる。

testappに移動して

$ cd testapp

サーバーを起動

$ php artisan serve

これで、localhost:8000にアクセスすると、LaravelアプリケーションのTOPページが表示されたと思います。
あとはアプリケーションを作っていくのみです!

参考にしたサイトなど

Laravel日本語サイト
PHPフレームワーク Laravel入門(書籍)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

おれのおれによるおれのためのMac設定

はじめに

新年度が始まり、新たにPCを新調された方も多いかと思います。
Macを買ったら最初にやっておきたいおれのための初期設定をおれのためにまとめるために記事にしました(備忘録)。
皆さんにも少しでも役に立てたらと思います!
記事が長いので初期設定の際に必要な部分だけチラ見して頂ければと思います:bow:
おすすめの設定がございましたら、コメント欄などで教えていただけますと喜びます:laughing:

システム環境設定関連

1. とりあえず最速に

鈍い:turtle: とやってられないので

  • マウスカーソルの軌跡の速さ
  • キーのリピート、入力認識までの時間
  • スクロール

を最速にします。

マウスカーソルの軌跡の速さ

システム環境設定 > トラックパッド > 軌跡の速さ を最速にする
image.png

キーのリピート、入力認識までの時間

システム環境設定 > キーボード > キーのリピート・リピート入力認識までの時間 を最速にする
image.png

あわせて、Touch BarにFunctionキーが常に表示されるように設定します。

スクロール

システム環境設定 > アクセシビリティ > トラックパッドオプション > スクロールの速さ を最速にする
image.png

2. DNS設定

ネットワーク接続後、DNSに高性能なGoogleのDNSを設定します。
GoogleのDNSは以下です。

  • IPv4
    • 8.8.8.8
    • 8.8.4.4
  • IPv6
    • 2001:4860:4860::8888
    • 2001:4860:4860::8844

システム環境設定 > ネットワーク > 接続しているネットワーク(wifiなど) > 詳細... > DNS > DNSサーバを以下のように設定
image.png

3. Dockの設定

Dockは初期状態だと以下のように不要なアプリなどが大量に登録されています:joy_cat:
image.png
※画像はMac OS を初期状態から自分仕様にするより引用

  • 不要なアプリをDockから削除
  • Dockを自動的に非表示
  • 最近使ったアプリをDockに表示しないようにする

を設定します。

システム環境設定 > Dock を以下のように設定。
image.png

上記設定を行うとかなりスッキリします。
screen.gif

4. ログイン画面の画像を変更

自分のお気に入りの画像を設定しましょう!

システム環境設定 > ユーザとグループ でお気に入りの画像を設定
image.png

5. メニューバーの表示設定

メニューバーに音量, Bluetooth, バッテリー割合%, 日付(MM/dd HH:mm(曜日))を表示します。

音量

システム環境設定 > サウンド で「メニューバーに音量を表示」にチェックを入れる。
image.png

Bluetooth

システム環境設定 > サウンド で「メニューバーにBluetoothを表示」にチェックを入れる。
image.png

バッテリー割合%

デスクトップのバッテリーアイコンをクリックし、「割合%を表示」にチェックを入れる。
screen.gif

日付(MM/dd HH:mm(曜日))

システム環境設定 > 日付と時刻 > 時計 で「24時間表示にする」「曜日を表示」「日付を表示」にチェックを入れる。
image.png

6. ディスプレイの拡大設定

デフォルトではディスプレイが狭いので拡大する設定を行います。

システム環境設定 > ディスプレイ > 解像度変更 で「スペースを拡大」に設定する。
image.png

デフォルト画面
image.png

拡大後の画面
image.png
ディスプレイのスペースが拡大され作業しやすくなりました:smile:

7. PCの名前を変更

デフォルト設定のままだと、ターミナルやBluetooth上でのPCの名前が「○○のMacbook」のようにダサい状態になっているため好きなPC名に変更します。

システム環境設定 > 共有 で「コンピュータ名」を任意の名前に変更します。
image.png

8. セキュリティ設定

Macのデフォルトではノーガードのため
- ディスクの暗号化(FileVault)
- ファイアーウォールの有効化

を設定します。
設定の変更は左下のimage.pngをクリックして変更します。

ディスクの暗号化(FileVault)

Macbook紛失時などの対策のため、ディスクを暗号化します。
システム環境設定 > セキュリティとプライバシー > FileVault でFileVaultをオンにします。
image.png

ファイアーウォールの有効化

システム環境設定 > セキュリティとプライバシー > ファイアーウォール でファイアーウォールをオンにします。
image.png

9. finderの設定

finderを使いやすく設定します。

  • サイドバーの表示項目
  • ファイル拡張子を表示
  • パスバーを表示
  • 隠しファイルを表示

上記を設定します。

サイドバーの表示項目

finder > 環境設定 > サイドバー をお好みに合わせて設定します。
私はすべて表示させています。
image.png

ファイル拡張性を表示

finder > 環境設定 > 詳細 の「すべてのファイル名拡張子を表示」にチェックを入れる。
image.png

パスバーを表示

finder > 表示 の「パスバーを表示」を有効にします。
有効にするとfinderの下部にパスが表示されます。
image.png

隠しファイルを表示

finderを開いて、Command(⌘) + shift(⇧) + ドット(.)を入力する。
上記コマンドを入力するごとに「隠しファイル表示/非表示」を切り替えられます。
screen.gif

参考
【Mac】隠しファイル・隠しフォルダを表示する方法

アプリのインストール・設定(一般)

便利に使うためにアプリをインストール・設定します。

10. Google Chrome

Google Chromeをインストールし、デフォルトのブラウザに設定します。
※筆者はSafariよりChromeの方が好みです

11. Alfred

インストール・設定

Spotlightよりも高機能なランチャーアプリAlfredをインストールします。

以下を参考にAlfredを設定します。
Alfredで設定しておくと便利な細かいことまとめ

Alfredはoption(⌥) + spaceで起動します。
screen.gif

Spotlightの無効化

ランチャーアプリはAlfredを使うため、Spotlightを無効化します。
システム環境設定 > キーボード > ショートカット > Spotlight 「Spotlightを表示」のチェックを外す。
image.png

12. Google日本語入力

Google日本語入力をインストールし、デフォルトのIMEに設定します。

システム環境設定 > キーボード > 入力ソース を以下のように設定します。
image.png
Google日本語入力の「ひらがな」「英数」以外は利用頻度が少ないため入力ソースから削除します。

11.にてCommand(⌘) + Spaceの割当が空いているためm「前の入力ソースを選択」をCommand(⌘) + Spaceに割り当てます。
これで、Command(⌘) + Spaceで「ひらがな」 ⇔ 「英数」を切り替えられるようになります。

13. Xcode

macで開発する際に何かと必要になるXcodeをインストールします。
App Store > 「Xcode」で検索 しインストールします。結構時間がかかるので先にインストールボタンを押す方が良いかもしれません。
image.png

14. Clipy

クリップボード拡張アプリClipyをインストールします。
上記Clipyのリンクから最新版をインストール可能です。

インストール後、意図しないペーストを避けるため「メニュー項目選択後に"⌘ + V"を入力」をOFF
image.png
ショートカットでClipyをCommand(⌘) double tapで呼び出せるようにします。
image.png

お好みに応じて履歴の保存件数を調整すると良いです。

アプリのインストール・設定(開発用)

ソフトウェア開発に関連したアプリのインストール・設定を行います。

15. iTerm2

ターミナルとして高性能なiTerm2をインストールします。

インストール後、カラーテーマをJapanesqueに設定します。
※カラーテーマはお好みで設定ください。

参考
iTerm2でColorsにJapanesqueを設定する

フォントもお好みで設定します。
※筆者はRicty Diminishedを設定

16. brew

パッケージマネージャとしてHomebrewをインストールします。

参考
【簡単】MacにHomebrewをインストールする方法と基本的な使い方

17. Docker Desktop for Mac

昨今の開発シーンでは欠かせないコンテナ環境(Docker)を整備します。
Docker HubからDocker Desktop for Macをダウンロードします。
Docker Desktop for Mac - Docker Hub

参考
DockerをMacにインストールする(更新: 2019/7/13)

18. Git

ソースコードのバージョン管理ツールとしてGitをインストールします。
brewでGitのインストール・バージョン管理を行います。

ターミナル
brew install git

参考
Macのhomebrewで最新gitをインストールして使う方法

19. exa, bat, fd, pastel

Mac標準のコマンドをより高機能なものに置き換えます。

  • exa(lsの高機能版)
  • bat(catの高機能版)
  • fd(findの高機能版)
  • pastel(カラーピッカー)

exa

exa · a modern replacement for lsに詳細が載っています。
brewでインストールします。

ターミナル
brew install exa

bat

image.png
batはrustで実装されたcatの高機能版です。
brewでインストールします。

ターミナル
brew install bat

fd

fdはrustで実装されたfindの高機能版です。
brewでインストールします。

ターミナル
brew install bat

pastel

pastelはrustで実装されたカラーピッカーです。
コマンドライン上でカラーコードの選択などが可能です。
image.png
※画像はpastelより引用

brewでインストールします。

ターミナル
brew install bat

参考
ls よりも exa を使おう!モダンな Linux コマンド達を紹介

素敵なコマンドをたくさん開発されているsharkdpさん、すごい...

20. FFmgep

FFmgepは、音声、動画などをコマンドライン上で操作するツールです。
色々と役に立つので必ず入れてます。
brewでインストールします。

ターミナル
brew install ffmpeg

21. anyenv

ようやくプログラミング言語をインストールするフェーズに来ました。
直接入れてもいいのですが、言語のバージョン管理もしたいのでanyenvを使って管理します。

brewでインストールします。

ターミナル
brew install anyenv

install後、最初に

ターミナル
anyenv install --init

を実行しanyenvを初期化します。
anyenvインストール後、各言語のバージョン管理ツールをインストールし言語をインストールします。
筆者は

  • nodenv
  • pyenv
  • goenv
  • jenv

をインストールし、それぞれ言語をインストールしました。

参考
anyenv + macOS環境構築

:warning: pyenvでPython 3.7以降をインストールする場合

pyenv failed to download openssl-1.1.0j.tar.gzというエラーメッセージが出ます。
(2020年4月4日現在 pyenv 1.2.17-2-ga8ca63fc)

opensslのダウンロード関連でエラーになっているようです。
下記で解決策などが示されています。

pyenvでPython 3.7.0のインストールに失敗した話

本記事の手順に従っている場合、FFmpegのインストール時にopensslがインストールされるため上記エラーは発生しません。

22. エディタ・IDE

思い思いのエディタ・IDEをインストールします。
私は

をインストールしました。

IntelliJ IDEAプラグイン

以下をインストールしました。

  • Atom Material Icons
  • CodeGlace
  • GitToolBox
  • Kotlin
  • Monokai Color Theme
  • Rainbow Brackets
  • Save Actions

Atomプラグイン

以下をインストールしました。

  • atom-beautify
  • autocomplete
  • color-picker
  • file-icons
  • monokai
  • pigments
  • minimap
  • minimap-pigments
  • git-plus
  • highlight-column
  • highlight-line
  • highlight-selected
  • monokai

まとめ

初期セットアップでおれ色に染めるのにかなりステップを要しました...
(これでもまだ書ききれてないものもある(.zshrc, .vimrc ...etc))
新しいMacとともに開発を頑張っていければと思います!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

おれのおれによるおれのためのMacおすすめ設定

はじめに

新年度が始まり、PCを新調された方も多いかと思います。
Macを買ったらやっておきたいおれのための初期設定をおれのために記事にまとめました(備忘録)。
皆さんのお役に少しでも立てたらと思います!
記事が長いので初期設定の際に必要な部分だけチラ見して頂ければと思います:bow:
おすすめの設定がございましたら、コメント欄などで教えていただけますと喜びます:laughing:

更新履歴

システム環境設定関連

1. とりあえず最速に

鈍い:turtle: とやってられないので

  • マウスカーソルの軌跡の速さ
  • キーのリピート、入力認識までの時間
  • スクロール

を最速にします。

マウスカーソルの軌跡の速さ

システム環境設定 > トラックパッド > 軌跡の速さ を最速にする
image.png

キーのリピート、入力認識までの時間

システム環境設定 > キーボード > キーのリピート・リピート入力認識までの時間 を最速にする
image.png
2020/4/9更新
以下コマンドを打つことでSystem Preferencesのカーソルで合わせられる最速よりも、リピートは1.5倍、入力認識は2倍早くできます。
:warning:OSによっては不具合が発生するためご注意ください。

ターミナル
# floatや0も可能だがOSによって壊れる
defaults write NSGlobalDomain KeyRepeat -int 1
defaults write NSGlobalDomain InitialKeyRepeat -int 10

参考
Mac OS X High Sierra のキー入力速度を速くする

@ryuta69 さん
ご紹介ありがとうございます!

あわせて、Touch BarにFunctionキーが常に表示されるように設定します。
また利用頻度の低いCaps LockキーCommand(⌘)キーに設定します。
image.png

スクロール

システム環境設定 > アクセシビリティ > トラックパッドオプション > スクロールの速さ を最速にする
image.png

2. DNS設定

ネットワーク接続後、DNSに高性能なGoogleのDNSを設定します。
GoogleのDNSは以下です。

  • IPv4
    • 8.8.8.8
    • 8.8.4.4
  • IPv6
    • 2001:4860:4860::8888
    • 2001:4860:4860::8844

システム環境設定 > ネットワーク > 接続しているネットワーク(wifiなど) > 詳細... > DNS > DNSサーバを以下のように設定
image.png

3. Dockの設定

Dockは初期状態だと以下のように不要なアプリなどが大量に登録されています:joy_cat:
image.png
※画像はMac OS を初期状態から自分仕様にするより引用

  • 不要なアプリをDockから削除
  • Dockを自動的に非表示
  • 最近使ったアプリをDockに表示しないようにする

を設定します。

システム環境設定 > Dock を以下のように設定。
image.png

上記設定を行うとかなりスッキリします。
screen.gif

4. ログイン画面の画像を変更

自分のお気に入りの画像を設定しましょう!

システム環境設定 > ユーザとグループ でお気に入りの画像を設定
image.png

5. メニューバーの表示設定

メニューバーに音量, Bluetooth, バッテリー割合%, 日付(MM/dd HH:mm(曜日))を表示します。

音量

システム環境設定 > サウンド で「メニューバーに音量を表示」にチェックを入れる。
image.png

Bluetooth

システム環境設定 > Bluetooth で「メニューバーにBluetoothを表示」にチェックを入れる。
image.png

バッテリー割合%

デスクトップのバッテリーアイコンをクリックし、「割合%を表示」にチェックを入れる。
screen.gif

日付(MM/dd HH:mm(曜日))

システム環境設定 > 日付と時刻 > 時計 で「24時間表示にする」「曜日を表示」「日付を表示」にチェックを入れる。
image.png

6. ディスプレイの拡大設定

デフォルトではディスプレイが狭いので拡大する設定を行います。

システム環境設定 > ディスプレイ > 解像度変更 で「スペースを拡大」に設定する。
image.png

デフォルト画面
image.png

拡大後の画面
image.png
ディスプレイのスペースが拡大され作業しやすくなりました:smile:

7. PCの名前を変更

デフォルト設定のままだと、ターミナルやBluetooth上でのPCの名前が「○○のMacbook」のようにダサい状態になっているため好きなPC名に変更します。

システム環境設定 > 共有 で「コンピュータ名」を任意の名前に変更します。
image.png

8. セキュリティ設定

Macのデフォルトではノーガードのため

  • ディスクの暗号化(FileVault)
  • ファイアーウォールの有効化

を設定します。
設定の変更は左下の
image.png
をクリックして変更します。

ディスクの暗号化(FileVault)

Macbook紛失時などの対策のため、ディスクを暗号化します。
システム環境設定 > セキュリティとプライバシー > FileVault でFileVaultをオンにします。
image.png

ファイアーウォールの有効化

システム環境設定 > セキュリティとプライバシー > ファイアーウォール でファイアーウォールをオンにします。
image.png

9. finderの設定

finderを使いやすく設定します。

  • サイドバーの表示項目
  • ファイル拡張子を表示
  • パスバーを表示
  • 隠しファイルを表示

上記を設定します。

サイドバーの表示項目

finder > 環境設定 > サイドバー をお好みに合わせて設定します。
私はすべて表示させています。
image.png

ファイル拡張子を表示

finder > 環境設定 > 詳細 の「すべてのファイル名拡張子を表示」にチェックを入れる。
image.png

パスバーを表示

finder > 表示 の「パスバーを表示」を有効にします。
有効にするとfinderの下部にパスが表示されます。
image.png

隠しファイルを表示

finderを開いて、Command(⌘) + shift(⇧) + ドット(.)を入力する。
上記コマンドを入力するごとに「隠しファイル表示/非表示」を切り替えられます。
screen.gif

参考
【Mac】隠しファイル・隠しフォルダを表示する方法

アプリのインストール・設定(一般)

便利に使うためにアプリをインストール・設定します。

10. Google Chrome

Google Chromeをインストールし、デフォルトのブラウザに設定します。
※筆者はSafariよりChromeの方が好みです

11. Alfred

インストール・設定

Spotlightよりも高機能なランチャーアプリAlfredをインストールします。

以下を参考にAlfredを設定します。
Alfredで設定しておくと便利な細かいことまとめ

Alfredはoption(⌥) + spaceで起動します。
screen.gif

Spotlightの無効化

ランチャーアプリはAlfredを使うため、Spotlightを無効化します。
システム環境設定 > キーボード > ショートカット > Spotlight 「Spotlightを表示」のチェックを外す。
image.png

12. Google日本語入力

Google日本語入力をインストールし、デフォルトのIMEに設定します。

システム環境設定 > キーボード > 入力ソース を以下のように設定します。
image.png
Google日本語入力の「ひらがな」「英数」以外は利用頻度が少ないため入力ソースから削除します。

11.にてCommand(⌘) + Spaceの割当が空いているためm「前の入力ソースを選択」をCommand(⌘) + Spaceに割り当てます。
これで、Command(⌘) + Spaceで「ひらがな」 ⇔ 「英数」を切り替えられるようになります。

13. Xcode

macで開発する際に何かと必要になるXcodeをインストールします。
App Store > 「Xcode」で検索 しインストールします。結構時間がかかるので先にインストールボタンを押す方が良いかもしれません。
image.png

14. Clipy

クリップボード拡張アプリClipyをインストールします。
上記Clipyのリンクから最新版をインストール可能です。

インストール後、意図しないペーストを避けるため「メニュー項目選択後に"⌘ + V"を入力」をOFF
image.png
ショートカットでClipyをCommand(⌘) double tapで呼び出せるようにします。
image.png

お好みに応じて履歴の保存件数を調整すると良いです。

2020/4/8 追記
AlfredのPowerpackを購入すると、Clipyの上位互換のような機能も付随してきます。
ぜひこれも試してみたいなぁ。

@umi さん、ご紹介ありがとうございます!

参考
Alfredを使いこなせてない君に!【Alfredの使い方完全版】

アプリのインストール・設定(開発用)

ソフトウェア開発に関連したアプリのインストール・設定を行います。

15. iTerm2

ターミナルとして高性能なiTerm2をインストールします。

インストール後、カラーテーマをJapanesqueに設定します。
※カラーテーマはお好みで設定ください。

参考
iTerm2でColorsにJapanesqueを設定する

フォントもお好みで設定します。
※筆者はRicty Diminishedを設定

16. brew

パッケージマネージャとしてHomebrewをインストールします。

参考
【簡単】MacにHomebrewをインストールする方法と基本的な使い方

17. Docker Desktop for Mac

昨今の開発シーンでは欠かせないコンテナ環境(Docker)を整備します。
Docker HubからDocker Desktop for Macをダウンロードします。
Docker Desktop for Mac - Docker Hub

参考
DockerをMacにインストールする(更新: 2019/7/13)

18. Git

ソースコードのバージョン管理ツールとしてGitをインストールします。
brewでGitのインストール・バージョン管理を行います。

ターミナル
brew install git

参考
Macのhomebrewで最新gitをインストールして使う方法

19. exa, bat, fd, pastel

Mac標準のコマンドをより高機能なものに置き換えます。

  • exa(lsの高機能版)
  • bat(catの高機能版)
  • fd(findの高機能版)
  • pastel(カラーピッカー)

exa

exa · a modern replacement for lsに詳細が載っています。
brewでインストールします。

ターミナル
brew install exa

bat

image.png
batはrustで実装されたcatの高機能版です。
brewでインストールします。

ターミナル
brew install bat

fd

fdはrustで実装されたfindの高機能版です。
brewでインストールします。

ターミナル
brew install fd

pastel

pastelはrustで実装されたカラーピッカーです。
コマンドライン上でカラーコードの選択などが可能です。
pastel.gif
※画像はpastelより引用

brewでインストールします。

ターミナル
brew install pastel

参考
ls よりも exa を使おう!モダンな Linux コマンド達を紹介

素敵なコマンドをたくさん開発されているsharkdpさん、すごい...

20. FFmpeg

FFmpegは、音声、動画などをコマンドライン上で操作するツールです。
色々と役に立つので必ず入れてます。
brewでインストールします。

ターミナル
brew install ffmpeg

21. anyenv

ようやくプログラミング言語をインストールするフェーズに来ました。
直接入れてもいいのですが、言語のバージョン管理もしたいのでanyenvを使って管理します。

brewでインストールします。

ターミナル
brew install anyenv

install後、最初に

ターミナル
anyenv install --init

を実行しanyenvを初期化します。
anyenvインストール後、各言語のバージョン管理ツールをインストールし言語をインストールします。
筆者は

  • nodenv
  • pyenv
  • goenv
  • jenv

をインストールし、それぞれ言語をインストールしました。

参考
anyenv + macOS環境構築

:warning: pyenvでPython 3.7以降をインストールする場合

pyenv failed to download openssl-1.1.0j.tar.gzというエラーメッセージが出ます。
(2020年4月4日現在 pyenv 1.2.17-2-ga8ca63fc)

opensslのダウンロード関連でエラーになっているようです。
下記で解決策などが示されています。

pyenvでPython 3.7.0のインストールに失敗した話

本記事の手順に従っている場合、FFmpegのインストール時にopensslがインストールされるため上記エラーは発生しません。

22. エディタ・IDE

思い思いのエディタ・IDEをインストールします。
私は

をインストールしました。

IntelliJ IDEAプラグイン

以下をインストールしました。

Atomプラグイン

以下をインストールしました。

23. フォント

プログラミングやドキュメント閲覧には目に優しいフォントが必須です!
image.png

をインストールします。

Ricty Diminished

私のお気に入りのプログラミングフォントです。
image.png image.png
※画像はプログラミング用フォント Ricty Diminishedより引用

以下でインストールします。

ターミナル
# sanemat様のリポジトリにタップします
brew tap sanemat/font

# rictyをインストールします
brew install ricty

# フォントをコピー
cp -f /usr/local/opt/ricty/share/fonts/Ricty*.ttf ~/Library/Fonts/

#フォントキャッシュの更新
fc-cache -vf

参考
プログラミング用フォントRictyをMacにインストールする

Source Han Code JP

こちらも私のお気に入りのプログラミングフォントです。
image.png
image.png
※画像はIntroducing Source Han Code JPより引用

以下でインストールします。

ターミナル
curl -L https://github.com/adobe-fonts/source-han-code-jp/archive/2.011R.tar.gz | tar zx
mv source-han-code-jp-2.011R/OTC/SourceHanCodeJP.ttc ~/library/fonts
rm -r source-han-code-jp-2.011R

参考
macOSでプログラミングフォント SourceHanCodeJP を使う環境を整える

Migu 1P

ブラウジングなどする際にこちらのフォントが好きで使っています。
image.png
※画像はM+とIPAの合成フォントより引用

M+とIPAの合成フォントよりフォントをダウンロードしフォントをインストールします。
image.png

まとめ

初期設定でおれ色のおすすめ設定に染めるのにかなりステップを要しました...
(これでもまだ書ききれてないものもある(.zshrc, .vimrc ...etc))

暇なときに自動化とかしたいなぁ。(次, Macbook買うのいつなのかなぁ..w)
新しいMacとともに開発を頑張っていければと思います!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Macのセットアップツールを作ってみた

はじめに

HomebrewやDockerなどのインストールや、zshのカスタマイズを行うツールを作りました。

対象

macOS Catalinaを使う人向けです。

なぜ作ろうと思ったのか

今までは、Macを新しく購入したりクリーンインストールしたりした際に、いつも使っているソフトを手動で一個ずつインストールしたり、設定を行ったりしていました。
この作業は、色んなサイトを見て設定したり、時にはダウンロードしたりと時間を食ってしまい、とても面倒な作業になりがちです。
これを少しでも楽にしようと思い、作ってみました。

使いかた

リポジトリからcloneして、以下コマンドを実行してください。

$ zsh SetupStart.sh

処理内容は後述します。

どんなことをやっているのか

構成

構成内容は以下のとおりです。

.
├── README.md
├── SetupStart.sh  // セットアップ開始スクリプト
└── setup
    ├── AnsibleInstall.sh  // Ansibleインストール
    ├── ShellSettings.sh  // zshの設定
    ├── ansible.cfg  
    ├── inventory
    ├── roles
    │   ├── homebrew
    │   │   ├── tasks
    │   │   │   └── main.yml
    │   │   └── vars
    │   │       └── main.yml  // homebrew tap、homebrewを使用してインストールするソフト一覧
    │   ├── homebrew_cask
    │   │   ├── tasks
    │   │   │   └── main.yml
    │   │   └── vars
    │   │       └── main.yml  // homebrew caskを使用してインストールするソフト一覧
    │   └── vscode
    │       ├── tasks
    │       │   └── main.yml  // VSCodeのExtensionインストール
    │       └── vars
    │           └── main.yml  // VSCodeのExtensionリスト
    └── setup.yml

処理内容

以下の順でインストールや設定を行っています。
1. Ansibleをインストール
2. Ansibleでbrewを使いソフトウェアをインストール
3. Ansibleでbrew caskを使いソフトウェアをインストール
4. zshのカスタマイズ

それぞれ詳細内容を説明します。

1.Ansibleをインストール

setup/AnsibleInstall.sh
# Install Homebrew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# Update brew
brew update

# Install ansible
brew install ansible

2.Ansibleでbrewを使い以下ソフトウェアをインストール

  • npm
  • git
setup/roles/homebrew/tasks/main.yml
- block:
  - name: homebrew tap
    homebrew_tap:
      name: "{{ item }}"
      state: present
    with_items: "{{ taps }}"

  - name: homebrew install
    homebrew:
      name: "{{ item.name }}"
      state: "{{ item.state }}"
    with_items: "{{ packages }}"

  tags:
    - homebrew
setup/roles/homebrew/vars/main.yml
taps:
  - homebrew/cask
  - homebrew/cask-versions
  - homebrew/cask-fonts
  - homebrew/core

packages:
  - { name: npm, state: present }
  - { name: git, state: present }

3.Ansibleでbrew caskを使い以下ソフトウェアをインストール

  • Docker
  • Evernote
  • Google Chrome
  • Google日本語入力
  • Slack
  • Visual Studio Code
setup/roles/homebrew_cask/tasks/main.yml
- block:
  - name: homebrew cask install
    environment:
      HOMEBREW_CASK_OPTS: --appdir=/Applications
    homebrew_cask:
      name: "{{ item.name }}"
      state: "{{ item.state }}"
    with_items: "{{ packages }}"

  tags:
    - homebrew_cask
setup/roles/homebrew_cask/vars/main.yml
packages:  
  - { name: docker, state: present }
  - { name: evernote, state: present }
  - { name: google-chrome, state: present }
  - { name: google-japanese-ime, state: present }
  - { name: slack, state: present }
  - { name: visual-studio-code, state: present }

4.zshのカスタマイズ
ここでは、zshに以下の変更を行っています。

  • pureテーマに変更
  • 文字コードをUTF-8に変更
  • 大文字小文字関係なくターミナル上で補完するよう変更
  • コマンド履歴保存件数を1000件に変更
  • preztoをダウンロード
  • メニュー補完を有効化
setup/ShellSettings.sh
# Install pure to change terminal theme
mkdir -p "$HOME/.zsh"
git clone https://github.com/sindresorhus/pure.git "$HOME/.zsh/pure"

# zshrcに保管機能、プロンプト有効化を書き込み
{
echo "# 文字コードUTF-8に設定"
echo "export LANG=ja_JP.UTF-8"
echo ""
echo "zstyle ':completion:*' matcher-list 'm:{a-z}={A-Z}'"
echo ""
echo "# history"
echo "HISTFILE=$HOME/.zsh_history"
echo "HISTSIZE=1000"
echo "SAVEHIST=1000"
echo "setopt extended_history"
echo ""
echo "zstyle ':completion:*:default' menu select=1"
echo ""
echo "fpath+=$HOME/.zsh/pure"
echo ""
echo "# プロンプト、補完有効"
echo "autoload -U promptinit compinit"
echo "promptinit"
echo "compinit"
echo ""
echo "prompt pure" } > "$HOME/.zshrc"

# Clone prezto
git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"
setopt EXTENDED_GLOB

# Change the prompt theme to pure
sed -i '' s/\'sorin\'/\'pure\'/ "${ZDOTDIR:-$HOME}/.zprezto/runcoms/zpreztorc"

# Enable syntax highligting and auto suggestions.
sed -i '' "s/'prompt'/'syntax-highlighting' 'autosuggestions' 'prompt'/" "${ZDOTDIR:-$HOME}/.zprezto/runcoms/zpreztorc"

# Reload
exec $SHELL -l

おわりに

このツールで、今まで時間がかかっていた作業を一気に楽にすることができました。
今後も、より楽にできるようにこのツールをカスタマイズしていきたいです。

課題

実際のツールには、Visual Studio Codeの拡張機能をAnsibleで入れています。
ですが、このツールを実行後にVisual Studio Codeを起動してみると、拡張機能がインストールされていません。
ここは調査中ですが推測する限り、AnsibleでVisual Studio Codeを入れたあとに、Visual Studio Codeの初回の起動が必要だと思われます。
この件はどう解決したらいいのか考え中です。

参考記事

お前らのターミナルはダサい
AnsibleでMacの環境構築をしてみる
Macのセットアップを自動化!3つのポイント
Ansible で Mac を構成管理するときの勘所
"AnsibleでMac環境構築するやつ"のテンプレートつくった

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む