ローカルのウェブ開発環境を構築中！

配信：衣田史景 2019年2月16日 9時13分配信｜カテゴリ：サイト制作

個人ブログの更新は久しぶりですね。現在サイト大規模リニューアル中で、あまり力を入れていなかった「スマホレイアウト」にもようやく本腰あげて本格的に作っていこうと思っています。

昨日スマホサイトを作る過程で、プロとか本格的にサイト作りしてる人ってどうやってテストしているんだろうと今更ながら調べてみることにしました。アクセス数が少ないことを理由にして、リスクも考えずに公開しながらデザインするという恐ろしい方法で３年以上このサイトを運営しておりました。

そして色々調べ上げた結果、２つのソフトをインストールすることになりました。

高機能テキストエディタ「Brackets」

正直いつもメモ帳に手打ちするように、サーバーのWEBFTPで打ち込んで公開して、修正してを繰り返しておりました。プロとか本格的にウェブ制作してる人からしたらありえないと思うんですけど、ずっと３年間これでやっていました。FTPソフトもちゃんとあるんですけど、使う時はバックアップするためにサーバーからファイルをダウンロードするくらいしか使ってなかったんです…（汗）。

そんな私ですが、テスト環境をつくるためにリアルタイムプレビューしながら打ち込めるテキストエディターがほしいなと思っていました。「CODE PEN」とかブラウザでHTMLとかCSSで打ち込んでリアルタイムでプレビューされるなら知ってたんですけど、ローカル環境で保存したファイルで使いたいって思っちゃったんですよね。それを探してみつけたのが「Brackets」です。

ほしかったライブプレビュー機能の他にも、htmlのclassを右クリックしてクイック編集を選択すると、そのclassのCSSを表示してすぐに編集できたり、色を指定したいときにカラーピッカーの表示、拡張機能を使って自由自在にカスタムできるなどなど。phpとか多くの言語でも使えるのがいいですよね。これに慣れちゃったら他のに戻れなさそう…。

これだけ高機能で無料なんて恐れ多いです…。高価で高機能のソフトが多いAdobeが開発したソフトみたいで、さすがAdobeさん…それを無料で使えるなんてこんなに嬉しいことはありません。これからめちゃくちゃ使いこなしていこうと思います。

ワードプレスのローカル環境を簡単に構築できる「Bitnami」

phpでライブプレビューを使うにはローカル環境が必要だという記事をみて、「Bitnami」を入れてみました。ローカル環境を作るのってかなり面倒くさいイメージがあったんですが、簡単にインストールできました。

これでBracketsでタグ打ち込んで保存するだけで、サーバーにアップする前にデザインを確認できます。ようやウェブ開発らしくなってきました。ただ残念ながらライブプレビューはできませんでした。phpだと保存しないとダメっていう記事もありましたが、ワードプレスでライブプレビュー動いてるって人もいるみたいなので、よくわからないなあ。

写真はローカル環境でテストサイトを表示させてみたところです。アイキャッチが反映されていませんが、好きなだけデザインいじり倒せると思うとうれしいですね。デザインばっかり夢中になって、記事更新が滞る可能性がありそうなのが怖いですけど（笑）。

一筋縄ではいかない既存サイトの反映

テーマファイルをFTPソフトでダウンロードしてハードディスクやクラウドストレージに保存してバックアップ取ったあとに、ローカル環境に移行。さらに記事などもワードプレス標準エクスポート・インポート機能をつかって移しました。が、これでまったく同じサイトになるかとおもったら何故かレイアウトが崩れている！

恥を晒してばかりの記事になってしまいますが、「カテゴリーID」が変わっているせいでカテゴリーで条件分岐しているphpが機能せず、空白部分ができたせいでレイアウト崩れを起こしてしまったのです。

カテゴリーID一括で変更するプラグインとかないのか！って思ったら、ない…。調べてみるとデータベースをいじらないといけないらしいではないですか…。それはちょっと怖いし、めんどくさい…。

そこで考えついたのが条件分岐をcat＝番号にしていたのを、category_name=スラッグ名にすることでした。カテゴリーのスラッグ名はインポートして共通なものになっているので、データベースをいじらずにphpファイルをいじればいい。試しにやってみるとビンゴ！しっかり反映されました。かなりめんどくさい作業ですが、変にデータベースいじるのも怖いので遠回りですが安全な道を選択します…。