パンセのタネWebデザインを追求したり、Web業界の最新トレンド、ネットPRなどのお役立ち情報を紹介するスタッフブログです。

マークアップ、Webプログラマ向けLinuxデスクトップ環境構築(Ubuntu 15.04 日本語 Remix)

2015年07月08日

むらかみです。主にマークアップをしたりプログラムを組んだりしています。
皆様はマークアップやプログラムをする際に使うPCのOS、何を使っていますか?
弊社エンジニアは、Windowsが50%、Linuxが33%、OS Xが17%です。(サブマシンのほとんどはOS X)
私も入社してから8年ほどWindowsを使っていましたが、3年ほど前にUbuntuに乗り換えました。
今回は私が日々の業務で使っているアプリケーションの紹介と個別にインストールするコマンドを例示しつつ、最後にシェルスクリプトを使ってUbuntu 15.04 日本語 Remixを使ったマークアップ・Webプログラマ向けの環境を構築してみたいと思います。

Webブラウザ

Firefox

Firefox

お馴染みすぎて説明不要のFirefox。Ubuntu 15.04では標準でインストールされるブラウザです。
デフォルトでProxyの設定がOS共通の設定と分かれているため、Proxyサーバを経由してアクセスする必要があるとき(特定のテストサーバに接続するときなど)に利用しています。

Chromium

Chromium

Ubuntu標準のリポジトリからインストール出来るGoogle Chromeのオープンソース版で、HTML等のレンダリングはChromeとほぼ変わりませんが、Flash Playerが内蔵されていないなどの相違点があります。
メインで使っているGoogle Chromeでログインしてしまっているサービスに別アカウントでログインする場合などに利用しています。


sudo apt-get install chromium-browser

Google Chrome

Google Chrome

メインで使っているWebブラウザです。
Ubuntuの標準リポジトリにはありませんが、外部リポジトリを追加することでapt-getでインストールが可能になります。


wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
sudo apt-get update
sudo apt-get install google-chrome-stable

Stableに実装される前の機能を一般ユーザーより早く確認する必要があるなどの理由で、ベータ版や開発版を利用したい場合はgoogle-chrome-betagoogle-chrome-unstableを指定してインストールすることも可能です。

テキストエディタ

Linuxで利用できるテキストエディタはCUIで動作可能なVimやEmacsが有名ですが、WindowsやOS Xで馴染みのあるGUIのテキストエディタも数多く動作します。
私もWindowsを利用していた頃にEmEditorを使っていたこともあり、現在もGUIのテキストエディタを使っています。

Atom

Atom

最近流行りのGitHub製テキストエディタのAtomもLinuxで動作します。
Markdownのプレビューがいい感じですので、主にMarkdownファイルの編集に利用しています。


sudo add-apt-repository ppa:webupd8team/atom
sudo apt-get update
sudo apt-get install atom

Sublime Text 3

Sublime Text 3

みんな大好きSublime TextもLinuxで動作しますが、Build 3083の段階で、標準では日本語入力が出来ません。
なんとかする方法もあるにはあるのですが、私には操作がしっくり来ませんでした。
Sublime Textは評価は無料ですが、継続して使う場合には70ドルで購入する必要があります。


sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installer

Geany

Geany

現在の私のメインエディタで、構文チェックや自動補完などの基本機能を抑えており、変数や関数の一覧表示(とても便利!)が可能だったりと必要十分なのですが、私の他にこれをメインで使っている人を見たことがありません。設定もそこそこ細かくでき使いやすいので試してみてください。


sudo apt-get install geany geany-plugins

バージョン管理と周辺ツール

Subversion、Git

弊社ではバージョン管理システムとしてSubversionを利用しており、案件によってはGitを使い始めたところです。
Windows時代にはTortoiseSVNなどを利用していましたが、現在はCUIで操作しています。


sudo apt-get install subversion git

Meld

Meld

バージョン管理とは直接関係ありませんが、よく一緒に使う機能としてDiffとマージがあり、MeldはそれをGUIで行えるアプリケーションです。
Windowsで同種のアプリケーションですとWinMergeが有名です。


sudo apt-get install meld
svnとgitコマンドでMeldを使う方法
Subversionの場合
  1. ホームディレクトリや任意の場所に適当なディレクトリを作る

    
    cd
    mkdir bin
    
  2. ホームディレクトリや任意の場所に適当なディレクトリを作る

    
    cat << \EOF > bin/svn-diff-meld.sh
    #!/bin/sh
    left="$6"
    right="$7"
    meld "$left" "$right"
    EOF
    cat << \EOF > bin/svn-diff3-meld.sh
    #!/bin/sh
    mine="$9"
    older="$10"
    yours="$11"
    meld "$mine" "$older" "$yours"
    EOF
    chmod u+x bin/svn-diff*
    
  3. svnコマンドを実行して.subversion/configを生成する (デフォルトの設定ファイルを出力しておかないと次のコマンドで設定を書き換えできないため)

    
    svn --version
    
  4. 設定ファイルにスクリプトを登録する

    
    sed -i".org" -e "s|^\[helpers\]|[helpers]\ndiff-cmd = $HOME/bin/svn-diff-meld.sh\ndiff3-cmd = $HOME/bin/svn-diff3-meld.sh\ndiff3-has-program-arg = false|g" .subversion/config
    
Gitの場合

git config --global diff.tool meld
git config --global merge.tool meld

その他

