eclatinfo's diary

旧GaiaXシステムはもはやWebに存在しないものだと思っていました。
別ネットワークで存在していたOCN Cafeもリニューアルしてフレーム排除でわりと今風のものになりましたし。

…が、ODNの提供する簡易サイト作成サービス「まいぺーじ」を見て、
これは以前のOCN cafeと同じ位置づけの、プロバイダ併設のGaiaXシステムの外販モノなのでは？と思いました。

ODNまいぺーじ
http://www.odn.ne.jp/homepage/

旧OCN Cafeもそうでしたが、100%GaiaXとイコールではなく、多少のカスタマイズが入っているように感じますが
基本的には同じものでしょう。
(足跡機能が、会員以外のものもguest名で残るみたいです。これ意味あるのかなあ？全部guestで埋まってるサイトとかあるし…
設定でON/OFF変更できるのかもしれませんが)

ちょっと驚きました。こんなものが現存していたことに。
あくまで旧GaiaXと同じでないと嫌って方にはいいかもしれません。
しかしOCN Cafeとは違ってオープンなものではなく、プロバイダーのODNの契約者のみが使えるサービスです。

これだけのためにプロバイダを変更するGaiaX愛ありすぎなかたはそうそう居ないでしょうが
たまたまODNだったかたは見逃しているサービスかもしれませんよ、と。

わりとeclat.ccはvalidなHTMLを要求するような設計だと思います。
(validとは正式な文法に適合しているという意味です。validなHTMLとかCSSとか言ったりします)

本当はガチガチにvalidなもの以外排除するくらいにするという手もあったのですが
ある程度にしています。

また本当の設計ではmenuやmainをHTMLを自由にできるようせず、すべてフィルターを通し、
menu項目もHTMLを触るのではなく専用インターフェースで追加や削除をするものでしたが、
GaiaXの@eclat移行に間に合わせるためにβとして自由に編集するような形になった経緯があります。
もはや今更変えれない気もしてそのままですが、自由度と引き換えに編集ボタンを消してしまうなどのトラブルの原因にもなっていると思います。

こういう状態ですので、日記やデフォルトのHTMLがvalidであっても、
編集次第でダメなHTMLにいくらでもできうるシステムというのが現状です。

ですが、やはり綺麗な正しいHTMLやCSSの書き方を薦めたいと思うのです。
旧eclatのGaiaXシステムはなんせ90年代からあるシステムのままですから、文法的に古いのです。
現在では推奨されていなかったり、誤った記述が横行していると言えます。

eclatはHTMLやCSSの教材として向いていると思います。
ここで培った技法は自前のサイト構築や、Blogのテンプレート作成にそのまま活かせる技法です。
この機会にいろいろ学んでいただけたらと思います。


まず、最近の標準的なHTML形式はXHTMLでしょう。
eclat.ccもXHTML1.0 Transitionalという記法が採用されています。

この最近主流の記法ではレガシーなHTMLと違って厳密な部分がわりとあります。

例えば、属性値はダブルクォーテーションで必ず囲うという決まりです。

<img src=aaa.jpg width=120 height=80>

…で過去通っていたので、こういう書き方をいまだにしている方も多いかと思いますが
現在はこう書きます。

<img src="aaa.jpg" width="120" height="80" />

さらに、以前も書きましたが、タグは必ず閉じるという決まりがあります。
タグは開きと閉じと２つで一体です。
上記imgタグのように閉じタグが無いものについては、この例のように
最後を「 />」として閉じを内包する必要があります。

あと、全てのタグは小文字で記述するというものもあります。
その他細かい点もありますが、エクラでは編集できる領域が限られますので、これらに留意すれば一応はXHTMLとして正しい記述です。

詳しくはこちらに解説があります。
http://www.kanzaki.com/docs/html/xhtml1.html

こういうものは癖なので、慣れればこの書式のほうがあいまいなところがなく、スッキリして気分いいかと思います。
閉じがどこまでか分からないとか、それをブラウザ個別の判断にまかせるとか、そういうものでしたので。
別に強制ではありませんが、興味あるかたはvalidなXHTMLを心がけるのも将来的にはよいと思います。

以前ちらっと書いたユーザー間の諍いの話ですが、
中傷を連投でBBSを埋めてしまうなどの行為を片方が行っていたため、ID削除とアクセス規制を行いました。
個人間の人間関係には極力関わらないでおきたいのですが、
これは明らかに弊社サービス(eclat.cc)の正常な運用への妨害行為ですから、排除するのは当然に思います。

その後もしつこいやりとりがありましたが

