WEB技術メモ

社長のヤミ勉:お名前.comで取得したドメインをxserver上で利用するための設定方法

お名前.comのドメインオークションでドメインを取得したのですが
自社のレンタルサーバはxserverやlolipopなど複数の契約があります。

お名前.com上にあるドメイン名で、xserver上のサーバを参照させるにはどうすればいいのか、手順を調べました。

 

手順1:お名前.com(ネームサーバの設定変更)

  1. お名前.comのドメインナビにログイン
  2. します。「Navi TOP」の対象ドメイン名にて、ネームサーバー欄の「変更する」ボタンをクリック。

  3. ネームサーバー変更画面。「他のネームサーバーを利用」をクリック。
  4. ネームサーバーを、エックスサーバー指定のものに変更。
    • ネームサーバー1 ns1.xserver.jp( 219.94.200.246 )
    • ネームサーバー2 ns2.xserver.jp( 210.188.201.246 )
    • ネームサーバー3 ns3.xserver.jp( 219.94.200.247 )
    • ネームサーバー4 ns4.xserver.jp( 219.94.203.247 )
    • ネームサーバー5 ns5.xserver.jp( 210.188.201.247 )

    注:入力の際、IPアドレスは入れる必要ありません。ns#….jpの部分を入力。
    注:さくらのレンタルサーバの場合のネームサーバーはここを参照。
    注:Lolipopのレンタルサーバの場合のネームサーバについてはここを参照。

  5. 「確認画面へ進む」をクリック。「設定する」をクリック。
    これで、お名前.comのネームサーバーの変更が完了しました。

(参考文献:エックスサーバー マニュアル | レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】)

手順2:xserver(ドメインの設定)

次に、エックスサーバー側で、ドメインの設定を行います。

  1. エックスサーバーのサーバパネルにログインします。
  2. トップページの「ドメイン設定」をクリック(画面右上)
  3. 「ドメインの追加設定」をクリック
  4. お名前.comで取得したドメイン名を入力して「ドメインの追加(確認)」をクリック。
    ドメイン設定から利用開始まで、数時間から最大72時間かかります。

ドメインが利用可能になったら、ワードプレスをインストールしましょう。

手順3:xserver上にワードプレスをインストール

同じ管理画面の「HOMEPAGE」「自動インストール」から「プログラムのインストール」へ。

WordPress日本語版の「インストール設定」をクリック。

参考文献:エックスサーバーにWordPress(ワードプレス)をインストールする方法。http://affiliate-hoikuen.com/archives/571

How to setup CentOS virtual machine environment on Windows (part2) / Windows上にLINUX(CentOS)の仮想マシンを作成する方法(2)

この記事は前回のつづきです。

VirtualBoxをインストールし、参考資料を見ながらVagrantをインストールしCentOS6.5環境をインストールしたものの、SSH(シェル)にログインしようとしてもできませんでした。なぜだろう。

検索していろいろ記事を読んでみると、同様にうまくいかずに苦労している人が少なくないようです。

その後の顛末を記しました。

Vagrantのバージョンは、1.8.1です。vagrant –versionコマンドで確認しました。記事執筆時点(2016.1.24)の最新版です。

CentOS6.5用ボックスファイル(環境設定ファイル)の追加
http://www.vagrantbox.es/
にいくと、現在追加可能なボックスファイルの名前を確認することができます。

コマンドプロンプトから以下のコマンドを入力。
vagrant box add {適当な名前} {boxファイルURL}
{適当な名前}のところには自分で識別するときにわかりやすい名前を入力。今回はcentos6.5をインストールするのでcentos65。
{boxファイルURL}には、導入対象となるボックスファイルが保存されているアドレスを入力します。

入力例:
cd vagrant
vagrant box add centos65 https://github.com/2creatives/vagrant-centos/releases/download/v6.5.3/centos65-x86_64-20140116.box

