WEB制作

WEB制作

【WP】ガチで開発するなら必須!! WordPressの開発環境を作る方法の俯瞰的なまとめ

個人のブロガーやアフィリエイターのデファクトスタンダードであり、低予算でやりたい中小企業のオウンドメディアでもよく使われているWordPressで、Webに公開する俗にいう本番環境とは別に、非公開の開発環境を作る方法を考えてみた。

はじめに開発環境やローカル環境の基礎知識について述べる。そんなの知ってるという人は前半は読み飛ばしてOKでござる。

また、ここでは俯瞰的な知識を述べているので、詳細な設定手順などは他サイトを必至に検索されたし。

開発環境とはなんぞ?

個人でしかWeb制作や運営をしたことがないとパッとイメージできないかもしれないが、ほとんどの企業のサイトは公開している(=Google検索に引っかかる)Webサイトとは別に、社内や関係者だけがアクセスできる開発環境というバージョンが存在するのが一般的。

そこでプログラムやデザインのテストをしたり、掲載する記事を事前に載せたりして偉い人が承認すると、Webディレクターなりが本番環境に反映させるという流れがプロの現場では一般的だ。

開発環境の呼び名は人や会社によっても異なり、テスト環境やテストサーバー、検証環境などと呼ばれることもあるが基本的に同じ。似て非なるものにステージング環境という呼び方もあり、こちらはデザインの1px単位の細かな検証もできるように本番と限りなく近づけている環境のことだ。

開発環境はあくまでテスト用なので、本番と同じ状態に同期されているとも限らないので、Webデザイナーは苦労することになるが、ステージング環境が用意されている職場ならストレスを軽減させることができる。というか、むしろ完全同期されていないとデザインがやりづらくてパワハラである。

ローカル環境とはなんぞ?

開発環境は本番と同じようにweb上に存在していて、パスワードやIPアドレスなどでアクセスできる人を限定していることが多い。あるいは社内サーバーなどの場合もある。

本番環境と同じサーバーで動かす方が理想的なのだが、手元のWindowsマシンやMacのローカルに開発環境を構築することもできる。それが名称のまんまだがローカル環境である。

ローカル環境の利点は手元のPCに全てのデータがあるという安心感だろう。容易にデータのコピーや複製ができるので、いじっていてどんなにグチャグチャになっても、最悪でも丸ごとDeliteして元データで作り直せば済むのである。

本番が上がっているサーバー上に作った方が、より本番に近い環境で作業できる利点がある一方で、本番と開発の使い分けに慣れていない初心者が操作にテンパると間違って本番のデータを触ってしまうかもしれない。

ローカル環境だとそういった危険性を下げることができるのだ。

WordPressのローカル環境を作るには

使っている人の多いWordPressだけに解説しているページは山ほどあるが、会社の仕事で使っているプロのエンジニアから、アマチュアまで色とりどりなので、自分に合った方法を見つけるのは困難。

結論から言うと、WordPressの開発環境を素人がサクッと作るのは不可能。

HTMLとCSS(と画像やJS)で出来た静的サイトなら、丸ごとローカルにコピーすれば大体はサイト上に上がっているものと同じように表示できるが、WordPressの場合はその動作の仕組みをまず理解しないとならない。

WordPressが動作する仕組み

WordPressは静的サイトと違って、『PHPのプログラムで作られたWodPress本体やデザインテンプレート』に加えて、記事データや設定など格納された『データベース』で動作している。

かみ砕いていえば、WordPressというアプリを使ってデータベースから必要なデータを読み込ませて、HTMLをリアルタイムに生成しているのだ。

一般的なWebサーバーにはWordPressが動作する環境を備えているが、普通のWindowsやMacのローカルでWordPressを動作させるには、そのための設定が必要となる。

ローカル環境を作るための方法

WorPressで必要なPHPとデータベースが動作する環境を作ればいい。

