« December 2014 | Main | February 2015 »

January 2015

01/31/2015

HTML5 で lightbox2を使う

ホームページでは、サムネイルのように小さく表示するしかなかった写真を、マウスクリックで格好良いアニメーションで大きく表示させたい。この希望を叶えてくれるのが『lightbox』だ。
是非『lightbox』を使いたいと思って、ネットからインストール記事を調べてやってみたが、ネットからダウンロードしたファイルの処理方法が理解できず、細部について記載のない部分は、自分の思い込みでやってみた。その結果、写真の拡大表示は出来たものの、アニメーション動作は伴っていなかった。多分、lightbox をうまく使いこなせて無かった可能性が高い。


それで、さらにネットを調べて、トライアルしてみた結果、多少うまく動くようになったので、ここにその手順をメモとして記載しておく。

《Lightbox をHTMLで使うための環境設定》
私の環境で、lightbox を動かすために必要なファイル類は、下記になる。
1)先ず、ディレクトリツリーにぶら下げてある各ファイルをダウンロードしてきて、ご自分の環境のそれぞれのフォルダ(ie.: css,js,img )にそのままコピーする。

   css  (下記の 2つのファイルは、《lightbox/css/》からdownload
      ├ lightbox.css
      
├ screen.css

     js
      
├ jquery-1.11.0.min.js   ← 《lightbox/js/》からdownload
      
lightbox.js                ← 《lightbox/js/》からdownload
      ├ scriptaculous.js        ← 《scriptaculous-js-1.9.0/src/》からdownload

  img
  (下記の 4つのファイルは、《lightbox/img/》からdownload      
      ├ close.png

      ├ loading.gif
      ├ next.png
      ├ prev.png


 ダウンロード先:
  lightbox に含まれるファイルのダウンロード先は下記URLから
    http://lokeshdhakar.com/projects/lightbox2/

  
scriptaculous-js-1.9.0 に含まれるファイルのダウンロード先は下記URLから
    https://www.musc.edu/js/scriptaculous-js-1.9.0/
    

念のため、私の環境に上記のファイルを適用(コピーした)後の css, js, img のフォルダは、次のようになっている。


      ├ index.html
      ├ bootstrap
      │    ├ css
      │    ├ js
      │    ├ img
      │      
      
├ news
      │    ├ index.html 
← 2)で lightbox を使うための設定をする htmlファイル
      │
      
├ img ← ここに lightbox を使いたい写真( xxx.jpg )などが入って居る
      │    ├ 拡大図.jpg
      │    ├ 縮小図.jpg


① css のフォルダ内
Css_files 左のファイル構成の中にある、下から3つめのファイルと、下から2つめのファイルがコピー追加したファイルになる。




② js のフォルダ内
Js_files
左のファイル構成の中にある、下から4つのファイルがコピー追加したファイルになる。



③ img のフォルダ内
Img_files

左のファイル構成の中にある、下から4つのファイルがコピー追加したファイルになる。

 
《HTMLへの記載》

2)先ず、上記のディレクトリ構成の中で news/index.html ファイルの中に、lightbox を使うための書き込みをする。
 <head>~</head> の中に、下記を追記します。
news/index.html から見たbootstrap/css, bootstrap/js, bootstrap/img
各フォルダのディレクトリの位置関係から、news/index.html の中には、下記のように表記することになります。この部分は、使われる環境によってディレクトリの記載を変更すること。

<head>
  ・・・・
    <link href="
../bootstrap/css/lightbox.css" type="text/css" rel="stylesheet" media="all" />
    <script src="
../bootstrap/js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="
../bootstrap/js/lightbox.js" type="text/javascript"></script>
    ・・・・
</head>


次に、<body>~</body>の中で、写真を拡大したいところを次のように記載する。

<body>
  ・・・・
    <a href="../img/拡大図.jpg" rel="lightbox">LightBox の表示/動作<br>
    <img src="../img/縮小図.jpg" width="300" height="200" alt="画像">
    </a>

  ・・・・
</body>


ここで、縮小図.jpg は width と height で縮小時の画像サイズを指定しているので、縦横比が変わらないように縮小画像の高さと幅が選ばれているなら、特に拡大図は用意せずに、拡大図と縮小図は同じ図を使っても良いと思う。


