Mac OSXを使いやすくする説明書

WEB制作関連ソフト

トップに戻る

新規投稿

tags

virtualbox
[3]
vagrant
[3]
iPad
[1]
iPhone
[1]

オシャレで拡張可能な次世代ターミナルソフト Wave / Wezterm / Warp / Hyper

● Wave

https://www.waveterm.dev/download

brew でもインストールできます

brew install --cask wave

● Wezterm

https://wezfurlong.org/wezterm/index.html

・Wezterm のインストール

brew install --cask wezterm

・Wezterm の設定の作成

cd
vi .wezterm.lua

.wezterm.lua を以下の内容で保存します

local wezterm = require 'wezterm'

local config = {}

if wezterm.config_builder then
  config = wezterm.config_builder()
end

-- カラー設定
config.color_scheme = 'Dissonance (Gogh)'

-- フォント設定
config.font = wezterm.font_with_fallback {
  'Menlo',
  'Hiragino Sans',
}
config.font_size = 14
config.cell_width = 1.0

-- ウィンドウサイズ設定
config.initial_cols = 150
config.initial_rows = 52

-- Command + - のフォント変更時にウインドウサイズを変更しない
config.adjust_window_size_when_changing_font_size = false

-- タブがひとつの時はタブバー表示しない
config.hide_tab_bar_if_only_one_tab = true

return config

https://wezfurlong.org/wezterm/colorschemes/d/index.html#dark

● warp

https://www.warp.dev/

● Hyper

https://hyper.is/

● ターミナルソフト Hyperのインストール方法 （MacOS Catalina 10.15 対応）

brew update
brew cask install hyper

● おすすめプラグイン

● hyper-active-tab

アクティブなタブの横に ▲ をつけて現在アクティブであることをわかりやすくします。

● hyper-quickssh

よく使うコマンドを設定ファイルに登録しておいて　「Command + O」 から呼び出して実行することができます
https://github.com/edhuardotierrez/hyper-quickssh

コマンドは ~/.hyper_plugins/hyper-quickssh-config.json に記述します。

● hyper-search

https://github.com/jaanauati/hyper-search
ターミナル内を文字列検索できるようにします。

● hyper-statusline

https://github.com/henrikdahl/hyper-statusline

● プラグインの指定方法

.hyper.js に次のように記述します

  plugins: [
    'hyper-active-tab' ,
    'hyper-quickssh' ,
    'hyper-search' ,
    'hyper-statusline' ,
  ],

No.211
11/15 10:27

edit

Vagrant / Virtual BOX で共有フォルダを設定する

● Vagrant の共有フォルダ

Vagrantでは以下のフォルダがデフォルトで共有フォルダになります

ホストマシン : 起動フォルダ（ Vagrantfile があるフォルダ ）
ゲストマシン : /vagrant/

なのでここにガンガン入れていきましょう。

● Vagrant共有フォルダ （ホスト ./）（ゲスト/vagrant） のディレクトリ、ファイルのパーミッションを設定する

共有フォルダのパーミッションはゲストマシンでは変更できません。
ホストマシン Vagrantfile に以下のように設定しましょう（ディレクトリ777, ファイル666 に設定します。）

config.vm.synced_folder ".", "/vagrant", mount_options: ['dmode=777','fmode=666']

● Vagrantで起動したマシンのApacheを自動起動する

Vagrant の共有フォルダをApacheのドキュメントルートにしているといくらホストマシン側で自動起動設定しても 共有フォルダのエラーでapacheが立ち上がりません。 そこで Vagrantfile に以下のように記述すると自動起動出来るようになります。

config.vm.provision :shell, run: "always", :inline => <<-EOT
    sudo service httpd start
EOT

● VagrantでCSSの更新が反映されない場合の対処法

http://bit.ly/2hFUXDf


No.153
12/17 23:45

edit

virtualbox
vagrant

MacのSQLiteクライアントソフト

DB Browse for sqlite

http://sqlitebrowser.org


添付ファイル1
db_t.jpg ( 8.0 KBytes )　ダウンロード
No.152
12/02 15:16

edit

添付ファイル

VirtualBOXにインストールした CentOS にGUIをインストールし画面サイズを大きく変更し日本語設定を行う

● CentOS5.5 にGUIをインストールする

yum -y groupinstall "X Window System"
yum -y groupinstall "GNOME Desktop Environment"
yum -y groupinstall "Japanese Support" "General Purpose Desktop"

● CentOS7 にGUIをインストールする

sudo yum -y groupinstall "GNOME Desktop"

　
インストール後に

startx

でGUIが起動します。

