世界中の１％の人々へ

今日のWebアクセシビリティ：Movable Typeで行う404エラー対策

2007年2月25日 04:40

「Not Found」のエラー表示だけですませるのは、もったない

Google等のサーチエンジンや、リンク集をたどった結果、「Not Found.」とか、「404 File Not Found.」とか「Error 404」などのメッセージを見たことはないだろうか？

これは、「リンク先のページがありません」というサーバからのエラーメッセージで、リンクのアドレスが間違っているか、リンク先が公開を停止したり、別のアドレスに引っ越した可能性がある場合に表示される。

さて、本題。Movable Typeはカテゴリーを簡単に編集できるから、サーチエンジンからリンクをたどると、頻繁にこのエラー表示が表示されて泣かされる。

多くはページがなくなったわけではなく、単にURLが変わっただけだから「Not Found.」とか、「ページが見つかりません。」だけでなく、検索機能をつけるなどして、探しにきたページにたどりつくようにしてあげるのといいと思うのだ。

で、カテゴリーを整理したのを機会に、僕のブログでも、エラー表示のテンプレートを修正してみたので参考にしてほしい。MT3.2、MT3.3ならば、やり方は実に簡単だ。

1. ".htacces"の設定

オリジナルの404エラーページは.htaccessに下記内容の記述がないと表示されないが、公開の設定で、ダイナミック・パブリッシングを選んでいる人は、以下の記述の.htaccessが自動的に作られる。
[すべてをスタティックHTMLで出力します](初期仕様)を選んでいる方は下記内容の.htaccessを作りアップロードする必要がある。

## %%%%%%% Movable Type generated this part; don't remove this line! %%%%%%%
# Disable fancy indexes, so mtview.php gets a chance...
Options -Indexes +SymLinksIfOwnerMatch
  <IfModule mod_rewrite.c>
  # The mod_rewrite solution is the preferred way to invoke
  # dynamic pages, because of its flexibility.

  # Add mtview.php to the list of DirectoryIndex options, listing it last,
  # so it is invoked only if the common choices aren't present...
  <IfModule mod_dir.c>
    DirectoryIndex index.php index.html index.htm default.htm default.html default.asp /mtview.php
  </IfModule>

  RewriteEngine on

  # don't serve mtview.php if the request is for a real directory
  # (allows the DirectoryIndex lookup to function)
  RewriteCond %{REQUEST_FILENAME} !-d

  # don't serve mtview.php if the request is for a real file
  # (allows the actual file to be served)
  RewriteCond %{REQUEST_FILENAME} !-f
  # anything else is handed to mtview.php for resolution
  RewriteRule ^(.*)$ /mtview.php [L,QSA]
</IfModule>

<IfModule !mod_rewrite.c>
  # if mod_rewrite is unavailable, we forward any missing page
  # or unresolved directory index requests to mtview
  # if mtview.php can resolve the request, it returns a 200
  # result code which prevents any 4xx error code from going
  # to the server's access logs. However, an error will be
  # reported in the error log file. If this is your only choice,
  # and you want to suppress these messages, adding a "LogLevel crit"

  # directive within your VirtualHost or root configuration for
  # Apache will turn them off.
  ErrorDocument 404 /mtview.php
  ErrorDocument 403 /mtview.php
</IfModule>
## ******* Movable Type generated this part; don't remove this line! *******

2. テンプレートの編集

メイン・メニュー > ブログ名 > テンプレート > システムを開き、[ダイナミックページ・エラー]をクリック。

ソースの<boby>～</body>を任意に編集して保存する。このブログでは、断りの他に、検索機能、カテゴリーアーカイブメニュー、月別アーカイブメニュー、タグクラウドをつけた。

3. 404エラーページの確認

確認は簡単、ありもしないURLを入力すればいい。

試しにhttp://www.dakiny.com/seo/をクリックし、確認したら戻ってきてほしい。

電話番号や住所の移転通知サービスみたいなものと思えばわかりやすいと思う。

目的のコンテンツにたどりついた場合と、たどりつけなかった場合の差は決して小さくはない。

Movable Typeでなくても、.htaccessを利用して簡単にできるので、オリジナルの404エラーページを作り、迷える読者に目的コンテンツにたどりつけるようにしてあげるといいと思う。

参考になれば幸い。

投稿者: Dakiny 日時: 2007年2月25日 04:40 |   |   |   | パーマリンク | コメント(0)  | トラックバック (0)

今日のWebアクセシビリティ：基本文字サイズを考える

2007年2月24日 19:19

Webは異なる読者環境でもきちんと情報が伝わることが大切

アクセシビリティを配慮して、このブログを少し修正した。何を直したかといえばpxをもちいて固定していた文字サイズを、%に変更し相対表示とした。

修正の結果、Internet Explorerでも表示サイズを変えることが可能となった。IE6やIE7で見ている方は、文字サイズを変更してみるとわかると思う。

ところで、悩んだのは基本文字サイズだ。IEは、最大、大、中、小、最小と５段階に文字の表示サイズを変えることができる。文字サイズに割り当てるCSSは１種類であり、５段階すべてで情報が伝わるように基本文字サイズを設定することは、けっこう大事なことかもしれない。最初は普通に100%（文字のサイズ小で見れば12px相当）にしてみた。

基本文字サイズ100%で最大から最小まで

文字のサイズ最大：可読性に問題なし