以上で、html5にLightbox2が適用出来たと思いますが・・・、やってみてください。

《参考資料》
Lightbox2.5~2.6の使い方 (ShanaBrain)
http://shanabrian.com/web/library/lightbox2.5.php

01/05/2015

自宅のLinux CentOS7サーバーでWordPress -3

前日、あそこまで書いて、今日になってDNSサーバー設定が完成していないことが気になって・・・、結局、今朝からまたCentOS7を ゼロからSSDにインストールすることにした。
DNSサーバー設定で、内部向け逆引きが出来ていないのだ。BINDの起動でもERRORが発生していた。何度打ち込んだリストを確認しても間違いが見つからない。今振り返ってみると、このエラーの原因はDHCPサーバーの未設定にあった。

今朝からやってみて分かったことは、事前にやらなければいけない「インストールと設定」を飛ばしていたのだ。

OSを家庭内サーバー(外部に開かれていない)として インストールするに際して、最初に決めたこと (各環境などで異なる)
・ドメイン名                          : xexasrv.com
・サーバーの名前                  : root.xexasrv.com 
・管理者名                         : xxxxx
・管理者のパスワード             : xxxxxxxxxx

・一般ユーザー名                  : xxxxx
・一般ユーザーのパスワード  : xxxxxxxxxx
・WordPressのデータベース名 : wordpress

各環境によって異なるので、調べたこと/調べなくてはいけないこと、決めたこと・・・
・ルートサーバーのIPアドレス             : 192.168.10.1
・ゲートウェイIPアドレス                     : 192.168.10.1
・家庭内LANのDNSサーバーアドレス : 192.168.10.1
・ISPのプライマリDNSアドレス            : xxx.xxx.xxx.xxx
・ISPのセカンダリDNSアドレス            : xxx.xxx.xxx.xxx
・Ethernetの名前                              : enp4s0
・WordPressの最新版と在処               : https://ja.wordpress.org/wordpress-4.1-ja.tar.gz


先ず、CentOS7をインストールした後、自動で設定された PCのIPアドレスを確認した。
起動直後は LANもつながっていないし、接続だけすると・・・、当然であるが、私が設定したい値(192.168.10.240)とは違ったアドレスになっている。


ここで決めておくことは、このサーバーになるPCの固定アドレス、ドメイン名である。
CentOS7をインストールした段階で、管理者名とパスワードは決めてある。
DNSサーバーは、ルーターになっていたが、新しく作ったこのサーバーのアドレスを、第1 DNSサーバーとし、第2 DNSサーバーはルーターに設定した。


起動したCentOS7のPCのネットワークの設定→有線と辿り、
  Identityをクリック、 この ifcfg の名前(enp4s0)を記録しておくこと。
  IPv4→決めておいたIPアドレスとDNSサーバーを手動で設定し、PCを再起動させる。

ここから以降の殆どの作業は、ルートユーザーでないとできない。
$ su でスーパーユーザーになって、作業しよう。


その前に、vim エディタをインストールしておこう。標準の vi より使い勝手がよい。
# yum -y install vim-enhanced


  コマンドエイリアスを適用する(ここでは全ユーザーに適用する)
   # vi /etc/profile
   とファイルを開いて、最終行に次のエイリアスを追記する。
   alias vi='vim'
   [Esc]→:wq   で終了して、次のコマンドで ファイルの変更内容を反映する。
   # source /etc/profile


BIND のインストール

# yum -y install bind bind-utils

インストール後の設定は、参考資料①,②を参照するとよい。但し、グローバルアドレスや
プライベートアドレスなどは、自分の環境に合わせて置き換えること。
 例えば、10.0.0.0 ⇒ 192.168.10.0 、 server.world ⇒ xexasrv.com になる。
ゾーン情報の設定は、参考資料②の「ゾーン情報の設定」が参考になる。
また設定したら、同じ資料に書かれている「BINDの起動・動作確認」を参考にするとよい。



DHCPのインストール
# yum -y install dhcp

  サーバー設定ファイルと編集
  # vi /etc/dhcpd.conf

     DHCPサーバーの設定は、参考資料②のDHCPサーバーの設定、あるいは、『centossrv.com/dhcp.shtml』のURLに記載のコメント、を参考に設定するとよい。