● Vagrant（VirtualBOX）の画面サイズを広くする

Vagrant（VirtualBOX）にインストールしたCentOSのデフォルト画面サイズは 800x600 ですのでそれより大きくします。

まずターミナルから以下を実行して必要なパッケージをインストールしておきます

yum install -y bzip2 gcc make kernel-devel kernel-headers dkms gcc-c++

次に以下を実行します

・設定 > ストレージ > 『コントローラー : IDE Controller』の右のCDアイコンをクリックしてCDを追加
・Virtual BOX からバーチャルマシンを立ち上げてメニューの Device > Insert Guest addition CD image ... からCDをマウント
・マウントしたCDから追加設定をインストール
・インストール後マシンを再起動する

これで自由に画面サイズを変えれるようになります。

● CentOS7 の設定を日本語にする

sudo localectl set-locale LANG=ja_JP.UTF-8
sudo timedatectl set-timezone Asia/Tokyo

ロケール、タイムゾーンを日本に設定します。
参考 : https://thinkit.co.jp/node/5388

● CentOS7 に日本語フォント Google Noto Fonts をインストールする

・下記URLからフォントをダウンロードします
https://www.google.com/get/noto/#sans-jpan

・ダウンロードしたフォルダに移動して以下のコマンドを実行します。

unzip <font package>.zip
sudo mkdir -p /usr/share/fonts/opentype/noto
sudo cp *.otf  /usr/share/fonts/opentype/noto
sudo fc-cache -f -v

参考 : https://www.google.com/get/noto/help/install/

フォントがインストールされたかどうかの確認は

fc-list

● CentOS7 のデフォルトフォントを変更する

fontconfig のコマンドを使用します。

・現在のデフォルトフォントを表示する
fc-match

これで現在のフォントがわかります。
　
デフォルトフォントを変更するにはフォント設定ファイル /etc/fonts/local.conf を新しく以下の内容で作成します。

vi /etc/fonts/local.conf
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
    <alias>
        <family>serif</family>
        <prefer>
            <family>Noto Serif</family>
        </prefer>
    </alias>
    <alias>
        <family>sans-serif</family>
        <prefer>
            <family>Noto Sans</family>
            <family>Noto Sans CJK JP</family>
        </prefer>
    </alias>
    <alias>
        <family>monospace</family>
        <prefer>
            <family>Noto Sans Mono CJK JP</family>
        </prefer>
    </alias>
</fontconfig>

引用 : http://www.nakanokun.com/wordpress/?p=337
参考リンク:http://wp.me/p64iBM-cV


No.151
01/08 14:27

edit

vagrant
virtualbox

Unixのバーチャルマシンを作成する Vagrant / Virtual BOX

Vagrant

https://www.vagrantup.com/downloads.html

Virtual Box

https://www.virtualbox.org

● Virtual BOX Extension Pack

http://www.oracle.com/technetwork/server-storage/virtualbox/downloads/index.html?ssSourceSiteId=otnjp#extpack

Virtual BOX は仮想環境（バーチャルPC）を実行するソフト
Vagrant は【VirtualBOX】【VM Ware（有料）】【parallels（有料）】【Amazon EC2（有料のクラウド）】などに対応した仮想環境を簡単に構築するソフトです。
どちらも公式サイトからアプリをダウンロードしてインストールします。

● Vagrantのデータ保存フォルダを変更する

外付けハードディスクなどに変更しておくと環境の変化にも耐えやすいです。 例)

export VAGRANT_HOME=/path/to/hdd/vagrant.d
未指定時のデフォルトは $HOME/.vagrant.d

● VagrantにCentOSのマシンを追加する

1. Vagrantで新しいマシンを追加するにはまずフォルダを作成します

例として Centos55 フォルダを作成します。

mkdir ~/Vagrant/Centos55

2. 新しいマシンを検索する

こちらからインストールしたいマシンを検索する ↓
https://atlas.hashicorp.com/boxes/search
検索結果をクリックするとインストールコマンドが表示されているのでコピーしておく

（例）
vagrant init hansode/centos-5.5-x86_64; vagrant up --provider virtualbox

3. 新しいマシンを追加する

先ほど作成したフォルダに移動してマシンを追加する

cd ~/Vagrant/Centos55
vagrant init hansode/centos-5.5-x86_64; vagrant up --provider virtualbox

仮想マシンファイルのダウンロード完了までしばらく待ちます。

● CentOSのマシンを起動する

ダウンロードが完了したら準備OK。起動するだけです。

cd ~/Vagrant/Centos55
vagrant up