仮想マシンを作成する
Windowsのコマンドプロンプト(「ファイル名を指定して実行(R)」からcmdと入力するとコマンドプロンプトに入ることができます)から、仮想マシンを作成します。
centosという名前のフォルダを作成します。
今回は、C:直下にvagrantというフォルダを用意し、その下に作成します。

cd c:\vagrant
mkdir centos

作成したcentosフォルダに移動し、vagrantfileを作成します。
cd centos
vagrant init CentOS65

生成が完了したというメッセージが出れば成功です。
dirコマンドを実行すると、vagrantfileが生成されていることが確認できます。

vagrantfileの変更
コマンドプロンプトからnotepad vagrantfileと入力し、vagrantfileを開きましょう。初期設定を変更します。

確認事項1 config.vm.box = “CentOS65” となっていればOK。コメントアウトされている、または別の名前になっている場合は修正する。
コメントアウトされている行は冒頭に半角の#がついていますので、#を削除することでコメントアウトを解除できます。
確認事項2 config.vm.network “private_network”, ip: “192.168.33.10” がコメントアウトされていないこと。されていれば#を削除。
確認事項3 config.vm.synced_folder “../share”, “/var/www/html/share”の追加。

確認事項3は、ファイル共有を可能にするための1行です。
これで、C:\vagrantfile\share というフォルダを仮想OS上でも閲覧可能になります。

C:\vagrantfile の下にshareというフォルダを作成します。
ついで、C:\vagrantfile\shareの下に、index.htmlファイルを作成します。
中身は以下のような簡単なものでかまいません。
(index.htmlファイルの中身の記載例 ここから)
<h1>Hello Vagrant!
(ここまで <hはここでは全角になっていますが、実際に作成する場合には半角にしてください。)

次に説明するCentOSの起動を行った後、以下の状態になっていれば共有フォルダとして認識されていることが確認できます。

【条件1】CentOSを起動し、
【条件2】/var/www/html の下にshareというディレクトリがある
【条件3】shareの下にindex.htmlがある

CentOSの起動方法
コマンドプロンプトから、先ほど作成したvagrantfileのおいてあるディレクトリに移動します。
vagrant upと入力してください。
これで起動可能です。
初回だけ初期設定の関係で3~5分の待ち時間がかかります。
他のvagrantコマンドは、前回の投稿を参照してください。

SSH接続をする
Macの場合はvagrant sshで接続できるそうですがwindowsでは接続できないので、Tera Termを使用して接続します。Tera Term以外でもお使いのsshクライアントソフトであれば接続可能です。まだお持ちで無い方はフリーでダウンロードできます。

Tera Termからのアクセス方法
Tera Termを開き
・ホスト(T) 192.168.33.10 (上記確認事項2で記載のIPアドレス)
・TCPポート 22
・サービス SSH
でOKボタンをクリックしてください。バージョンはSSH2、プロトコルはUNSPEC
vagrant2-1無題

 

ここで接続できないあなた!!!

 

わたくしもここで1週間足止めを食らいました。
下記の記事のリンク、英語記事を見て回っていて気がつきました!

記事を漁っていて気がついたこと:
Intel Virtual technologyがBIOSレベルでenableになっていないとVirtual machine自体とのPC本体とのコミュニケーションがうまくいかないらしい。

私の行った対応:
私の使っているThinkpad W540を再起動しF1キーでBIOSに入り、Intel Virtual technologyがDisabledになっていたところをenabledに変更し、保存して再起動。Windows起動後virtual upすると変なメッセージが消えてSSHクライアントソフトのtera termからログインできました!!!
vagrant2-2

login ID = vagrant
login password = vagrant
で、CentOS shellにログインできます。
vagrant2-3

この記事のBIOS設定変更より上の部分の作業をしても、昨日と同じところでとまってしまいSSH接続できませんでしたので、そもそも今回の記事の前半の作業は実は不要で、BIOS設定変更だけしていれば解決したのかもしれません。

いずれにせよ、Windows7上でCentOS6.5のバーチャル環境を設定することができました。

