葉山の堀内にある本格エスプレッソ、ホームスタイルアイスクリームを提供するカフェ・雑貨店です。店内には国内外からの雑貨、食品が並び、内装はパシフィックウエストコスト・北欧スタイルです。

今回も規模やページ構成から、WordPressでの構築としました。できるだけシンプルなデザインを要望されたこともあって、写真が目を引くようにレイアウト。
システム面では「blog」に思いの外、手が入りました。blogの一覧表示で、一件目の記事が大きく表示され、それ以降は２列で表示されます。アイキャッチ画像（サムネイル画像）も少し変わったサイズで設定し、自動で切り抜かれる写真も楽しめると思います。

もし鎌倉や逗子の方へ行くことがあれば、少し足を伸ばしてRei's Placeのアイスクリームを食べに行きましょう。本当にかわいいお店！

• 葉山のカフェ、雑貨のお店 Rei's Place
• カーリーコレクションとのコラボフェア
• Rei's Placeが掲載された雑誌「spoon.」をAmazonで買う

町山さんの作品は、たまたま海外のサイトで見かけたんですが、お名前から日本の方と知ってすぐに連絡させていただきました。
サイト制作の実績もあり、ご自身のサイトもFlashでとても凝っています。インタビューでも楽しい話をたくさん聞けたので、是非ご覧ください。

• VERYROLL Gallery 020 MACHIYAMA KOTARO
• loopool（町山 耕太郎さんのサイト）

最近は似たようなサイトも数多くあるんですが、この öppna は作品内容と取引の安全性で勝負。とある後ろ盾もあるので、今後も素晴らしい商品が並んで行くと思います。

長谷川は技術面やユーザビリティに関するアドバイス、一部のページデザインを担当しました（メインのデザインやコーディングは他の方が担当しています）。

こういうスタンスでプロジェクトに関わるのは初めてでした。いつもは作り手として全体をハンドリングすることが多いんですが、自ら手を動かさないことがこれほどきついとは思いませんでした。その分、思いつく限りの提案をしています。未だ実現できていない提案もたくさんあるので、これからもっと改善されていくと思います。

書店でもハンドメイドに関する雑誌なんかをよく見かけるようになりました。イベントも本当に多いみたいです。「そういえば知り合いの手作りカバンがなぜか商品レベル」ということもよくあるので、そういう作り手さんには是非紹介してあげてください。

• ハンドメイドコミュニティ öppna オープナ
• Twitter @oppna_jp をフォローする

いろいろサービスはありますが、セキュリティ面ではbit.ly、goo.glが良さそう。bit.lyのhelpを見ると、Google Safe Browsing APIなどを使って事前にリンク先をチェックしているようです。goo.glもセキュリティを謳っているので同様のチェックをしているはず。

ただgoo.glは少し不安定でURLを取得できないタイミングがあるので、安定したbit.lyの方がおすすめ。bit.lyの別ドメイン「j.mp」を使えば、URLもより短くなります。

bit.lyを選ぶもう一つの理由は、短縮URLの最後に「+」を付けるとリンク内容を確認できる点。直接リンクせず、bit.lyの画面で実際のURLを確認できます。よく知らない相手からのメールやTwitterに、bit.ly（またはj.mp）のURLが含まれていたら一応これでチェックしましょう。

それから、bit.lyから離れますが、サイトの作り手にもできることがあります。ページ内にショートURLを記載する、というもの。
こうすることで、そのページから直にショートURLを取得できるようになり、ショートURLを使う場合もリンク先として間違っていないかチェックすることができます。既にいろんなサービスがある現状を考えると安全性という面で課題はありそうですが、「wordpress.com」では全ページのhttpヘッダ、HTMLいずれにもショートURLを記載しています。単に閲覧者のオプションを増やすという意味では良い対応だと思います。
ちなみに通常のWordPressもhead部にショートURL「?p=」が自動で付与されます。もう少しきれいなURLにしたい人はプラグイン「Short link maker」が便利。

大まかに対応内容を。

• canvasタグを記述。絵を描く範囲の指定。今回は一部画像に重ねるので、CSSでレイヤーの順番なども指定。
• JavaScriptに数字でベジェ曲線を記述（ベジェ曲線ってこういう順序で書いていたのか）。はやくFireworksなんかでJavaScriptの出力ができるようになって欲しい。色はもちろん、線の太さも1以下で指定可能。ちなみに上の紐の太さは「0.5」。
• IEに対応させるためのJavaScript「excanvas.js」を読み込む。

やっぱり今のままでは絵を描く工程がネック。いい出力ツールが出てくれると、装飾のためのGIF画像なんかがいらなくなりそう。
でも、CanvasをCSSで使用できそうなのはWebkit（Safari、Chrome）だけだったり、そう簡単ではないのかも。ソース内にcanvasタグが散在するのも良くないし。

この記事を書きながら見つけたカヤックさんのブログの背景もcanvasタグでした。ただリロードの度に書き換えらる背景がきれいすぎます。

