SimpleBoxes

ウェブログツールを作る上で気を付けたこと

2007.05.04 Friday
dev

私はSerene Bachとsbというウェブログツールを作っています。

細かい部分なんですが、ここはちょっとこだわってみたという点をまとめておきます。

利用できないメニューは見せない

sb/Serene Bachではマルチユーザーに対応していて、複数のユーザーを登録できます。

管理者と通常のユーザーでは左側に表示されるメニューが変わります。使わないメニューはグレーアウトするというインタフェースも考えられると思いますが、sb/Serene Bachでは、メニュー項目そのものを表示しないようにしています。

賛否あると思うのですが、使うことのできないメニューはそもそも見せない方が分かりやすくなるのでは、という考えがあります。メニューの数が変わるので、変わっても大丈夫なようなレイアウトを心がけます。

テンプレートのインポートは簡単に

sb/Serene Bachでは、ディレクトリ構成などを意識しないでいいように、ひとつのファイルをアップロードすれば済むようにしました。

ファイルの形式はメールと同じMIME形式を使っているので、汎用性もあります。

比較的簡易なものには、特定のディレクトリにアップロードするという方式も考えられます。Wordpressなどはそのような方式ですね。

フィードでの「続き」の扱い

sb/Serene Bachでは「続き」として記事を分割して記述することができます。トップページなどに表示されるのは「本文」で、「続き」は記事の個別ページでのみ表示されるという機能差があります。

sb/Serene Bachでは、記事に「続き」が存在する場合、フィード側に「続きがあります」という表記を明記するようにしています。

RSSリーダーを利用されている方に対して「この記事はこれで終わりかどうか」をはっきり明示することで、閲覧しやすくなるような気がします。

マークアップを意識して

sb/Serene Bachでは携帯電話向けのHTMLを出力する機能があります。携帯電話向けにはXHTML Basicとして出力する他、ページがある一定のサイズ以下になるように分割されます。

記事を分割する際には、サイズをベースにしているので、著者が意図しない箇所で分割されてしまう場合も起こりえます。

その場合でも著者の意図したマークアップを可能な限り崩さないように分割します。

JavaScriptを切っても動くように

多少不便になっても一通りの操作はできるように作成しています。

管理画面のマークアップもそれなりに意識して作成しています。

最近利用しているアプリケーション

2007.05.03 Thursday
dev

Quicksilver

やたらと評判が良いので、ちょっと入れてみました。コマンドランチャーって言うんでしょうか。

現状では、ほとんど使っていません。確かに評判通り、便利そうな雰囲気は感じます。インタフェースも格好良い。

まだ全然馴染んでいないので、今後使う頻度が上がるかどうかは分かりません。

Twitterrific

流行りのTwitter、私も参加しています。

いくつか専用アプリケーションが出ていて、Twitterrificはそのひとつ。

半透明で邪魔にならないウィンドウや軽快な動作が売りでしょうか。

ちなみにWindowsでは、Twitがお気に入り。

Skype

Skype自体は結構前からインストールしているのですが、最近メッセンジャーソフトとして利用する頻度が増えました。

ダウンロードのページからダウンロードできるSkype 2.6β版では、相手の入力タイミング(?)が分かるなど、メッセンジャーソフトとしての使い勝手が向上しています。

Google Reader

Mac OS Xのアプリケーションではありませんが……。

今挙げてみるMacintosh用の10アプリケーションを書いた頃は、RSSリーダーとしてNetNewsWire Liteを利用していましたが、今はGoogle Readerを使っています。

職場と自宅で情報を共有できることが一番の利点です。

オンラインのRSSリーダーは、livedoor Readerと迷ったのですが、「グループ内のフィードを一括表示できる」という点だけで、Google Readerを使っています。動作そのものはlivedoor Readerの方が軽快そうな印象があります。

これまでの関連記事

title要素の可視化

2007.04.29 Sunday
dev

title要素は通常タイトルバーなどに利用されます。文字通り、文書のタイトルを記述する要素で、HTML/XHTML文書では必須となっています。

ふと思い立って、次のような実験をしてみることに……。

まず、次のようなHTML文書を用意します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <link rel="stylesheet" title="default" type="text/css" href="style.css" media="screen,tv" />
  <title>サンプル文書</title>
</head>
<body>
<p>これはサンプル文書です。</p>
</body>
</html>

続いて、スタイルシートを記述します。