プロバイダを変えて再登録するとおっしゃっていましたので
排除方針を伝えてみましたところ


>よお　なめたことしてくれたな
>
>侮辱罪で訴えたからよ。今から会社に訪問伺いますんでよろしくな

とメールが来ました。

め…めんどくさい…
個人ならまだしも、企業の業務にこれは威力業務妨害罪等に問われかねないですし
訴えていないのに訴えたなどと言うことも脅迫罪になる可能性があります。

面倒なのでこのあたりで手を引いていただきたいと思います。
恐らく頭に血が上ってる状態なのでしょうが、そんな状態でさらに無茶されますと
しまいに対処しなければならなくなってしまいます。

なぜそこまでeclatなんてサービスに固執するのかが分かりません。
GaiaX系のかたはそれが全てみたいな狭い考えになってしまいがちなのでしょうか？
世の中いろいろなコミュニティ、サービスがあり、それぞれ色があっておもしろいものです。
ぜひ別の場で楽しんでいただきたいと思います。

弊社リソースでは、今回のような行為に丁寧に対応する余裕はありませんし
退去願うという対応以外できませんので、ご理解いただけたらと思うわけです。

Googleの画像管理サービス「Picasa」をこのあいだ紹介しましたが
私自身は全く使ったことが無く、目に付いたサービスということで紹介しただけでした。
ので、試してみました。

Google Picasa
http://picasa.google.co.jp/

初めて知ったのですが、単なる画像ファイルのアップローダーではなく、
むしろそれは細部で、メインは専用のプログラムで自分のパソコン内の画像を統合管理するソフトなのですね。
その１機能として、Webでの画像共有サービスという感じでした。
音楽ファイルにおけるiTunesみたいな感じでパソコン内の画像を全て管理しようという思想のツールなので
ちょっと大げさかなあと思いました。
そういう管理ソフトも欲しい場合にはいい選択肢かもしれませんが、
これは単にeclatやBlogにアップするためにという用途以上のものです。

ではテスト。
Picasaをインストールして、アップして公開共有したい画像だけウェブアルバムボタンを押して公開します。
ブラウザでウェブアルバムを見ると各画像ページに公開用のHTMLタグがありますので、コピーしてeclatに貼ります。





特に問題は無さそう。
ちょっとgif画像が挙動不審なところがあるように思いましたが
いけました。

大げさなのでお薦め！とは言いませんが、使いようによっては便利なソフトのような気はします。

国内でも他にもいろいろサービスあると思いますので、利用してみた結果など教えてもらえるとありがたいです。
フォト蔵なんか機能見てると
モロに和製Flickrで、よいかもしれませんね。(また使ってないのに印象で言ってます)

kakeiさんが報告してくれているこちらの
日記コメントをオーナーが管理する際に、ブラウザがIEだと不具合があるという件ですが、対応しました。
http://clover.45.kg/eclat/solution.html#diaryecud

IEでも動作するようになったと思います。

fontタグやcenterといったタグを使うのももちろんいけますが
最近はこれらはレガシーなタグとされ、CSSで指定することが流行りです。
style=""で各タグにCSSを設定できることはご存知かと思いますが、これを使います。

<font color="#ff0000">赤い文字です</font>
これと
<span style="color:#ff0000;">赤い文字です</span>
これは表示結果としては等価です。

<span>タグというのは、範囲を指定するというだけの意味のタグです。
同様のタグに<div>というものもあります。
(両者の差異は、インライン要素とブロック要素という話ですが、これはまたの機会に)

style=""の中身はデザインの変更で普段使っているCSSそのままの記法です。
さらに赤い文字で、かつ文字サイズを拡大したいならば
<span style="color:#ff0000;font-size:120%;">赤くて大きい文字です</span>
等記述すればそうなります。

さらに太字にしたい場合、レガシーなHTMLでは<b>太字</b>としましたが
これらもCSS的に指定することが可能です。
CSSで太字＝bold指定はfont-weightプロパティで指定できます。
赤文字同様spanなどを使い
<span style="font-weight:bold;">太字です</span>
と、すれば太くなります。

さらに両者を合わせて赤くて太文字で文字サイズを標準常態から拡大(この例では120%に)する場合は、

<span style="color:#ff0000;font-size:120%;font-weight:bold;">赤くて太くて120%の文字</span>

と、すればいけます。

このようにstyle=""ではいくらでもCSSが書けますので、やろうと思えばたいがいのことは可能です。


font等は別にXHTMLで使用禁止になったわけではありませんし
こちらのほうが楽な場合それでいいとは思います。
ですが、CSSを使いこなせるならテンプレートと同様の記法で全て書くことも可能ですよということで書いてみました。
まあたいしたことをするわけでもないですし、書きやすいほうでいいと思います。