Webサーバーの導入
参考資料③を参照するとよい。
1)Apache と php のインストール
  ・Apache のインストール
    # yum -y install httpd

  ・php のインストール ( php Version 5.4.16 )
    # yum -y install  php  php-mbstring  php-pear

2)Web サーバー設定
 
 ・httpd 設定ファイルの編集
  # vi /etc/httpd/conf/httpd.conf

     ファイルを開いて変更するのは、下記
箇所(エラーページに表示される管理者メール)
   ① Server Admin  webmaster@xexasrv.net
   ② ServerName は、コメント行である # を外して、xexasrv.com:80  と変更する。

   ③ Options Indexes FollowSymLinks ⇒ Options Includes ExecCGI FollowSymLinks と変更する。
   ④ AlloOverride None ⇒  AlloOverride All に変更する。
   ⑤ #AddHandler cgi-script .cgi ⇒ AddHandler cgi-script .cgi .pl  に変更する。
   ⑥ AddDefaultCharacterset UTF-8 ⇒ #AddDefaultCharacterset UTF-8
  
    その他

    # restorecon -R -v  /var/www/html/wordpress
    # semanage fcontext -a -t  httpd_sys_rw_cotent_t "/var/www/html/wordpress/wp-content (/.*)?"
    # restorecon 0R -v /var/html/wordpress/wp-content
    # setsebool -P allow_ftpd_full_access 1
    # systemctl restart httpd


MariaDBのインストールとデータベースサーバーの構築
1)MariaDBのインストール
  # yum -y install mariadb-server

  インストールしたら、下記でファイルを編集する。
   # vi /etc/my.cnf.d/server.cnf

  [mysqld]
     character-set-server=utf8    ← 追記する。

    ルートユーザーに戻って、

   # systemctl start mariadb
   # systemctl enable mariadb

2)MariaDBの初期設定
   # mysql_secure_installation

  これで起動するので、②の資料を参考に設定する。
  ここで必要になるのは、MariaDB用のrootパスワード。事前に考えておくのがよい。

  設定作業が終わったら、rootユーザー(設定したパスワード)で接続する。
   # mysql -u root -p

   MariaDB[(none)]> select user,host, password from mysql.user;

   user, host の内容を確認すること。


   MariaDB[(none)]> show databases;

   Database の名前を確認すること。確認したら exit で外に出る。


  データベース名: mysql
  ホスト名          : localhost
    ユーザー名      : root

  などが確認できるはずだ。


WordPress4.1 をインストールする
最新のWordPressのバージョンとダウンロード先を調べる
  2015/1/3現在では、 下記の場所に最新版があった。
    https://ja.wordpress.org/wordpress-4.1-ja.tar.gz
  これを使う。

   # wget https://ja.wordpress.org/wordpress-4.1-ja.tar.gz
   で保存し
   # tar zxvf wordpress-4.1-ja.tar.gz
 で解凍する。

ここから先、私は参考資料④を見ながら作業したので、それを参考にするとよい。


WordPress初期設定
ここで気をつけなければいけないのは、

サーバー名/wpress のところで、 私の場合上記に記載した内容から、
ここは、 xexasrv.com/wordpress となる。

「さあ、始めましょう!」のボタンをクリックした後、
上記に決めたことから、
データベース名 : mysql
ユーザー名     : root
とすること。


その他、この部分での設定では、参考資料④を見て作業するとよい。


参考資料
①CentOS7.0で自宅に内部DNSサーバー構築(BIND)
   http://centossrv.com/bind.shtml
②CentOS7:DNSサーバー:BINDインストール/設定:Server・・・
  http://www.server-world.info/query?os=CentOS_7&p=dns
③ITわかり隊
 
http://ufuso.jp/wp/?p=15122
④ITわかり隊
  http://ufuso.jp/wp/?p=15315

⑤Vimの設定
   http://www.server-world.info/query?os=CentOS_7&p=initial_conf&f=7
   

01/01/2015

自宅のLinuxサーバーでWordPress -2

大晦日、31日、昼頃に 256GBのSSD が到着した。僕は、OS のインストールに関して、馴染みのある Ubuntu14.10 をインストールするか、それとも CentOS7 をインストールするか・・・迷ったが、今回の目的は WordPress のインストールである。OS と WordPress のインストールに関する参考資料をネットで検索してみて、僕が理解しやすそうで、インストール作業が平易に書いてあると思った記事が多い方(僕の主観)を選ぶことにした。
僕は、CentOS7 を選び、大晦日は OS の選択とインストールで1日が終わった。


