読者です 読者をやめる 読者になる 読者になる

WordPressをローカル環境で動かす方法/Mac編

Web開発環境を整え、WordPressをローカル環境で動かすための手順を備忘録として残しておきます。OSはMac OS Xです。

 

目次

 

開発環境を整える 

WordPressの動作環境は次のようになっています。

f:id:sakuralego:20170208094952p:plain

PHPはプログラミング言語、MySQLはデータベースのことですが、PHPはWebサーバー上でしか動かないので、ローカル環境で動かしたい場合、PHPとMySQLのほか、Apache(アパッチ)というWebサーバのソフトを自分のパソコンにインストールする必要があります。

そこで、MAMPというApache、MySQL、PHPがパッケージされたフリーソフトを導入します。

 

MAMPのインストール

まず、MAMPのダウンロードページから最新版をダウンロードします。

MAMP & MAMP PRO 4.1と有料版のMAMP PROについても併記されていますが、これで大丈夫です。

f:id:sakuralego:20170208092024p:plain

 

 ダウンロードできたらインストーラーを起ち上げます。

f:id:sakuralego:20170208092600p:plain

続けるをクリックしていきます。

f:id:sakuralego:20170208092627p:plain

f:id:sakuralego:20170208092645p:plain

同意するをクリック。

f:id:sakuralego:20170208092717p:plain

無料版だけを使いたいので、カスタマイズをクリック。

f:id:sakuralego:20170208092907p:plain

MAMP PROのチェックを外して、インストールをクリック。

f:id:sakuralego:20170208093130p:plain

コンピュータアカウント名(ユーザ名)とパスワードを入力して、ソフトウェアをインストールをクリック。

f:id:sakuralego:20170208093321p:plain

インストールが完了したら閉じるをクリック。

f:id:sakuralego:20170208093431p:plain

 

MAMPの起動

LaunchpadからMAMPを起動します。

f:id:sakuralego:20170208093757p:plain

サーバを起動をクリック。

f:id:sakuralego:20170208093947p:plain

許可をクリックすると、ApacheサーバーとMySQLサーバーが動きます。

f:id:sakuralego:20170208094053p:plain

 

MAMPの設定

初期設定時のドキュメントルートは、「Machintosh HD /Applications/MAMP/htdocs/ 」になっています。つまり、「 /Applications/MAMP/htdocs/index.html」というファイルは、「http://localhost:8888/index.html」に対応しています。
そこで、この「8888」というポート番号を変更します。

MAMPのPreferences...をクリック。

f:id:sakuralego:20170208111402p:plain

Preferences..のスタート画面のCheck for MAMP PROを外しておきます。(今回の手順には関係ないけど)

f:id:sakuralego:20170208111752p:plain

すぐ隣のPortsというタブを開き、Set Web & MySQL port to 80 &3306をクリックして、okを押します。

f:id:sakuralego:20170208111926p:plain

これで「 /Applications/MAMP/htdocs/index.html」というファイルが、「http://localhost/index.html」に対応するようになりました。「http://localhost」で次の画面になれば大丈夫です。

f:id:sakuralego:20170208112312p:plain

 

MySQLの設定

次はWordPressに必要なデータベースを作成します。

Open WebStart pageを開きます。

f:id:sakuralego:20170208112916p:plain

ツールからphpMyAdminを選択。

f:id:sakuralego:20170208113111p:plain

データベースのタブをクリック。

f:id:sakuralego:20170208113243p:plain

任意の名前でデータベースを作成します。わたしはwordpressにしました。

f:id:sakuralego:20170208113457p:plain

 

WordPress

公式サイトからWordPressの最新版をダウンロードします。

f:id:sakuralego:20170208104207p:plain

WordPressの設置

WordpressフォルダをフォルダごとMAMPの中の「htdocs」にコピペします。アプリケーション > MAMP > htdocs という階層になっています。

f:id:sakuralego:20170208104718p:plain

 

WordPressのインストール

http://localhost/wordpressにアクセスします。

さあ、始めましょう!をクリック。

f:id:sakuralego:20170208112454p:plain

 WordPressで使うデータベースの情報を入力します。

f:id:sakuralego:20170208113817p:plain

データベース名は先ほど作ったデータベース名です。ユーザー名とパスワードは、Open WebStart pageをクリックしてアクセスしたMAMPのようこそページに書いてあります(通常、両方ともrootになっているはず)。

f:id:sakuralego:20170208113935p:plain

送信を押すと次のような画面になるので、インストール実行をクリック。

f:id:sakuralego:20170208114111p:plain

必要情報を入力してWordPressをインストールします。

f:id:sakuralego:20170208114344p:plain

ログイン後、WordPressのダッシュボード画面が表示されるので、これでおしまいです。

 

 

 

 

 

 

 

独学でWeb制作を学ぶ方法

10年ぶりのWeb制作。

興味の赴くままに目標も立てずに始めたわけですが、勉強をしていくとやっぱり目標(達成感)が欲しくなってきます。そこで、最終目標はクラウドソーシングでWeb制作ができるほどのレベルまでスキルを高めることにしました。