参考1:【Windows7(64bit)】VirtualBox+VagrantでCentOSの仮想環境構築http://qiita.com/kobaboy/items/5469523a2b0bf8b61e8e
参考2:http://qiita.com/super-hot-engineer/items/21e4456b8318db877f5b
参考3:http://qiita.com/nabeo5656/items/fd77fd0746fbb95f8373
参考4:http://blog.suusuke.info/2013/12/03/vagrant-up-%E3%81%A7%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E5%87%BA%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8/
参考5:http://qiita.com/kobaboy/items/5469523a2b0bf8b61e8e

How to setup CentOS virtual machine environment on Windows / Windows上にLINUX(CentOS)の仮想マシンを作成する方法(1)

Windows上にLINUX(CentOS)の仮想マシンを作成する方法。その1

なぜ、Windows上にCentOSをインストールするのか?
Webシステム構築、webプログラミングはLinuxサーバ上で行いますが
毎日あちこち移動している私としては、手元で開発できるのがい一番効率が良い。
ネットに接続していなくても、windowsマシンから仮想環境上のCentOSにログインすれば開発環境がでてくるわけで、これは助かる。

ということで自分のWindows環境に導入すべく、やることをまとめました。
筆者はWindows7 Professional 64bit版上での作業です。

手順は大まかに分けると以下の3段階です。ネットにつながっている環境下で作業すれば、10分程度で完了します。

手順1:VirtualBox by OracleをWindows上にインストールします。
手順2:CentOSのマシンイメージを一発でダウンロードできるVagrantというツールをダウンロードして利用します。
手順3:仮想マシンの追加作業

手順1:VirtualBoxのインストール

VirtualBoxを利用します。VirtualBoxは以下のアドレスからダウンロード可能です。
http://www.virtualbox.org/wiki/Downloads

ダウンロード後、インストーラーの指示に従ってください。

手順2:Vagrantの実行

Vagrantは以下のアドレスからダウンロード可能です。
http://www.vagrantupcom/downloads.html

手順3:Vagrantの実行

まず、仮想マシンを作成したいディレクトリ上にフォルダを作成します。
私はC: の直下にVagrantというディレクトリを作成しました。

コマンドプロンプトを起動し、いま作成したVagrantディレクトリに移動します。
vagrant
コマンド”vagrant init”を実行します。
Vagrantのファイルが自動的に作成され、実行が完了すると以下のメッセージが表示されます。
vagrant2

vagrantフォルダの下にVagrantfileというテキストファイルができてきます。
テキストエディタ(メモ帳などで可)を使い、初期設定を少しだけ書き換えます。

変更前のVagrantfile
白黒反転させて表示している行が、変更対象となる行です。
vagrant3_orig

変更後のVagrantfile
オリジナルの行を#(半角のシャープ)でコメントアウトし、1行追加しました(スペルミスに注意!)。
vagrant3_new
ちなみに、最新版や他のパッケージを導入したい場合はhttps://vagrantcloud.com にいくと、ほかにもいろいろな仮想マシンのboxが登録されています。

以上で仮想マシンの準備は完了です。

コマンドプロンプトから以下のコマンドを実行すると、仮想マシンが起動します。初回だけ、ネットから必要なファイルのダウンロードを行うため時間がかかります。

vagrant4_startup

仮想マシンのコマンド一覧

Windowsのコマンドプロンプト上から実行します。

vagrant status
起動状態の調査
vagrant up
仮想マシンの起動
vagrant halt
仮想マシンの停止
vagrant suspend
仮想マシンをスリープさせる
vagrant resume
仮想マシンをスリープから復帰させる
vagrant reload
仮想マシンの再起動
vagrant status
仮想マシンの状態の確認
vagrant destroy
仮想マシンを破棄
vagrant ssh
仮想マシンへログインする
vagrant –version
バージョンを確認する
vagrant box list
インストールしたBox名の確認
vagrant box remove CentOS7
Boxの削除(CentOS7というBoxを削除した場合)

Windowsで仮想マシンにログインするにはsshクライアントソフトが必要