head {
  display: block;
}
title {
  display: block;
}

作成したサンプルを見てみると……。

実のところ、全然期待していなかったのですが、なんとMozilla系(Firefoxなど)・WebKit系(Safariなど)・Operaではtitle要素が表示されます。

残念ながら、Internet Explorerでは動作しない(Windows版・Macintosh版ともに)ようなので、実用性には欠けるとは思いますが、ご参考までに。

title要素を表示可能なブラウザ

Firefox 2.0.0.3
Safari 2.0.4
Opera 9.00
iCab 3.0.3

以上、すべてMac OS X上で確認

title要素を表示できなかったブラウザ

Internet Explorer 5.2.3 for Macintosh
Internet Explorer 6 for Windows
Internet Explorer 7 for Windows

これって、結構知られているんでしょうか？少なくとも私は全然知りませんでした。

Bloglines Notifier

2007.03.29 Thursday
dev

Cocoaでアプリケーションを作ってみました (日本語 / in English) 。

[図]Bloglines Notifier

メニューバーにBloglinesの未読記事数を表示するというシンプルなアプリケーションです。

Cocoaのアプリケーションを作成したことのある人なら、さくっと作ってしまうだろうミニアプリですが、一から作成するのはほぼ初めてだったので、色々つまずきました。これについては機会があれば後日触れられたら……と思っています。

ちなみに「Bloglines Notifier」自体はすでに公式版があるのですが、なぜか未読数を表示してくれませんでした。

Bloglinesの更新通知APIはごくごく単純な形式で、難しい処理はありません。これなら自分でも作れそうだと思って、練習がてら作成してみました。

はてなブックマーク用ブックマークレットなど

2007.02.14 Wednesday
dev

私はあまりブックマーク自体の使用頻度は高くないのですが、はてなブックマークのサービスは良く利用しています。

小野和俊のブログ:私がdel.icio.usに移行しつつある理由で「はてなツールバー」の使い勝手が言及されていますが、確かに色々詰め込みすぎな感じはあったかもしれません(今は使っていません)。

その代わりに私は「はてなブックマーク」用に3つのブックマーク(ブックマークレット)を利用しています。

「?B」は、自分のはてなブックマークをFirefoxのライブブックマークとして登録したものです。

はてなブックマークでは、rssとatomfeedのフィードがありますが、これをFirefoxのライブブックマークとして利用する時、rssを利用するか、atomfeedを利用するかで飛び先が変わります。細かいことですが、好みに応じて使い分けができたりします。

「?B追加」は、はてなで用意されているブックマークレットです。

「?B確認」は、今開いているページのはてなブックマークページを確認するためのブックマークレットです。

例えば、「小野和俊のブログ:私がdel.icio.usに移行しつつある理由」を見ているときにこのボタンを押すと、「はてなブックマーク - 小野和俊のブログ:私がdel.icio.usに移行しつつある理由」を開きます。

人気ブックマークなどを確認する時、そのままブックマークでどのようにコメントされているんだろうと確認することも結構あるので、よく使います。

そうそう、304 Not Modifiedさんのところでも触れられている通り、ドメイン配下の被ブックマークが一望できる機能も便利です。

今日インストールしたソフト

2007.02.13 Tuesday
dev

subversion 1.4.3

スクリプトのバージョン管理が段々複雑になってきたので、subversion(svn)をインストールしました。

インストールはDarwinPorts(MacPorts)を使ってあっさり。文字化けするトラブルがありましたが、環境変数「LANG=ja_JP.UTF-8」を設定して解決。

svnX 0.9.9

svnのクライアントソフトとして、svnXをインストール。

b-shock. Fortress: svnXで紹介されているパッチも適用済み。

WindowsではTortoiseSVNがとても便利です。Mac OS Xにも似たようなソフトとして、SCPluginというのがあります。

私はFinderの代替ソフトとして、Path Finderを利用しています。b-shock. Fortressさんによると、Path FinderとSCPluginの相性が良くないらしいので、今のところ利用していません。

Chmox 0.4β

Windowsでヘルプファイルとしてよく利用されるファイル形式にCHMがあります。

ChmoxはMac OS X上で動作するCHMファイルビューワーです。某サイトのAPI仕様書がCHMファイルで用意されていたので(pdfもありました)、インストールしました。

Firefoxアドオン