現在のWeb制作の標準は、スマホの普及していなかった10年前と随分異なるものなので、自分はまったくの初学者と同じと考えて勉強は進めていきたいと思っています。ちなみに、HTML5は2014年から、CSS2.1は2011年からです。

 

Web制作の勉強法

ここでWeb制作の勉強法を自分用にまとめておきます。

HTML5とCSS3のスキルを身につける

ひとまず「HTML5&CSS3デザイン」と「レスポンシブWebデザイン」という2冊の書籍を買ったので、こちらで勉強中です。

 

デザインスキルを高める

作っていた当時もいろんなサイトをみて、感覚を養っていましたが、またこれを始めたい。本当はまったくのゼロから絞り出せる才能があればいいんですけどね。

配色の学び方は本で勉強をするのもいいですが、カラーコーディネーターの講座など1日からあるので、こういったものを利用していくのもいいかなと思っています◎

 

JavaScriptを学ぶ

こちらはHTMLやCSSよりも忘れているのでしっかり学びたいところ「HTML&CSS3デザイン」の著者、狩野祐東さんがJavaScriptの本も書かれているようなのでこちらを利用するつもりです。ほかにも、PHPの本なども書かれているのでおいおい読んでいきたいです。

 

WordPressを学ぶ

HTMLとCSSの勉強をしていると、綺麗なマークアップを目指して自分で何から何まで作りたくなるんですよね。でも、実際問題、サイトを運営していくとなったり、仕事として受注するということを考えた場合、CMSに頼らないサイトづくりは現実的ではないですね。なので、やっぱりWordPressの勉強は必須。

目標は独自テーマの制作です。ポートレートにもなるので何パターンも作りたい。

 

SEOとアクセス解析を学ぶ

将来的に(もしかしたら)仕事としてやっていきたいのであれば、クライアントのニーズに応えるためにもこちらも必須のものとして勉強していかなければですね。

ただ、これは本を読みながらうんうん言ってても分からないものなので、自分のサイトを作って運用する必要がありそうですね。なので、順番としてはWordPressの勉強をして自分のサイトを立ち上げてからということになりそうです。

 

プログラミングを学ぶ