● 【vagrant ssh】 コマンドでSSHで接続する

起動したら ssh でコンソールへつなぎましょう

vagrant ssh

rootになるには

su -
（パスワードは vagrant ）

または

sudo su -

● 【ssh】 コマンドでSSHで接続する

通常のsshコマンドでssh接続するには vagrant ssh-config を実行して設定ファイルを表示させます （vagrant ssh-config の実行例）

Host default
  HostName 127.0.0.1
  User vagrant
  Port 2222
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile /Users/hogehoge/Vagrant/Centos5.5/.vagrant/machines/default/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL

この情報を元に sshコマンド接続するには下記のようにします

ssh vagrant@127.0.0.1 -p 2222 -i /Users/hogehoge/Vagrant/Centos5.5/.vagrant/machines/default/virtualbox/private_key

SFTPソフトでsftp接続するにはファイル指定します

/Users/【あなたのユーザー名】/Vagrant/Centos5.5/.vagrant/machines/default/virtualbox/private_key

● CentOSのマシンでWEBサーバを起動しMacから接続する

1. apacheのドキュメントルートを /home/vagrant/【サーバ名】 にするため、ディレクトリの権限を変更します

chmod 0755 /home/vagrant

2. apacheの設定ファイルにバーチャルホスト項目を追加します

vi /etc/httpd/conf/httpd.conf

以下の行を一番下に追加します

NameVirtualHost *:80
<VirtualHost *:80>
    ServerAdmin webmaster@test.local
    DocumentRoot "/home/vagrant/test.local"
    ServerName test.local
    ErrorLog  "/home/vagrant/test.local/log/test.local-error.log"
    CustomLog "/home/vagrant/test.local/log/test.local-access.log" common
    <directory "/home/vagrant/test.local">
      Order allow,deny
      Allow from all
    </directory>
</VirtualHost>

3. ファイアーウォール iptables を無効にします

/etc/rc.d/init.d/iptables stop
chkconfig iptables off

4. yumのリポジトリに「EPEL」「remi」追加する

yum -y install epel-release

# Centos7に「remi」リポジトリに追加する
rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm

# Centos6に「remi」リポジトリに追加する
rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm

# Centos5に「remi」リポジトリに追加する
rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-5.rpm 

4. PHPとモジュールをインストールする

・PHP5.6をインストールする場合
yum -y install --enablerepo=remi-php56 php
・PHP7.0をインストールする場合
yum -y install --enablerepo=remi-php70 php
yum  --enablerepo=remi-php56  -y install php php-devel php-mbstring php-pear php-bcmath php-dba php-dom php-gd php-imap php-ldap php-ncurses php-odbc php-pcntl php-snmp php-soap php-xmlrpc

# MySQLのインストール
yum -y install mysql
yum -y install php-mysql

# postgreSQLのインストール
yum -y install postgresql-server
yum -y install php-pgsql

# SQLiteのインストール
yum -y install sqlite

php sqliteのインストール

php用SQLiteは pecl 拡張でインストールするのでPHPソースコードを取ってきてコンパイルします。 ソースコードを取ってきて解凍した後下記のように実行します。

cd php-5.1.6/ext/sqlite/
phpize
./configure
make
sudo make install

次に設定ファイルを作成します。

vi /etc/php.d/sqlite.ini

下記の内容で保存する

extension=sqlite.so

apacheを再起動します

/etc/init.d/httpd stop ; /etc/init.d/httpd start

4. apacheを自動起動するよう設定後、手動で起動し、curlでアクセスして確認します

chkconfig httpd on
/etc/init.d/httpd start
curl localhost

5. IPアドレス確認します

ip a

● Macからバーチャルマシンの標準80番ポートへアクセス出来るよう設定する

1. vagrant-triggers をインストールする

vagrant plugin install vagrant-triggers

● Vagrantのコマンド（ターミナルから実行します）

・box（バーチャルマシン）の一覧を表示する

vagrant box list

・box（バーチャルマシン）を追加する

インストールするboxをここから選択し URL をコピーしておく
http://www.vagrantbox.es

freeBSD 9.2を「freebsd92box」というbox名で追加するには下記のように実行する

vagrant box add freebsd92box http://iris.hosting.lv/freebsd-9.2-i386.box

・box（バーチャルマシン）を初期化する

例 : ディレクトリ「vagrant_space」を作ってそこに設定ファイルを置いてみます

cd
mkdir vagrant_space
cd vagrant_space
vagrant  init  freebsd92box

・バーチャルマシンを起動する

cd ~/Vagrant/【操作したいマシンのディレクトリ】
vagrant up

