リペアPCとopenSUSEでWordPressサイト構築環境を作るお話

-または勉強会に持ち込むと微妙な空気が流れるマシン量産プロジェクト-

はじめに

本稿では比較的手に入りやすく持ち運びのしやすいコンピュータを用意し、リナックスディストリビューションの一つopenSUSEをベースとしたWordPressサイトの構築環境を作成します。
前半は機器とOSのセットアップ、後半は開発環境の構築を行い最後にWordPressの子テーマを作成する構成となっています。

この投稿は
「WordPress Advent Calendar 2015に参加したかった人達の Advent Calendar 2015」
12/21のエントリです。
…【12/20】【12/21】【12/22】…

参加できなかったほうはこちらです。WordPress Advent Calendar 2015

機材準備編

企む

以下のようなテーマを踏まえて必要な機材の検討を行いました。

Linuxが動く（とおもわれる）
XAMPPとかdockerとかwockerとかvccwとか仮想環境とかなんかよくわからんけど全部入りにしたい
お財布に優しい
勉強会等で「まあ、でかいパソコン」と言われない

本体価格2-3万円辺りで購入できる中古のノートパソコンのうち、実用的なCPUは第1、第2世代のCORE i5になりそうです。持ち運びを考慮すると13インチ程度のものがよさそうでした。B5ノートなどとも呼ばれています。中古品はリスクもありますが、この価格帯の新品ノートではCPUの性能でやや不安が感じられます。メモリとHDDは新品交換を前提にしています。本体の搭載容量よりも最大積載容量を重視しましょう。

購入する

比較検討の結果下記の機材を購入しました。
価格は合計で４万円ちょっとになります。(２０１５年１２月現在)

Amazonで購入した中古のLet’snote CF-N10
増設用のSDRAM４GB
交換用のディスクSSD256GB

CF-N10の最大メモリ積載容量は8GBですが16GBで動作できることもあるようです。HDDは取り外してSSDに交換することにしました。よく持ち運ぶことを目的としましたので物理的に回転するディスクがないのは安心です。また省電力化にもつながります。そしてこれは後で実感することになりますが、とてもレスポンスが早いです。データの記録容量を重視する場合はHDDでも構いません。その場合価格も低価格に抑えることが可能になるでしょう。

機器をセットアップする

機材は全てAmazonで滞りなく揃えることができました。

本体からHDDを取り外し、FilezillaでWindowsのバックアップイメージを作成します。取り外したHDDは丁重に梱包して保管しましょう。以後本稿では特にWindowsについては触れません。
メモリとSSDを本体に取り付けて機器の状態をチェックします。
本体は中古で購入しましたので念の為BIOSの設定も初期状態に戻しておきます。

OSをインストールする

セットアップした機器が問題なく動作することを確認したらOSのインストールを開始します。
まずはインストールメディアを作成しましょう。openSUSEの公式サイトから最新版のisoファイルをダウンロードし、DVDに書き込みます。本稿で使用するマシンCF-N10には光学ドライブが搭載されていませんので、SUSE Studio ImageWriterを使用してUSBメモリにisoファイルを書き込みました。もちろん外付けの光学ドライブを利用しても構いません。

それではインストールメディアを本体に挿入して起動してみましょう。ドキドキします。

起動画面が表示されました。インストールを開始します。以降はセットアップウィザード形式でいくつかの質問と入力フォームが続きます。およそ数分から数十分程度でインストールが完了することになるでしょう。今回はなんかよくわからんツイートをしているうちにインストールが完了していました。SSDすごい。

インストールが完了して無事にデスクトップが表示されました。Linuxではいくつかのデスクトップ環境の中から任意のものを指定して利用することができます。複数の環境を用途に合わせて切り替えながら使用することも可能です。本稿ではKDE Plasma 5を採用しています。

OSを最新の状態にする

ついにわれわれはこの自由で広大なデスクトップ環境を手に入れる事に成功しましたので、まず最初にOSを最新の状態に更新する方法を身につけましょう。openSUSEは初期状態で自動更新機能が有効になっていますが、インストールメディアが挿入されていない状態だとうまく自動更新が行われないことがあるようです。YaSTコントロールセンターからリポジトリの設定を行い自動更新が有効になるように切り替えましょう。

リポジトリの設定を行い、インストールメディアがなくても自動更新が行われるようになりました。

環境構築編

アカウント管理と1-クリックインストール: ここからはWordPressサイトの開発環境を構築していきます。
まず最初にアカウント管理ソフトウェアをインストールすることにしました。これはとても心強いものです。本稿ではクロスプラットフォームで活用できるKeepassを採用しました。インストールするソフトウェアはKeepassXです。
openSUSEでソフトウェアをインストールするにはいくつかの方法が存在します。今回はブラウザから利用できる1-クリックインストールの仕組みを使用しました。
正常にインストールが完了するとアプリケーションメニューにKeepassXの項目が追加されています。

うまく起動できました。
ローカル環境: アカウント管理に関する漠然とした不安を解消しましたので、今回セットアップしたコンピュータ上でWordPressを動作させることができるようにローカル環境を構築します。
WordPressをローカル環境で動作させるには、WockerやVCCWなどいくつかの方法があります。今回は消耗編としてXAMPPを採用することにしました。レンタルサーバ的な環境を得ることができます。

