2010年9月| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
トップに戻る | 2007年1月 < 2007年2月のアーカイブ > 2007年3月

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

2007年2月25日 04:40

dakiny.comのNot Foundのページ

「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. テンプレートの編集

Movable Typeシステムのテンプレート管理画面

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

ダイナミックページ・エラー、ソース編集画面

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

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

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

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

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

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

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

参考になれば幸い。

投稿者: Dakiny 日時: 2007年2月25日 04:40 |  このエントリーをはてなブックマークに追加 「今日のWebアクセシビリティ:Movable Typeで行う404エラー対策」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のWebアクセシビリティ:Movable Typeで行う404エラー対策」をTwitterでつぶやく |   | コメント(0)  | トラックバック (0)

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

2007年2月24日 19:19

文字サイズ中

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

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

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

ところで、悩んだのは基本文字サイズだ。IEは、最大、大、中、小、最小と5段階に文字の表示サイズを変えることができる。文字サイズに割り当てるCSSは1種類であり、5段階すべてで情報が伝わるように基本文字サイズを設定することは、けっこう大事なことかもしれない。最初は普通に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で見ればいいかと思うのは早計。新たにブラウザを開くと基本サイズに戻ってしまうから、ブラウザを開くつど文字サイズを変更しなければならないので面倒だ。

その点、約7割のインターネットユーザーが利用する、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 |  このエントリーをはてなブックマークに追加 「今日のWebアクセシビリティ:基本文字サイズを考える」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のWebアクセシビリティ:基本文字サイズを考える」をTwitterでつぶやく |   | コメント(0)  | トラックバック (0)

今日のSEO:aDesignerで、簡単に!Webアクセシビリティ その3

2007年2月23日 00:10

aDesigner ロービジョンモード パラメーター設定

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

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

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

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

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

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


1.視力(弱視対応)

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

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

aDesigner

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

aDesigner

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

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


1.色覚異常

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

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

aDesigner 赤色覚異常

赤色覚異常

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

aDesigner 緑色覚異常

緑色覚異常

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

aDesigner 青色覚異常

青色覚異常

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


3.水晶透過率(老人性白内障)

aDesigner 水晶透過率(加齢性白内障)のパラメーター わかりやすく言えば、老人性白内障。その名のように老人性白内障は老人になって起こるものであるが、では何歳ぐらいからかというとはっきりした規定はない。よって最近では加齢性白内障ともよばれる。早い人は30代から始まり50代では約半数。60代で70-80%、70代で80-90%、80代で90-97%、90代では100%と言われているそうだ。

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

aDesigner

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

aDesigner

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


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

点数でチェックするアクセシビリティ補助ツールが多い中、視覚的にどう見えるのかが体験できる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 |  このエントリーをはてなブックマークに追加 「今日のSEO:aDesignerで、簡単に!Webアクセシビリティ その3」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のSEO:aDesignerで、簡単に!Webアクセシビリティ その3」をTwitterでつぶやく |   | コメント(1)  | トラックバック (1)

今日のSEO:aDesignerで、簡単に!Webアクセシビリティ その2

2007年2月22日 06:22

aDesigner

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

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

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


では、aDesignerを使ってみよう

aDesigner

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

音声モード

aSesgner

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


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

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

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


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

aSesgner

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

"本文へ移動"などのスキップリンクの提供を検討して下さい
"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属性を適切な言葉に修正した後、タイトル下に本文やメニューにジャンプするリンクボタンをつけて、もう一度チェックしてみた。

aDesigner

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

aDesigner

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


音声ブラウザ出力モード

aDesigner aDesigner

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

aDesigner

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

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

aSesgner

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


ロービジョンモード

aDesigner

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

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

について注意された。

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

aDesigner

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

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

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

参考になれば、幸い。

投稿者: Dakiny 日時: 2007年2月22日 06:22 |  このエントリーをはてなブックマークに追加 「今日のSEO:aDesignerで、簡単に!Webアクセシビリティ その2」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のSEO:aDesignerで、簡単に!Webアクセシビリティ その2」をTwitterでつぶやく |   | コメント(0)  | トラックバック (0)

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

2007年2月21日 07:35

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

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

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

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

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

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


PreviewEntryの設定

PreviewEntry プラグイン管理画面 1

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

PreviewEntry プラグイン管理画面 2

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


PreviewEntryの動作

PreviewEntry 起動

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

