MacのUIに最適化していて使って楽しいCoda 2。



<img class="alignleft size-full wp-image-567" title="coda2" alt="" src="/wp/wp-content/uploads/2012/12/coda2.png" width="128" height="128" />

テンプレート機能があれば完璧なんですが、残念ながらないのでPHPで簡単に作ってみる。MAMPを使えばローカルに簡単にPHPが動くサーバ環境ができるのでこれを利用します。ちなみにPHPは素人です。Wordpressのテーマカスタマイズをする程度です。

おおまかな流れは

* ローカル環境にPHPでテンプレートとコンテンツを作成し
* ローカル環境をダウンロードツールでダウンロードしてHTML生成する

という感じです。

# 必要なもの

* <a href="http://panic.com/jp/coda/">Coda 2</a>
* <a href="http://www.mamp.info/en/index.html">MAMP</a>

# 構成例

```
--index.php
|--/css
|--/js
|--/img
|--/includes
|    |--config.php
|    |--header.php
|    |--footer.php
|    `-...
|--/any category
|    |--index.php
|    `--/any subcategory
|         `--index.php
|--.htaccess
`--...
```

ここではindex.phpはいわゆるコンテンツページです。
（ヘッダとフッタをテンプレを読み込む形に変更したもの）

まず、基本となるコンテンツページ。
テンプレートファイルの読み込みとページ専用設定、それにページのコンテンツが入ります。
ページ専用のidとレイアウト区分（1カラムとか2カラムとか）を変数として使うという想定です。
<code>$category</code>等としてカテゴリーを入れてもいいと思います。

## index.php

```php
<?php

define('DOC_ROOT', $_SERVER['DOCUMENT_ROOT']);
include DOC_ROOT . '/includes/config.php';
$docId = 'index';
$layout = 'layout-hogehoge';
$title = 'PAGE TITLE' . ' | ' . $siteinfo['name'];
include DOC_ROOT . '/includes/header.php';

?>
  <article>
    HERE IS ARTICLE
  </article>
<?php

include DOC_ROOT . '/includes/footer.php';

?>
```

次に読み込まれる側のパーツを作っていきます。

まず、設定ファイル。全ページで共通の設定などをしていきます。
ここではサイト名称とルートのURLをWordpress風に$siteinfoに持たせています。
$rootはhttp://example.com/hoge/をルートにしたい場合のために用意しました。
相対パスを出力するための関数も作りました。

## includes/config.php

```php
<?php
$protocol      = ($_SERVER['HTTPS']) ? 'https://' : 'http://';
$host          = $_SERVER['HTTP_HOST'];
$root          = ''; // `/hogehoge`
$siteinfo      = array(
  'name' => 'SITE NAME',
  'url'  => $protocol . $host . $root,
);

function rel_root($show_root = false) {
  global $root;

  $path     = '';
  $dir      = str_replace($root, '', $_SERVER['REQUEST_URI']);
  $count    = count(array_filter(explode('/', $dir), 'strlen'));
  $reg_html = '/.+\.htm?l/';
  $is_html  = preg_match($reg_html, $dir);

  if ($is_html) {
    $count--;
  }
  if ($count < 0) {
    $count = 0;
  }
  if ($count == 0) {
    if ($show_root) {
      $path .= './';
    }
  } else {
    for ($i = 0; $i < $count; $i++) {
      $path .= '../';
    }
  }
  return $path;
}
?>
```

## includes/header.php

ヘッダとフッタの例です。専用スクリプトなどを切り分けるためにscripts.phpもインクルードできます。必要ならsidebar.phpなども入れられるです。

設定ファイルで作った相対パスを書き出す関数を使っています。階層に従って“<code>../</code>”を追加します。引数に<code>true</code>を渡すとルートの場合に“<code>./</code>”を返します。（まあ“<code>/</code>”直書きしといてもいいですが）

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?= $title ?></title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="shortcut icon" href="<?= rel_root() ?>favicon.ico">
<link rel="stylesheet" href="<?= rel_root() ?>css/com.css">
<link rel="stylesheet" href="<?= rel_root() ?>css/<?= $docId ?>.css">
</head>

<body id="<?= $docId ?>" class="<?= $layout ?>">
  <a name="pagetop" id="pagetop"></a>
  <header>
    HERE IS HEADER
  </header>