HTMLにもバージョンアップを経て規格がいろいろありまして
eclatで採用されている規格は今時にXHTML1.0です。

XHTMLでは従来のHTMLとは違い、タグは開いたら閉じるということが徹底されるようになりました。

これまでもタグは閉じることが原則でしたが、閉じタグを省略してもよいというようになっていて、開きっぱなしでどこまでか範囲が分からないタグを
ブラウザの解釈にまかせるというあいまいなことになっていました。
XHTMLではそのあいまいさを無くし、きっちりタグ範囲を示すことが要求されています。

<br>や<img>などの通常閉じが無い(正確に言うと普通は省略されている)タグはどうなるのでしょう？

これらは<タグ />という記法で閉じを内包できるということになっています。
ですからXHTML的には、<br>は<br />ですし
画像を貼る際も、<img src="画像URL" />とするのが正しいわけです。

実際問題として、<br>でもimgタグの最後のスラッシュも無くても
ブラウザは解釈して表示しますが、
サンプルとしてHTMLを示す場合は、一応正しく閉じのスラッシュを入れた形で記述しています。

前記事で書いた画像のテキスト回り込みもですが
<img src="http://aladin.eclat.cc/img/greet.gif" style="float:right" />
となってる最後のスラッシュは無くても別に動作はします。
ですが、HTMLのヘッダでXHTMLを宣言していますから、原則的にはスラッシュが入ったほうが正しい記述です。

ちなみに、閉じのスラッシュ無しで記述しても、日記ではタグフィルターを通しますので
そこでスラッシュを入れて正しいHTMLで保存されます。
(編集しなおすと書き変わっていることが分かると思います)

テキストの回り込みですが、
いろいろやりかたはあるとは思うのですが、
今風なCSSスタイルのHTMLの書き方だと、
CSSのfloatでやるのがスマートかなと思います。
あくまで自分ならこうするというやりかたですが。
このように画像を右にしたいなら…
<img src="http://aladin.eclat.cc/img/greet.gif" style="float:right" />
とやればいけるのかなと思います。

…と思ったら、これ自体は正しいのですが、記事を記事個別ページで見るとおかしくないですが
日記トップで見るとおかしな空白が…
恐らく日記トップのCSSの書き方とぶつかって予期してなかった表示になってるのでしょう。(たぶん同じくfloat配置してる右のメニュー)
ちょっとデフォルトのテンプレートCSSが要検証ということが分かりました…


左に画像を置きたい場合はfloatを左にすればいけます。
このstyle=は全ての許可タグで使えます。
これはHTMLやCSSの解説サイトを読んでいただければわかりますが
タグ単位でCSSをページ内に直で埋め込む場合の記法のためのものです。
floatだけのものでなく、CSS全般の設定を書けます。fontの色や配置などもCSSの記法で入れることが可能です。
例えば上記HTMLサンプルの背景が白色ですが、これもstyle="background-color:#ffffff;"等入れて指定しています。

回り込み解除ですが、CSSではfloat解除もCSSで指定します。
clear:both;を指定することでその個所以下でfloat解除が行われます。
<p style="clear:both" />
とでも入れればそこで解除できると思います。

画像左寄せでは変な空白は出てないですね…(というか、一番上のclear:bothが干渉するのでしょう)
ちょっとまた調べときます。おそらく昔作ったテンプレートが妙なCSSなのでしょう。そちらのCSSと今回指定したCSSがぶつかってるのだと思います。

CSSを自由に触れますので、頑張ればかなり自由に配置はできるとは思います。


＃現状このような不具合がありますので、現在のテンプレートのままではこのfloatを使った回り込みはお勧めしません。
(逆に言うとテンプレートのCSS次第では今回の問題は発生しないこともあるはずです。
同じようなレイアウトのはずの記事個別ページで不具合は発生していないのですから、トップでも問題無いように改造することは可能に思います)

＃もっと正確に言うと、floatによるテキスト回り込みは問題ありません。
その語文中で解除しようとclear:bothを行うと、多くのテンプレートで空白ができると思います。

一部のタグを許可するように日記機能を改良しました。

許可している要素、属性は以下のようになっています。



a accesskey charset coords href hreflang name rel rev shape tabindex target type
abbr
acronym
address
b
bdo
big
blockquote cite
center
cite
code
del cite datetime
dfn
div align
em
font color face size
hr align noshade size width
i
img align alt border height hspace ismap longdesc src name usemap vspace width
ins cite datetime
kbd
p align
pre width
q cite
rb
rbc
rp
rt rbspan
rtc
ruby
s
samp
small
span
strike
strong
sub
sup
tt
u
var