PreviewEntry プレビュー画面

再構築なしに、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 |  このエントリーをはてなブックマークに追加 「今日のMT:Movable Typeでプレビュー機能が実現!?PreviewEntry」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のMT:Movable Typeでプレビュー機能が実現!?PreviewEntry」をTwitterでつぶやく |   | コメント(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からしか話題の見いだせない人は、彼女のブログを一度読んでみるがいい。真実の持つ言葉の重みがそこにある。何も飾らない、ありのまま書く。彼女自身の日常(オリジナル)を書きながらも、立派な社会貢献を果たしている、見本がそこにある。

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


「持っているオリジナルテーマ+社会貢献」 この2つのキーワードが、今年から本格的に広まる個人の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 |  このエントリーをはてなブックマークに追加 「今日のコラム:Movable Type コンテスト 2006 個人のWebパブリッシング時代到来!」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のコラム:Movable Type コンテスト 2006 個人のWebパブリッシング時代到来!」をTwitterでつぶやく |   | コメント(2)  | トラックバック (1)

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

2007年2月17日 12:12

TinyMCE日本語版

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

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

正直言って、最初のリリースは、「なあんだ」で終わるほど、すごくチープなものだろう。9割方、組込マニュアルと2カラムテンプレート+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 |  このエントリーをはてなブックマークに追加 「今日のTinyMCE:TinyMCE日本語デスクトップ版をリリースのお知らせ」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のTinyMCE:TinyMCE日本語デスクトップ版をリリースのお知らせ」をTwitterでつぶやく |   | コメント(4)  | トラックバック (0)

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

2007年2月16日 02:03

Skypeインストール起動画面

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

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

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

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

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

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

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

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


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

投稿者: Dakiny 日時: 2007年2月16日 02:03 |  このエントリーをはてなブックマークに追加 「今日のコラム:WebSig24/7 Skypeミーティング」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のコラム:WebSig24/7 Skypeミーティング」をTwitterでつぶやく |   | コメント(0)  | トラックバック (0)

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

2007年2月15日 01:52

xfy Blog Editor公式サイト

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対象ブログ


ハードウェア

  • 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のインストールが終了すると、この画面が最初に表示されるから、[xfy Blog Editor スタート!]をクリックする。

xfy Blog Editor

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

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

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


2. エントリーの取得

xfy Blog Editor

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

xfy Blog Editor

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

xfy Blog Editor

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


3. 画像の編集

xfy Blog Editor

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

xfy Blog Editor

画像を編集してみる。

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

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


4. エントリーの追加

xfy Blog Editor

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


5. 表の編集

xfy Blog Editor

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

xfy Blog Editor

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

xfy Blog Editor

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

xfy Blog Editor

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


6. YouTube Moveの貼付

xfy Blog Editor

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

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

xfy Blog Editor

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

xfy Blog Editor

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

xfy Blog Editor

Blogに反映した結果。表示がおかしいが残念ながら現行xfy Blog Editorblockquoteの編集が行えない。また、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 |  このエントリーをはてなブックマークに追加 「今日の研究:xfy Blog Editor、最も未来指向なWYSIWYGエディタをMTで実力テスト」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日の研究:xfy Blog Editor、最も未来指向なWYSIWYGエディタをMTで実力テスト」をTwitterでつぶやく |   | コメント(5)  | トラックバック (1)

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

2007年2月12日 22:42

お好み焼 美舟

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


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

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

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

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

お好み焼 ミックスの具

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

お好み焼 ミックスの具 よく混ぜて鉄板へ

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

お好み焼 ミックスの具 返し成功

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

美舟 お好み焼きと焼きそば

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

お好み焼 ミックス そろそろ食べ頃

そろそろ食べ頃。

お好み焼 ミックス たいへんおいしくいだけました

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


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

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

参考になれば、幸い。

投稿者: Dakiny 日時: 2007年2月12日 22:42 |  このエントリーをはてなブックマークに追加 「今日のコラム:大阪風お好み焼きリベンジ 梅田 お好み焼 美舟」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のコラム:大阪風お好み焼きリベンジ 梅田 お好み焼 美舟」をTwitterでつぶやく |   | コメント(0)  | トラックバック (2)

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

2007年2月11日 22:09

中野さんのライトニングトーク

WebSig24/7大阪新年会

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

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

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


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

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

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


そして夜更けまで

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

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

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

大阪は熱かったよ!

投稿者: Dakiny 日時: 2007年2月11日 22:09 |  このエントリーをはてなブックマークに追加 「今日のコラム:WebSig24/7大阪新年会」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のコラム:WebSig24/7大阪新年会」をTwitterでつぶやく |   | コメント(0)  | トラックバック (0)

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

大阪駅前

大阪駅前

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

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

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

大阪駅前

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

大阪駅前

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

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

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

ということで、曾根崎お初天神通り商店街に到着、入り口にある建物は有名なうめだ花月。せっかく来たので、曾根崎お初天神通り商店街をぶらぶら歩きながら南下する。なかなか雰囲気があっていい場所だ。次回はゆっくりと時間を過ごしたい。

露天神社(お初天神)

曾根崎お初天神通り商店街の終点、ビルの谷間にひっそりと露天神社(お初天神)がある。 近松門左衛門作「曽根崎心中」ゆかりの場所として有名な場所だ。

梅田OSホテル シングルルーム

梅田OSホテル

というわけで、4時前にようやく今宵の宿である、梅田OSホテルに到着。なんのことはない。御堂筋線を南下すればよかったのだ。写真はシングルルーム。喫煙時に換気がよくないのと、荷物を置く場所がないのが難点かな。フロントに隣接してサイゼリアがあるのは便利。

熊本からやってくるアットスタイルさんを待つ間だ、ネットに接続。って他にやることないのかね…(苦笑)。
1時間ほどして、アットスタイルさん到着。やはりOSビルへ行ったとのこと。

アットスタイルさんとはメールのやりとりは頻繁にあり、電話も数回あるのだけど、会うのははじめてで、予想通り誠実な人だった。

次回に続く。

投稿者: Dakiny 日時: 2007年2月11日 04:25 |  このエントリーをはてなブックマークに追加 「今日のコラム:WebSig24/7大阪:梅田駅前散策」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のコラム:WebSig24/7大阪:梅田駅前散策」をTwitterでつぶやく |   | コメント(0)  | トラックバック (0)

今日のTinyMCE:オープンソースの世界は相互扶助であるべき

2007年2月10日 05:10

僕はすごく憤りを感じている

理由は、Movable Typeでサイト構築を行う企業の一部が、無償配布している、TinyMCE Plugin for Movable Typeをコメントもなく営利目的に利用していることが次々に判明しているからだ。

社名はあえてださないが、公式サイトにリンクも貼らず、メールひとつよこさず、TinyMCE Plugin for Movable Typeの設置料金を5万円(3万円が相場だと思う)とっている企業とか、コメントひとつよこさず、サイト構築に利用している企業とか…。同業者が開発し無償で提供したものを挨拶なしに営利に使うのは、法的には間違ってないが、倫理的にまちがってる。 

発覚する都度、開発のモチベーションが下がる一方だ

僕たちが商用も無償としたのは、ひとつはMovable Typeを応援したいからであり、ひとつは事業を立ち上げたばかりの創業まもない人々を応援したいからだ。Movable Typeを生業とする人たちを儲けさせるために無償配布してるんじゃない。

オープンソースの世界は相互扶助であるべきだ

と思うのだ。ビギナーにまでコメントどうこうなんてことは言わないが、プロであるなら、せめてバグレポートを出すとか、改善案をくれるとか、それなりにコミットしてほしい。

プロとしてのプライドがあるならばだが…。

僕が彼らが、無償で使っていることを怒っているんじゃないのは、わかってほしい。

なんか支離滅裂でごめん。

投稿者: Dakiny 日時: 2007年2月10日 05:10 |  このエントリーをはてなブックマークに追加 「今日のTinyMCE:オープンソースの世界は相互扶助であるべき」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のTinyMCE:オープンソースの世界は相互扶助であるべき」をTwitterでつぶやく |   | コメント(10)  | トラックバック (0)

今日のTinyMCE:MovableType最強の画像管理システムMCImageManager

2007年2月 9日 21:27

MCImageManager画像編集画面

より多くのMovable TypeユーザーにMCImageManagerを使ってほしい

まもなく公開するTinyMCE for MTEに標準搭載したMCImageManagerは、僕が知る限り、Movable Type中で最強の画像管理能力を持つシステムだ。有償だが、32ユーロ(日本円で現時点5,133円)の対価に充分見合う使いやすさと機能がある。

主な機能

  1. 画像のサムネール表示機能
  2. 画像のアップロード機能
  3. フォルダーの追加削除機能
  4. 画像のリサイズ、トリミング機能

TinyMCEの開発元であるMoxiecode Systems ABが開発したので、TinyMCEとの連動性は他を寄せ付けぬものがあり、Movable Typeに限らず、他のCMSで動くTinyMCEでも動作する。

以下、TinyMCE for Movable Typeに組み込んだ場合のMCImageManagerについて機能説明をしよう。
※例はTinyMCE for MTEだが同じなので、参考にしてほしい。


1.MCImageManagerの起動

TinyMCE for MTE操作パネル

画像ボタンをクリックする

TinyMCE for MTEボタンパネル

イメージ編集のURL窓の右にあるアイコンをクリック

MCImageManager

MCImageManagerが起動する


2.フォルダー管理

MCImageManagerフォルダー管理機能

  1. フォルダーアイコンをクリックすると、フォルダー新規作成画面がポップアップする
  2. フォルダー名記入欄に任意フォルダー名を記入する
  3. 作成をクリックすればフォルダーができる 

3.ファイルのアップロード

MCImageManagerファイルアップロード機能

  1. イメージをアップロードのアイコンをクリックする
  2. 参照をクリックしてPCから画像を選ぶ
  3. アップロードをクリックすればファイルがアップロードされる(同時に複数のファイルをアップロードすることも可能)

4.画像編集機能の起動

MCImageManager画像編集機能の起動

MCImageManagerの画面からサムネール上のハンマーのアイコンをクリックする

MCImageManager画像編集機能

画像編集画面が別窓で開く


5.画像のトリミング

MCImageManagerトリミング機能1

MCImageManagerトリミング機能2

  1. 切り抜きのアイコンをクリック
  2. リサイズしたい数値を入力
  3. チェックアイコンをクリックすると画像がトリミングされる
  4. イメージを保存のアイコンをクリック
  5. 任意のファイル名をつける
  6. 再びチェックアイコンをクリックすれば保存完了

6.画像のリサイズ

MCImageManagerリサイズ機能1

MCImageManagerリサイズ機能2

  1. イメージサイズ変更のアイコンをクリックする
  2. 任意の数値を入力と画像がリサイズされる
  3. チェックアイコンをクリックしてリサイズを確定
  4. イメージを保存のアイコンをクリック
  5. 任意のファイル名をつける
  6. 再びチェックアイコンをクリックすれば保存完了

Movable Typeで利用する場合の動作環境

  1. 予め、TinyMCE for Movable Typeが1.00J、1.10J、1.20Jが導入されていること
  2. PHP4.0以上、ImageMagickGD Graphics Libraryがサーバーで利用できれば基本的に動作するはずだ。

Movable Typeへの組込方法

Movable Typeユーザーの方は、組込方をTinyMCE for Movable Type 1.20Jに付属のMCImageManagerの組込方法.txtに書いてあるから、参考にしてほしい。

参考になれば幸い。

投稿者: Dakiny 日時: 2007年2月 9日 21:27 |  このエントリーをはてなブックマークに追加 「今日のTinyMCE:MovableType最強の画像管理システムMCImageManager」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のTinyMCE:MovableType最強の画像管理システムMCImageManager」をTwitterでつぶやく |   | コメント(5)  | トラックバック (0)

今日のTinyMCE:Movable Typeで世界一のWYSIWYGエディタ完成

2007年2月 8日 23:13

TinyMCE for MTE

僕たちは、このエディタをMovable Type用としては、世界一の高機能エディタであると自負し、揺るぎない自信を持って日本のビジネスシーンに送り出す。

このエディタはTinyMCE for Movable Typeの兄貴分といってよい存在。Movable Type Enterprise用のWYSIWYGエディタ。

完成度にこだわりすぎ、予定に遅れること2ヶ月余り。シックス・アパート社をはじめ、Movable Typeの世界では第一線の方々たちの協力を得て、ようやく完成した。

このエディタを使えば、ビジネスブログの投稿に写真のレイアウトを配慮した貼付はもちろん、表作成や動画の貼付等の専門技術を要する作業といえ ど、難しいXHTMLを覚える必要は全くない。だが、JIS規格対応Webを制作可能な方々も満足できる高機能という、そう反する内容 を高次元で実現した。 


TinyMCE for MTEを選ぶ15のポイント

  1. インストールが簡単、多くの方はFTPでアップロードするだけで使える
  2. マニュアルを読まずともイメージでわかる、ユーザービリティにすぐれたインターフェイス
  3. 多種類のプラットホーム(Win2000/Xp/Vista、Mac OS-X、PC-UNIX各種)に対応
  4. Internet Explorer、Firefoxの2大ブラウザに対応
  5. 文句なしに出力結果に差がつく高機能
  6. レベルや用途を配慮した4種類の機能画面が簡単に切替可能
  7. JavaScriptエディタだから、サーバー負荷を著しく軽減
  8. 付属の画像管理システム、ファイル管理システムにより、データ管理も著しく向上
  9. 更新やアンカーページ制作にDreamwever等のホームページ作成ソフトは不要
  10. W3C準拠、アクセシビリティにすぐれ、SEO効果も高いコード生成が可能
  11. 日本のビジネスシーンを配慮した各種機能
  12. RightFieldsとの親和性が高く、組み合わせによっては最高の投稿画面を実現
  13. バージョンアップを配慮したシステム構成
  14. ユーザーサポート完備
  15. コストパフォーマンスに優れた価格

簡単に切替可能な4種類の編集パネル

TinyMCE for MTE

TinyMCE for MTE

TinyMCE for MTE

TinyMCE for MTE

1行エディタは使用感はもっとも軽快。機能はmixiプレミアムのエディタとほぼ同じ。4行エディタは、プロのWeb制作者向けツール。これらのボタンパネルはプラグイン管理画面で簡単に切替できlる。

Movable Typeで最強の画像管理システム+ファイル管理システム

MCImageManager

MCImageManager 

TinyMCEで動作する、画像管理システム。画像はサムネールで表示され、管理だけでなく、トリミングやリザイズも行える。僕の知っている範囲では、Movable Type用の画像管理システムとしては最高の機能を持っている。
単体価格は32ユーロ

MCFileManager

MCFileManager 

TinyMCEやMCFileManagerとシームレスに連動するデータ管理システム。グ ループウェアに必需品の共有のデータストレージとして利用できる簡単にデレクトリを作れますから日付別、人別といった区分けが容易だ。
単体価格は50ユーロ

 TinyMCE for MTEを使えば、なれれば、こんなページがHTMLの知識一切なしで10~15分程度で作れる。

近々、シックス・アパート社プロネットMTEパートナーの方々におけるプレ・リリースののちに、リリースする。

時期は約束できないが、この開発で得た機能のいくつかは、LGPL版にフィードバックしたい。

参考になれば幸い。

投稿者: Dakiny 日時: 2007年2月 8日 23:13 |  このエントリーをはてなブックマークに追加 「今日のTinyMCE:Movable Typeで世界一のWYSIWYGエディタ完成」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のTinyMCE:Movable Typeで世界一のWYSIWYGエディタ完成」をTwitterでつぶやく |   | コメント(0)  | トラックバック (0)

今日のSEO:aDesignerで、簡単に!Webアクセシビリティ その1

2007年2月 5日 21:06

aSesgnerの説明

SEOはアクセシビリティが基本だ、アクセシビリティをチェックしてくれるaDesigner(エーデザイナー)のダウンロードから効果的な使い方までを2回に分けて説明したい
今回はダウンロードからインストールまで

aDesigner(エーデザイナー)は、視覚障害者や高齢者にもアクセスしやすく使いやすいウェブページを作れるように、Web制作者を支援するツールで、無償で利用することができる。

無償で利用できるアクセシビリティ支援ツールには他にも、富士通から、WebInspector(ウェブインスペクター)が、InfoaxiaからWeb Accessibility Toolbar 1.2.1 日本語版が出ているが、使いやすさにおいては、aDesignerが勝ると思う。

そんな理由で、aDesignerに関心のある人はもちろん、SEOに関心ある、多くのWeb制作者に利用してほしいと思っているが、ダウンロードがいささか面倒なのが、残念でならない。

まず、aDesignerをダウンロードするには、IBM IDが必要だが、aDesignerのサイトからIBM IDを取得するのは、ユーザービリティよろしくないこのサイトでは、少々骨が折れる。だから、IBM IDの簡単な取得方法から説明したい。
#アクセシビリティをチェックするソフトや、障害者のためのソフトを作っているメーカーのサイトが、ユーザービリティがなってないのはいかんなぁと毎回、思うのだ:-p

すでに、IBM IDを取得している人には意味がないから、この項は読み飛ばして、直接、aDesignernのダウンロードに進んでもらいたい。


IBM IDの取得

さて、僕はIBMではないから(笑)、日本人には、素直に日本語でIBM IDを取得できるサイトを紹介したい。

My IBM プロファイル

My IBM プロファイルのページを開き、 日本語が選ばれていることを確認して、ご登録をクリック。

My IBM登録ステップ1

My IBM登録ステップ1のページが開く。このページで記入するのはIDとパスワード、IDを忘れた時に必要なキーワード等、アスタリスク(*)のついた必須項目を記入したら次のページへ進む。

My IBM登録ステップ2

My IBM登録ステップ2のページが開く。このページで、アスタリスク(*)のついた必須項目は性名のみ。いろいろ記入項目はあるが、個人情報を書きたくない人はそれだけ記入するだけでいい。記入したら次のページへ進む。

My IBM登録完了ページ

My IBM登録のページが開いたら、My IBM登録完了。次へ進むは押しても押さなくてもいい。


aDesignerのダウンロード

aDesignerのDownloadその1

aDesignerのサイトを開き、Downloadをクリック。

aDesignerのDownloadその2

 Download nowをクリック

aDesignerのDownloadその3

Sign inをクリック

aDesignerのDownloadその4

IBM ID(登録したメールアドレス)とパスワードを入力して、Submitをクリック。

aDesignerのDownloadその5

ライセンスを読み、承諾したらI agreeをチェックして、I confirmをクリック。

aDesignerのDownloadその6

Download nowをクリックするとダウンロードがはじまるので、約43MBのファイルがダウンロード終了まで待つ。ここまで行った方、ほんとうにお疲れさま。


aDesignerのインストール

以下は、インストールが不安な向けに作ったが、たぶん見なくても大丈夫(笑)。

aDesignerのインストールその1

次へをクリック

aDesignerのインストールその2

仕様許諾契約の全条項に同意しますをチェックして、次へをクリック

aDesignerのインストールその3

インストールをクリック 

aDesignerのインストールその4

インストールが始まるので終わるまで待つ

aDesignerのインストールその5

これにてaDesignerインストール完了。完了をクリック。


aDesignerの起動

aDesignerのスプラッシュ

ディスクトップ上のaDesignerアイコンをクリックすると、aDesignerが立ち上がる。起動に時間がかかるが、下記のインターフェイスが立ち上がれば、インストールは成功。

aDesigner初期状態のインターフェイス


次回は、効果的な使い方について説明したい。

参考になれば、幸い。

投稿者: Dakiny 日時: 2007年2月 5日 21:06 |  このエントリーをはてなブックマークに追加 「今日のSEO:aDesignerで、簡単に!Webアクセシビリティ その1」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のSEO:aDesignerで、簡単に!Webアクセシビリティ その1」をTwitterでつぶやく |   | コメント(1)  | トラックバック (0)

今日のコラム:さよなら、おばあちゃん

2007年2月 2日 22:28

岡山に住む母方の祖母が、2007年1月30日午前10時、老衰で亡くなった。享年102歳。

最期に会ったのは2001年5月4日、当時8ヶ月の三女を初めて会わせたから、おばあちゃんは、ひ孫には全員会ってるわけだ。

その時にだいぶボケていて、3度目に会う長女はひ孫であることを理解してもらうのに苦労していたな。

当時の僕はコラムには「人はかように、悲しみも苦しみ忘れて、安らかに眠るように死んでいくのがいちばん幸せかもしれない」と書かれている。

人の死は悲しいものだ。

釈迦であろうが、孔子であろうが、
弟子の死には嘆き悲しんだというが

齢100歳を超える長寿ともなれば…、別だ。

おばあちゃんは、安らかな安らかな死に方だったそうだ。

告別式は2月1日、自宅で行われ 

子や、孫や、ひ孫、甥や姪、近所の人たちが、大勢集まり、笑顔に充ちたにぎやかな、そして最高の葬式だった。

彼女には、お悔やみの言葉はいらない。
ご愁傷様も、合掌も、南無阿弥陀仏も、南無妙法蓮華経も…
幸せに決まっているから、ご冥福もいらない。

彼女には、「さよなら、おばあちゃん」がふさわしいと思う。

さよなら、おばあちゃん。

僕をかわいがってくれて、ありがとう。

投稿者: Dakiny 日時: 2007年2月 2日 22:28 |  このエントリーをはてなブックマークに追加 「今日のコラム:さよなら、おばあちゃん」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のコラム:さよなら、おばあちゃん」をTwitterでつぶやく |   | コメント(2)  | トラックバック (0)

今日のSEO:GoogleやさしいSEO、米GoogleであなたのWebの順位は?

2007年2月 1日 03:02

To 1%  People in the World

To 1% People in The World

まもなく公開、英語版! というのは冗談で、Googleの英訳システムを使って翻訳してみただけだ(笑)。それにしても、 米Googleの英訳システムはなかなかよくできている。検索結果の横に出る[Translate this page]をクリックすれば英訳をしてくれる。
自分のWebに英語版を作りたい人は、ソースを参考に修正してほしい。


さて、本題。僕らのサイトは米Googleで何位だろうか?

TinyMCE Plugin for Movable Typeは現行バージョンの1.20からマルチリンガル版になったので、海外進出を狙って(かなり本気)、僕たちが開発したシステムのサイトは米Googleで何位が調べてみた。


これが、TinyMCE Plugin for Movable Typeのサイトを9月に立ち上げて4ヶ月後の僕たちの行ったSEOの結果だ。


順位についての自己分析

  1. WAIのLevel Double-Aに至るまでアクセシビリティを追求
  2. Google,PageRank5/10
  3. 英語でキーワードマッチを最適化

Webだけなら上記が3大要因でも、現実に

  1. 広報をきちんと行った
  2. ユーザー対応を可能な限り行った
  3. 最大の要因は開発したシステムを多くのユーザーが評価してくれたこと:-)