文字のサイズ最小：可読性に問題あり

文字サイズ最小にすると、本文より一回り小さく表示させた文字は、小さくて読めないだけでなく、つぶれてしまい、もはや文字としての機能を果たさなくなった。文字サイズを大きくすれば可読可能だが、このサイトを見るためだけに利用者に設定を変更させること自体がすでにアクセシビリティの思想から外れる。利用者に文字サイズを変えさせることなく、読んでもらえればいいと思い。基本文字サイズ指定を改めることにした。

参考までに、アットスタイルさんのソースを見ると基本文字サイズを115%にしていた。なるほどね、さすがに、Web標準にこだわった人だと感心した。115%とした理由は、きっちり最小までを配慮した結果なのだな。

2月25日、100%でバランスをとり、結果文字サイズが小さかったので、一括で変更できるから基本文字サイズを115%にしたとこのことで、最初から115%で構築してはいけない。できれば100%で個々の文字サイズするのがよいと本人から連絡があった。

そこで、こんどは最小で12px相当に見える115%に基本文字サイズのみを変更した。

基本文字サイズ115%で最大から最小まで

文字のサイズ最大：可読性に問題なし

文字のサイズ最小：可読性に問題なし

この修正をほどこすことにより、多くの人々が通常利用している環境（文字サイズ最大なら、最大のまま）で文字サイズの設定を変更することなく、見てもらうことが可能になった。

参考リンク

ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0
http://www.zspc.com/documents/wcag10/
アクセシビリティ : 富士通
http://jp.fujitsu.com/accessibility/
ハンディがあっても利用できるページづくり
http://www.kanzaki.com/docs/html/accessible.html

アクセシビリティに配慮するなら、単に文字のサイズ最小から最大まで可読性に問題がおこならいだけでなく、読みやすいようデザインするべきだ

Firefoxを 例にとれば、たとえ文字サイズをpxで固定しようが、読者が文字サイズを変更すれば、表示文字の大きさは変化する。だから老眼の人はFirefoxで見ればいいかと思うのは早計。新たにブラウザを開くと基本サイズに戻ってしまうから、ブラウザを開くつど文字サイズを変更しなければならないので面倒だ。

その点、約７割のインターネットユーザーが利用する、Internet Explorerは設定サイズをブラウザが記憶しているから、文字サイズを一度最大に設定すれば、最大のまま閲覧できる。だがpx等で固定すれば文字サイズを変更することはしない。だからこそ、アクセシビリティに配慮するならば文字サイズを修正できるようにしておくべきなのだ。

文字を相対にすれば、少なくとも最初から、最大までは利用できるように、デザインも配慮すべきになる。

こんご、ますます日本は高齢化社会になっていくから、自由に作れる個人のサイトや、JIS X8341（通称Web JIS）を意味も知らずに大好きで推奨している官庁のサイトは技術的問題だけだからいいが、独断で仕様を決められない商用サイトを作るWebプロデューサーやWebディレクターは、こういうことを配慮して、意味無くFlash大好きな顧客を何故、レイアウトを固定すべきではないのか説得し、仕様を詰める能力が必要になってくるだろう。

参考までに、このブログの最新統計では、65.04%がInternet Explorerは、27.34%がFirefoxで、4.5%がSafariとなっており、すべて検証はしている。

参考になれば幸い。

なお、今回の改修で、合わせて、表示エラーのでるMac IEおよび、NetScape4.7ではCSSが効いてない状態で可読可能対応とさせていただいた。
悪しからずご了承願いたい。

2007年2月25日追記

アットスタイルさんより、連絡があり、最初100%でバランスをとり構築して、表示文字が小さかったので、一括で拡大できるよう115%と拡大したとのこと。 最初は100%で作りバランスをとることが大事だということだ。そしてできれば、基本文字サイズを100%にして構築するのが好ましいという話であったので、このブログでも時間をみてやりなおしたい。

投稿者: Dakiny 日時: 2007年2月24日 19:19 |   |   |   | パーマリンク | コメント(0)  | トラックバック (0)

今日のSEO：aDesignerで、簡単に！Webアクセシビリティ　その３

2007年2月23日 00:10

aDesignerは視覚障害者の希望につながるだろう

『aDesignerで、簡単に！Webアクセシビリティ　その１』で、aDesigner（エーデザイナー）の入手方法を、『aDesignerで、簡単に！Webアクセシビリティ　その２』でaDesignerの利用方法を説明したが、全盲の人達向けサイトについての説明が中心で、さらに多くの人口をかかえる視覚障害者を見捨てたような気がしたしたから、本日はロービジョンモードをキッチリ紹介したい。

あなたの眼で、しかと確認してもらいたい。

初期状態は、視力0.5、緑色覚異常、40歳という設定だ。これで測定して「へぇ～、こんな風に見えるんだね」とチェックするのは最初の使い方としては正しいとは思えない。

３つのパラメーターを単独で利用して、それぞれが、どう見えるかを、まず確認してみることが、視覚障害者への理解につながる重要なポイントだ。

なお、下記文章における症状であるとか、数値等の多くは、Wikipediaの情報を流用させていただいた。

１．視力（弱視対応）

ある意味これはわかりやすい。日本の視覚障害者の中では弱視が一番多く、7～8割。かつての住まいのお隣さんの息子さんも弱視だった。
なお、彼は視覚的ハンデキャップを勉学で乗り越え京都大学へと進み、現在は学術の道についている。

