POCKET BASE » サイト制作

WordPress 3.0「セロニアス」がリリース

Hannya — Fri, 18 Jun 2010 11:47:33 +0000

このサイトのブログでも使用している、オープンソースのブログ／CMSプラットフォーム「WordPress」のメジャーリリース、バージョン3.0が登場。

WordPress 3.0のコードネームは「セロニアス」。これは、ジャズ・ピアニスト「セロニアス・モンク」にちなんで。WordPressのコードネームは、毎回ジャズ奏者から取られている。

日本では、シックス・アパートのMovable Typeが人気で、多くの企業サイトでも使用され、シェアも高いそうだが、世界で見ると、WordPressの方が多く使われているらしい。最近は、日本でもWordPressの人気が上がってきているのかな。

そんなWordPress 3.0だが、メジャーリリースにふさわしく、多くの新機能が搭載されている。そして、新デフォルトテーマの「Twenty Ten」は、カスタマイズが可能な背景やヘッダー、メニューなど、新機能をフルに活用し、デフォルトにふさわしい魅力的なテーマとなっている。初めてWordPressを使う人でも、このテーマを使えば、オリジナルなデザインのサイトを、簡単に作ることができるだろう。

また、大規模なマルチサイト運営に使われていたWordPress MUとの統合も、大きな変更点だ。これは、よりいっそうのシェア拡大につながるかもしれない。

WordPress 3.0は、ベータ版のころからローカル環境でテストをしているが、このサイトの自作テーマは、取りあえず問題がなさそうな感じ。あとは、使用しているプラグインにも問題がなくなればアップグレードをしようと思う。

できれば、自作テーマもWordPress 3.0に最適化し、古いブラウザ環境も見限って、新しい機能とかを使って作り替えたいところなのだが……。それには、まだまだ勉強が必要だな。

WordPressの「続きを読む」リンクをカスタマイズ

Hannya — Wed, 20 Jan 2010 13:52:50 +0000

少し前に、このサイトのブログで使用している、WordPressのバージョンを、2.8.6から最新版の2.9.1にアップグレードした。

最新版にアップグレードしたついでに、プラグイン関連をいろいろ調べていると、今まで使用していた「Custom MoreLink」というプラグインが必要ないことが分かった。

このプラグインでやっていたのは、で生成されるリンク、いわゆる「続きを読む」のリンクから、#more-xxxxを削除するということ。これで、シングルページの続きの場所ではなく、ページの先頭へリンクされるようになる。

もちろん、「Custom MoreLink」には、それ以外の機能もある便利なプラグインなのだが、このサイトでの用途には必要がなくなったので、お役御免ということに。

新しい方法は、WordPress Codexに書いてあったのだが、テーマのfunctions.phpに、以下のコードを追加するだけでいいらしい。

function remove_more_jump_link($link) {
$offset = strpos($link, '#more-');
if ($offset) {
$end = strpos($link, '"',$offset);
}
if ($end) {
$link = substr_replace($link, '', $offset, $end-$offset);
}
return $link;
}
add_filter('the_content_more_link', 'remove_more_jump_link');

これで、希望どおりの動作になってくれた。プラグインは便利なんだけれど、あまり使いすぎると重くなりそうだし、テーマの書き方で補えるなら、その方がいいしね。

テーブルをソートするJavaScript、TableKit

Hannya — Mon, 07 Dec 2009 12:45:56 +0000

このサイトの「喜多嶋隆作品蔵書リスト」だが、縦に長い表が見難かったので、項目別にソートできれば少しはマシかなと、何かいいJavaScriptがないか探していた。

他の動作で使用している、PrototypeというAjax JavaScriptフレームワークを利用したもので、いろいろ探してみると、「TableKit」という、なかなか優れモノのJavaScriptを発見した。Googleの検索で、結構引っかかるので、有名なのかな。

項目をソートするだけならば、結構簡単だったのだが、一応設置手順をメモ。

1. 必要なファイルを設置

Millstream Web Softwareから、TableKitをダウンロードして解凍し、ソートに必要な「fabtabulous.js」と「tablekit.js」を任意の場所に設置する。Prototypeが設置されていない場合は、「prototype.js」も同様に設置する。