```

## includes/footer.php

```html
  <footer>
    HERE IS FOOTER
  </footer>
<?php

include DOC_ROOT . '/includes/scripts.php';

?>
</body>
</html>
```

<span style="color: #ff0000;">※PHPスクリプトはWebサーバで公開することは想定していません。</span>

# ツールを使って静的ファイルとしてダウンロード

PHPで構築したローカルサイトからダウンロードすることでHTMLファイルを生成します。

例としてSite Suckerです。

<a href="/wp/wp-content/uploads/2012/12/site_sucker_1.png"><img class="aligncenter size-full wp-image-537" title="site_sucker_1" alt="" src="/wp/wp-content/uploads/2012/12/site_sucker_1.png" width="653" height="316" /></a>

settingsを変更→URL入力→ダウンロード

<a href="/wp/wp-content/uploads/2012/12/site_sucker_21.png"><img class="aligncenter size-full wp-image-541" title="site_sucker_2" alt="" src="/wp/wp-content/uploads/2012/12/site_sucker_21.png" width="500" height="306" /></a>

デフォルトではReplace Filesは「Never」になっています。ダウンロードするたびに古いファイルを捨てる必要があります。「with Newer」でよいと思います。

また、HTML Processingが「Localize」になっていますが、これだとURLによけいな“index.html”を追加してしまうので「None」としておきます。

こうしてダウンロードしたものからゴミをとって（Site Suckerの場合__00というエイリアスがあるので削除します）、あとは煮るなり焼くなり納品するなりご自由に。

<a href="/wp/wp-content/uploads/2012/12/site_sucker_41.png"><img class="aligncenter size-full wp-image-571" title="site_sucker_4" alt="" src="/wp/wp-content/uploads/2012/12/site_sucker_41.png" width="599" height="341" /></a>

設定しなおさなくていいようにSite Suckerの設定は保存しておきます。

# index.html以外のhtmlファイル

基本的にhttp://example.com/hoge/fuga/のように“/”で終わるURLを想定していますが
どうしてもhoge.htmlなどが必要な場合があるかも知れません。

このままでhoge.phpを作成してもダウンローダーはphpファイルをダウンロードしてしまうので
（ロダによって違うのかも知れませんが）.htaccessを使ってhtml拡張子でphpを実行させる必要があります。

```
AddType application/x-httpd-php .htm .html
```

MAMPならこれをサイトルートに置けばhtmlでもPHPを実行できます。
（この場合はコンテンツはすべてhtml拡張子で統一した方がいいかもしれません）
とりあえずごくごく簡単なところでまとめてみました。使っていきながら改良したいと思います。

<span style="color: #ff0000;">追記：html形式だと相対パスがおかしくなるのでrel_root関数修正しないとです。</span>

<span style="color: #ff0000;">12/4：rel_root関数修正</span>

【脱Dreamweaver】Coda 2のためにPHPでテンプレートらしきものをつくる

自分の所には来ないだろう、というのは間違いだったわけで。



# 110chang.com

## ログ

2012.05.21

* ウクライナ？のIPからバックドア「FilesMan」を設置される

2012.05.23

* ウクライナ？のIPからバックドア「FilesMan」を設置される

2012.05.24

* FTPによりバックドアの存在に気づき削除
* バックドア削除後もウクライナのIPからアクセスがあるが削除したので403

どのような脆弱性から不正アクセスを行ったか不明、脆弱性があると話題のtimthumb.phpはなし（<a href="http://wordpress.org/extend/plugins/timthumb-vulnerability-scanner/">Timthumb Vulnerability Scannerプラグイン</a>を使用して確認）。

ファイルはいずれもmt（ランダム英数）n.phpでルートやwpディレクトリなど至る所に生成。元からあるindex.phpの先頭に、特定のクエリを付けてアクセスするとサーバーの情報が表示されるコード？を埋め込まれる。

ヘテムルのインフォメーションに同様の事例の注意喚起あり。バックドア設置日時がブログ更新と符合しているのが気になる

## 対処：

* 該当ファイル削除、改ざんされたファイルを修正
* Wordpressは最新版だったはずだが記憶があいまい
* WordpressとFTPのログインパスワードを変更
* .htaccessのパーミッションを604に
* .ftpaccess設置

# とあるサイト

* サーバー：ロリポップ
* CMS：Wordpress

## ログ

2012.05.11

* ドイツ？のIPから-dオプション使ったアクセス（GW以降話題になったCGI版PHPの脆弱性）
* 設置サーバーのIPでindex.bak.phpとJPG画像を装ったphpファイルが設置される。内容はどちらも同じ

2012.05.25

* FTPにより不正なファイルの存在に気づき削除
* .htaccessが改変されていた（上記の画像ファイルをphpとして実行できるようになっていた）

5.11以降、該当ファイルにアクセスの形跡無し。脆弱性があると話題のtimthumb.phpはなし。下記の「<a href="http://www.seotemplate.biz/blog/9948/">WordPressサイトの.htaccessが改ざんされている件</a>」、「<a href="http://www.baka-ke.com/2012/05/16/htaccess-kaizan-png-eval/">【メモ】.htaccess改ざん事例（.htaccess/png/eval）※追記あり（5/24 8:24a.m.）</a>」と同じ事例

## 対処：

* 該当ファイル削除、改ざんされたファイルを修正
* Wordpressを最新版にする
* WordpressとFTPのログインパスワードを変更
* ロリポップ側の対処は5/16に完了した模様


## 参考


* <a href="http://heteml.jp/pages/security/">レンタルサーバー heteml より、セキュリティに関する重要なお知らせです （ 2012/05/22 更新 ）</a>
* <a href="http://sucuri.net/malware/backdoor-phpfilesman02">Backdoor: PHP:Filesman:02</a>
* <a href="http://www.seotemplate.biz/blog/9948/">WordPressサイトの.htaccessが改ざんされている件</a>
* <a href="http://www.baka-ke.com/2012/05/16/htaccess-kaizan-png-eval/">【メモ】.htaccess改ざん事例（.htaccess/png/eval）※追記あり（5/24 8:24a.m.）</a>

ペパボ系のサーバー使ってたり、Wordpress使ってる人は一度FTP確認したほうがいいです。しばらくは毎日ログを確認しようと思います。

Webサーバーにバックドア作られたりした件

<p>前に書いたのは６月か。</p>

<p>ヘテムルにアカウント作ろうとしたら「110chang」が使えなかった。お試しで使ったアカウントが残っているのか、誰かが取ったのか・・と思って「110chang」で検索してたらたまたまこんなサイト見つけた。</p>


<p><a href="http://tophatenar.com/entry/120223/WALK+SLOW,+AGAINST+THE+FLOW.%EF%BD%9CBLOG">[TopHatenar] www.110chang.com さんの順位</a></p>

<p>ふーん、悪くない位置にいるなあ。あと、こんなのも。</p>

<p><a href="http://blogopolis.jp/view/http://www.110chang.com/blog/">ビジュアルブログ検索エンジン [Blogopolis]</a></p>

<p>CSS町のはじっこにいるみたいです。５丁目ぐらいかな。てか、このビジュアライズすごいな。
ブログ２個とも放置してるけど、そろそろテコ入れしようかな。</p>

<p>書いてませんが最近は</p>

<ul>
<li>自作していたユーティリティ（スルスルスクロールとかロールオーバーとか）をjQueryに置き換え。jQueryのおかげでサクサクスクリプト書ける。</li>
<li>CS5にしたのでFlashで3Dやってみたり（Player10だとPapervisionとかなしでできるのね！）</li>
<li>OS10.6になったのでiPhoneアプリに手を出してみたけどObjective-Cはちょっと敷居高い。</li>
<li>CakePHPを使ってみた。ニュース更新するぐらいならできそう</li>
</ul>

<p>な感じです。仕事ではいままでMT使っていたCMSをWordpressに切り替えて、いくつか事例できそう。Cake使えればCMSも自由に作れるんだけど、まだ仕事で使えるレベルじゃないよなあ。WordpressでもっとPHPに慣れてかないとな。</p>

<p>ちなみに、僕ははてなーではありません。</p>

Articles tagged 'PHP'

【脱Dreamweaver】Coda 2のためにPHPでテンプレートらしきものをつくる

Webサーバーにバックドア作られたりした件

最近のこと