対処方法として、よく書かれているのが、健常者向きのサイトは最小文字サイズを10px相当に、シニア向けサイトは最小文字サイズを12px相当にというものだが、文字サイズよりもむしろ、サイズ指定の方法に気を配る必要がある、サイズ指定は固定（px等）ではなく相対（%指定等）にしておけば、Internet Explorerのユーザーでも文字サイズを調整して見ることが出でる。
＃僕も一昨日、本文のみだが、こっそりとIE対応で文字サイズを%指定にした(笑)。

右が視力0.5。少し文字がボケているのがわかるだろうか。視力0.5ともなると裸眼では10ピクセル相当の文字は読めない。

右が視力0.1。実際に文字はまったく読めず、写真もかなりボケている。僕の視力が0.1なのでよくわかるが、ここまで視力が落ちると肉眼では正しい位置に座ってモニターを見ても字が読めない。

これより視力の悪い人用のパラメーターも用意してほしかったと思うのは僕だけだろうか？

１．色覚異常

「色盲」「色弱」と呼ばれる事もあったが、誤解を与えるとして現在は「色覚異常」「色覚障害」等と呼ばれる事が多い。意外にと思うが、男性の20名に１名の割合で存在しているとか。

ここで配慮するのは文字色と背景色のコントラストだ。

赤色覚異常

色覚異常の中で一番多く、赤と緑の区別が付きにくい。日本人では男性の20人に1人、女性の400人に1人が赤緑色覚異常で、日本全体では300万人近く存在する。合衆国の男性は8%がこの症状に相当するそうだ。赤であれ、緑であれ、どちらに異常が出ても色の見え方に大きな差はなく、この二つはひとくくりに扱われる。

緑色覚異常

ということなので、上と同じ色に見えた方は安心してほしい(笑)。 

青色覚異常

上記写真を比べると、若干右（正常）でがピーコックグリーンなら左はエメラルドグリーンというぐらいの違いでしかないから、検査で発見されないかぎり本人も周囲の者も気づかないことが殆どだそうだ。症状は希。
※一般的な検査は赤緑色覚異常に対するもの

３．水晶透過率（老人性白内障）

わかりやすく言えば、老人性白内障。その名のように老人性白内障は老人になって起こるものであるが、では何歳ぐらいからかというとはっきりした規定はない。よって最近では加齢性白内障ともよばれる。早い人は30代から始まり50代では約半数。60代で70-80%、70代で80-90%、80代で90-97%、90代では１００％と言われているそうだ。

以下のサンプルでは写真のほうが明確に比較できると思い、画像のみの比較とした。

右は40歳。少し彩度が落ちているいるのがわかるだろうか。

60歳。健常者が見れば、晴天と曇り空ぐらいの違いがある。ただし現実の白内障の方はこれにフォーカスがかかることを意識するといいだろう。

さて３つのパラメーターで測定して何も問題はなかった方、おめでとう。アクセシビリティてチェッカーで、何点とったで喜ぶ人って寂しすぎる。点数じゃなくて、はっきり見えない人、色が失われた人、色を失いつつある人たちの不自由さを感じてほしいし、想像してほしいのだ。

点数でチェックするアクセシビリティ補助ツールが多い中、視覚的にどう見えるのかが体験できるaDesignerは素晴らしい。

たとえば健常者が車椅子の介護を行う場合、車椅子を体験させる。盲人介護の場合は目隠しで杖だけで歩く。点数ではない。体験することにより、身障者が不自由であることを知るのだ。

参考サイト

ハンディがあっても利用できるページづくり：Webアクセシビリティについて
http://www.kanzaki.com/docs/html/accessible.html

IBM Web　アクセシビリティ（日本語）
http://www-06.ibm.com/jp/accessibility/guidelines/accessweb.html

Color Universal Design Organization
(カラーユニバーサルデザイン機構)
http://www.cudo.jp/

不自由であることを知る、それがアクセシビリティを学ぶ第一歩だ。

参考になれば幸い。

次回アクセシビリティをとりあげる時は、僕の原点であるホームぺージリーダーを紹介する。

投稿者: Dakiny 日時: 2007年2月23日 00:10 |   |   |   | パーマリンク | コメント(1)  | トラックバック (1)

今日のSEO：aDesignerで、簡単に！Webアクセシビリティ　その２

2007年2月22日 06:22

aDesignerは視覚障害者向けサイトや高齢者向けサイト制作の正義の味方

2月５日のコラム『aDesignerで、簡単に！Webアクセシビリティ　その１』で、aDesigner（エーデザイナー）の入手方法を説明した。本日はその２である使い方編。

aDesignerには２つの機能がある。ひとつは、全盲の人が使って最適かどうかをチェックする機能。ふたつめは、弱視、色弱、色盲、高齢者等のより多くの視覚障害者ががちゃんと読めるサイトがどうかをチェックする機能だ。

では、aDesignerを使ってみよう

任意のURL（http://www.dakiny.com/）を入れ、[視覚化実行]を押すとしばらくして、下記の画面になる。

音声モード

大まかに問題点を指摘してくれる。以下、指摘を引用。