Windowsには標準でSSHクライアントソフトがインストールされていないので、コマンドプロンプト上でvagrant sshを実行しようとすると、以下のSSH接続用情報が表示されるのみで、ログインはできません。
vagrant5_ssh
Windows用のSSHクライアントソフトとしてはTeraTerm, Poderosaなどがあります。

ここではTera Termを使いました。
コマンドプロンプト上に表示された情報を入力し、ログインします。
Tera Term1画面目
vagrant6_teraterm_ssh

Tera Term2画面目
vagrant7_teraterm_ssh

これでうまくいくはずでした。が、しかし!tera termからsshに接続しようとしてもうまくいかない!!なぜだろう??(その2へつづく)

あなたのwordpressでつくったホームページやブログをfacebook, google+, twitterと連携させて自動投稿する方法

せっかく書いたブログ記事は、みんなにみてもらおう!

wordpressサイトを作って運用を始めますと、記事を投稿してもなかなかアクセスが増えない状況に陥りがちです。

それもそのはず、あなたのサイトの存在を知っている人が少ないからですよね。グーグルが定期的にテキストを拾いに着てくれるのでそのうちみに来る人も増えるでしょうけれど、ポット出のサイトですとタイムラグが結構ありまして、2~3ヶ月は閑古鳥が鳴くのを覚悟しなくてはいけません。

あなたのサイトがアクセスユーザでにぎわうかどうかをグーグル任せにしていいのでしょうか?そんなことはだめですよね。

そこでぜひお勧めなのが、記事を投稿するたびにSNS(ソーシャル・ネットワーク・サービス)を使って拡散させることです。SNSのメッセージにあなたのサイトの記事のアドレスをつけて発信することで、閲覧者の一定割合があなたのサイトに記事を見に来ます。

このようにSNSを使った集客手法はSMM(ソーシャル・メディア・マーケティング)の手法としては初歩の初歩ですが、ご存じない方も少なくないようですので紹介します。

対象となるSNS

 

ここではFacebook, Twitter, Google+, LinkedIn, Pinterestなどの主要SNSに投稿する方法を案内します。ここでは

Jetpack by WordPress.com
Jetpackサイト

というプラグインを使用します。
 

JetpackインストールとSNSを連携させる方法

 

プラグイン → 新規追加 から、Jetpackを検索。
plugininstall_jetpack
インストール後、「プラグインを有効化」をクリックします。

有効化すると以下の画面に映ります。「WordPress.comと連携」をクリック。
plugininstall_jetpack_wpalliance
あとは、WordPressに登録済みのユーザ名、パスワードを入力すれば導入完了です。

Jetpackを使ってSNSと自分のWordPressサイトを連携させる

WordPress管理画面よりJetPackを選択。「さらにJetpackを活用」画面に映ります。plugininstall_jetpack_activatealliance

「共有」を選択してください。TwitterやFacebookなど、連携させたいSNSを選択肢、好きなページを設定します。これでSNSとの連携は完了です。

 

投稿時にアイキャッチ画像が表示されない場合の対処方法

 

これで自動的にFacebook, TwitterなどのSNSに投稿してくれるようになるのですが、アイキャッチ画像が表示されないことが多いようです。そこで、アイキャッチ画像を表示させながら自動投稿させる方法について説明します。

アイキャッチを設定するには以下のプラグインを使用します。

All in One SEO Pack
本体ページ

インストール方法は先ほどのJetPackと同じで、プラグイン→新規追加から検索してインストール、プラグインの有効化を選択してください。

All in One SEO Packをインストール後、All in One SEO Packの設定画面を開きます。Feature Managerを選択、Social Metaの項目をクリック。
※Social Metaの項目はAll in One SEO Packトップ画面には無いので注意!!

これで、All in One SEO Packのメニュー選択欄に”Social Meta”が追加されます。
Social_Meta
画面を下に行くとImage Settingという項目があります。ここでアイキャッチ画像を選択し、設定を保存。