長谷川が参考にしたサイトは「Canvas - HTML5.JP」。基本的なところはよくわかります。でもこういうサンプル画像は武骨なせいで想像力が働かなくなります。小さい頃に見たMSX（BASIC）のマニュアルもそうでした。何ができるかを他のサイトで見てからの方がよさそう。

以下内容は、2010年6月時点のものです。細かなスペックはヘテムルサイトをご覧ください。質問等もご遠慮ください。

プラン・料金

プランは２つ。スタンダードプランとColdFusionプラン。この手のサーバの中では初期費用も月額も安くはないんですが、スペックを考えるとかえって安いのかなと思います。容量はさほど重要ではないんですが、ドメイン設定の自由度やデータベースの数など他を圧倒していると思います。

速度・安定性

バックアップについては「RAID構成」とのこと。たまに若干重いかなと思うタイミングもあります。「お知らせ（メンテナンス・障害情報）」のRSSに障害情報は載らないみたいなので注意。ちなみにこの１年以上の間、自分で気付いたサーバの障害は１回。数時間繋がりませんでしたが、その後それが繰り返すこともなく許容範囲だと思います。
ヘテムルの管理画面には「サーバー安定化の取り組み」というページがあります。なぜか非公開なんですが、これを見ると、プロセスやデータベース接続数を制限することでサーバを安定させるようです。

管理画面

管理画面はきちんとデザインされていて使いやすい。一点、PHPのバージョンもここで切り替えられるようにしてほしい。簡単にできるはず。php.iniも決められた範囲変更可能ですが、アカウント毎に１種類というのは支障もありそう。
それからアクセス制限の操作には注意。指定したディレクトリに.htaccessファイルがあると上書きしてしまいます。MTやWPを使用しているディレクトリでは特に注意しましょう。

ドメイン

ドメイン50個使えます。嬉しいことに外部のネームサーバからも設定できます。外部からサブドメインだけを割り当てることも可能。ただしサポート外だと思うので自己責任。
独自SSLが簡単にしかもものすごく安く設置できるのもヘテムルのすごいところ。

データベース

使えるデータベースはMySQL50個。これは本当に素晴らしい。全てバージョン５。DBサーバはデータベースを作る度にランダムに割り振られます。当然のことながら最近このDBサーバの増え方がすごい。管理ツールは「phpMyAdmin」と「SQLBuddy」。

メール

IMAP可能。WEBメーラーもあります。ネームサーバを預けるとSPF（TXTレコード）も設定されます。ただ独自ドメインでメールサーバ（POP、SMTP）が立てられないのが惜しいところ。
これは何となくなんですが、個人的にヘテムルはWEBサーバに特化させて、メール機能はGoogle Appsに預ける形がオススメ。ヘテムルのマニュアルにも導入方法が書かれています。

ファイル操作

FTPアカウントも自由に作成できて、FTPS、SSHでの接続も可能。ファイルマネージャー機能（heteml FTP）やWordPressなどのCMSインストール機能も付きました。
それからEC-CUBEのインストールも親切なマニュアルがあって助かります。サーバによってはパーミッション操作が面倒なこともあるんですが、マニュアル通りあっさりインストールできました。

サポート

申請前に何度か問い合わせたことがありますが、翌日には返信があり内容も的確です。マニュアルもしっかりしているので操作で困ることはないと思います。

支払方法

支払いには「おさいぽ！」がオススメ。通常はチャージしたポイントで支払う形を想像しますが、オートチャージ機能（無料）があり１ヶ月単位でヘテムルへの自動支払も可能です。

ここのところ次々に新しい機能が追加され、すっかり死角がなくなりました。実際、管理画面にあった「開発項目」も今はありません。やり尽くした感じ。後はサーバの安定性と細かな機能（php.iniなど）の自由度をどうするかというところだと思います。

もちろん他にも「何でもできるサーバ」はあるんですが、それがある程度「きちんとできるサーバ」は今のところheteml（ヘテムル）ぐらい。特に同業者さんにオススメです。

念のため、以下は「WordPress 3.0 RC2」をインストールしたものです。3.0の正式リリースでは変更があるかもしれません。