右上の結果画面でページの大部分が暗い色になっていませんか？
 このページに音声でアクセスした場合，最も暗い色の部分に到達するには90秒以上かかってしまいます．
 見出しタグ(H1,H2...)やページ内リンクを提供して，ページ内の各項目への移動が簡単になるようにして下さい．
 結果画面の中では，見出しは水色，ページ内リンクは矢印で表示されます．
 また，これらの機能を提供することで，結果全体が明るい色になってきますので確認してみてください．

このページはガイドラインにほぼ準拠しているようですが，まだいくつかの問題が残っています．
 まずは，ページ内の画像に対して，その意味・役割を説明する文字列(ALT属性)が付加されているか確認してみましょう． -画像の代替テキスト（ALT属性）には意味のある文字列を指定してください．
  （「クリック」や「image」等では，音声で読み上げた際に画像の意味や役割が伝わりません．)

  判りにくいALT属性を持つ画像の数: 5

aDesignerは、修正点を具体的に指摘してくれる

詳細レポート（下段）を表示すると、細かい指摘が書かれている。 要修正箇所は赤で表示される。僕のブログで要修正として指摘があったのは６箇所

"本文へ移動"などのスキップリンクの提供を検討して下さい
"Level A Conformance to Web Content Accessibility Guidelines 1.0"は画像のALT属性として不適切です
"xml.gif"は画像のALT属性として不適切です
"powered.gif"は画像のALT属性として不適切です
"Level A Conformance to Web Content Accessibility Guidelines 1.0"は画像のALT属性として不適切です
"powered.gif"は画像のALT属性として不適切です

修正点を修正後のチェック

まず、ALT属性を適切な言葉に修正した後、タイトル下に本文やメニューにジャンプするリンクボタンをつけて、もう一度チェックしてみた。

修正後は、ご覧のように「非常によい」という結果を得られた。

指摘は親切で、修正箇所が実にわかりやすい。

音声ブラウザ出力モード

音声ブラウザ出力モードに切り替えるには[設定]をクリックすると、音声モードパラメータ設定の窓が開く初期状態では、左になっているので、[音声ブラウザ出力モード]をクリックして、[OK]を押し、[視覚化実行]をクリックすると、しばらくして下記のような画面になる。

この文字を読んでいけば、おおよその音声読み上げブラウザの雰囲気は伝わる。

IBMホームページリーダーとの併用がお勧めだ

僕の体験上、IBM ホームページ・リーダーがどのように読み上げるかは、aDesignerだけでは微妙に理解し難いと思うので、IBM ホームページ・リーダーとの併用をお勧めする。

ロービジョンモード

これは、弱視や、色弱、色盲等、高齢者等の視覚障害者に対するモード。

1. 文字の大きさが小さすぎる点
   
2. 文字の大きさが固定
3. コントラスト

について注意された。

青背景に白文字ではコントラストが弱いと注意をうけたのは意外だった。

このモードはオプションで細かい設定が行え、上から近視、色弱、水晶透過率（加齢性白内障）の設定がパラメーターで行える。

他は予想ついたが、水晶透過率（加齢性白内障）の年齢別の設定画面には驚いた。40代をすぎ年を経るにつれ、驚くほど見える色のコントラストや鮮やかさが失われていく。あと３年もたたないうちに50歳を迎える僕には、まだ色が見えているので、世間の40代がこれほどコントラストや鮮やかさが失われていると知ったのは衝撃だった。

間違うことなく、aDesignerは弱者を助ける正義の味方だ

参考になれば、幸い。

投稿者: Dakiny 日時: 2007年2月22日 06:22 |   |   |   | パーマリンク | コメント(0)  | トラックバック (0)

今日のMT：Movable Typeでプレビュー機能が実現！?PreviewEntry

2007年2月21日 07:35

Six Apart社からのメールを読み、僕はMovable　Typeファンの1人として、１年以上も待たせやがって…、バンザイ！と叫びそうになった。

そのメールはProNet向けに届いたもので、Movable Type Enterpriseに下記のプラグインが追加になったことが書かれていた。

Movable Type Enterprise用の追加プラグインを評価用にアップロードしました。
・PreviewEntry・・・ライブ・プレビュー機能を実現するプラグイン
・EntryApproval・・・簡易ワークフロー機能を実現するプラグイン

EntryApprovalは、決済があれば掲載が可能という、それはそれで優れたプラグインなのだが、あくまでもMovable Type Enterprise向きの機能であるのでここで説明はすまい。

Movable Typeファンである僕が喜んだのは、PreviewEntry。これは、上記にはライブ機能と書かれているが、エントリー画面のリアルプレビューを可能としている、待ちに待ったプラグイン。一昨年のProNetミーティングで実現しますと言われていたプラグインだ。待ちに待ったゾ！
ちなみに作者は、かの平田大治氏。

ひとまずどんなものか簡単に解説しよう。

PreviewEntryの設定

PreviewEntry。を解凍し、/pluginsにアップロードするだけで動作する。プレビュー動作モードの設定を変更したい人のみ[設定を表示]をクリック。

この工程は、プレビュー動作モードの設定を変更したい人のみ。初期状態ではプレビュー動作モードは[CGI]となっているので[ファイル生成]を選択し、[設定を保存]をクリックして設定完了。

PreviewEntryの動作

動作モードにCGIを選んだ場合の動作。エントリーを記述して、まず[保存]をクリック、その後[確認]をクリック。

再構築なしに、CSSの効いた状態のプレビュー画面が新しいウィンドウで表示される。
とても便利だ。