マークアップやプログラミングですと、テキストエディタとブラウザとバージョン管理ツールがあれば大抵の仕事は出来てしまうので、ここから先はその他にあったら便利なアプリケーションの紹介になります。

VirtualBox

VirtualBox

言わずとしれたx86仮想化アプリケーションです。
どうしてもAdobe Photoshop、Microsoft Office、IEにサヨナラが出来ないため、主にWindowsを動かすために利用しています。(Vagrantでも使ってます)


sudo apt-get install virtualbox virtualbox-guest-additions-iso

SASS、LESS

最近利用することが多くなったスタイルシート言語。
なるべく最新版を利用したいので、npmとgem経由でインストールします。


sudo apt-get install gem
sudo gem install sass

sudo apt-get install npm
sudo npm install -g less
cd /usr/bin/
sudo ln -s nodejs node

Docker、Vagrant

開発環境の構築(もちろん本番環境も)に便利なDockerとVagrantも、もちろんLinuxで動きます。


sudo apt-get install docker.io vagrant

FileZilla

FileZilla

FTP、SFTPなどに対応しているファイル転送アプリケーションです。
Windows、OS X、Linuxに対応しているため、どんな環境でも同じ感覚で操作出来るので便利です。


sudo apt-get install filezilla

Skype

Skype

最近はだいぶSlackに移行してしまいましたが、Skypeもまだまだ現役ですのでインストールしています。
Canonical Partnerのリポジトリを追加してからインストールを行います。
ちなみにSlackはChromeの機能でデスクトップアプリ化しています。


sudo sh -c 'echo "deb http://archive.canonical.com/ubuntu/ vivid partner" >> /etc/apt/sources.list.d/canonical_partner.list'
sudo apt-get update
sudo apt-get install skype

Terminator

Terminator

タブ切り替え、画面分割が可能な端末アプリです。
運用などで複数のサーバのログを同時に確認する際に重宝します。


sudo apt-get install terminator

Cairo Dock

OS XのDockのようなアプリケーションランチャーで、見た目や挙動など様々な項目をカスタマイズできる高機能なアプリケーションです。
私はUbuntu標準のものがイマイチ使いづらいかったので隠し、Cairo-Dockを使っています。


sudo apt-get install cairo-dock

フォント

コーディングやブラウジングをする際に、私はUbuntu標準のフォントがイマイチ合わなくて、システムフォントを少し丸っこいM+系のフォントに変更しています。
標準リポジトリに入っているものですと、MigMix、それ以外ですとMgen+などが有名です。


sudo apt-get install fonts-migmix

自動インストール

OSをインストールしたあと、下記のシェルスクリプトを実行することで上記のアプリケーションをすべてインストールすることが可能です。
自分専用のスクリプトを作成することで、新しいパソコンに移行する際にも簡単に環境構築が出来ます。

install.sh


#!/bin/bash
sudo apt-get update
sudo apt-get upgrade -y
wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
sudo sh -c 'echo "deb http://archive.canonical.com/ubuntu/ vivid partner" >> /etc/apt/sources.list.d/canonical_partner.list'
sudo add-apt-repository -y ppa:webupd8team/atom
sudo add-apt-repository -y ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get -y install ssh vim build-essential chromium-browser google-chrome-stable atom sublime-text-installer geany geany-plugins subversion git meld virtualbox virtualbox-guest-additions-iso filezilla skype gem npm docker.io vagrant cairo-dock fonts-migmix
sudo gem install sass
sudo npm install -g less
cd /usr/bin/
sudo ln -s nodejs node
git config --global diff.tool meld
git config --global merge.tool meld
cd
mkdir bin
cat << \EOF > bin/svn-diff-meld.sh
#!/bin/sh
left="$6"
right="$7"
meld "$left" "$right"
EOF
cat << \EOF > bin/svn-diff3-meld.sh
#!/bin/sh
mine="$9"
older="$10"
yours="$11"
meld "$mine" "$older" "$yours"
EOF
chmod u+x bin/svn-diff*
svn --version
sed -i".org" -e "s|^\[helpers\]|[helpers]\ndiff-cmd = $HOME/bin/svn-diff-meld.sh\ndiff3-cmd = $HOME/bin/svn-diff3-meld.sh\ndiff3-has-program-arg = false|g" .subversion/config

※今回ご紹介したもの以外に、インストールしないと何かと不便なため、SSHサーバ、Vim、開発用ツールを追加しています。
※上記スクリプトは仮想環境上のUbuntu 15.04 日本語 Remixで動作確認をしていますが、すべての環境で正常に動作する保証はありません。実行にあたっては自己責任でお願いいたします。
※これはほんの一例です。いろいろお試しいただき、自分にあったスクリプトを作っていただければと思います。

インストール後の画面(上記以外にもいろいろインストールして諸々設定し終わったあと)

設定後の画面

最近のUbuntuやその他のLinuxディストリビューションはだいぶ使いやすくなっており、マークアップやプログラムをする際に問題なく使えます。
また、開発に必要な様々なツールもコマンド一発でインストールが可能ですので、以前に使っていたWindowsと比べると開発しやすいと感じます。
まずはVMWareやVirtualBoxなどの仮想環境にインストールして試してみてはいかがでしょうか。

仕事のご依頼・お問い合わせ

更新情報をお届けします

Facebookもよろしく!

Pick Up! おすすめ記事

制作実績一覧

カテゴリー

Twitter

この記事を読んだ人はこんな記事も読んでいます。

カテゴリ別

パンセのタネ トップへ戻る制作実績