公式サイトから最新版のファイルをダウンロードして黒い画面(本稿ではkonsole)で実行するとインストールは完了です。インストールが完了したら忘れずにセキュリティ設定を実行しましょう。その際、いくつかのアカウントを作成することになりますので、アカウント管理ソフトウェアKeepasXの機能を活用してパスワードの自動生成などを行いながら操作を身につけていきます。

セキュリティ設定を終えたらXAMPPを実行します。ブラウザを開きlocalhostにアクセスして動作を確認しましょう。
コマンドライン: WordPressを動作させる環境が整いました。次はコマンドラインでWordPressを操作できる便利プログラムwp-cliをインストールします。本稿ではWordPressをダウンロードする際に使用します。wp-cliはopenSUSEのリポジトリではなくGitHubで公開されています。公開ページのドキュメントを参考に、インストールコマンドを黒い画面に貼り付けて実行しましょう。

エラーが出ました。とても焦ります。落ち着きましょう。
YaSTコントロールセンターのソフトウェア管理で、wp-cliを実行するのに不足しているプログラムをインストールします。
インストールが完了したら再度wp-cliの実行を確認してみましょう。
統合開発環境: WordPressをインストールする前にソースコードを編集する環境を整えましょう。openSUSEのソフトウェアリポジトリにはEclipseやIntelliJをはじめとした数多くのの開発環境が公開されています。とてもうれしい。もちろんEmacsやvimでも良いでしょう。様々なテキストエディタも存在します。本稿ではNetBeansを採用して開発を進めていきます。

インストール自体はKeepassX同様にワンクリックでインストールが可能です。NetBeansが起動したらいくつかのプラグインを追加し、PHPとHTMLサイトの開発環境を整えましょう。
WordPressをダウンロードする: 一通りの開発環境が整いましたのでWordPressのインストールを行います。
XAMPPのディレクトリ(フォルダ)はroot権限(管理者権限)が必要な場所にインストールされていますので、root権限を使用してWordPressをインストールするためのディレクトリを作ります。ディレクトリの所有者もrootから現在のユーザに変更しておきます。
ブラウザでwp-cli.orgのサイトに進み、コマンドに関するドキュメントの中からcoreのdownloadについてのページを参照します。ドキュメントを参考に、WordPress日本語版を任意のディレクトリにダウンロードするコマンドを黒い画面で実行しましょう。

エラーが出ました。本当に焦ります。落ち着きましょう。
wp core downloadを実行するために必要なプログラムをインストールします。エラーメッセージによると、ssl関連の問題のようです。YaSTコントロールセンターのソフトウェア管理を起動して適切なそれっぽいプログラムをダウンロードしましょう。
エラーが出ました。もう泣きそうになります。落ち着きましょう。
人生はトライアンドエラー。Linuxの世界もまた然りといいます。エラーメッセージを読み、再度必要なプログラムをインストールします。wp core downloadが成功すると、指定したディレクトリにWordPressのデータが展開されていることが確認できます。
WordPressをインストールする: XAMPPを実行し、ブラウザでWordPressのインストールディレクトリにアクセスします。
XAMPPの起動、終了は黒い画面から実行しますが、メニューウィンドウを表示させることも可能です。アプリケーションメニューに起動コマンドを登録していつでも起動できるようにしておくと便利です。
引き続きwp-cliと黒い画面でインストールを続行することも可能です。本稿ではブラウザからのインストールを行います。

WordPressが使用するデータベースを作成しましょう。phpMyAdminから新規データベースとユーザの作成を行います。
必要な情報が揃ったらWordPressのインストールページに入力します。随時KeepassX(アカウント管理ソフトウェア)と連携して作業を進めましょう。もちろん抜群の記憶力を発揮して頂いても構いません。

途中、怪しい挙動が見られましたが無事にローカル環境でWordPressの起動を確認することができました。
子テーマを作成する: ようやく本稿でセットアップしたマシン「Let’s note CF-N10改」でWordPressが動くようになりました。
ここはローカル環境。なにものの束縛も受けることなく自由にWordPressをつついたり引っ張ったり転がり回したりすることができるようになったといえます。ディスクの許す限り入れ放題です。どんどん入れたり消したりして経験を重ねていきましょう。ここが地獄の一丁目です。
最後に統合開発環境のNetBeansを使ってWordPressの子テーマを作成するサンプルを紹介し、本稿を締めくくりたいとおもいます。
NetBeansを起動して新規PHPプロジェクトを作成します。ソースフォルダは任意の場所で構いません。次の入力欄に進むと、「ファイルをソースフォルダから別の場所にコピー」という項目があるのでここにチェックを入れ、WordPressのインストールディレクトリにあるテーマディレクトリを指定します。
WordPress Codex日本語版のドキュメントを参考にしながら子テーマに必要なファイルを作成しましょう。
スタイルシートの記述を追加し、背景の色を変更することに成功しました。Hello! WordPress! この小さな変化が全ての始まりの形になるといえるでしょう。