2. JavaScriptファイルの読み込み

内に、設置したJavaScriptファイルの読み込みを指定する。

3. 動作の指定

に、動作に必要なclassを指定する。

（中略）

著作名	初版発行日	備考

今回はソート機能だけができればいいので、class="sortable"のみを指定した。ほかにも、リサイズ機能と編集機能を指定することも可能。

以上の指定で、要素をクリックすると、昇順・降順でソートするようになる。また、ソート時の要素の表示は、スタイルシートで色を変えるなど、現在の状態が分かるようにしてやると便利。今回は、自分用ということで、あまり目立たないようにしたけれど……。

他にも、ソートの初期状態を指定したり、データ種別の指定など、いろいろとオプション項目があるようだが、詳しくは公式サイトのDocumentationを参考に。

喜多嶋隆作品の蔵書リストを作成

Hannya — Sat, 05 Sep 2009 00:58:04 +0000

先日、amazon.co.jpで、何か面白いモノがないか探していると、1987年に発行された講談社X文庫、喜多嶋隆の『天使のアッパーカット』上下巻セットが、マーケットプレイスで安く販売されていたので、さっそく購入した。いま読んでいる本が読み終わったら、次はこれを読んでみよう。でも、ほかにも未読の本があるなぁ……。

角川文庫と光文社文庫の喜多嶋隆作品は、すべて揃っているが、そのほかの文庫本や単行本は、持っていないものが結構ある。それらは、古書店などで見つけると買ったりしているのだが、たまに、「これは持っていたかな？」と忘れたりするので、備忘録も兼ねて蔵書リストを作っておくことに。

ページ下部メニューの、Individual Pagesのところに、「喜多嶋隆作品蔵書リスト」へのリンクを入れておいたので、喜多嶋隆作品に興味のある方はどうぞ。

蔵書は結構な数があるので、「角川文庫」「光文社文庫」「そのほかの文庫」「単行本など」の4つに分け、それぞれを、JavaScriptでタブ切り替え表示するようにした。

タブ切り替え表示用のJavaScriptは、探してみるといろいろな種類のモノあったが、このサイトでは、画像拡大＆スライド表示用のJavaScriptで、prototype.jsというAjax JavaScriptフレームワークを使用しているため、タブ切り替え表示用のJavaScriptも同様のモノを選択。これで、なんとか1ページに収めることができた。

タブ切り替えって、今まで使用したことがなかったけれど、結構簡単に作ることができたし、今度、仕事でも使ってみようかな。

POCKET BASE 2G

Hannya — Mon, 01 Jun 2009 14:27:07 +0000

前回のエントリーでもチラリと予告したが、トップページに引き続き、このBlogページのデザインも、1年半ぶりにリニューアル。題して、POCKET BASE 2G（セカンドジェネレーション）！

すみません、大げさなタイトルを付けるほど、たいしたモノじゃないです。流行っぽい名前を付けてみたかっただけです、はい。

リニューアル作業自体は、今年の3月に開始しており、4月にはリニューアルをする予定だったのだが、途中でいろいろと忙しくなって作業を放置したまま、結局約2か月遅れのリニューアルとなった。まあ、誰かが待っているというわけでもなかったのでいいかなと。このあたりは、仕事でのサイト制作とは違って気楽だよね。

デザインは、今回も1カラムレイアウトに。2カラムや3カラムのレイアウトにするほど情報量は多くないので、これで十分かなと。それに、1カラムレイアウトは、ごちゃごちゃせずにスマートなデザインにできるので、個人的には結構好み。

そのわりには重いじゃないかっ！　という突っ込みは却下で。

ああ、見られないぞっ！　とか、動かないぞっ！　などの、不具合があれば、どしどしご連絡を。もちろん、ご苦労さまというねぎらいの言葉は大歓迎。

久しぶりにトップページを変更

Hannya — Fri, 29 May 2009 10:45:17 +0000

このサイトのトップページを、久しぶりに変更した。といっても、そんなに見た目は変わっていないが、この後予定している、このBlogページのデザイン変更に合わせ、プチリニューアルといったところか。

