記事一覧

WebDiaryPro用タグエディタ(配布版)

ファイル tageditor.jpg

※2007/12/26
 画像&外部ファイル未使用バージョンのパック追加。
 特殊サーバーの方も使いやすいタイプです。
 (ダウンロードファイルのリンク間違い修正しました(汗)

「Web Diary Pro にタグエディタをつける」というカスタマイズを紹介してから
随分時間が経ちましたが、その間に頂いたご要望を全て集め、
自分なりの改良を加え、すぐに使えるパッケージにしました。

デフォルトスキンをお使いの方ならそのまま上書き、
他のスキンをお使いの方もheader.htmlに3~4行追加するだけでOK。

 【出来ること】
・タグエディタを管理画面・投稿フォームに付ける事ができます。
・アップロードファイルの左寄せ、右寄せなども簡単入力。
・ボタンは説明つき画像でグラフィカル。(画像未使用版もあります)
・ネタバレボタンは全種類装備。WDPに合わせデザイン微調整済み。

DOWNLOAD ≫

 【絵ボタン版】
・editor_netabare.lzh
・editor_netabare.zip

 【画像&外部ファイル未使用版】new!
・editor_netabare_n.lzh
・editor_netabare_n.zip

FAQ ≫

?タグボタンをテキストエリアの上部に付けれませんか?

!「迷える子羊」さんにて解決策が公開されています。
ボタンを全てテキストエリア前に移動させたあと、
ボタン用ソースの最後のスクリプトだけを
テキストエリアの後に置くことで動作可能になるです。

参考元 ≫

・Mugi's Homepage
・日記CGI[nicky!]取り扱い説明書
・タグ入力支援[nicky!]
・タグ入力支援ソース
・タグ入力支援機能[よくある質問とその答え・カスタマイズ編]
・nicky!TIPS~タグ入力支援にネタバレ長文ボタンを追加する
・ネタバレボタン短文用&長文用
・textarea入力支援スクリプト(クロスブラウザ仕様)

COMMENT

■吉野 ... 2007/10/25(木) edit・delete

はじめまして。
すごいですねー…! 見やすくって、とっても使いやすそうです。
さっそく導入させていただきます[LOVE LOVE]
素晴らしいツールをありがとうございました!

■kiriji ... 2007/10/26(金) edit・delete

>吉野さん
初めまして、管理人のkirijiです。
以前からタグエディタ改造でお困りだった方には
非常にお待たせしてしまい申し訳ない気持ちです。
その分コメントで頂いたアイデア+αを盛り込みましたので、
初めての方も今までお使いの方も
存分にお使いいただけると嬉しいです[LOVE LOVE]
特殊文字一発ボタン(ハート)などの妙な機能も付きましたが、もっと変な機能が付いていたほうがよかったでしょうか[汗]
コメントありがとうございました!励みになります[♪]

■ないと [H] ... 2007/10/27(土) edit・delete

こんにちはー。

すごく高機能で、見た目も分かりやすいですね。作成ありがとうございます~。(^^)
先ほど、Web Diary Pro 機能解説ページからのリンクも、このページに変更しておきました。

それでは~。

■kiriji ... 2007/10/27(土) edit・delete

>ないとさん
このカスタマイズでは私の力不足もありまして、
色々な方に面倒をおかけしてしまいました。
プラグインにしてみたらどうだろう、とも考えたのですが
自分の技術だとこうした配布が一番確実のように思えまして……[蒼ざめ]
HTMLエディタのとき、ないとさんが「ボタンを画像にしたいな」とポロッと書かれていたのを元に、こうした見た目になりました。
これで設置される方の苦労が少しでも軽減できますと嬉しいです。

いつもリンク先の修正や、こまかなテキストの修正ありがとうございます!
元記事の方はGalleryProや他のCGIスキンに流用したい方の為にまだ残すつもりでおります。
Web Libertyの説明にはあの機能はどうだったかな?という時にいつも助けていただいてます[♪]

■niko [M] [H] ... 2007/11/02(金) edit・delete

すごいですねー。私も、ダウンロードさせていただいて、早速設置してはみたのですが、入力支援のボタンが、?マークになってしまい、表示されません。

素人なので、手探りで、説明文と格闘しながら、なんとかここまでというレベル。

アドバイスがあれば、是非よろしくお願い致します。

ちなみに、MAC OS Xで、
Opera9.20(画像のテキストのみ表示)
Safari2.0.4(?マークで画像が読めていない)

 

■kiriji ... 2007/11/03(土) edit・delete

>nikoさん
ダウンロードありがとうございます。
Safari2はアルファチャンネルPNG対応なので
画像が見れるはずなのですが…。う~ん、何故でしょう?
input type="image"という表記にも問題はないようです。
アイコンの入ったフォルダ名(tageditor)を変えた、アイコン位置を移動した、ということはありませんでしたでしょうか?
設置URL下のtageditor/p.pngにアクセスしようとしたところ、
execv failed.(13)(/11/1126/aki-yoshino/cgi-bin/skin)(/chome)
というエラーが返されます。

http://brutzero.s22.xrea.com/rb/skin/tageditor/p.png
↑もしよろしければ、こちらの画像が見えるかご報告いただけますと嬉しいです。

■niko ... 2007/11/03(土) edit・delete

早速のお返事ありがとうございます。

http://brutzero.s22.xrea.com/rb/skin/tageditor/p.png
は、鉛筆マークですよね。見えました。

フォルダ名を変えたりはしておりません。
readme.txtのとおり、設置しました。

hi-hoは、web diary proを設置するにあたり、「CGIを別サーバーにアップロードしなければならない場合」に該当しており、設置もやっとできた感じです。(CGIの知識がないので)

何か、tageditorを別に置かないとだめなのか?
パスを設定し直したり?

なにか、お気づきの点ございましたら、よろしくおねがいします。

■kiriji ... 2007/11/03(土) edit・delete

>nikoさん
なるほど!分かりました。
hi-hoはCGI動作用フォルダ(cgi-bin)の中に画像を入れても参照できない、特殊なタイプのサーバーだったのですね。
Web Libertyさんの説明を失念しておりました。

【Web Liberty - 特殊なサーバーでの設置方法】
www.web-liberty.net/support/server.html#hi-ho

するとアイコン画像はどこか別の通常HTML用フォルダ
(例:http://www.dab.hi-ho.ne.jp/aki-yoshino/diarypro/tagicon)
に置いていただき、admin_form.html内にある
各ボタンアイコンのURIを

.skin/tageditor/p.png
  ↓
http://www.dab.hi-ho.ne.jp/aki-yoshino/diarypro/tagicon/p.png

のように書き直していただかなくてはなりません。

相対パスのほうが短くて済むのですが、絶対パス(URL全部を書く)のほうが間違いがなくすむと思われます。

アイコンボタンを使用される場合は、お手数をおかけしますが以上の方法をお試しください。
特殊サーバーに設置する場合の説明を後日追加させていただきます。

う~ん、画像を使用しない文字ボタンオンリーの
配布パッケージも必要ですね。[汗]

■niko ... 2007/11/04(日) edit・delete

ありがとうございます。
昨日、試行錯誤して、アドバイスのもと、いろいろやってみましたが、ダメでした。
画像のほうは、ご指示のとおり、やってみて、
反映されたのですが、ボタンをおしても、結果が現れず。ないとさん作のeditor2っていうのも、試してみたのですが、ボダンを押しても、結果でず。

たぶん、特殊なサーバーなので、何かを変えなければ、スクリプトが実行されないと思われ。

もう少し、勉強してみます。
本当に、このタグエディタが使えれば最高なんですけど。

■niko [H] ... 2007/11/05(月) edit・delete

毎度すみません。なんとか設置できました。

<hi-hoの場合>

home / cgi-bin /
 |   ├ diary.cgi [755]
 |   ├ diary-tb.cgi [755]
 |   ├ diary-paint.cgi[755]
 |   |
 |   ├ data / ~略~
 |   ├ lib / ~略~
 |   └ skin / ~略~
 |
 └ html / diarypro /
       |
       ├ data /
       |
       ├ html /index.html
       |
       ├ skin / common.css
       |     common.js
       |     hrefedit.js
       |     imgedit.js
       |     netabare.css
       |     netabare.js
       |     tageditor.js
       |
       └ tagicon /

このような感じで設置し、
新しくいれた”.cssや.jp”パスは絶対パスで指定。
(tageditorのフォルダは捨てて、バラしました。)
tagicon(新しく作成)に".png"画像を入れ、絶対パスで指定。

いろいろと、ありがとうございました。
また、わからないことがあったら、質問させてください。よろしくおねがいします。

■kiriji ... 2007/11/07(水) edit・delete

>nikoさん
ご報告ありがとうございます。
hi-hoだとjsやcssはなるべくhtml用のディレクトリ(フォルダ)に
入れなければならないようですね。
URL指定が大変なところ、試していただきありがとうございました。
こちらこそ特殊サーバーに設置することを想定に入れず作ってしまい、お手数をおかけしてしまいました。
何かありましたら、どうぞまたお気軽にご連絡下さい[ひらめき]

さらには絵文字変換が変な風に働いているみたいですね、すいません~!

■まきにゃん [H] ... 2008/02/20(水) edit・delete

以前kirijiの解説を参考に導入させていただいていたのですが、設定ミスがあるのか短文リンク・ボタン、長文リンク・ボタンだけが上手く機能しないまま放置状態になっておりました。
そして今回こちらの記事を見つけDLさせていただこうとも思ったのですが、途中までは出来ているので何とか修正する事で完成させたいと改めて思ってしまいました...
そこで思い当たる事などありましたらアドバイスいただけたらと、こちらにコメントを残させていただきます。我がままなお願いで申し訳ないのですが、お力を貸していただけると幸いです。
ちなみにネタバレボタン・リンクは問題なく機能しております。
該当部分のソースなどを載せた方が良ければ後から追記致しますので、その旨ご指示願います。

■kiriji ... 2008/03/15(土) edit・delete

>まきにゃんさん
返信が遅れて申し訳ありません。
長文・短文リンクに関しては、参考ページが移動しておりますので
この記事からリンクを貼りなおしています。
http://painter.mypets.ws/~raelian/tag/inputarea/view2.html
こちらを参考に、記入し忘れがないか一度ご確認ください。
追加スクリプトの追加位置は、
http://brutzero.s22.xrea.com/rb/archives/32.html
を参照し、そのまま行ってください。

ネタバレ長文の場合、スタイルの追加し忘れなどはありませんか?

■シヴァ [H] ... 2008/03/27(木) edit・delete

タグエディタ&絵文字ボタン導入させてもらいました。
すっごく便利です。
ありがとうございました[♪]

...が記事編集の時に送信エラーになって、なぜかトラバが二重に(絵文字ボタンの記事も)...[蒼ざめ]
申し訳ないです。どちらか消してやって下さい。

■kiriji ... 2008/04/02(水) edit・delete

>シヴァさん
ご使用報告ありがとうございます。
トラックバック多重分の削除をいたしました。
どうかお気になさらずに!

配布パックにする時悩んだのが、絵文字ボタンをどうするかでして…。
他の方のコメントでも触れましたが、方法が2通りあるのですよね。
(コメント欄に絵文字は一択ですが)
お好みの方法を選んでいただくため、絵文字ボタンはつけておらず、
説明ベタも相まってお手数をかけてしまっております。

う~ん、絵文字もさくっと追加できるパックもあったほうが
良いでしょうか?
オフラインが少し落ち着きましたらば、また少しづつ手を入れていきたいと思います。

■シヴァ [H] ... 2008/04/06(日) edit・delete

お手数お掛けしました......が、絵文字ボタンの記事のトラバは二重のままのような[滝汗]

絵文字ボタンもパックになってた方が絶対便利だと思います[♪]
(方法が2通りあるってのはよくわかってなかったり...)

■kiriji ... 2008/04/07(月) edit・delete

>シヴァさん
失礼しました、削除後のサイト再構築をしておらず
HTMLが昔の状態のままになっておりました。
絵文字については、

●全部Javascriptで[汗]→絵文字と変換する
 (このコメント欄のような方法)
●直接imgタグで絵文字を書き入れる
 (タグ挿入ボタンの応用)

の2通りがあります。こちらで紹介しているのは
下のimg直接書き入れの方法となります。

配布するのであればこのimg直接書き入れの方になるのですが、
記事にズラーっと長いimgタグが入ってしまうので
お好みがわかれるところだと思っております。
また、特殊サーバーに対応するとなるとかなり難しくなりそうでもあります。
なんとかなりそうでしたら、こちらの方法で少しづつやってみようかと思います。

なぜJavascriptのほうを配布に使わないかといいますと、
アイデア元の方がスキンに組み込んでの配布を認めていらっしゃるかが
定かではないからです。
こちらであれば特殊サーバー対応も楽なので、
できればこちらで配布できればとも思うのですが…。
作者さんに伺おうにもお忙しいようで、こちらもちょっと難しそうだというのが現状です。[汗]

■ろぼ ... 2008/04/20(日) edit・delete

おお!凄いです[ハート]
このツールに出会えて感動しましたよ~!
WDPは記事投稿の際、タグでなく特殊な文字列で認識されるので戸惑っていまして。

これで、記事の作業が楽になりそうです。
あ。他の小技も参考にさせて頂きます!有り難うございました~。

バランスの良いWDPページ作るぞー(笑)

■まきにゃん ... 2008/05/08(木) edit・delete

こちらこそ確認が遅れて申し訳ありません。
ひと通りチェックしたのですが、抜けていそうな部分は見当たりませんでした。
それとスタイルの追加の件ですが、common.css に混ぜて設定した場合は問題が発生するのでしょうか。
ちなみに投稿フォーム画面でボタンを押した時点で反応がないので、スタイル以前の問題なのかも知れません。

■kiriji ... 2008/05/11(日) edit・delete

>ろぼさん
ダウンロードありがとうございます[♪]
はてな式に馴染みが薄かった私にとっては、やはり
タグで処理することが多かったので
こうしたエディタがお役に立ちましたら幸いです。

>まきにゃんさん
基本のネタバレボタンは作動していることと、
スタイル追加が問題ないというお話を参考にしますと、
「長文用のスプリクト(ボタン用&ネタバレ展開用)が正しく追加されていない」
ということが考えられますが…
改変後のソースの全貌を拝見できない状態では、
私からは予測の範囲でしか原因を追求することができません。

もしよろしければですが、こちらの記事にある
配布版パッケージをダウンロードしていただき、
そのソースとまきにゃんさんお手元のソースとを
見比べていただけますと原因・書き落としが見つかりやすいかもしれません。
配布パッケージ版(通常版)ではnetabare.cssとしてcssを分離&追加読み込みをしていますが、動作に問題はないようです。

■まきにゃん ... 2008/05/12(月) edit・delete

アドバイスありがとうございました。
おかげ様で大事なおまじないが1つ抜けている事が解りました。
それを追加してフォーム内への入力は可能になったのですが、確認画面を使って長文・短文ボタンを押してみてもネタバレフォーム?が現れません...
なお、前回同様ノーマルタイプはボタン・リンク共に、そして今回は長文・短文リンクの方は正常に機能している様です。
ソースをお見せしたいのですが、どの様な形をとれば良いのでしょうか。

■kiriji ... 2008/05/12(月) edit・delete

>まきにゃんさん
まずひとつ、なんとか解決できましてなによりです[ハート]
ご報告からまた考えますと、
header.html内に

>/* --ネタバレ・ボタンチェンジ用-------------------- */
>function sfield_btn_vcng(id, str_close, str_open){
> var vid=id+"o";
>  …(以下略)…

のようなスクリプトが抜けている可能性があります。
editer.html以外にもheader.htmlのほうもご確認をお願いします。

ソースについてですが、送っていただいたとしても
すぐに分かるような原因であれば良いのですが、
他の方がすでに手を加えられたスキンを解析し、じっくり動作検証をするに割く時間が
現在あまり持てない状態です。
申し訳ありませんが、今一度配布パッケージとの見比べをお願いします。

いますこし時間が取れましたら、きちんと解説記事の見直しを行いたいたいです[滝汗]

■まきにゃん ... 2008/05/13(火) edit・delete

お忙しい中、早速のご回答ありがとうございます[♪]
ボタンチェンジ用のスクリプトは自分でも怪しいなぁと思いチェックしていたのですが、抜けている部分はなさそうでした[ハートブレイク]
もう少し粘って勉強してみますね。
それとパッケージ版を参考にしていて疑問に思った事があるのですが、長文用と短文用のスクリプトが別のファイルに追加されているのには何か事情があるのでしょうか。

■kiriji ... 2008/05/19(月) edit・delete

>まきにゃんさん
配布版(特殊サーバー版は除き)はスクリプト部分が別ファイルとして存在しています。
これはXHTMLの書き方に原因がありまして、
XHTMの中にずらずらスクリプトが書いてあるのはよろしくない、ということによります。

●netabare.js → header.html用。ボタン展開に必要なアクション
●tagedior.js → admin_form.html用。必要なタグをエディタに打ち込むのに必要なアクション

という分離の仕方をとっています。
hrefedit.js、imgedit.jsもadmin_form.html用ですがネタバレには関係していません。

スキン内に直接スクリプトを書きこむ改造の場合、
特殊サーバー版のパッケージの方が比較しやすいかもしれません。

■まきにゃん ... 2008/05/20(火) edit・delete

説明の仕方が悪かったようで申し訳ありません。

ネタバレ・短文用→admin_form.html
ネタバレ・ノーマル&ネタバレ・長文用→add_tag.js
と、ネタバレ・短文用のみが仲間はずれ?(笑
になっている事への疑問でした。

σ(・・*) もスクリプトは出来るだけ外部に記述の方法を取りたく、影響がないのであれば
ネタバレ・短文用→add_tag.js
と統一させたいと思っております。

■kiriji ... 2008/05/20(火) edit・delete

>まきにゃんさん
add_tag.jsというファイル名に覚えがないのですが…
それはまきにゃんさんが独自に分離してお使いのものでしょうか?
配布パッケージ版に梱包されているjsファイルは
netabare.js、tageditor.js、herfedit.js、imgedit.js
の4点です。

■まきにゃん ... 2008/05/20(火) edit・delete

早速のご回答ありがとうございました。

ご指摘の通り、自分で理解出来る様に勝手に改名し、そのままのファイル名を記入してしまいましてお恥ずかしい... [滝汗]
配布版で言うと、tageditor.js に当たります。

■kiriji ... 2008/05/20(火) edit・delete

>まきにゃんさん
ご回答ありがとうございます。
「短文ネタバレのスクリプトが、admin_form.html内に記述されている件について」とのことで了解いたしました。

事情はといいますと………
たしか、私が移植作業中、jsファイルに分離するとスクリプトが動かなかったため、そのままスキン内に残した
…………はずです。[汗]

「はずです」というのも、今となってはずいぶん長い前に動作確認しましたので、
うっかり自分が外部に移動し忘れていた、という可能性もなきにしもあらず、なのです[滝汗]

動かない原因が当時の自分ではわからなかったことと、
エディタは通常管理人しか目にしないものであるため
正規表記うんぬんにそれほどこだわらなくて良いかな、
という理由もあってこのような構成になったと記憶しています。
もし無事動くようでしたら、色々改変なさってもまったく問題はありません。

■まきにゃん ... 2008/05/20(火) edit・delete

なるほどー。
そう言えば絵文字スクリプトを外部に出したら上手く動作しませんでした[汗]
肝心のネタバレの件は、相変わらず未完成状態なので、解決するまでは下手に手を加えないでおきます。

ではでは、解説ありがとうございました[♪]

■くらげ [H] ... 2008/11/03(月) edit・delete

はじめまして、海月屋のくらげです。

以前、配布版について快く許可いただきましてありがとうございます。
(わざわざサイトまでお越しいただき、お手数かけてしまいました、すみません)

今回、タグエディタ設置パックをようやく配布することができました。
どうしようか悩んで、かなりいろいろいじってしまいました。
もともと自分用にいじっていたものを土台にしているため、あまり使わないタグもたくさんあり、画像も自分で作ることにしました。
(素人な感じの画像ですが...)
ので、kiriji様とはまた違った感じに仕上がったと思います。

画像ボタンというアイデアを使わせていただき、本当にありがとうございます。
これからもよろしくお願いします。

余談ですが、上記の「短文ネタバレのスクリプト」ですが、スクリプトを入れる順番と位置にコツがあるみたいです。

■シロウ ... 2008/11/27(木) edit・delete

はじめまして、シロウと申します。
初見で質問申し訳ありませんが、コメント投稿時にタグ使用可能できるスクリプトってあるんでしょうか?
色を変える程度でもいいんですが…[汗] どこかに参考になるスクリプトあったら教えて下さい。

■kiriji ... 2008/12/17(水) edit・delete

>くらげさん
お返事が遅くなりましてすいません[滝汗]
配布版パッケージ作成お疲れ様です!
ドット絵好きにはたまらないボタンばかりで、
完成を一番喜んでいる人間かもしれません。
説明書の分かりやすさはこちらこそ目からウロコでして、
もう少しスタンダートというものを勉強せねばと思いました。
それにしても本当にスクリプトは奥が深い…。
こちらも要勉強ですね[汗]
ご連絡ありがとうございました!

>シロウさん
はじめまして、ご質問ありがとうございます。
コメントへの(一部)タグ使用許可のスクリプトについては、
途中で挫折してしまっている状態です[汗]
時間があればまた再度取り組んでみたいものの一つですが…。
Fc2ブログやJUGEMブログのカスタマイズがある程度WDPにも流用できますので、
そちらを探してみるというのもあります。
(利用規約は各カスタマイズを紹介なさっている方に準じます)
当サイトのブックマークが参考になりましたら幸いです。

■未承認 ... 2014/07/23(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/23(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/24(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/30(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/08/01(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/11/18(火) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/11/22(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/11/25(火) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/12/05(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/12/06(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/12/21(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/12/31(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/02/21(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/03/05(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/06/18(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/09/18(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2016/05/23(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2016/06/15(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2016/11/19(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2016/12/29(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2017/03/12(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2017/03/13(月) edit・delete

管理者に承認されるまで内容は表示されません。

COMMENT FORM

COMMENT FORM
NAME
MAIL
U R L
 
MESSAGE
PASS
公開設定