これで自動投稿時にアイキャッチ画像が表示されます。
ここで1つ注意。Twitterだけはアイキャッチ画像が表示されず、記事冒頭に登録されている画像が表示されます。また、200×200ピクセル未満の画像だとアイキャッチ画像として登録した画像ではなく記事中の別の画像が設定されますので、登録用の画像はできるだけ200×200ピクセル以上にしておきましょう。

便利なWordPressプラグイン – Duplicatorでサーバ移転があっという間

WordPressを使ってサイトを作成するのは手軽でいいですよね。

みなさんはどのような環境でサイトを構築していますか?

わたしの場合は、こんな感じです
・Windows PC (8Pro) 過去の経験上長持ちさせようと思ったらメモリはつめるだけ積むに限る!というわけで24GB。
・XAMPP
ローカル環境でLAMP環境のテストができるようにするため、xamppをインストール
・Sublime Text
テキストエディタとしてはこれがいちばん使いやすい。
もっとパワーユーザーになるとvimがいいなんて方もいらっしゃいますが。。。
・ffftp または winscp
サーバにファイル転送する際。
最近はAdobe Creative Croudに入ればDreamWeaverだのIllustratorだのPhotoshopだの、アドビのソフトが使い放題で月額5千円くらいなので直接ffftpなど使う機会は減ってきたなぁ
・tera term
telnetやsshでLinuxサーバにログインし、ファイルを直接操作したりシステム内部で細かい設定をするときに使用。
最近のレンタルサーバはシェルの利用自体を認めないところもあるので最近は使用頻度減った。

wordpressサイトを構築

WordPressサイトを構築する際、もちろんレンタルサーバのwp-admin画面に直接ログインして編集することが可能です。

でも、慣れてくると、いちいちサーバの返事を待っている時間がイラッとくるんですよね。わたしだけ??

通常は1秒前後、調子いいときで0.5秒くらい。待たされると2~3秒。ひどいときは10秒。ちょこっと変えて変化を見るスタイルでサイトを作成するので、このちょっとした待ち時間がイラッとなるんですね。

さらに、サーバ側にも不要な負荷がかかっていることになるので、本当は自分の頭の中で組み立ててから一気に書けばいいんでしょうけれども。

これは便利!WordPressプラグイン【Duplicator】

ローカル環境でこつこつ作成したサイトをサーバに移転したいときに便利なプラグインがありました。

プラグイン名 『Duplicator』
※ 英語でduplicate = 複製する、の意味。

WordPressサイトを丸ごと複製できるプラグインで、最初にデータベースだけ用意しておけば、新しいサーバの中は空っぽでも大丈夫です。Duplicatorがコピー元サイトのデータ及びファイルを圧縮梱包してコピー先のサーバ環境にコピーしてくれます。

サーバの移転の場合にも使えます。
規模が大きすぎると転送時にエラーになりやすいそうなので、中規模以下のサイトにオススメです。

Duplicatorをインストールするには

WordPress管理画面「プラグインのインストール」の検索窓に”Duplicator”と入力して検索。「いますぐインストール」を押下。プラグインを有効化するとすぐに使用可能となります。

参考にしたサイト: websae.net/wordpress-plugin-duplicator-20140905/

8/18追記:Duplicatorでエラーが起きるケースがあるようで、その場合にはAll-in-one-migrationプラグインが良いという記事を発見しました。
 http://c-plugin.com/?p=497
http://www.zatta.club/2015/02/all-in-one_wp_migration/

CSSのメモ 見出しのデザインを変えてブログイメージをかえたいとき

左ラインと下ラインのシンプルな見出し

.

左ラインと下ラインのシンプルな見出し

.

角丸のシンプルな見出し

.

外枠と長方形のワンポイントの見出し

.

外枠と長方形のワンポイントの見出し

.

角丸外枠と円のワンポイントの見出し

.

吹き出し型の見出し

.

切り取り線

.

テープ

.

付箋タイプです

.

リボンタイプです ribbon

.

リボンタイプです ribbonnaname

.

メタルプレートです metalplate

.

モザイクタイプです mosaic

.