残念ながらPreviewEntryは、Movable Type Enterprise用として配布されたものであり、Movable Typeに実装される予定のアナウンスは現時点ではない。

が、過去例からいって、Movable Type Enterpriseがパイロット版となり、Movable Typeにフィードバックされているから、次期Movable Typeに実装される可能性は非常に高い。

僕は一応、ユーザーの1人として、次期Movable Typeに実装してくれとSix Apartの開発責任者の方ににリクエストのメールを感謝の声と共に送ったが、大勢の声が集まれば、 実現の可能性が高まるので…
＃無責任な意見で申しわけない。

WordPressに負けない意味でも、次期Movable Typeに実装されるよう、是非リクエストを出してみよう！
＃とSix Apart社が困ることを書いたりして:-p

参考になれば幸い。

投稿者: Dakiny 日時: 2007年2月21日 07:35 |   |   |   | パーマリンク | コメント(0)  | トラックバック (0)

今日のコラム：Movable Type コンテスト 2006　個人のWebパブリッシング時代到来！

2007年2月20日 23:35

個人のWebパブリッシング時代が到来！を実感できるメールが届いた

Movable Type コンテスト 2006では、「小粋空間」さんが個人サイト準優秀賞に輝いていた。日々のMovable Typeを中心とする、わかりやすい技術提供には頭が下がる思いがあるので、これはこれで努力が評価されてよかったなと思う。「小粋空間」さん、おめでとうございます。

そんな日に、マイミクsweetさんから…

嬉しいことがありました。MTコンテスト（Movable Type コンテスト 2006）で賞をいただきました。

とmixiメールがあった。

sweetさんの受賞となったブログは「とってもわかりやすい自閉症のページ」という名の、自閉症について書かれたブログだ。

彼女が重度の知的障害を持つ自閉症の男の子の母親であり、ともすれば重いテーマのブログになりがちだ。悩みがないわけではないだろうが、ほとんど出さず、それ以上の慈愛心と、持ち前ファイトでさらっと書いていることに、すごく好感が持てる。

ブログを作るにあたってデザインがね、とか、何を書こうかテーマの見いだせない人、ドラマやTVからしか話題の見いだせない人は、彼女のブログを一度読んでみるがいい。真実の持つ言葉の重みがそこにある。何も飾らない、ありのまま書く。彼女自身の日常（オリジナル）を書きながらも、立派な社会貢献を果たしている、見本がそこにある。

たとえば、自閉症の特徴について書かれた記事を読んでみるがいい。自分たちがいかに自閉症について誤った知識を持っていたかを知るだろうし、「最近、自閉症気味」なんて誤った言葉を使うことは２度とななくなるだろう。

「持っているオリジナルテーマ＋社会貢献」 この２つのキーワードが、今年から本格的に広まる個人のWebパブリッシング時代に必要なキーワードになるのではと感じた