が大きい。そう、僕らはSEOが目的じゃなくてTinyMCE Plugin for Movable Typeを多くの人たちに使ってもらうのが目的だ。

すでに、日本国内のGoogle,Yahoo!, MSNは制覇した。
Googleを征し定番サイトになってしまえば、Yahoo!も、MSNも追従できたのは証明できた。


でも、アメリカでTinyMCEで検索する人間はいるのか?

日本だって、それまで僕らが力技で広めたようなものだ。それまで一部の人たちしか知らなかった。
やはり普通検索するなら、WYSIWYGEditor,Movable Typeだろう。  

調べたら、IT業種では、上位に掲載されるアメリカのサイトはキーワードマッチをぬかりなくやってるし、どのキーワードで検索すれば有効かをしっかり把握している。

英文の見直しと、キーワードマッチで最適化し、1年内にはなんとか、検索率の高いキーワードで喰込んでやろうと思っている。これは米Googleに対する挑戦だ。15位以内じゃなくて、トップページに掲載されなきゃ意味がない。


アクセシビリティの概念からキーワードマッチのTIPS

ドメイン名カテゴリー名ファイル名キーワードマッチさせるといいと思う。意味がない、と言う人もいると思うが、Googleの検索結果でキーワードマッチすれば文字が強調されるので、まったく意味のないことじゃないと考える。そしてなによりも視覚障害者にやさしいサイトだ。

結果はどうあれ、やってみるだけの価値はあるんじゃないかな。

アクセシビリティを学ぶには、IBM ホームページ・リーダーがいいのだが、それが無理ならせめて、aDesignerを入手して使ってほしい。ただし、両方使い比べてみたが、aDesignerでは視覚障害者の気持ちがわからないから、アクセシビリティを学ぶのが難しいと思う。目で見て採点チェックじゃなく、耳で聴くことが大事なんだ。


僕はアクセシビリティを理解しない、SEO業者なんか偽者だと言い切りたい。

参考になれば幸い。

投稿者: Dakiny 日時: 2007年2月 1日 03:02 |  このエントリーをはてなブックマークに追加 「今日のSEO:GoogleやさしいSEO、米GoogleであなたのWebの順位は?」のはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 このエントリのdeliciousの被リンク数  |  このエントリをlivedoorクリップに追加 このエントリのlivedoorクリップ被リンク数 |  「今日のSEO:GoogleやさしいSEO、米GoogleであなたのWebの順位は?」をTwitterでつぶやく |   | コメント(0)  | トラックバック (0)

Search


キャッシュ使用
Powered by 暴想

Download

Categories

ArchiveList

Trackbacks

Comments