主な変更点として、従来のトップページでは、JavaScriptでスタイルシートをランダムに読み込み、アクセスするたびに、表示される写真が変わるようにしていたが、今回のトップページでは、JavaScriptのスライドショーで、いくつかの写真を連続で表示するようにした。古い環境では、ちょっと重くなったかな？

その他には、同じくトップページで、このBlogの新着を表示するようにしたり、コンタクトページを新しく作ったりと、変更点がいくつか。

今回の制作でも、Internet Explorer各バージョンの表示崩れや、opacityを使った透過PNGの表示がおかしくなるなど、SafariとFirefox以外では、相変わらずブラウザ間の表示差違に苦労させられた。また、全然理解していないのに、PHPやJavaScript、CGIなどの言語を多用してしまったせいで、何度「キーッ！」となったことか。

それでも、多少変な所はあるが、とりあえず、そこそこの環境では問題なく表示できるはず。でも、推奨環境はSafari 3とFirefox 3以上ということで、どうぞよろしく。

古いIEと新しいIE7を共存

Hannya — Thu, 14 Feb 2008 13:52:57 +0000

2月13日から、「Internet Explorer（IE）7日本語版」の、Windows自動更新機能による配布が開始された。これで、古いIEから新しいIE7へと乗り換える人も少しは増えるだろう。

しかしもろもろの事情で、まだまだ古いIEが現役のままという人も多いと思う。このブログのアクセス解析を見ても、IE7と古いIEの割合は1対3といったところだ。

WindowsのIEは、新しいバージョンのIEをインストールする時に、古いIEが消されてしまう。しかし、新しいIEしか使わないという人にはそれでもいいだろうが、Webデザイナーなどにとっては、表示確認の必要性から古いIEも必要になってくる。そんな時に便利なのが「Multiple IE」だ。

これは、IE7の入っている環境に、IE3、IE4.01、IE5.01、IE5.5、IE6をインストールして共存させる事が可能な優れモノで、複数のマシンなどに別のIE環境を構築する必要がなくなる。このブログのテンプレートを作成する時には、これのおかげでとても楽に表示確認ができた。Webデザイナーにはオススメだね。

なお、Multiple IEはMicrosoftが正規に配布しているモノではない。Windowsの深い部分に影響しているIEだけに、もしかすると何か問題があるかもしれない。ということでお約束だが、利用は自己責任でということをお忘れなく。

Install multiple versions of IE on your PC | TredoSoft

追記：
現在は、IE5.5, IE6, IE7, IE8の確認が同時にできる、「IETester」を使用している。

My DebugBar | IETester

サイトデザインの変更とWordPress

Hannya — Fri, 28 Dec 2007 14:45:24 +0000

サイトのトップページの方は、少し前から変更していたのだが、このブログの部分のデザインも新しいデザインに変更した。原点回帰ということで、初めて作った自分のサイトのイメージで作っていたのだが、少しずつ変わってしまい、結局こういうカタチに。

このドメインで始める前は、FC2のブログサービスを利用していたのだが、独自ドメインのホスティングサーバへ移行をする際に、ブログのサーバソフトウェアをどうするかで悩んでいた。「Movable Type」や「Nucleus」なども検討したが、落ち着いたのは導入が簡単だった「WordPress」。

確かに導入は簡単だったのだが、いざカスタマイズするとなると、参考になる書籍やサイトがMovable Typeのように豊富ではなく、少々苦労することになった。この辺りは国内でもしっかりとした会社が運営し、国内に限ればシェアも高いMovable Typeが有利なのだろう。

しかし、ココログを使った時に不満だった再構築の煩わしさから、Movable Typeは遠慮したかったし、Nucleusになると参考になる資料などがほとんどなかったので、結局はWordPressに落ち着いてしまった。まあ、とりあえず今は順調に運営できているので満足している。