社会貢献と書くとVolunteer(ボランティア）を思い浮かべる人がいるが、僕は社会貢献はVolunteer(ボランティア）に限らないと思う。自分が持ってるもので世の中に役立つことを書けば、すべて社会貢献だ。

2007年は本当の意味で個人のブログの時代が来ると僕は書いてるし、個人のブロガーを応援する意味で、SEOについて書いたり、アクセシビリティについて書いたり、WYSIWYGエディタを配布しているので、個人のWebパブリッシング時代到来を実感させる彼女の受賞をとても嬉しく思う。

各受賞を見てみれば、決してデザインだけで選ばれているわけでないことが、より明確になると思う。
だから、テーマのある人は来年募集するといい。
テンプレートと、WYSIWYGエディタをあれば、あと必要なのは、心に響くテーマだけだ。Movable Typeはそんなに難しくない。

参考サイト

とってもわかりやすい自閉症のページ
http://autism.flop.jp/
Movable Type コンテスト 2006
http://mt.rsh.jp/

sweetさん！おめでとう。いろいろあるけど、これからの道、苦しくても笑い倒して歩んでください！

投稿者: Dakiny 日時: 2007年2月20日 23:35 |   |   |   | パーマリンク | コメント(2)  | トラックバック (1)

今日のTinyMCE：TinyMCE日本語デスクトップ版をリリースのお知らせ

2007年2月17日 12:12

TinyMCE日本語環境デスクトップ版を5月に公開する予定で開発をすすめている

このソフトは、簡単にいえばローカル環境で動作するTinyMCE。もともとTinyMCEはローカル環境でWebサイトを作るためのWYSIWYGエディタだが、ローカル上で動作させるには多少設定が面倒だ。だから、簡単に設定できるキットを作ろうというプランだ。 

正直言って、最初のリリースは、「なあんだ」で終わるほど、すごくチープなものだろう。９割方、組込マニュアルと２カラムテンプレート＋CSSのキットで終わる可能性が高いからだ。それでも第一歩を踏み切る意味で公開する。

ここから下は、あくまでも僕の 思い描いている仕様でしかないが、。最終的にはインストーラー付パッケージを作る気でいる。資金的なものとか、技術的なものとか、足りないものが多々あるので、まずこれをクリアすべく専念したい。

作ろうと決意した3つのきっかけ

1. 元々サイト構築のために作られたエディタなのでCMSの更新だけに利用するのはもったいない
2. 2月9日にリリースされたxfy Blog Editorや、2月16日にリリースされたMicrosoft Expression Webを強く意識した
3. Web2.0のエバンジェリストであるアークウェブの中野さんのブログを読み、決意を促された

ぼくは常に世界や社会のことを心配しているような公徳心に富んだ人間じゃない。

でも「これはよいことだ!」と感じるプラクティスや運動や志を見かけたときには、自分にはその資格がないとか、自分らしくないとか、恥ずかしいと か、つまりいろんな言い訳をつけて物怖じをすることなく素直に「賛成!」といい、それを広めるのを手伝ってみるのがいいと思っている。

[St.Valentines Day] チョコレボのフェアトレードチョコレートをもらった - nakano's murmur @ Voxより引用

すごく馬鹿だと思われるけど、微力、弱小とはいえ、よりよいWYSIWYGエディタを開発している以上、相手が大手だとか資金力があるとかにひるんじゃいけないと思う。

何事も結果はやってみなきゃわからない。

たとえ惨敗に終わろうとも、行動すればなんらかの収穫を得られる。

参考リンク

Microsoft Expression Web
http://www.microsoft.com/japan/products/expression/default.mspx

おなじようなことが出来るなら、安いほうがいい。簡単につかえるほうがいい。無料で手にはいれば、もっと幸せになれる。と僕は考えるけど、読者の人たちはどう思うかな？

共感してくれれば、うれしい。

2007年2月20日追記：

ディスクトップではなく、デスクトップでは？と万華鏡空間さんより、ご指摘いただいた。これは僕の勘違い。desktop application のdesktop の方なら「 デスクトップ 」が正解。万華鏡空間さんありがとう。

ところで、万華鏡空間さんの作るFlashアートの世界は素晴らしいので、強くおすすめ！

投稿者: Dakiny 日時: 2007年2月17日 12:12 |   |   |   | パーマリンク | コメント(4)  | トラックバック (0)

今日のコラム：WebSig24/7 Skypeミーティング

2007年2月16日 02:03

唐突だが、いまごろになって、Skaypeデビューした

Webシステム屋としては少し恥ずかしいかもしれない。正直、僕は今日の今日までSkypeをやったことがない。やろうやろうと思って、ヘッドホンマイクは昨年７月に購入したもの、ずっとSkypeに接続したことはなく、そのうちそのうちですませていた。

重い腰をあげて、デビューしたのは、遠距離の会議に参加しなきゃいけなくなったからだ。 

WebSig24/7のモデレーターのミーティングは、隔週木曜日、午後８時より港区西新橋にあるインテリジェントネット株式会社の会議室で行われる。前回より、来られない人はSkypeで参加できるようになった。

岐阜県に住んでるので大半はSkypeで参加。ということになるのだが、あわてて、ヘッドホンマイクを探し、ソフトをダウロードしてSkypeを設置して、あろうじてミーティングに参加できた。

だけど、便利なものだねSkypeは…。

東京や大阪といった遠方の顧客や知人が多いから、もっと早くから使うんだった。

僕は結婚前は遠距離恋愛だったから、あの時代にSkypeがあったらな。と思った。今の恋人達は幸せだと思う。

もっと身近に話したい。もっと気軽に話したい。もっと長く話したい。できれば顔を見て話したい。それをSkypeがかなえてくれる

投稿者: Dakiny 日時: 2007年2月16日 02:03 |   |   |   | パーマリンク | コメント(0)  | トラックバック (0)

今日の研究：xfy Blog Editor、最も未来指向なWYSIWYGエディタをMTで実力テスト

2007年2月15日 01:52

xfy Blog Editor（エクスファイ・ブログ・エディタ）をMovabe Type 3.34でテストしたら潜在能力の高さが見えてきた

xfy Blog Editorは、JustSystemsが社運をかけたプロジェクトxfy Technologyから生まれた、最も未来志向なWYSIWYGエディタで、xfy Blog Editorのサイトから無償でダウンロードできる。

僕たちはWYSIWYGエディタを開発している関係上、xfy Blog Editorは気になる存在ではあったが、公式サイトや、既存Blogでは知りたい情報が得られないため、自分でテストしてみることにした。以下はそのレポートだ。

xfy Blog Editorの特徴

• ワープロ感覚で直感的にブログ作成
• インターネットにつながなくてもゆったり編集
• サーバにエラーが発生しても安心
• 地図や動画を貼るのもカンタン
• Windowsはもちろん、Macにも対応

とあるのだが、どれもこれも、すでに同じ特徴を持つWYSIWYGエディタは多いから、xfy Blog Editorだけの特徴とは言い難い。上記のような特徴を持った最も後発システムと呼ぶのがふさわしいだろう。

xfy Blog Editor対象ブログ

• Movable Type3.17x/3.2x/3.3x
• TypePad
• ジャストシステムブログサービス
• FC2
• Seesaaブログ
• ココログ（フリー）

ハードウェア

• Intel Pentium 4またはCeleron 1.6GHz相当以上
• メモリ ： 512MB以上
• ハードディスク空き容量 ： 100MB以上
• 画面解像度 ： 1024x768以上 色数 High Color以上
• ネットワーク ： 100BASE-T以上

ソフトウェア

対応OS ：

• Microsoft Windows XP(SP2以上)
• Fedora Core 4以降
• Mac OS X 10.4の32bit版OSの日本語版または英語版

Java環境 ：

• Java Platform Standard Edition(J2SE)
• 5.0 Update 6以降(Windows / Fedora Core)
• またはRelease 4以降(Mac OS R)

xfy Blog Editorの動作環境は以上だが、ここまでは特に目新しさはない。以下、設定から、簡単な入力テストまで行った。

1. xfy Blog Editorの設定

xfy Blog Editorのインストールが終了すると、この画面が最初に表示されるから、[xfy Blog Editor スタート！]をクリックする。

[BLOG]-[BLOGサービス管理]メニューからサービスを登録する。以下下記順番に

1. Blogの種類（仮にMovable Type）を選択
2. BlogのURLを入力
3. Blogのアカウント情報を入力

最期に[完了]をクリックして設定完了;

2. エントリーの取得

エントリーの取得を行うには、[エントリーの取得]をクリックする。

どのエントリーを取得するか設定を行い、[OK]をクリック。

最新から２エントリーを取得した。なお、ここでエントリーの削除をクリックすると、Blogのエントリーも削除されるので注意すること。

3. 画像の編集

取得したエントリーを表示してみると、classは読み込まないようだ。特筆すべきは動作の軽快さだ。僕が知っている限り、OSにインストールして動作するどのWYSIWYGエディタよりも動作は軽快。

画像を編集してみる。

1. URLに画像のURLを入力する。参照をクリックすればローカル画像のアップロードが行われる。
2. 画像のサイズは自動で記入されない
3. 画像に対する文章の回り込みはできないようだ。

[参照]からアップロードされた画像は[保存/サーバーへ反映]をクリックするとBlogURL/画像ファイル名.jpg等としてBlogに保存される。

4. エントリーの追加

新規にエントリーを追加するには、[エントリの追加]をクリックする

5. 表の編集

3行、3列の表を作ってみる。行と列、表の幅に数値を入れ[OK]をクリック。

位置を中央に選択して[OK]をクリック。

画像のように１ピクセルの罫線の表が出来た。

Blogに反映した結果。表を作る能力は高いようだ。表の作りやすさにおいては、FCKeditorを上回る。

6. YouTube　Moveの貼付

xfy Communityに登録をすると、追加機能のダウンロードやフォーラム投稿など、コミュニティのすべての機能を利用することができるようになる。 たとえば、YouTubeやFlickrを取り込のxfy Blog Editorの追加機能に用意されている。

画像は、YouTube for Blog Editorを起動して、Keyword： Tim Burtunで映像を検索した結果。

このYouTubeMoveを選択して[Insert]をクリックする。 

エントリーに選択したYouTubeMoveが貼りつけられた。

Blogに反映した結果。表示がおかしいが残念ながら現行xfy Blog Editorはblockquoteの編集が行えない。また、YouTube for Blog Editorを使用した場合、トップページの表示はされるが、Permalinkの表示がされないという現象が起きた。Movable Type3.34に限っておきる現象なのか、オールPHPだから起こる現象なのか不明。

7. xfy Blog Editorのまとめ

あくまでもMovable Typeユーザが使うとしたならばという前提で書く。まず、Movable Type3.17以前の方は（テストしてないが）代替え品がないので、使用すれば確実に入力は楽になるだろう。3.2以降の方は、あまり画像を多用しない、または画像はFlickrに置いて使う人ならば利用してもいいだろう。

現時点利用する上での長所

• 動作は従来のローカルで動作するWYSIWYGエディタ中最も軽快といってよい
• 回線が使えない状態で作成ができるのは便利
• 拡張機能を使わなければ、ソースは比較的正しいXHTMLで出力される
• 表はすごく作りやすい

現時点利用する上での短所

• class対応してないから、classを使用している方にはWYSIWYGエディタとは言い難い
• CSSにstyleを多用するので、エントリーソースが重くなりがち
  
• 画像にテキストの回り込みを行うにはむいてない
• ソースが改行されてなく見づらい
• 画像がブログの第一階層に保存されるので、大量の画像をアップロードする人にはむかない
• 上記と関連するが、ファイル共有を行うグループウェアの利用はむいてない
• YouTube for Blog Editorを利用した場合、Permalinkで表示がおかしくなる
• 文字サイズの相対指定対応がまだ不完全である

素材は一級品だ！現時点の欠点は随時改善されていくと思うから、xfy Blog Editorは、近い将来、最も利用者の多いWYSIWYGエディタのひとつになるだろう

参考になれば幸い。

投稿者: Dakiny 日時: 2007年2月15日 01:52 |   |   |   | パーマリンク | コメント(1)  | トラックバック (1)

今日のコラム：大阪風お好み焼きリベンジ　梅田　お好み焼　美舟

2007年2月12日 22:42

大阪WebSgiの翌日（２月11日）、アットスタイルさんと、阪急東商店街にあるお好み焼　美舟にリベンジに出かけた。この店には前回(昨年12月)出かけたときに、大阪風おこのみ焼きなるものを知らず、焼き方に失敗した苦い思い出がある。

失敗を繰り返してはいけない

まず、前回の失敗の要因を書こう

1. 混ぜ方が足りず、味にバラツキが出た
2. 平たく焼いてしまい返したときにバラバラに
3. 叩きすぎて、ふんわり感がなくなった
   

前回より２ヶ月間イメージトレーニングをかさね（嘘）、おいしい大阪風お好み焼きの焼き方に挑戦した次第だ。

いきなりミックスを頼む。イカ、タコ、エビ、豚、玉子と具だくさん、ただでさえ、あれなのに、大丈夫か、オレ。 具だくさんで、溢れそうになる丼を手にバラツキのないようよくかき混ぜる。
※混ぜ方が足りないと食べたときにバラツキが出ておいしくない:-p

気合いと共に一気に丼から鉄板に！平たくしては駄目、鉄板で返せる大きさに分厚くまとめる。

返しで焼き加減をさぐり、ほどよく焼けたので、一気に返す！無事成功。後は焼き上がるのを待つだけ。 

お好み焼きが焼ける間に、焼きそばを食べる。この焼きそばがまた、超うま～。

そろそろ食べ頃。

今回は、たいへんおいしく、いただくことができた。同じ材料を使っても焼き方次第でこんなに味が異なるんだな:-)

大阪風お好み焼き挑戦者へのアドバイス

大阪風は広島風と異なり、つなぎが少なく、細かく刻んだキャベツによる食感が特徴だ。広島風のように平たく広げると、返したときにバラバラになる。最初によく混ぜ、分厚くこじんまりまとめ、たたかずに空気を入れてふんわりまとめるのがおいしくいただくコツ。

参考になれば、幸い。

投稿者: Dakiny 日時: 2007年2月12日 22:42 |   |   |   | パーマリンク | コメント(0)  | トラックバック (1)

今日のコラム：WebSig24/7大阪新年会

2007年2月11日 22:09

WebSig24/7大阪新年会

午後６時からカフェーヌで開催。素直に地上を歩けばよかったのだが、梅田駅周辺は歩道橋や横断歩道が少なく、つい地下に入ったばかりに道に迷い、遅れるはめに(汗)。

到着したら、すでに会場は熱気に充ちて、名刺交換をはじめていた。そう、知った人と話すのは２次会、３次会でいいから、１次会は見知らぬ人ときっかけをつかむべきなんだよね。

キャンセルがあったのは１名のみで、当日参加者を入れて参加者は100%を超えたそうだ。これはドタキャンの多いWebSig24/7のイベントでは快挙。これは、地元サポーターの努力が大きいな。

知名度が足りないのを実感

午後７時から、ライトニングトークが始まり、僕は２番目にTinyMCE for MTEをプレゼンさせてもらった。最初にどれぐらいの人がTinyMCE Plugin for Movable Typeを知ってるか質問すると、Movable Typeの認知度に比べ、まだまだ認知度が足りないことに改めて気づかされた。そういえば周囲でMovable Typeを利用している人たちですら、TinyMCE Plugin for Movable Typeを知っている人は少なかったもんなぁ…。プレゼンもうまくいったとは言い難いけど、それでも終了後に何名かの人たちに問い合わせがあったのが救い。

他のライトニングトークも独創的で、感心させられた。名古屋を中心とする東海のITクリエイターの人たちも高い技術を持っているんだから、もう少し積極的であればなぁと思う。少なくともブログで発表することぐらいはしてもいい。

そして夜更けまで

午後８時に１次会は閉会、大半の人数が２次会参加へ。人数も多いので、テーブルが分散した。僕と同席したのは、中野さん、アットスタイルさん、長沼さん。長沼さんは、東京で仕事して大阪まで来て、新幹線で名古屋に帰っていった。

３次会は前回好評だったラマダホテル大阪近くのイタリア料理屋へGO！閉店まで何本ワインを空けただろう。

午前３時に閉店、ラマダホテル大阪に宿泊の東京組や始発電車を待つ大阪組と別れ、御堂筋まで歩いてタクシーを拾い、梅田OSホテルに戻り、部屋の前でアットスタイルさんと別れ、撮影した写真をまとめアップロードしてから寝る。

大阪は熱かったよ！

投稿者: Dakiny 日時: 2007年2月11日 22:09 |   |   |   | パーマリンク | コメント(0)  | トラックバック (0)

今日のコラム：WebSig24/7大阪：梅田駅前散策

大阪駅前

2月10日土曜日、WebSig24/7(ウェブシグ・トウェンティーフォーセブンの大阪新年会参加のために大阪に来た。

午後１時35分の米原行き、普通に乗り、午後２時55分には新大阪。滋賀県境に住んでる僕にすれば、東京に比べると大阪は実に近い。それにシャトル切符を購入すれば大垣－新大阪間は米原ー新大阪間新幹線利用で往復6,060円だ。

大阪駅、梅田駅前は、ここは大阪？と思うぐらい洗練されていて（それも大きな誤解で、今の大阪は洗練されている）、いわゆる、アニマル柄の大阪のおばちゃんなんて見られない。

地下以外を歩くと迷うので、OSビルを目指して地上を歩くことにする。大阪駅前は横断歩道が少ない。

歩道橋から見上げた大阪の空。「坂の上の雲」という小説のタイトルを思い出した。階段を上がりきると、さほど地上をかわらない景色でがっかりした。その後OSビルに到着すると、今宵の宿泊地、梅田OSホテルは、OSビルの中ではなく、曾根崎お初天神通り商店街の近くにあるとのこと。

曾根崎お初天神通り商店街

ということで、曾根崎お初天神通り商店街に到着、入り口にある建物は有名なうめだ花月。せっかく来たので、