JavaScriptやPHPといったWeb制作に必要なプログラミングをはじめに、今回はさまざまなプログラミングを学んでいきたいと思っています。専業主婦なので時間だけはあるんですよね (: その時間をお金を稼ぐことにつなげたいとは前々から思っているのですが、子どもがいると、もともと仕事をしていた時間的にも作業的にも要領がいいワーママさんとはちがって、社会人歴がもはやリセットされてゼロに等しい専業主婦にはいきなりはじめるというのはハードルが高すぎて。

まずは勉強ですね。

 

はてなブログ制作の手順

はてなブログテーマ制作の手順については、はてなブログでその手引きが細かく掲載されています。そこで、そちらを参照しながら今回、はてなブログのテーマを制作していきたいと思います。

 

目次

 

実際の作業手順メモ

1. テーマ確認用ブログを開設する

制作作業ようにブログを一つ開設しました。作業用ブログであって公開は趣旨ではないので、非公開ブログとして開設。

 

2. はてなブログで用意されているサンプルエントリーを記事に投稿する

デザインの確認がしやすいように用意されています。

ありがたいですね。

 

3. Boilerplateを土台にする

はてなブログのデザインCSSをカスタマイズする土台に適したサンプルテーマ「Boilerplate」をコピペして、ダッシュボードの [デザイン] [カスタマイズ] [デザインCSS]に貼り付けます。

サンプルテーマには、CSSをプログラム的な書き方ができるLESSも用意されているのですが、わたしはこちらはまだ触ったことがないので、今回は大人しく「boilerplate.css」を利用することにしました。Boilerplateのテンプレート置き場には拡張子「.md」のファイルがあるのですが、これはreadmeファイルですね。

 

実際の作業ではローカル環境にフォルダを作り、そこにhtmlファイルとCSSファイルをつくって、「boilerplate.css」でコピペしたものを貼り付けて作業しました。

わたしはmacユーザーなのですが、テキストエディタにはBracketsを使っています。

 

4. はてなブログの構成を確認する

  • トップページ
  •  - パーマリンク(記事ページ)
  •  - Aboutページ
  •  - Archiveページ
  •  - Archive/Categoryページ
  •  - Searchページ

この辺りはFC2と変わらないようです。

 

5. テーマ制作に必要なタスク、チェックリスト

  • ブログタイトル
  • ブログの説明
  • 記事
  • 日付
  • カテゴリー
  • 「編集」リンク
  • キーワードリンク
  • 記事下の広告
  • コメント欄
  • サイドバーモジュール
  • プロフィール、最新記事などの各モジュール
  • ページャー
  • フッターリンク
  • Aboutページ
  • Archiveページ
  • カテゴリーのパンくずリスト

これらのCSSを修正する必要が有ります。

ここまでははてなブログの用意している「はてなブログテーマ制作の手引き」に書いてあるとおりです。「はてなブログテーマ制作の手引き」にはテーマを配布することを前提に注意点などの記載が続いています。

 

6. はてなブログのHTML構造を確認する

これも「はてなブログテーマ制作の手引き」に用意しておいて欲しかった… ググってみると、この構造を分かりやすく図解されている方がいらっしゃるものの、2013年4月のものなので参考にさせていただきつつ、自分でも実際に確認してみようと思います。 

 

Webデザインとプログラミングについて勉強しながら、はてなブログテーマを制作してみようと思う

来月から念願だったはてなブログテーマの制作をしていこうと思います。

わたしは10年ほど前、HTMLコーダーの仕事をほんの少しやっていた時期があって、その頃に少しだけWebデザインやWebプログラミングをやっていたことがありました。知り合いの小さな会社の仕事の手伝いだったので、どんなサイトを作るかという企画からライティング業務までやらせていただき、結構な勉強にもなり、IllustratorやPhotoshopの教室にも通わせていただいたのですが、子どもができた頃にやめて現在にいたります。
それからしばらくは個人のブログを書くこともなければ、SNSでさえやらずにいたのに、陸マイラーの世界を知ってからふたたびWebの世界に惹かれています。

ブログは書きたいという強いテーマがないと長続きしないし、つまらないし、見ず知らずの誰かの興味を惹きつける話題も提供できない。その反面、書きたいテーマさえあれば、現実社会ではなかなか見つけられない趣味の合う人と出会うことができる。
願わくは、PVも稼いで、Google Adsenseなどで収入も得たいところだけど、仕事としてかじっていた時期があるだけに、そういうコンテンツを作る難しさも少しは知っているので、まずは本当に書きたいことを書いて、意見を交換することができる人と会えたら楽しいなーという気分でいまは続けています。

さて、そんなわたしですが、ブログを書くようになったことをきっかけに、もう一度きちんとWebデザインやプログラミングの勉強をしたいと思うようになりました。(プログラミングはWebを意識というより、子どもに教えたいという気持ちからですが。)

 

そこで、まず手始めにはてなブログのテーマを制作してみたいと思います。

 ブログ自体は仕事をしていた頃にFC2でやっていて、テンプレート配布などもしていたのですが、当時はHTML4だったうえ、スマホが普及していなかった時代。しかも、FC2とはてなブログではやれることもちがうんですよね。

HTMLもいじって自由度も高くてというとWordPressを利用する方がいいと思いますが、今後PVを稼ぎたいと思うなら、はてブが一番な気がして、ブログのPV数が安定するまでははてブで頑張っていきたいと思っています。はてなプロで2年契約もしちゃいましたしね。契約が終わった頃にはWordPressに移行していたいと思います。

 

今回、はてなブログ制作と並行して、Webデザインの勉強をするべく、とりあえず書店で見かけてよさそうに見えた書籍を2冊購入しました。

  • HTML5&CSS3デザイン きちんと入門/狩野祐東 著
  • レスポンシブWebデザイン 「超」実践デザイン集中講義/山崎大助 著

 さて、頑張ります!

本:スキップ:北村薫

三冊目の本は、平成7年に新潮社より刊行された北村薫さんのスキップ。北村薫さんは直木賞を受賞されている実力派ベテラン作家さんですが、わたしは初めて北村薫さんの作品を読みました (:

冒頭の一文は、第一章の書き出しです。ここからどんな展開になっていくのか、ワクワクさせるようなテンポ感です。

昭和40年代の初め。わたし一ノ瀬真理子は17歳、千葉の海近くの女子校二年。それは9月、"大雨で運動会の後半が中止になった夕方、わたしは家の八畳間で一人、レコードをかけ目を閉じた▶︎▶︎目覚めたのは桜木真理子42歳。夫と17歳の娘がいる高校の国語教師。わたしは一体どうなってしまったのか。独りぼっちだーーでも、わたしは進む。心が体を歩ませる。顔をあげ、<わたし>を生きていく。「裏表紙」より

続きを読む

本:白河夜船:吉本ばなな

二冊目の読書は1989年に発表され、映画化もされた吉本ばななさんの作品「白河夜船(しらかわよふね)」。ブログに書き起こすまで存じ上げなかったのですが、2015年に映画化もされていたのですね。

友達を亡くし、日常に疲れてしまった私の心が体験した小さな波、小さな蘇生の物語にすぎなくても、やっぱり人は丈夫なものだと思う。こんなことが昔もあったかどうか忘れてしまったが、ひとり自分の中にある闇と向き合ったら、深いところでぼろぼろに傷ついて疲れ果ててしまったら、ふいにわけのわからない強さが立ち上がってきたのだーー。

心をおおった暗い闇と閉ざされ停止した時間からの恢復を希求した「夜」の三部作。「裏表紙」より

続きを読む

本:エリカ:小池真理子

久しぶりの読書一冊目は、小池真理子さんが2003年から約一年半、婦人公論で連載していた小説「エリカ」。

急逝した親友の告別式の夜、その不倫相手と、二人で飲んだのをきっかけに、エリカは、いつしか彼との恋愛にのめり込んでいく。逢瀬を重ねていった先には何が……。高ぶるほど空虚、充たされるほど孤独。現代の愛の不毛に迫る長編。 「裏表紙」より

続きを読む