導入はしても、しばらくはデザイン以外のところで試行錯誤をしていたので、テーマは既存のモノを少しいじって利用させてもらっていた。なんとか運用の方も落ち着いてきたので、やっと独自テーマを作れるところまでたどり着いたが、WordPressのテーマを作るには、通常のXHTML＋CSSだけではなくPHP言語が必要になる。ここで思いっきり挫折しそうだったのだが、いろいろな既存テーマを参考にして、なんとか独自デザインのテーマを作ることが出来た。

そんなこんなで、しっかりと理解して作ったモノではないので、もしかしたらどこかに不具合が潜んでいるかもしれない。もし何か問題などがございましたら、コメントなどでお知らせいただければ幸いです。

サイト移転。ついでに変遷

Hannya — Fri, 02 Nov 2007 14:23:36 +0000

本日より、今までFC2で公開していたブログを独自ドメインのホスティングサーバに移行。未定だが、他のサーバスペースにあったコンテンツもまとめる予定。難しい事は分からないのでいろいろと勉強しながらだが、何とかブログの部分だけは、公開するまでにこぎ着けた。

インターネット上で初めてサイトを公開したのが1998年1月。当時で10年程使い続けていたMac関連の情報サイト「Hannya.Web」。「’s」ではなく「.」なのがポイント。更新もほぼ毎日で、テキストエディタでコツコツと手打ちをしたHTMLファイルを、プロバイダのスペースにアップしていた。サイトのキービジュアルが、愛用のレイバンのサングラスだったため、MacWorld Expo Tokyoで会った【めのう】に、「なんでサングラスしてないんだっ」といわれた事も。

ちょっとお休みを得て、2000年の12月にはiTools（現在の.Mac）のスペースも利用して、雑記系のサイト「Pocket Sense」にリニューアル。更新頻度や内容は今と同じ感じで、マイペースになんでも気になった事を書き続けていた。そういえば、HTMLの手打ちから、Adobe GoLiveに移行したのもこの頃かな。仕事ではずっとMacromedia Dreamweaverを使っていたのだが、Adobe GoLiveの方が安かったので、個人用ではそっちを買ったはず。

その後、日記システムを併用して別館「ポケットの中から」を開設したり。その日記システムが閉鎖されたり。また本館をお休みをしたり。お誘いを受けてmixiをしてみたりしながら、2005年の5月からはFC2を利用して、ブログ「ポケットの中から」を続けてきた。そして今回、そのFC2ブログもクローズし、またまた新しいサイトへ。

なにはともあれ、移転を期にサイト名も新しく「POCKET BASE」にリニューアル。こんなサイトですが、これからもよろしくお願い致します。

【めのう】の“Macintosh Garden”

.htaccessというもの

Hannya — Tue, 30 Oct 2007 14:20:14 +0000

従来の、プロバイダのスペースにあったコンテンツ、.Macにあったコンテンツ、そしてFC2ブログにあるコンテンツを、すべて独自ドメイン＋ホスティングサーバにまとめようと、いろいろ勉強中。

独自ドメインを取ったはいいものの、まずDNSの設定をどうするか。どういうURLでアクセスできるようにするかという部分の設定。基本的な「example.com」というドメインは変わらないが、その前につく「www.」というようなサブドメインをどうするか、などといったこと。

とりあえず、この設定は「www.」なしで運用したい。かといって「www.」ありを別の内容にする訳でもなく、アクセスできないようにする訳でもない。「www.」ありでアクセスしても「www.」なしに繋がるようにしたい。

そういう時に便利な「.htaccess」というもの。これはサーバの色々な設定を書き込んでおくものらしいが、これを使って設定する事に。XREAのドメインウェブ設定からだと、あまりよろしくないらしいので。

RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www\.example\.com)(:80)? [NC]
RewriteRule ^(.*) http://example.com/$1 [R=301,L]

以上の3行を.htaccessに記述することで、「www.」ありでアクセスしても「www.」なしにリダイレクトされるようになった。

この設定は「.htaccess Editor」という、オンラインで.htaccessを作成することができるサイトを参考にさせていただいた。.htaccessに関しては全然詳しくないので、こういうサイトはとてもありがたい。感謝感謝です。

.htaccess ファイルを簡単作成「.htaccess Editor」