・バーチャルマシンを停止する

cd ~/Vagrant/【操作したいマシンのディレクトリ】
vagrant halt

・バーチャルマシンを再起動する

cd ~/Vagrant/【操作したいマシンのディレクトリ】
vagrant reload

・バーチャルマシンの起動状態を確認する

vagrant status

・起動したマシンにssh接続する

vagrant ssh

・ssh接続後に root ユーザになる

su -
（パスワードは vagrant）

・box（バーチャルマシン）を削除する

vagrant box remove "box名"

・共有フォルダをOFFにする

Vagrantfile 内に以下のように記述する

config.vm.synced_folder ".", "/vagrant", disabled: true

その他Vagrantコマンド http://bit.ly/2go8J0u


添付ファイル1
vagrant_logo-320x320.png ( 58.4 KBytes )　ダウンロード
添付ファイル2
virtualbox_t.jpg ( 14.6 KBytes )　ダウンロード
No.148
05/23 21:59

edit

添付ファイル

virtualbox
vagrant

MacでWEBサイトのリンク切れをチェックするアプリ

Macで制作中のWEBサイトのリンク切れをチェックするには integrity が便利です。

integrity

https://itunes.apple.com/jp/app/integrity/id513610341


添付ファイル1
integrity_t.jpg ( 11.3 KBytes )　ダウンロード
No.143
06/05 18:24

edit

添付ファイル

MacのMySQLクライアント

Sequel Ace（無料）

https://apps.apple.com/us/app/sequel-ace/id1518036000?ls=1

DBeaver（無料）

https://dbeaver.io/download/

DBeaverの設定ファイルのDropboxでの共有方法

cd /Users/myuser/Library
ln -s "/Users/myuser/Dropbox/DBeaverData"  DBeaverData

Valentina Studio

https://apps.apple.com/jp/app/valentina-studio/id604825918?mt=12

MySQL Workbench

https://www.mysql.com/jp/products/workbench/

Navicat for MySQL （シェアウェア）

https://jp.navicat.com/download


添付ファイル1
t_sequel.jpg ( 56.6 KBytes )　ダウンロード
添付ファイル2
t_navicat.jpg ( 35.1 KBytes )　ダウンロード
添付ファイル3
MySQLWorkbench.png ( 84.6 KBytes )　ダウンロード
添付ファイル4
beaver-head.png ( 7.4 KBytes )　ダウンロード
No.140
04/15 09:39

edit

添付ファイル

SASS,SCSS,HTMLビルドツール

CodeKit

https://incident57.com/codekit/

SASS, SCSS, HTML ビルドツール
・SASSを自動コンパイルしてCSSを生成 ・ファイル更新時に自動でブラウザをリロード
・HTMLをテンプレート化したり変数が使える

●主な機能

・Compiling
・Optimizing Images
・Autoprefixer
・Bless
・Foundation
・Bourbon
・Compass
・Minifying
・Live Browser Reloads
・Bower

●Kit Languageの例

●1. 変数を使う

<!-- $title = サイトのタイトル  -->
<title><!-- $title --></title>

●2. テンプレートファイルをインクルードする

拡張子は .kit にします。(変数が必要ない場合は .html でもよい。)

<!-- @include "include/header.kit" -->

Hammer

http://hammerformac.com

SASS, SCSS, HTML ビルドツール
cssの自動生成や、HTMLファイル内での「変数」や「別ファイルのインクルード」等できます。
更新が多いホームページ管理に便利です。


添付ファイル1
t_hammer.jpg ( 42.2 KBytes )　ダウンロード
添付ファイル2
t_codekit.jpg ( 46.1 KBytes )　ダウンロード
No.132
04/21 14:06

edit

添付ファイル

iPadやiPhoneでのサイトの見え方をチェックできるソフト Responsive Resize

Google Chrome

Google ChromeでのサイトのiPhone表示確認のやり方

・確認したいWEBページを表示する
・右クリックから「検証」
・下にウィンドウが表示されるので左の iphoneのアイコンをクリックする

Responsive Resize

https://itunes.apple.com/jp/app/responsive-resize/id604696477

制作したWEBサイトがiPadやiPhoneでどう見えるかをMacで確認するためのソフトです。 iPad, iPhoneをはじめ、任意の画面サイズのデバイスを登録できます。


添付ファイル1
responsive_t.jpg ( 36.7 KBytes )　ダウンロード
添付ファイル2
chrome_t.jpg ( 9.6 KBytes )　ダウンロード
No.46
11/28 09:47

edit

添付ファイル

iPad
iPhone