フリーなのに超強力なテキストエディタSublime Text 3を使おう 社長のヤミ勉

Sublime Textとは?

「思考の速度で経営したい」社長必見!

パーッと思いついたことをメモ書きするときに便利。いちいち保存しなくても「仮保存」機能があり、タブを削除しない限り書いた内容が保持されています。「ひとりブレスト(ブレインストーミング)」にもいいかもしれませんね。

本来はメモ書き用じゃないんですけどね。Webサイト構築の際のhtml、CSSファイルの作成、C++言語やPHP、JavaScriptなど各種言語のコーディングに特化したテキストエディタです。

Windows、Mac用、Linuxに対応しています。

monitors_largeimage

Sublime Textの入手方法

Sublime Textは公式サイトからダウンロード可能です。

http://sublimetext.com/3

DreamWeaver並に使いやすくするには設定を工夫する

機能追加に便利なプラグインPackage Control

Sublime Textに機能を追加するには、まずPackage Controlというプラグインを入れると良いです。入力補助、コード中のキーワードのハイライトなどあるといいなという機能がパッケージという形でたくさん提供されているので、Package Controlから選んで追加すればよいようにつくられていてとても便利。

Sublime Text 3 Package Controlの案内は以下のページにあります
https://sublime.wbond.net/installation

手順はたったの2つ!

  1. 「SUBLIME TEXT 3」のタブの内容をコピー。
    “import urllib.request,os; pf = ‘Package Control.sublime”…. で始まる一行です。
  2. Sublime Textを開いて、[CTRL]+[‘] または [View] > [Show Console] でコンソールを表示。コンソールを表示できたら先ほどコピーした内容を貼り付け、[ENTER]を押下してください。

sublime-text-3aa

Sublime Text3は日本語未対応なので日本語に対応させてみる

  1. [CTRL]+[SHIFT]+[p]でPackage Controlを起動。
    [Package Control:Install Package]を選択し、[japanize]を入力するとパッケージをインストールできます。
    パッケージインストール後、以下の3手順を踏むとメニューの日本語化は終わりです。
  2. [フォルダA]にインストールされている*.jpファイルを、[フォルダB]にコピー。
    [フォルダA] C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanize
    [フォルダB] C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Default
    *.jpファイルというのは、.jpで終わっているファイル名すべてという意味。”*”は「すべての」(英語で言うとfor any)を意味するコンピュータの世界の共通語で「ワイルドカード」といいます。この機会に覚えましょう。
    ※Defaultフォルダがない場合もある。この場合は作成すること。
  3. [フォルダB]にあるオリジナルのファイル(.jpのつかない同名のファイル)を保存しておきます。語尾の修飾子を.org(オリジナル(original)の意)
  4. [フォルダB]にコピーしたファイルをオリジナルのファイル(.jpのつかないファイル)と置換します。
  5. [フォルダC]にある、.jpがつかないファイルを、[フォルダD]にコピーします。
    [フォルダC] C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanize\Main.sublime-menu
    [フォルダD] C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\User

他のプラグインでメニューが日本語以外になっている場合がありますが、最後の段落の作業で上書きされてしまっているトップメニューも日本語になります。

文字コードをそろえる

日本語には「文字コード」が複数あり、これがまた頭痛の種。たまにWEBサイトを閲覧しようとしたら文字化けで読むことができなかったことはありませんか?これは、日本語ファイルの結構な割合がShift-JIS(シフトジス)コードで記録されていることが原因です。WEBの世界及びグローバルのデファクト・スタンダード(業界標準)はUTF-8系列なので、UTF-8前提のSublime TextでShift-JISのファイルを開くと文字化けします。

文字化けに対応するパッケージもインストールしておきましょう。

  1. [CTRL]+[‘]を押下し、[Package Control:Install Package]と入力。[ENTER]。
  2. “ConvertToUTF8″と入力すると該当するパッケージが検索されて出てきますので、[ENTER]を押下しパッケージをインストールします。

DreamWeaver並に便利なパッケージ一覧

【凡例】