自力で作る方法もあるが、よく使われるのがWebサーバーの機能をローカルに構築するXAMPPというフリーのアプリ。MACではMAMPという同種のアプリが使われる。

これはWordPressに限らず、ローカルPCでPHPなどサーバーサイドのプログラム開発や学習をする場合にも使うので、その手のことをしたい人は使い方を覚えるのが良いだろう。

XAMPPの場合はインストールしてXAMPPフォルダのhtdocsというフォルダの中が仮想的なWebサーバーとなる。XAMPPを動作させて、その中でPHPのプログラムを実行したり、WordPressをぶち込めば良い。WordPressの場合はデータベースと接続しないとならないので、この設定も適切に行わないとならない。

WorPressでの文字列やURL、色々なプラグインの設定などは大体はデータベース側に格納されているので、データベースの基本的な操作もそれぞれ勉強する必要がある。本番環境をサーバーからコピーしても、ローカル環境に合わせて適切に設定を書き換えないとチグハグな状態になってしまうので、エンジニア的なスキルが必要になる。

超簡単というLocalbyFlywheel

WordPressのローカル環境について検索すると、よく出てくるのがLocalbyFlywheelというお手軽ツール。

これはXAMPPみたいにローカルでWordPressを動作させるためのツールだが、WordPressに特化していて初心者でも使いやすいのが特徴。むしろ、WordPressの仕事をやっているプロも使っているらしい。

だが、これはこれで設定にクセがあったり、マシン環境によってエラーが出て途方に暮れてしまうこともある。筆者も試したが、某サイトに書かれている超簡単な方法でインストールをやったもののエラーで難儀した。

結果的にはLocalbyFlywheelをインストールしたのと同じCドライブで構築しないとならないようだった。エラーを調べても英語の情報ばかりなのも辛いところ。お手軽パッケージにありがちだが、細かくPHPやデータベースのバージョンを選んだりできないし、結局、色々な知識がないと難儀することになる。

まとめ WordPressの開発環境構築は楽じゃない

有料のレンタルサーバーを契約すると大抵は『WordPress簡単インストール』的な機能があるが、開発環境を作るには技術も労力も必要である。

特に、めんどくせーからと本番環境しか作っていなかった稼働中のWordPressサイトを、やっぱりポリシーを変える必要に迫られて途中から開発環境を作ろうと思い立った時は難儀することになる。

経験者からのアドバイスとしては、それなりにちゃんとサイト運営していこうと思ったら、はじめから本番環境と開発環境を『サーバー上』に作るのがベストプラクティスな気がする。といっても、一人でやってる場合はあらゆる作業が2倍近くになってしまうデメリットはあるけどね。

WEB制作

【SEO】専門系ブログと雑記系ブログ、SEOに強いのはどっちか考察したみた

専門分野に特化したブログと、オールジャンル的な様々な話題を1つのブログで綴った雑記系ブログはは、SEOの観点から見るとそれぞれどのようなメリット/デメリットがあるのか考察してみた。

専門系ブログの特長

特定の専門分野を絞って深堀したブログ。

企業のブログなんかは企業自体が一般的に何らかの専門分野を商売にしているので、こちらに分類されることがほとんど。

個人のブログでもメインテーマが明確になっている場合は専門系に分類される。

専門系ブログのメリット

その話題に関連したユーザーを集中的に集客できる。

関連記事なんかで初見の訪問者でも、1ユーザーあたりのPV数を増やすことかが期待できる。直帰率を減らせたり、リピーターになってくれる可能性が高い。

専門系ブログのデメリット

世の中のトレンドやGoogleのコアアップデートなど時流に左右されやすい。

例えば、特定のマリトッツォや高級食パンを題材にしたブログだったら、トレンドが去ってしまった時がそのブログの旬も終わることになる。

雑記系ブログの特長

何の気なしに個人がブログを運営すると、基本的には雑記系になる。