単体ソフトばかりでなく、Firefoxの機能拡張(アドオン)もいくつかインストール。

CopyURL+ 1.3.2: hxxk.jp - Copy URL+ 1.3.2 のまとめ。導入からバグへの対処、カスタマイズの例まで。で紹介されていたパッチも適用しています。

Web Developer 1.1.2 日本語版: 遅ればせながら……。でも以前インストールした時も使わなかったんですよね、これ。今度も使う場面あまりないかも。

LiveHTTPHeaders 0.13.1: 遅ればせながら……。HTTPヘッダを時折確認する必要があるので……。

さんすうのもんだい

2007.02.12 Monday
dev

娘用に……

汎用性はまるでありません。データ取得はJSONにすれば良かったかな……。

問題の結果表示の後は、結果をクリックすれば、次の問題に進みます。

あ、あとFirefox以外でのブラウザでの動作は未確認です。

[追記] 2007/02/13 18:50 「おわる」機能を付けました。そうじゃないとエンドレスなので……。

Dockのインタフェース

2007.01.22 Monday
dev

いつも楽しく拝見している毎日恋う考ブログにて、大胆不敵にも赤裸々にDockの状態を曝け出していました。

図1は、私のDockです。ご覧のように縦にして使っています。ゴミ箱の上のフォルダが以前にも紹介したアプリケーションフォルダです。

タイトルの「Dock」というのは、Windowsでいう…そうですね…クイックランチャーっていうんでしたっけ。スタートボタンの隣にあるスペース。あれと、ステータスバーとタスクトレイがごっちゃになったようなものです。

毎日考ブログ -Web屋のウェブログ- | Web屋のDock

クイックランチャーは「クイック起動」あるいは「Quick Start」という名称です。ステータスバーは「タスクバー」のことでしょうか。タスクバーは全てのツールバーを含めた総称とも言えますが。

それはともかく、Dockは一般的に「ランチャー」と「タスクバー」がごっちゃになったもの、と説明されます。

ただ、一部、ランチャーともタスクバーとも言えない挙動をする場合があります。

ランチャー的な要素

アプリケーションや書類を登録できる
ワンクリックで、アプリケーションを起動する、あるいは書類を開く
登録したアプリケーション・書類は状況によらず、常にある程度決まった位置に表示される

タスクバー的な要素

起動しているアプリケーションが表示される
開いたウィンドウを格納できる

タスクバーとランチャーがごっちゃになっているので、登録されたアプリケーションは、起動していようといまいと、常にDock上に表示されます。

ただし、起動しているアプリケーションには三角マークが表示され、起動中であることが明示されるという付加的なインタフェースが提供されています。

起動中のアプリケーションで、Dockには登録されていないというアプリケーションを明示するインタフェースは特に用意されていません。

ただし、アプリケーションを右クリックすれば、登録されているかどうか判断できます。また、非登録アプリケーションは表示位置である程度判断可能です。

きわめてDock的な要素として、以下のようなものが挙げられます。

Dock的な要素

Dockのアイコンをクリックすると、新規ウィンドウ(あるいはメインウィンドウに該当するウィンドウ)が開く場合がある
Dockのアイコンはアプリケーションの状態を示す場合がある→[図２]
Dockのアイコンを右クリックすると、アプリケーションに応じて異なるメニューが表示されうる→[図3]

ランチャーでもタスクバーでもない、DockをDockたらしめているのは、このDock独特のインタフェースだと私は思っています。

独特な拡大縮小のアニメーションも見た目の特徴としてありますが、あれは別にDockたりえる要素ではありません。

[図4] 派手なエフェクトはDockの肝ではないと思う

特に一番最初の項目は目立ちませんが、ランチャーともタスクバーともつかない独特な動作をします。具体的にどういうことか、見てみましょう。

例えば、「テキストエディット」という標準アプリケーションがあります。

テキストエディットを起動します。「名称未設定」の新規ドキュメントが開いた状態で立ち上がります。
開いている「名称未設定」ウィンドウを一度Dockに格納します。
その後で、Dock上の「テキストエディット」のアイコンをクリックします。

格納したウィンドウアイコンをクリックすると、もちろんそのウィンドウが元に戻りますが、この場合「テキストエディット」のアイコンをクリックしても格納したウィンドウが戻ります。