実際にはあまり使われないタグや、CSSで設定すべきだろうレガシーなタグ等も一応通してあります。
CSS設定との絡みで思ったように表示されない場合や、レイアウトを崩してしまう可能性も持ちます。

リンクのaタグや、画像をimgタグで貼るなどの分には問題無いかと思いますが、
理解しないままになんでもかんでも使えるタグを埋めまくっても収集付かなくなると思いますので
タグの意味と効果を調べてから使うようにしていただけたらと思います。

参考：HTMLクイックリファレンス
http://www.htmq.com/
各タグの解説などが分かりやすくまとまっています。

かなりどうでもよさそうな内容かもですが…

エクラ様運営の旧Gaiaxシステム時代からある「街の掲示板」ですが
新eclatシステムのURLが登録できないままになっていた不具合を修正してみました。

単にURL制限を加えている部分を探し、少し書き換えただけです。
プログラムの中味はよく見ていないので不具合等ありましたらすいません。

日記に一部タグを通す処理を作りました。
まだ動作テストを経てから適用しますのでみなさまは使えませんが、画像を貼ったり文字を拡大したりといったことが「ある程度」できるようになります。
ある程度というのは、なんでもできるようにしても収拾つかないことになると思いますので、装飾程度のものを通す設定にしようと思います。

特にimgタグを通すということは大きいのではないかと思います。
容量の関係で大手ポータルのように画像アップし放題とはできませんが
最近はFlickrをはじめBlog記事貼り付け用に使えるアルバムサービスが各種ありますので使うといいのではないでしょうか。

私は全くこの手のオンラインアルバムサービスにうといのでどれがいいのか知らないのですが
国産でもいろいろあると思いますので、調べておくといいかもしれません。

GoogleのPicasa（http://picasaweb.google.com/）は日本語版やってますね。
Flickr(http://www.flickr.com/)はこの手の代名詞的サービスですが、英語です。米Yahooの無料IDを取れば使えます。
他にもたくさんあると思いますが、機能など詳細はよく知りません。
(その他、aタグも通すので、上記URLなどもリンクにできるようになります)

とあるユーザーから、別のユーザーから荒らされて困ってるとの通報。電話がかかってきました。
電話でかけられてもすぐに対応返信できるわけではありませんので、メールでいただけるとありがたいです。

見ると、確かに中傷や、連投などがされている。

単純にリモホを規制することは簡単だけど、そんなもの意味は無いでしょうから、こういう場合に向いた対処を思考して提案しました。
ただし、規制を組み込もうにも、汎用的なものを作ろうと思うと、全プログラムひっくり返すことになろうので
今回の件専用、個人ユーザー専用にわざわざカスタムプログラムを作る決定をしました。今回は特例です。
毎回毎回そんなことできません。

そして作ってたのですが、結局無駄になったようです。
運営に通報しただのなんだのと相手に言ってみたり、我々を後ろ盾のように言って喧嘩の道具にしてるような具合で
そんなものに付き合ってられないというのが正直な感想です。
さらに、詳しくはロジックは話しませんが、こういうこと話されると無駄になるものだったので、
ここ数日の作業が無駄になりました。

ロジックの説明もして、刺激しないでくれと何度も何度も言ったはずですが
指示に従ってもらえず、これではフォローのしがいが無いです。
プログラム作るのにも社員使うのに日給ウン万といった費用が発生しているわけです。
ここ数日かけたコードはまるまるゴミになってしまったわけでして、勘弁してください…

ただの言い争いに堕してしまって、また指示に従ってもらえないなら、どちらも弊社及びeclatにとって迷惑な存在でしかありません。
喧嘩両成敗で両者退会処理をさせてもらう可能性もあります。

こんなことなら汎用的な規制を開発すべきでした…
個人的に考えているものは、他者書き込みについて、「書き込めない」「eclatIDからのみ」「GuestもOK」の３段階の設定をできるようにするものです。
さらに各eclatIDの書き込み権を設定できるというものではどうかなと。

公開サービスですから、「書き込みが見えない」といった種類のクローズド設定は原則考えていません。
公開する気が無いのならば、他所でこっそりサイトやるべきでしょう。
そういう目的のサービスではないと思いますので。
(開発的には.htaccessのdeny行を追記できるなんてのが簡単ですが、それはあえてしないのです)

まあいつできるのか分かりませんが…
これを入れるとなると各部に渡るため、わりとコードひっくり返さねばなりませんから…
一応私案としてはこういうものを考えています。