資料については、下記2つの資料を参考にさせて戴き、インストールを進めている。1)CentOS7 でLAMP(Apache+MariaDB(MySQL)+PHP) インストールから WordPress を動かすまで (Apache編)
 URLは、 http://server-setting.info/blog/lamp-wordpress-centos7.html
 ・この資料では、所々 root 権限で作業しなければいけない所が、そのように書かれて居なかったり、記載通り作業したはずが、「Failed to issue method call : Access denied」となったりする部分があって、2)の参考資料でその部分を補いながらインストールを進めた。
2)CentOS7 MariaDB インストール : Server World
 URLは、 http://www.server-world.info/query?os=CentOS_7&p=mariadb
・記載表現は少ないが、的確であり、間違わずに作業出来たと思う。

《インストール作業》
インストールは1)の資料に準じて作業した。
①LAMP(Apache+MariaDB(MySQL)+PHP)をインストールする

 a. php をインストールする
    $ yum -y install php-mysql php php-gd php-mbstring
     インストールが出来たら、下記コマンドでバージョン確認
     $ php --version
     「PHP 5.4.16 (cli) (built: Jun 10 2014 02:52:47)
       Copyright (c) 1997-2013 The PHP Group
       Zend Engine v2.4.0, Copyright (c) 1998-2013 Zend Technologies」

  b. MariaDB(MySQL) をインストールする
    $ yum -y install mariadb mariadb-server
    と打ち込んだが、root 権限が無いとインストール出来ない。
    $ su   と打ち込み、root パスワードをインプットしてルート権限で作業する。
    パスワード入力後、
    # yum -y install mariadb mariadb-server
    # exit   ← ルート権限を離れて、インストールした mariadb のバージョンを確認する。
    $ mysql --version
  「mysql  Ver 15.1 Distrib 5.5.40-MariaDB, for Linux (x86_64) using readline 5.1」

  ここで、念のため、2)の資料にある character-set を追記しておく。
    $ su となって、パスワードを打ち込み、
    # vi /etc/my.cnf.d/server.cnf
     13行目に追記する。
   [mysqld]
       character-set-server=utf8
      「Esc」→「:wq」と打ち込んで、修正内容を書き込み、エディタから出る。
    mariadb を起動させる。
    # systemctl start mariadb
     ln -s '/usr/lib/systemd/・・・  という表示が出る。

 インストールが終わったので、MariaDBの初期設定を行う。
ここからは、資料2)を参考にした。
  # mysql_secure_installation

  と打ち込む。パスワードを要求されるが、ここでは英文の記載があるとおり、ブランクのまま Enter キーを叩く。→ root パスワードを設定出来る。
  Set root password?[Y/n]  と聞いてくるので、勿論 y とし、新しいパスワードと、パスワード確認を打ち込む。このパスワードは、次の作業で必要になるので控えておくこと。

  次に、
  Remove anonymous users?[Y/n]  匿名ユーザーに関する削除の問いは、 y とし、

  Disallow root login remotely?[Y/n]  root のリモートログインを無効にするは、 y とし、

  Remove test database and access to it?[Y/n]  テストデータベースは削除は、  y とし、

  Reload privilege tables now?[Y/n]  特権情報のリロードは、  y とインプットした。 

  「Thanks for using MariaDB!」 が表示され初期設定が終了。

次に、MariaDB に root ユーザーで接続し、設定したパスワードで認証する。

   # mysql -u root -p
   パスワード(先ほど設定したもの)を入力する。

 MariaDBが起動した後、ユーザー情報の一覧表示をする。

 MariaDB[(none)]> select user,host,password from mysql.user;
 と打ち込んで、表示される内容を確認する。

  次に、データーベース一覧表示は、

 MariaDB[(none)]> show database;

  内容を確認したら、

 MariaDB[(none)]> exit   と打ち込んで MariaDB から外に出る。

次に、
 c. Apache をインストールする必要がある。 今日はここまで・・・ 明日以降ここに追記する。

« December 2014 | Main | February 2015 »

June 2017
Sun Mon Tue Wed Thu Fri Sat
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

Recent Trackbacks

無料ブログはココログ