日常の色々なことや、興味のある分野を色々投稿していくのが雑記系ブログだ。企業運営の場合は少数派で、ベンチャー企業の社長とかの「社長ブログ」的な人に結びいてたものなどが中心。

雑記系ブログのメリット

基本的にテーマは何でもいいので、日常の出来事なども含めて投稿できるのでネタに困りにくい。むしろ雑記系ブログでネタに困るようなら、ブログ運営に向いていない。

その時々でトレンドに合わせた記事を投稿できるメリットがある。

雑記系ブログのデメリット

サーチエンジン流入が大半を占めるので、一見の新規客が多くなる。関連した記事が少ないと直帰率が高くなる。

記事やブログの魅力は運営者自身に結びついているので、長期的にアクセスを伸ばそうと思うと戦略的に取り組まないとならない。SNS流入を増やすにはこちらも戦略的にな取り組まないとならない。

ある程度、テーマに一貫性が出てきたら専門系ブログに記事を移行する方法も考えられるが、それなりに移行の手間がある。

ハイブリッドタイプという選択も

世の中のブログは専門系と雑記系の方に、それぞれの良い部分をミックスしたハイブリッドタイプもある。

専門性を持ったメインテーマを主軸に、雑記系も併せて投稿して検索流入を期待するというものだ。

SEOは生き物みたいなもので、特定の専門分野だけだとトレンド次第で流入が確保できなくなってしまう場合がある。その流入現象をトレンドに合わせた雑記系でカバーするというものだ。

本来の専門性を失わずにいれば、お互いのデメリットを打ち消すことも可能なので、3つの目の選択肢としては良いだろう。専門系の流入と雑記系の流入が一緒くたになるので、デザイン性や階層構造には工夫が必要となり運営難易度は割と高いデメリットはある。

WEB制作

Git処女のWebデザイナーがGitでギトギトにならないために独学したこと

Gitは今主流のバージョン管理システムで、ITやWebの現場で導入されている。

Webの現場だと、基本的にはGitで扱えるのがソースコードなど「テキストデータ」で、差分で威力を発揮する性質があるため、プログラミングとかコーディングとかシステム開発寄りのWeb制作現場で導入されている印象。PSDとか画像系のファイルなんかではGitの真価は基本的に発揮できない。

とは言っても、デファクトスタンダードなだけにGitを導入している現場やプロジェクトは増えている傾向が垣間見れるので、Git未経験のWebデザイナーがこっそり独学してみた。この記事はその記録である。

あと、タイトルが昭和生まれ感丸出しだが、そこは絶妙にスルーすること。

とりあえずざっくり用語を覚えないとならない

Git導入の障壁はインストールとかじゃなくて、それ以前に独自用語満載なこと。

日常生活や一般のPCやネットでは聞きなれない用語ばっかりなので、ざっくり意味を頭に入れておく必要がある。

学習にはSoucetreeというWindowsやMacで動くGUIのフリーソフトを使っているので、Sourcetree用語も混ざっているかもしれない。

バージョン管理システム

Gitが主流で今から学んだり導入するなら一択。ファイル更新の差分を記録していって、ゲームで言うセーブポイントみたいなもの。好きな時に好きなセーブポイントを呼び出したり、共同作業している他の人のセーブデータとミックス(Git用語でマージ)したり出来る。

リポジトリ

Gitで管理させているフォルダのこと。1つのPCやサーバーに複数のリポジトリを持つことができる。

ローカルリポジトリ

自分のPC上にあるリポジトリのこと。

リモートリポジトリ

Gitに対応した専用のサーバー上で複数人で共有するリポジトリ。会社とかでGit導入しているって言ったら複数人での作業なので、すなわちリモートリポジトリを扱うということ。

コミット

「結果にコミット」ではなくて、ファイルの変更結果をリポジトリに記録することをGitではコミットという。

ちなみに、RIZAPの「結果にコミット」はキャッチコピー的な和製英語であって正しい英語ではない。RIZAPのせいで混乱しないように。個人的にはRIZAPの株価は結果にコミットしなかった。

