【Webサイト制作】WordPressの勉強を始めました。その1:いきさつとドットインストール! | muridonのいろいろやってみた!ブログ

muridonのいろいろやってみた!ブログ

日々の節約生活、100均、iPad、iPhone、AppleWatch、パソコン、グルメ、FX、株 ・・・ などいろいろ

おはようごさいます!

インターネット創世記化石と呼ばれてるmuridonです。三葉虫
9月4日、日曜日ですね。目

 

・・・当時はインターネット接続に20円/分、隣町への電話代が10円/分で、合計30円/分でした。

毎晩必死目になって、playboy.comを見たり、各サイトの事を調べたりして

インターネットマガジン(廃刊ですが、読みたい方はこちらに投稿してました。

((注)H系じゃなく、技術系の記事ですよ)

 

ホント、あの頃は楽しかったです。ニコニコ

 

その後、真面目に仕事をするようになり(嘘口笛)、すっかり離れていたのですが、

20年以上も経った今は、当時とは大きく変わってるんですね。

乗り物が自転車から電気自動車に変わったようなもので、知らないことだらけですショボーン

 

 

・・・で、今日は「WordPressの勉強を始めました。その1」です。目

 

実はあまり知りませんでした。

MicrosoftOfiiceのWordが紙の書類を作るのに対して、

WordPressはホームページを作るものですね。

 

そんなレベルの知識で、急遽勉強する必要性が出てきたんです。目

 

# ちなみにブログの新テーマ「Webサイト制作」を作りました!

  「iOSプログラム作成」が、作っただけで放置されているのはナイショです。てへぺろ

 

 

いきさつ

 

実は、知人からホームページ(業務用)の更新を頼まれました。

(ちなみに依頼者は一般人の方で、これまでは業者に依頼していたようです)

 

更新といっても簡単なもので「文章の変更」「写真の入れ替え」

だけだったので、簡単に更新できると思ってました。口笛

 

とりあえず、ページのURLとサーバーのある「さくらインターネット」のID、パスを聞いて、

自分なりに調べてみました。

 

 

・・・と、いっても使ったことがないのでサッパリわかりません。ショボーン

HPとコントロールパネル(管理画面)を行ったり来たりしているうちに、

そのHPがWordPressで作られていることがわかりましたが、

どこにもWordPressの設定が見つかりません。

どうも設定画面のURLがあるようで、そこから入れました。

 

・ http://サイト名/wp-login.php

 

 

・・・でも、入れませんでした。
サーバーのアカウントと、WordPressのアカウントは別なんですね。
ショボーン

 

依頼者に再確認し、ようやくログインできました。ニコニコ

 

 

ダッシュボード(管理画面)ですが、当然サッパリわかりません。

もう何年も更新されてないらしく、アップデートの更新要求も出ています。目

 

 

・・・が、必要性が全く、わかりません。

他にも、いくつかのプラグインのアップデートの表示が出ていますが、当然わかりません。

 

ちょっと触ってみた感じ、このまま無理矢理更新することもできそうですが、

業務用サイトなので失敗は許されません。ショボーン

最低限

 

・ 更新前後のデータのバックアップ

・ アップデートの要否確認

・ 更新前に、依頼者への更新内容の確認(オフライン)

 

ぐらいはやっておきたいので、真面目に勉強してから作業することにしました。目

 

 

ドットインストールへ!

 

ドットインストールは、以前こちらの記事ダウンで紹介させていただきました。目

・・もう半年前ですねショボーン

 

こちらの学校にWeb制作関係の講座があったことを思いだして探してみました!

 

★  WordPress入門 (全23回)    ←無料です!

http://dotinstall.com/lessons/basic_wordpress

 

 

まさにコレ!ですね!目

最終的にできるようになることは・・・

 

 

バッチリですね!グッド!

これを受講することにしました。おねがい

 

ただ、さすがに全く準備が無い状態では無理のようで

WordPressを自前のパソコンにインストールするために

【旧版】ローカル開発環境の構築 (全22回) 」(リンクはこちら)が必須でしたので、

先に、これを受講することにしました。ニコニコ

 

・・・ところが、これを見に行ったところ、既に新しい2つの講座が案内されていました。

(ドットインストール内の動画でのリンクやソフトのバージョンは、

あくまでも作成時のものですので古い場合が多々あります

その場合、動画内のコメントやHP上に新バージョンへの案内が記載されています)

 

私は、Mac版とWindows版のうち、Mac版を選択しました。目

 

 

※ 実は、私の受講後の8/26に「必要となる知識」が更新されました。

 

 

ローカル開発環境が、旧版から現状版に変わっています。目

さらに、細かい部分を考えると、ローカル環境の構築だけではちょっと無理そう

なので、多くの講座名が追加されたという結果です。ショボーン

 

 

ローカル開発環境の構築 [MacOS X編] (全9回)

http://dotinstall.com/lessons/basic_localdev_mac

 

私のMacにはiPhoneアプリの開発環境の為に最新OS(El Capitan 10,11,6)を

インストールしていましたので、すんなり進むと思っていたらいろいろありました。

とりあえず、メモったことを転記させていただきます。

 

※ 以下ダウン細かい話が続きますので、必要ない方はスクロールしてください。おじぎ

 

 

#01 ローカル開発環境を構築しよう
・ローカルにサーバー(CentOS)を立ち上げる。
・VagrantとVirtualBoxを使う。
・ターミナルはMacOSのターミナルを使う。
・ファイル転送はCyberduckを使う。
・サーバーに入れるのはPHP,Ruby,Python,MyQL,Apache。
 
#02 VirtualBoxを導入しよう
・Vagrantを入れるにはVirtualBoxが必要。
・ ダウンロードはこちらだが、なぜかリンクの文字はamd64になってた。
デスクトップにWeb開発フォルダを作りダウンロード。
VirtualBox-5.1.4-110228-OSX.dmg
だったので、間違いなし。
ところが、待っても待っても検証中のままでインストールが始まらない。
こちらの現象の模様。
理由はSIPという新しいセキュリティシステムらしい。
・ここを参考にマウント
・そして、インストール。
「sudo installer -pkg /Volumes/VirtualBox/VirtualBox.pkg -target /Volumes/Macintosh\ HD」
(最後の「Macintosh\ HD」は謎。なぜか空白スペースではダメ。)
・そして確認。
「VBoxManage --version」

どうも、El Capitan特有の問題(?)があるみたいですね。

インターネットが無かったら、完全に終わってました。ショボーン

 

#03 Vagrantを導入しよう ベーグラント
で、落とせたのは vagrant_1.8.5.dmg (動画は1.7.1)
しかし、不具合あるとのことなので、1.8.4を落とす。
ここからdmgのファイルをクリックするとダウンロードがはじまる。
・こちらはSIPの影響なしに、動画と同じで完了。

 

#04 VagrantでCentOSを立ち上げよう

・フォルダの作成、移動は問題なし。

・「vi Vegrantfile」として編集。 VIエディタは久しぶりで完全に忘れてましたショボーン
・ipアドレスが書いてある行に行くが「A小文字Xを押してください」の意味が不明。
aでインサートモードに行くが、xはそのまま表示されてしまう。
とりあえず、deleteキーを使って同じ体裁にした。(#を消しただけ)
・一旦ウインドウを消してやり直したが、swapファイルが残ってるとのこと。
これを消して編集に入った。
動画の下の方の説明を見るとaなんてどこにも書いてないので、
xを押して#を消し、:wqでクローズした。
・動画の説明通り「Vagrant up」するが、エラーメッセージ。
・下の方の補足情報を見ると、VirtualBox5.1は使えないので5.0にせよとのこと。
とりあえず、ここで中断!!!

補足情報のバージョン表記を見逃してました。大失敗!!ショボーン

・今度は、VirtualBox5.0のダウンロード
から落としたら、VirtualBox-5.0.26-108824-OSX だった。
・インストールは5.1と同様にそのままではできず。
アンインストール方法がわからないので、そのまま上書きインストール。
マウントは手動でやった状態で、インストーラーのみ実行。
「sudo installer -pkg /Volumes/VirtualBox/VirtualBox.pkg -target /Volumes/Macintosh\ HD」
(全く同じ)
無事成功した( The upgrade was successful.と表示)ので、「VBoxManage --version」を実行。
5.0.26r108824と表示された。
・Vagrantを再インストールしようとしたが、検証中のままで先に進まず。なにか様子が違う。
とりあえず、確認の方へ進む。
・cd MyVagrant -> cd mycentos -> vi Vagrantfile
したところ、昨日の変更も残っているもよう。
・viでファイルを編集しなおしてから「Vagrant up」を実行し、動画と同様になり完了!
 
#05 CentOSの設定をしていこう
・vagrantへのログイン
「vagrant ssh」としたところ、カーソルが「[vagrant@localhost ~]$ 」に変わった。
・gitツールを起動
「sudo yum -y install git」
途中警告が出ているが、動画での説明はないので、そのまま続行
・スクリプトの実行
動画と表示が違うが、終わってるようなので、そのまま続行。
・centos6.5フォルダに移動
「cd centos65」
・run .shの実行
「./run.sh」 ←上の階層のコマンドのよう
[yum update]にかなり時間がかかった。(補足情報に書かれている。)
10分ほどで[install php]になった。
さらにmysqlやrubyがインストールされている模様。
約30分ぐらいで無事終了。
・「exit」でログアウト。
・centosの終了「vagrant suspend」
・「exit」で終了。
 
#06 CentOSを再び立ち上げてみよう
・動画ではターミナルを新規に立ち上げているが、前回の終わりは
「 [プロセスが完了しました]」で終わっている。
ここから何の文字入力も受け付けないので、そのままウィンドウをクローズした。
・cd MyVagrant , cd mycentos , vagrant up を実行。
なんか表示が違って、プロンプトに戻ったので、補足情報にある vagrant reloadを実行。
これでプロンプトに戻る。意味不明。とりあえず、続行する。
・「vagrant ssh」を実行。
カーソルが「 [vagrant@localhost ~]$ 」に変わった。
・「php -v」を実行。
・「mysql --version」を実行。
mysql Ver 14.14 Distrib 5.5.51, for Linux (x86_64) using readline 5.1
・「python --version」を実行。 パイソン
Python 2.6.6
・「ruby -v」を実行。
ruby 2.2.2p95 (2015-04-13 revision 50295) [x86_64-linux]
・「 sudo service httpd status」を実行。 アパッチによるWebサーバー
httpd (pid 2242) を実行中...
以上、確認のみで終了。

 

#07 Cyberduckを導入しよう
・cyberduckはファイル設定ツール
ダウンロードできたのはこれ Cyberduck-5.1.0.20872.zip
勝手に展開してCyberduck.appになった。(OSXの仕様)
これをアプリケーションフォルダにコピー。
・起動し、新規接続をクリック。
・SFTPに切り替え。
・centosで「ip a」と入力し、ipアドレスを確認。
3つ目の「 192.168.33.10」がサーバーのアドレスになるみたい。
・Cyberduckの設定に戻る、サーバーの部分にこれをコピペ。
ユーザー名とパスワードは、どちらも「vagrant」
その下の詳細設定を開き、パスを「/var/www/html」と入力。
・この状態で接続すると動画では「ホスト鍵が不具合」とあるが、
実際には「そのホストは現在システムに認識されていません。」と出る。
その下に「許可されている鍵は90:d8:41:6f:c5:39:1d:54:0d:43:4e:34:dc:f1:d2:6b.」
と出るが、数字は違うものの、ほぼ同じ内容。
そのまま許可ボタンを押すとのこと。
なぜか、うまく入れなかったが、再度Cyberduckを立ち上げ直し設定を1からやったところ、
接続できるようになった。
 
#08 PHPファイルをブラウザから確認しよう
・Cyberduckの環境設定の
ブラウザから「ダブルクリックしたファイルを外部エディタで開く」をチェック。
外部エディタからSublime Text 2を選ぶとあるがインストールしてないので、
そのまま(TextEdit)テキストエディットで開いた。
・新規ファイルでindex.phpを作り、ダブルクリックすると編集できる。
はずだったが、Xcodeが開いてしまう!!
→右クリックでTextEditが選択できた。
・編集しphpの内容を書き込む
なぜか「>」はいらなかった。
・ブラウザにURLを打ち込んで確認「192.168.33.10」
無事表示した!「Hello for Vagrant!」
本来は「/index.php」までらしかったが、なくても表示された。
#09 Hosts.prefpaneを導入していこう
・hostsを編集するツールをgifthubからダウンロードする。
下の方のREAD.MEのダウンロードリンクをクリックすると
ここからHosts-1.3.pkgをダウンロード。
・インストールは、動画になかったが全てのユーザーにインストールを選択した。
Hostsはシステム環境設定にインストールされた。
・+ボタンを押し、192.168.33.10をdev.dpptinstall.comに設定。
・この状態で、safariから「http://dev.dotinstall.com」でアクセスできるようになった!
 
ここまでで開発環境の構築は終わりです。目

基本的に、私のメモをそのまま掲載させていただきましたが、

結構アチコチでハマっていたのがわかると思います。叫び

 

動画との環境の違いや、バージョンの違い、

それと私の知識不足・・・

ホントに大変でした。ショボーン

 

 

そこから先に問題が・・・

 

実は、環境構築までで止まってしまいました。考えが甘かったようです。

 

突然ですが、(Amebaの40,000文字制限の為)以上です!

両講座とも無料なので、よかったら受けてみてくださいね!チョキ

 

※ このブログを応援していただける方は1日1クリック(1タップ)お願いいたします!ごめんなさい
(ランキング投票され、にほんブログ村のページに飛びます)


にほんブログ村


(おわり)