TinyMCE Plugin for Movable Type1.20Jaに付属されたiBrowser Exを使ってみた。

3.パーミッション設定

同梱のibrowserディレクトリ及びその子ディレクトリのパーミッションを777等に変更します。
※各サーバの設定に詳細は依存します。

ibrowserフォルダごとアプリケーション・ディレクトリへアップしてibrowserディレクトリとその中のディレクトリのlibraryとuploadsをパーミッションを777等に変更します。

画像ディレクトリの設定を変更してみた。

オリジナルの画像ディレクトリの設定

$tinyMCE_imglibs = array(
array (
text => 'My Upload',
value => '../../../../../../ibrowser/uploads',
url => 'ibrowser/upload/',
create_dir => true,
upload => true,
delete => true
),
array (
text => 'Main Library',
value => '../../../../../../ibrowser/library',
url => 'ibrowser/library/',
create_dir => false,
upload => false,
delete => false
)
);

変更した画像ディレクトリの設定

$tinyMCE_imglibs = array(
array (
text => 'My Upload',
value => '../../../../../../ibrowser/uploads',
url => '/blog/ibrowser/uploads',
create_dir => false,
upload => true,
delete => true
 ),
array (
text => 'Main Library',
value => '../../../../../../ibrowser/library',
url => '/blog/ibrowser/library',
create_dir => false,
upload => false,
delete => false
)
);

後は簡単!画像の挿入/編集ボタンをクリックすると新しい画面が開く。

2.使い方

・My Upload

このディレクトリに対してはブラウザからその時点で画像をアップロードする場合に用います。 基本設定では削除が許可されています。
※ディレクトリを作成することも可能ですが、サーバ設定やパーミッションの問題で作成したディレクトリに対して、画像のアップロードが出来ないケースもありますのでご注意ください。

・My Library

このディレクトリは予めftpなどで大量の画像を一度にアップロードしておき、利用する場合に用います。
ディレクトリの作成と画像アップロード、画像削除を不許可設定としています。
※設定変更でディレクトリの作成、画像アップロード、画像削除を許可する事もできますが、サーバ設定やパーミッションの問題で作成したディレクトリに対して、画像のアップロードが出来ないケースもありますのでご注意ください。

画面下の画像アップロードを利用して、ローカルの画像を選択、ライブラリに追加された画像を選択すると以下のように画像が表示される。

iBrowser

説明に画像の代替テキストを挿入し保存する。*枠線・縦空き・横空きはスタイルシートで調整することをお勧めします。

デフォルトでの画像のアップロードを利用するよりも簡単に画像ディレクトリを特定したアップロードが行えます。

Posted

今日の開発:TinyMCE for Nucleus CMS公開

SourceForge.jpで立ち上げたオープンソースプロジェクトである『TinyMCE Japan』の活動第2弾として、Movable Type版に先行して、NucleusCMS日本語版用TinyMCEを公開した。

使い方は至って簡単。MovableTypeとほぼ同じである。

WYSIWYGモード

書き出すソースは多少無視される要素や属性もありますが、XHTML 1.0にほぼ準拠

ソースを編集

デフォルトでの表示

デフォルトでの表示

自由度が高いNucleusと組み合わせると最強のCMSとなるだろう。

TinyMCE Plugin for Movable Type1.20Jaも出たんでした...

Posted

昨日、SOHOの友人からメールが届いていた。

以前話した?DTP world 特集記事 P54~で書きおろしました。

彼はコミュニケーションデザインの分野ではちょっと知られた存在らしい。

ピクトグラム&コミュニケーション~アイコンデザイナーとSTのためのサイト

当サイトは、人のコミュニケーションにおいて、言葉以外の手段も尊重するユニバーサル・コミュニケーション社会の形成を目指すための一つの提案の場、と捉えて頂きたいと考えています。ピクトグラムがその利点を生かし、人と人、人と物とのコミュニケーションをさまざまな場所や空間で支援し、これまで以上に広く世界中で利用される日が来ることを願います。

ピクトグラム&コミュニケーション~アイコンデザイナーとSTのためのサイト

知り合いであることを誇りに思ってます!

Posted

CSS Validatorが新しくなっていた!

CSS Validator

CSS Validatorとは「W3C CSS 検査サービスについて」より