• 管理ユーザーのパスワードをインストール時に決められるようになっています。確かに今まで二度手間でした。
• 管理画面がグレー。ブラウザと同化させたような配色。操作しづらいということはないけど、もう少しはっきりしててもよかったと思う。
• 管理画面タイトルの横に「検索エンジンをブロック中」（プライバシー設定）が表示されます。うっかり外し忘れそうになることもあるのでちょっと便利。
• ヘルプが各ページごとに詳しく説明してくれます。翻訳ご苦労様です！
• デフォルトのプラグインはお馴染みの「Akismet」「Hello Dolly」「WP Multibyte Patch」。
• デフォルトの外観（テーマ）が変わりました。「Twenty Ten 1.0」というWordPress Teamが作ったもの。とうとうHTML5。でも見た目、ちょっとMTぽい。
• ウィジェットは仕様が変わったのか、単に設定を複雑にしたのか、操作できるエリアがたくさんあります。詳細は未確認。自由度が上がってテーマの作り込みが大変そう。
• メニューという項目ができた。公開ページのメニューをカスタマイズできます。WooThemes の制作者と協力してコアに入れた機能。オープンソースらしい話。ただこれもテーマの作り込みが大変そう。
• 背景、ヘッダーについては、カスタマイズしたテーマで使えるなら嬉しい。特にヘッダーは需要がありそう。
• 記事、ページごとに画像サムネイル「アイキャッチ画像」が設定できます。これはサイト制作では意外と重要。英語では「featured image」だったと思いますが、この言葉になりました。
• 投稿画面のタイトル欄に「タイトルを入力して下さい」と記載されています。今まで何もなくて端折りすぎと思ってました。
• エクスポートの出力を、細かなフィルターで制御できるようになっています。
• 設定内の「メディア」と「その他の設定（ファイルアップロード）」が統合。「プライバシー」も「表示設定」とかに入れて良さそうです。
• アップグレードがないのはRCだからかな。

それから、今回の目玉「マルチブログ」は、標準的なインストール方法では使えなくなってます。ある意味潔いけど、いざ使う時には面倒。一度試してみたんですが、実際「WordPress MU」は使ったことがないので簡単には把握できませんでした。マルチブログ化についてはまたここに書きます。こちらのページ「WordPress 3 スニークプレビュー | Technolog.jp」が参考になります。

画像データ

• JPEG画像の圧縮率
  数％の違いでも思いの外、圧縮できます。制作段階のデフォルトに注意。
• Flashの効率化
  この辺は疎いんですが、Flashもインスタンスを上手く使うとか。ファイルを分散して早く見せるケースもあると思いますが、ファイル数が多すぎても悪い結果になりそう。

CSS、JavaScriptファイルの整理

• コードを軽量化する
  改行や無駄な表記をなくすためのツールもあります。ちなみに長谷川はメンテナンスが面倒になるのでやりません。ただやたら長いコメントや、無駄な罫線を引いている場合はなくした方がいいと思います。
• gzipで圧縮する
  Safariに問題があるので躊躇われますが、圧縮の幅は大きいのでコード軽量化よりはこちらの方が効率は良さそうです。ちなみにこの辺の対策、画像一枚減らす方がよほどデータ量を減らせる気がするんですが、Page Speedでも強く推奨されるところを見るとページレイアウトのベースとなるテキストを早く読み込めるという点が重要なのかも。
• CSSファイル数を減らす
  長谷川はもともとたくさんのファイルに分けるのが苦手です。ファイルが分れていると後で追うのがかえって大変だと思うんですが、ものすごい量のファイルを抱えたサイトはたくさんあります。これはファイルのアクセス数を減らすという意味なので、サーバによっては容量削減よりも有効なケースもありそう。
• ページ内で他のサーバへアクセスしない
  ファイル数削減と同様、DNSを見に行く回数なんかも重要になるようです。アフィリエイトなんかは仕方ないんですが、Google Ajax API もテスト以外は使用しない方がよさそうです。でも Google Font API は使いたい。

サーバにて

• 快適なホスティングサーバへ移行
  使っているサーバが急に重くなることは、いつでもどのサーバでもありえます。いつも簡単に移行できるようにサイト仕様を考慮しておきましょう。エックスサーバーの場合、同じサービス内でサーバの移行もできます。
• PHP高速化
  サーバによっては高速化できるものもあります。使ったことはないんですが、WordPressなんかも速くなるようです。
• WordPressのキャッシュ
  WP Super Cacheを入れてキャッシュを使いましょう。いまや必須のプラグイン。デフォルトにしていいと思います。

何となく10年くらい前の記事を焼き直して書いているような気がしてきました。ただいつも、無駄に重くないかどうかは気に留めておきたいと思います。

静的サイトをWordPressへ置き換える作業、普通は少し面倒。内部でのチェックを重視するなら一時的にアクセスを制限してしまう。あるいは現行サイトの公開を重視するなら、「.html」と「.php」の優先度を利用してチェックに一手間いれるか、別サーバで十分にテストするなどという方法になると思います。このプラグインを使うとこの二つが解決。WordPressの設定中も現行の静的ページを公開し、管理者は同じURLでWordPressがチェックできます。この同じURLでチェックできるという点がとても大事。しかもWordPressの管理画面で切り替えができます。すばらしい。ただ、公開している静的ページとURLがかぶらないようにWordPressを作る必要はありますね。

方法は、現行のトップページ「index.html」を「503.php」とリネームして使用中のテーマディレクトリに入れる。プラグインの管理画面でこれを読み込むように設定して、メンテナンスモード実行。ログインしていない他のブラウザで公開ページをチェックします。

503.phpは、テーマがあるディレクトリ奥深くに配置しますが、表示はルートになるので中身のパスもそのままでOK。敢えて設定しなければ、ステータスコードも503ではなく200を返すようです。