記事を作成するために、文章を書いたり表を作成したり画像を貼り付けたりするわけですが、その辺りの操作性を改善しようといろいろ模索中です。
以前にも何度かトライしたのですが、これといった方法が決まらずとりあえずな状態で放置していました。しかし、画像を貼り付ける作業が増えると現状の方法では操作性に難があります。
現状
1.文字入力
WYSIWYGエディタを使用してHTMLコードを生成しています。
エディタには、Fckeditorを使っています。
2.コードの入力
Fckeditorを利用している理由は、ソースコードなどをハイライト表示をするために使用するgeshifilterというのがあるのですが、Fckeditor用プラグインGshiProがそのまま使えるからです。Fckeditor⇒Ckeditor⇒Fckeditorと移行したり、ハイライト表示をするためにSyntax HighLighter、geshifilterやGshiProを使用した事もあって、一部の記事で表示がおかしくなっています。
3.画像の貼り付け
IMCEを使用してFckeditorと連携させています。
導入当初は「Upload」モジュールを使用せずにファイルをアップロードできる点、ファイルブラウザー機能がある点などで選びました。
アップロードした画像は、投稿ユーザごとに所定のフォルダに格納するように設定してあります。
現状の問題点
1.過去記事の表示の乱れ
・他のブログサイトで投稿していた記事がエクスポートできなかったのでコピー&ペーストで作成したため改行の代わりにPタグが挿入されている。
・記事投稿時の入力書式の設定を変えたために記事を編集すると表示が崩れてしまう。
・コピーした移動させた記事で使われている画像は、サーバ上にない。
・ハイライト表示箇所の仕組みがことなるため、記事を編集すると表示が崩れてしまう。
2.サーバローカル上に画像ファイルが散乱している
・「ImageFiled」のバージョンが変わるタイミングでどうもサムネイル保管場所がおかしくなる。
・「ImageCache」のプリセットをいい加減に使用していたせいで、煩雑な状態になっている。
3.画像貼り付けが面倒であり管理が困難
・記事に画像を挿入するまでの操作性がわるい
・IMCEを使うとどのようなファイルでもアップロードできる反面、管理ができなくなる。
4.コード入力時に面倒
・必ず記事の1行目にソースが挿入されてしまう。
結局は、どの問題点も計画性がなかったことに起因しています。
これら問題に対処するには、まずいくつかのことを決めておかないといけないようです。
最低以下の2点は必須だと思います。
(1)どのようなHTMLコードを生成させたいか
文字や画像を貼り付けて記事を入力し、記事を投稿するまでにはHTMLコードは以下の①②で変換されます。
①記事入力時は使用しているエディタに左右されHTMLコードが付与される。
②記事投稿時(保存時)は使用している入力書式(フィルター)によりHTMLコードが変換される。
①⇒②のあと実際のHTMLコードが完成することになります。
たとえば①で改行にbrタグを使用しておきながら②のフィルターでbrタグを消去するフィルターを使用していると完成するHTMLコードには改行がなくなってしまいます。
これと同じようなことがハイライト表示させるときに発生していて、表示が崩れるといった結果になりました。
入力書式は、標準ではFilteredHTMLに設定されています。この入力書式ではHTMLフィルタが有効になっており、セキュリティ上好ましくないタグなどが除去されてしまいます。
許可するタグのエントリを増やすことで対応するのか、それとも他の入力書式を使うのか。
仮にHTMLフィルタが無効な入力書式を使うとしても記事投稿時に毎回、入力書式を変更するのではミスをします。
投稿後に気がつきますがそのときにはすでに遅く、作業をやり直すことになってしまいます。
「Better Formats」モジュールがあればコンテンツタイプごとや権限ごとにデフォルトの設定ができますので柔軟性が向上します。
そうなると結局のところ、どのようなHTMLコードを生成するかです。
見た目だけでOKという人もいれば、SCO対策とか自動読み上げソフトに対応したいという人もいると思います。
どうすれば?というところは、完成形をイメージしてそれを生成するにはどうすればよいか?になるのですが、経験上、入力書式(フィルター)でやるよりはエディタ側で対応したほうがよさそうです。
それにはやりたいことが自由にカスタマイズできるエディタが必要になります。入力書式は「Full HTML」を使用すれば意図しない変換は発生しないと思います。
(2)画像ファイルのアップロード先とファイルの命名則
アップロード先は現状でも決めてありますが、問題はその設定値を各Drupal拡張モジュールが参照するのかどうかです。
Drupal標準では、ファイルシステムで指定したパスに保存されます。「Upload」モジュールもそうなっています。
ファイルシステムのパスは標準では「sites/default/files」です。先頭に「/」は不要です。
ファイルシステム以下が乱雑になるのを避けて「Upload」モジュールは使用していません。
ファイルアップロードは「FileField」モジュールを使い、アップロード先を指定しています。「FileFiled」を使わずにアップロードした場合はそのモジュールに左右されるようです。
「Imagefield」モジュールを使えばファイルフィールドのウィジットに「画像」が追加されます。
「ImageCache」モジュールでプリセットを作成しておけば、フィールド表示する際の画像サイズを選択できます。「Views」でもこのプリセットが使えますので便利です。
FileField以外でアップロードするケースは、私の環境ではIMCEからアップロードするのとあつは「FeedAPI」で自動的にサイトから画像をダウンロードするくらいしか思い当たりません。
「FeedAPI」モジュールは、前に作成していた動画サイトで使用していたもので、YouTubeの動画のURL取得とサムネイル画像(アイキャッチといったほうがよいのかも)のダウンロードに使っていたと記憶しています。アンインストールしてもよいのですが、あのときの作業のバックアップ的にまだ残してあります。※有効になっていますが動作はしていません
なぜ、画像ファイルが乱雑に配置されるのか?は、画像ファイルはアップロードされたあと「Imagefield」モジュールや「ImageCache」モジュールにより他の場所に作成されているようです。またIMCEでも画像のアップロード場所をPHP言語で指定でき同時にサムネイル画像が作成されます。
これら画像ファイルが意図した場所に作成されない場合があるようです。
その原因として考えられるのがパスの指定ミスです。
パスの指定ミスは、設定値の指定を間違う場合と拡張モジュール内でのバグの場合とがあります。
パスの指定時に先頭や語尾に「/」を付与してしまうとダメになったりします。
ダメになるというのは、設定値だけでパスが完結するならよいのですが、多くの場合、プログラムでDrupalシステムのパスと結合されて実際のパスを生成しています。
そのため、先頭や語尾に「/」を付与した場合とそうでない場合で違ったパスが生成されることがあるということです。
たとえば
sites/default/files以下に「imagefield_thumbs」が作成されていますが、もうひとつ「imagefield_thumbssites」があります。
後者は、「sites/default/files/imgefield_thumbs」+「sites/default/files/imgefield_thumbs」となった結果、「sites/default/files/imgefield_thumbssites/default/files/imgefield_thumbs」が作成されたようです。この手の動作は「imagefield」に限らず他の拡張モジュールでも起こりえることです。
さらには、
「filefield」のパス指定で、「users/[author-name]/images」を指定しているせいか、上記パスに付与され「sites/default/files/imgefield_thumbssites/default/files/imgefield_thumbs/users/[author-name]/images」となっています。
※[author-name]の箇所は記事投稿ユーザ名。
意図するのは、画像関係のファイルはすべてファイルシステムのパス以下の「users/[author-name]/images」にまとめたかっただけですが、いろいろなパターンでディレクトリが作成されていました。
「filefield paths」モジュールが現在は上記パス指定を可能にしているようですが、「filefield」モジュールだけのときもできていたのでその設定を受け継いでいるのでしょう。
そもそもこのモジュール自体は他のモジュールの要件になっていて導入しただけなので良くわからないままです。
説明をみるとNode Talkenを利用して機能拡張しているようですが・・・
filefieldモジュールだけでなく「Upload」モジュールなどのパス設定もできるようになっているとか、リネームとか上書きとかうまくやってくれるということなのでしょうか。
とにかくまずは、ファイルシステムのパス以下を整理することからはじめないといけないようです。
今後
いろいろ調査していると「wysiwyg imagefield」モジュールというのが見つかりました。
要件には、「wysiwyg」、「Insert」、「ImageField」、「JQuery UI」モジュール、推奨には「FileFiled Sources」、「Views」とあります。
要件になっているモジュールを導入するにはさらにその要件があるわけで、芋づるのように必要なモジュールが増えていってしまうのですが、今回はなんとかなりそうなので試してみようと思います。
ちなみに「Fielfield Insert」モジュールの後継?が「Insert」のようです。
この「Insert」で「FileField」でアップロードした画像を本文に挿入する機能を実現している感じです。
「wysiwyg」モジュールはエディタですが、「Fckeditor」やその他、有名なエディタに対応しているのでなんとかなりそうです。
「Fckeditor」用プラグインが使用できるのか?できるようにするにはどうすればよいのか?
そもそも「GeshiPro」でないとダメという理由もなくマークアップの手法の問題なので「Fckeditor」にこだわる必要はないのかもしれません。
とりあえず導入してみて考えようと思います。