.gitignore

リポジトリ内にあるけどGitで管理させないファイルを記録するテキストファイル。何もしないとリポジトリ内にあるファイルは自動的にGitが全て管理してしまう。

ブランチ

作業結果を分岐させた枝分かれのこと。ある地点からリリース版、機能追加版、次期バージョン・・・などと分岐させて作業する時などに使う。ブランチの使い方はチームやプロジェクトによっても違う。

朝食と昼食を兼ね備えた食事のこともブランチというがGitのブランチは別物。

マージ

枝分かれしたブランチを合流、ミックスさせること。

合流させる方法によってファーストフォワード方式、オートマージ方式などがある。基本的に他人が同じ部分を編集してしまった場合は、話し合いか金の力を使って個別に解決しないとならない。

チェリーピック

特定のコミットをピックアップして現在のブランチに適用する操作。日本語で言うと「つまみ食い」「えり好み」という意味。

タグ

そのへんのタグと似たようなもので、コミットにわかりやすいように名前を付けておく機能。「Version1.0」とかが典型的。

リモートリポジトリを使う

Gitの本領発揮というか、会社で使う場合はこっちが想定される。

Gitという技術の総称とは別に、リモートリポジトリの機能を提供するサービスは無償、有償それぞれいくつか存在する。

Backlog

プロジェクト管理ツールでGitのリモートリポジトリも扱える。無料で使えるフリープランもある。日本企業が運営しているので日本語でわかりやすい。

GitHub

初心者がGitと聞くとイメージしてしまうくらいに有名なのがGitHubだが、色々あるリモートリポジトリサービスのうちの一つでしかない。

公開されるリポジトリであれば無料だが、非公開の特定の人だけアクセスできるプライベートリポジトリは有料。・・・だったが、2019年1月から無料プランでもプライベートが選択できるようになった。使えるオープンソース系のソフトとかの置き場所として利用されている場合が多いのは無料だからというのもあるだろう。

BitBucket

Sourcetreeのの開発元が提供しているリモートリポジトリサービス。

プライベートリポジトリが無料で使える。5人以上は課金対象という仕組み。

GitLab

自分でサーバーにインストールして使うようなタイプ。会社によっては導入しているのかもしれない。初心者の個人向けではない。

リモートリポジトリの用語

共同作業だけに用語がわかっていないと意思疎通できないので覚えないとならない。

プッシュ(push)

ローカルリポジトリのコミットとファイルを、リモートリポジトリにアップロードすること。

プル(pull)

リモートリポジトリから変更ファイルと履歴をダウンロードすること。

クローン(clone)

リモートリポジトリの内容を自分のPCにコピーすること。よくGithubからオープンソースのソフトとかをダウンロードしたりするのはクローン。

ハマった所 リモートリポジトリのHTTPSとSSH接続

『サルでもわかるGit入門』という本を見ながら独学をして行ったが、詰まったのがSourcetreeでBacklogにプッシュするところ。

サルでもわかるのに人間の自分がわからんというのはサル以下なのか・・・と心が折れてしまうから、この手のタイトルは毎回辞めて欲しいと思う。

詰まった原因はよくわからなくて迷宮入りしたけど、本に書かれているHTTPSという簡単な手順ではなくて、自分で調べたSSH接続したら一発で上手くいった。おそらく、本よりバージョンが進化しているので設定が違ったりしたことによると思う。

認証させることはGitを使いこなすスキルと関係ないので、接続が上手くいかない時はSSH接続を試すとよい。SSHの公開鍵だのプライベートキーだのはSoucetreeのツールメニューから設定でき、Backlogにぶち込めばよい。あとはSourcetreeの案内に従ってポンポンやってプッシュに成功した。

ここまでやれば、とりあえず処女卒業と言って良いだろう。妄想だけでは限界があるので、あとは実戦で経験回数を増やしていくしかないと思う。