W3C CSS 検査サービスは、W3Cによって作られたフリーソフトウェアで、ウェブデザイナーやウェブ開発者が CSS (Cascading Style Sheets; カスケーディング・スタイルシート) をチェックするのに使うことができます。このサービスは、ウェブ上のフリーサービスを通じて使ったり、ダウンロードして Java プログラムとして実行したりウェブサーバー上で Java サーブレットとして使ったりできます。

W3C CSS 検査サービスについて

クライアント様のサイト構築中に「CSS Validatorの表示が変だな?」と思っていたんですが、先程、リニューアルが完了したみたいです。

チェック結果画面

リニューアルでチェックが甘くなっているようです。

昨年の秋に変更があった際、文字色と背景色を共に指定してない場合には警告が出るようになりましたが、今回のリニューアルでは元に戻されています。

transparentや背景色を上手に使えばよいのかもしれませんが、アクセシビリティを考えると警告してくれたほうが良かったのかもしれません...

Posted

使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)

いつも参考にさせていただいているこのサイトで新しい検証サイトが紹介されている。

アクセシビリティチェック

試験版、時折「なんでそこにツッコミがはいるのぉ?」とアイスクリームを隠れて食べているのをばれたようなコドモの気持ちになりますが、その辺は診断終了後「そこはちゃうねん」とツッコミが入れられます。

アクセシビリティチェック

はなまるチェッカーを使ってみた。

結果は65点!

hanamaru.png

リンクテキスト(リンクの設定されている文字)には判別しやすいように下線をつけましょう。どこにリンクがあるのかがはっきりわかるような表現をすることが重要です。リンク部分がわからないと、リンクをたどることができません。他のページへ移動することができないため、サイト全体を理解することができず、情報が十分に伝わりません。

早速ツッコミを。

ナビゲーションバーにもリンク下線がいるのでしょうか...

Posted

最近Voxを使っているのでThis is good for MTプラグインをインストールしてみた。

素直にインストールしてみるとタブインデックスが無かったり、label要素が重複していたりするので51行目からを以下のように修正。

    my $html = "<label for=\"quick-comment\">"
               .$plugin->translate("Quick Comment:")
               ."</label><select name=\"comment_template\" id=\"quick-comment\" tabindex=\"4\"><option selected=\"selected\" value=\"\">---</option>";

こんな感じで表示されます。
/blog/archives/2006/12/10_0126.php#comments

Posted

2006年2月03日のエントリー【RSSの利用】で削除したニュースページをMovableTypeに関連するRSSだけピックアップしてリニューアル掲載しました。

MovableType関連最新ニュース

また最新情報だけではなく、先日一般公開されたMTUG.jpの情報も追加しておりますのでお役立てください。

(各サイトよりRSSを取得して表示しておりますので、多少時間が掛かります事は大目に見てください。)

12月31日追記:サーバー負荷が高く、このページは削除させていただきました。
各サイトより最新情報を取得してください。

Posted

WebInspector Proをダウンロードし試用してみた。

WebInspector Proのヘルプより

ウェブ・アクセシビリティ診断/修正ツール「WebInspector Pro」(以降、本ソフトウェアと記す)は、HTML、XHTMLのウェブ・アクセシビリティをチェックし、アクセシビリティの問題点を簡単・効率的に修正することができるソフトウェアです。

アクセシビリティチェック機能により、HTML、XHTMLのソース上の問題点を見つけ出すことや、イメージ一覧機能により、画像のalt属性の編集を一括して行えるなど、HTML、XHTMLのウェブ・アクセシビリティの向上に必要な機能が多数搭載されています。

昨日のエントリーの時点ではWebInspector 5.0の高機能版と思っていたのだが、WebInspector 5.0とはまったく違う。アクセシブルな文書を制作する為のテキストエディタと考えるべきだろう。

文書を開く

上部のソース編集エリアのXHTML/HTMLソースに問題のある箇所にマークが付き、下部のユーティリティエリアには問題の解説が表示される。

修正を行えば以下のような表示となる。

チェックをクリアした画像

普段テキストエディタでの制作を行うことの無い方は、DreamweaverなどのWYSIWYGエディタで制作したページをWebInspector Proでチェックすると簡単・効率的に修正することができる。

しかし、どこにでもあらゆるタグの挿入ができるので、XHTML/HTMLの知識は必須となる。

Posted