パッケージ名
パッケージ内容

2015年4月時点のリストです。

インストール方法: [Package Control]から[Install Package]を選択しますと、下記タグが選択できるようになります。

HTML
HTML5のタグの自動補完。スニペット集とキーワード(タグ)のハイライトも。
CSS Snippets
CSSの自動補完
IMESupport
IME(日本語入力)のインライン表示
JQuery
jQueryの自動補完
Emmet
HTML, CSSの記述の高速化プラグイン「Zen-Coding」の次期バージョン
Bracket Highliter
タグの開始タグと終了タグを強調表示
AutoFileName
imgタグのファイル保存場所(タグ)を入力する際、ファイル名を補完
SublimeLinter
構文エラーを検出して表示してくれる
SublimeCodeIntel
通常であれば[Ctrl]+[Space]で補完表示するものを自動表示してくれる
Tag
閉じタグを打つと補完してくれる
ColorPicker
カラーピッカーを表示
Emmet LiveStyle
Developer Toolから直接CSSが編集できる。Google ChromeまたはSafariの連動が必要
SFTP
Sublime Text上から直接FTPでファイルをアップロード

参考:http://www.starlod.net/sublime-text3-jp-inline.html
参考:http://catcher-in-the-tech.net/481
執筆時間: 2h30m

DreamWeaver CCとWordPressを連携させる方法 社長のヤミ勉

dreamweaver_and_wordpress

DreamWeaverとは、Adobe社(みなさんが普段お使いのpdfファイル閲覧ソフト acrobatで有名)のWEBサイト構築システムです。はじめはややとっつきにくいのですが、なれるととても便利。

WordPressでサイトを作る方が多いと思いますが、画面編集などWordPressの編集画面で行うと、いらっとしませんか。DreamWeaverを使うと快適に作業できます。

作業前の準備

ローカルサーバを用意する

まずはWebサーバにWordPressをインストールする必要があります。
ここでいきなりレンタルサーバを借りて・・・とあわててはいけません。

まずは、手元のPCを使います。手元のPC環境のことを「ローカル環境」といいます。

ローカル環境にレンタルサーバと同じ環境を構築し、ここにWordPressをインストールすればいいのです。レンタルサーバと異なり、無料です。運営コストを1円節約することは1円稼ぐことと同じ!これで成功に一歩近づいた!

公開するまでの期間の準備と、公開後のメンテナンスもここで行いますし、レンタルサーバのデータがクラッシュして消滅・・・なんてときにもあわてずに復旧作業ができます。

統合パッケージ(これまた無料)を利用すれば簡単にローカル環境にWebサーバを構築することができます。Windows環境の場合はXAMPP、MacOS環境の場合はMAMPが有名です。インストール方法については、下記のサイトを参考にしてください。

      [MAC用] MAMPのインストール方法の解説はこちら
      [WIN用] XAMPPのインストール方法の解説はこちら

XAMPP(MAMP)にWordPressファイルをインストールする

XAMPPまたはMAMPを設定し終わったら、WordPress環境をインストールします。インストール方法については、下記のサイトを参考にしてください。

      [MAC用] MAMPにWordPressをインストールする方法はこちら
      [WIN用] XAMPPにWordPressをインストールする方法はこちら
WordPressをDreamWeaverから編集可能にする方法

WordPressをDreamWeaverから編集可能にする方法

これで準備は完了です。

DreamWeaverでWordPressを扱うための設定

DreamWeaverで作業をする際には、事前にXAMPP(Macの場合はMAMP)を起動します。手順は以下の通りです。

  • サイト設定
  • テストサーバの設定
  • 関連ファイルの検索
  • 画面イメージを見ながら編集
  • スマホ用、タブレット、PC用と表示画面を切り替える

DreamWeaverにサイトを設定する

サイト設定画面

[サイト]メニュー → [新規サイト] を選び、[サイト設定]ダイアログを表示させます。[サイト名]は、自分のサイト名。とはいえDreamWeaver内で識別するためのものなので、利用者が識別できればどんな名前でもかまいません。[ローカルサイトフォルダ]は、あなたがローカルPCにインストールしたWordPressのインストールディレクトリを指定します。