と言っても、必ず元に戻る訳ではありません。複数の「テキストエディット」のウィンドウを全て格納している場合、元に戻るのは、最後に格納したウィンドウの一つだけです。また、格納していない「テキストエディット」のウィンドウがあれば、戻ることはありません。

もう一つ、例を挙げてみます。

テキストエディットを起動します。「名称未設定」の新規ドキュメントが開いた状態で立ち上がります。
開いている「名称未設定」ウィンドウを閉じます。
その後で、Dock上の「テキストエディット」のアイコンをクリックします。

すると「名称未設定2」(数字は状況による)という別の新規ウィンドウが開きます。

つまり、こういうことです。

Dock上のアプリケーションをクリックした時、すでにアプリケーションが起動していれば、そのアプリケーションに切り替えます。

タスクバー的なアプローチでしたら、ただアクティブなアプリケーションを切り替えるだけでしょう。

ランチャー的なアプローチを取った場合、別プロセスとして立ち上がるか、アプリケーションによってはタスクバーと同等な動作をするかもしれません。

ところが、Dock上のアイコンをクリックした時、挙動がやや異なる場合があります。

アプリケーションを切り替えるという点では、タスクバー的なアプローチと言えるのですが、「新規ウィンドウを開く」といったアプリケーション切り替え以上の操作をします。

この動作に関しての思想はおそらく「Dockをクリックしたとき、ユーザに明確なフィードバックを行うべきである」というものです。

アプリケーションが立ち上げっていなかったら、立ち上げるためにアプリケーションがDock上でバウンドします。

すでにアプリケーションが立ち上がっている場合、三角マークで明示はされていますが、決して目立つものではありません。そこでアプリケーションに属する何かしらのウィンドウをアクティブにすることにより、フィードバックします。

ちなみにCommand + タブキーでもアプリケーションの切り替えは可能ですが、この場合、Dockをクリックした時のようなフィードバックはありません。Command + タブによる切り替えはユーザーが「動作中のアプリケーションの切り替えを行いたい」と思って行うアクションであることが明確です。そのため、フィードバックは必要ないと判断されているのでしょう。

Perlベストプラクティス

2007.01.14 Sunday
dev

遅ればせながら、Perlベストプラクティスを購入して、空いた時間に読んでいます。

いわゆるコーディングガイドラインという内容の本です。かなりボリュームがあります。「Perl」とありますが、他の言語でも応用の利きそうなガイドラインも沢山ありそうです。

私自身、自分の書くコードには明文化したコーディングルールがあったりするので、この本はなかなか興味深く読んでいます。

多くの場面において、やはり説得力がある内容ばかりです。

恐ろしいことに、この本を読むと、自分のコードを片端からリファクタリングしてしまいたくなります。

かなりボリュームがある本なので、最後まで読んだときには、最初の方の内容忘れてしまいそうでもありますが、自分の興味のある部分からかいつまんで読んでいく感じにすれば、ある種のリファレンスとして役に立ちそうです。

Re: PHPでAjax! JavaScript不要のxajax

2006.11.09 Thursday
dev

「PHPでAjax! JavaScript不要のxajax」……って、おーい。

Ajaxは「Asynchronous JavaScript And XML」の略称であって、JavaScriptを使わないなら、それはもう「Ajax」とは呼ばないと思うんですが。

という感じで、見出しから突っ込みが入りそうな感じなんですが、釣られた？

まず、冒頭。

「実装されていて当然」といわんばかりに広まった技術、Ajax。

PHPでAjax! JavaScript不要のxajax (MYCOMジャーナル)

えぇと、Ajaxはある機能を実装するためのひとつの手段であって、 Ajaxそのものを実装するってのとちょっと違う気がします。

次のページ、

サンプルコードを見ていただければわかるとおり、このファイルにはJavaScriptが一切記述されていない

PHPでAjax! JavaScript不要のxajax (MYCOMジャーナル)

ってあるんですが、

<select id="colorselect" name="colorselect" onchange="xajax_setColor(document.getElementById('colorselect').value);">

これとか

<script type="text/javascript"> xajax_helloWorld(0); // call the helloWorld function to populate the div on load xajax_setColor(document.getElementById('colorselect').value); // call the setColor function on load </script>

これって、思い切りjavascriptだと思うんですが、私の勘違い？

「xajax」というライブラリの紹介記事なんですが、こんな感じなので、うまみが全然伝わってこない気がしちゃうんですが、いかがでしょうか。

<< 12/13 >>