ブログ3年ぶりのリニューアル

このブログを全面的にリニューアルしました。調べてみると、WordPressからDrupalに変更したのが何と3年前、この間、確か基本的な機能やデザインも殆どそのまんまだったはずです。

制作するクライアントサイトをもっと使いやすくするには、同じシステムを自分自身がユーザーとして徹底的に使いこなすべき、という目的で作り変えることにしました。

リニューアルのポイントです：

サーバーをVPSに変更

共有サーバーの他のユーザーのとばっちりを受け、繋がりにくい状態が継続する場合、度々引越しを繰り返して来ましたが、ここ1年半くらいSSL利用が目的でVPS（仮想専用サーバー）を使ってみて、全くそんな経験をすることがなく、安定した運用ができてきました。

Apacheやファイアウォールの設定とかは若干めんどうですが、コストもそんなに変わらないし、ルート権限のない共有レンタルサーバーはもうオワコン、かなぁと思います。

Drupal7へのアップグレード

いくつかDrupal6→Drupal7へのアップグレードをやってみて、Drupal5→Drupal6の時より、はるかに楽で確実、とわかりました。フィールド値やタクソノミー（カテゴリー設定）、Viewsによる一覧出力の更新はバッチリです。ただ、変数の構造が全く違うので、テンプレートを作り変えることだけが面倒な作業として残ります。

それでもいくつかのハマりポイントがあるので、これについては別途まとめてみるつもりです。

レスポンシブデザイン

これまでこのブログもユーザーエージェント（見る側が発信するOSやブラウザに関する情報）でモバイル出力とPC用の出力を切り分け、別々の出力を行うようにし、モバイル用にはJQuery Mobileを使った出力を行なっていました。

この方法だと、出力の変更をするたびに、複数のテンプレートの修正が必要になる、ということの他、タブレットPCはどうするか、という課題が残ります。

ということで、去年の年末くらいからレスポンシブデザインに挑戦、いくつかのサイトを作ってきて、まずやっていけそうなので、当面は自分の新規サイト作成のデフォルトはレスポンシブデザインと決めています。

今回はGoogle Readerに代わるRSSリーダーとして愛用させてもらっているFeedlyのカード型のデザインにしてみました。jQueryのプラグインMasonryで実装しています。親要素と子要素のCSSの設定から子要素のposition属性をpx単位で出力してくれるというスグレものです。

フロントページや一覧ページでは、スマホの場合1列、ミニタブレットでは2列、それ以上PC等の場合3列で右サイドバー（黒い部分）が表示され、スマホやミニタブレットではメインナビゲーションはボタンで開閉式に、サイドバーはページ下に回りこみ、メインナビゲーションのSEARCHから移動するようにしています。

画像はNexus7でのフロントページのスクリーンショットです。

ビジュアルエディタの変更

長年ビジュアルエディタとしてTinyMCEを愛用させてもらっていたのですが、ここにきてどうも不具合が目立ってきました。特にChromeとの相性がよくなくて、リンクや画像を組み込むためのウィンドウサイズが異常に小さかったり、文章の修正だけで余計なマークアップが追加されたりと、Java Script関係の挙動がおかしいです。

聞いたところでは、Drupalの標準的なビジュアルエディタとしてCKEditorが定着してきているようです。すでにいくつかのクライアントサイトでは実装させてもらっているのですが、自分ももっと使いこなさないとマズイです。

ブログの表からは見てもらえないのですが、文章を書く際に一番多く触れるのがビジュアルエディタのインターフェースです。使ってみて、やはり、このボタンは不用、新たにこのボタンは必要なはず、とか気づくことが少なくないです。

営業用サイトをリニューアルして、Drupal関連やネット絡みのことはできるだけそっちで更新して行こう、と思っていたのですが、ふたつのサイトを鋭意更新していくのはかなりシンドイと気づきました。それにこの営業サイトのデザイン、どうも自分自身ナットクできないです。

ということで、こっちを鋭意更新し、営業用サイトの方は、放置しておいてもそれなりに役に立つサイト、コンテンツが少なくてもそれなりにインパクトのあるサイトにできないか、改めてリニューアルしようと考え中です。

要はデザインで勝負ということしかなさそうですが、そういうご要望をいただくことは少なくなく、チャレンジしてみようと思っています。