次に、サーバの登録を行います。

(注 うっかり[保存]をクリックしてしまってもあわてずに。DreamWeaverの[サイト(S)]メニューから[サイトの管理] → サイトを選び、鉛筆のアイコンをクリックすると同じ設定画面に戻ることができます。)

DreamWeaverにテストサーバを設定する

server_setting_thru_dw

[サーバ]カテゴリを選択します。左下にある[+]ボタンをクリックすると、新規サーバ情報を追加することができます。

  • サーバ名
  • 使用する接続
  • サーバフォルダ
  • http://localhost/(WordPressのインストールディレクトリ)

server_setting_thru_dw2

《重要》新規サーバを登録したら、リモートのチェックをはずし、テストにチェックを入れます。[保存]ボタンをクリックすると、サイトが更新されます。

関連ファイルを検索する

server_dw_1

サイト設定が完了しました!さあ、DreamWeaverでWordPressサイトを開いてみましょう。サイトのメインページのファイルはindex.phpです。

ビューの上部に「このページにはサーバのみによって検索される動的関連ファイルがある可能性があります」というメッセージが表示されますので、[検索]をクリック。[スクリプト警告]ダイアログが表示されるので[はい]をクリック。

server_setting_thru_dw3

画面イメージを見ながら編集できるようにする

DreamWeaver側はindex.phpを開いたままになっていると思います。

ビューの表示を[表示] → [コードとデザイン]を選択し分割ビューにしますと、左側にindex.phpのソースコートが表示されます。

図. 左側にソースコードが表示されますが、右側には何も表示されません。

図. 左側にソースコードが表示されますが、右側には何も表示されません。

右側にはまだ何も表示されませんね。右側にプレビュー画面を表示させ、完成時のイメージを見ながら編集できるようにしてみましょう。[表示] → [ライブビューを切り替え]を選択(またはAlt+F11を押下)しましょう。

「ライブビューを切り替え(Alt+F11)」処理をしたところ、画面右にプレビューが現れました

図.「ライブビューを切り替え(Alt+F11)」を行うと、WordPress初期設定状態のサイトが表示されます。表示している画面は出来立てホヤホヤのヤミ勉ページ。

以後、WordPressのデザインチェックを行うには、デザインビューではなくライブビューで行うことができ、作業効率が高まります。

画面右側がワードやパワーポイントやPDFの文書、画面左側が右側画面の後ろに隠れている、文章をいろんな色や大きさや図付きで表示させるための仕組み、といったところです。

スマホ用、タブレット、PC用と表示画面を切り替えるシミュレーションモードもある

世の中の個人利用者の8割がモバイル(スマートフォン)からのアクセスといわれる時代。

ページの作成・編集はPCで行いますよね。WEBデザイン担当にはスマホでの見え方を気にして欲しいですよね。スマホ対応していないWEBページはB2Cのビジネスサイトとしては失格です。

画面右下にある、画面幅切り替えアイコン。左から順にモバイル用(幅480px)、タブレット(幅768px)、PC(幅1024)。数字右横の[v]をクリックすると・・・

画面右下にある、画面幅切り替えアイコン。左から順にモバイル用(幅480px)、タブレット(幅768px)、PC(幅1024)。数字右横の[v]をクリックすると・・・

ライブビュー右下にある画面のアイコンをクリックすると、様々な画面幅の環境下で作成中のページがどう見えるのか、確認することができます。

画面幅選択アイコンの数値右横の[v]をクリックしたところ。お好みの画面幅で表示確認が可能!

画面幅選択アイコンの数値右横の[v]をクリックしたところ。お好みの画面幅で表示確認が可能!

新しい画面幅のスマホが出てきても大丈夫。ここに表示された以外の画面幅にも対応、好きな画面幅で確認することもできます。

(参考)http://webgaku.hateblo.jp/entry/20120731/1343710088