2006年09月20日

2ペインメニューというものを作ってみた このエントリーをはてなブックマークに追加

こんにちは、三遊亭とん馬です(嘘です)。

以前、このブログをご覧になった方で、「このブログの右側にあるメニューを使いたい」というよーなことを聞かれた。
元々書評をテキトーに書いていた際、作家別にカテゴリーを分類してなかったので、「誰のどの作品について書評書いたんだっけ?」と自分でもわけがわからなくなってしまっていたので、「自分でテキトーにメニューをつくっちゃえばよいじゃん」って感じでJavaScriptで作成していた。

で、作ってみたのはよいが、結構メンテナンスが大変なことに今更ながら気づいた。
結局Javascriptなのでソースを修正して、サーバにアップロードするという不毛な日々が続いており、ためしにどーなっているか調べたら、本日までに68人の作家と、117冊の本について言及しているよーである。

よくもまあ、続いているものだと思ったが、流石に100冊を越えるともうなんか仕組みを作んないとだめだなと思い、2ペインメニュークリエータなるものを作って見た。(ホントはこういうインターフェースって何て呼ぶんだろう・・・)

2ペインメニュークリエータ


もともとのJavaScriptはどこかから借りてきたものでURLもメモっておいたのだが、すでにサイトが存在しなかった(うーむ)。

以下、利用方法についての説明っす。

2ペインメニュークリエータ にアクセスすると、まずはじめにユーザ名を聞いてくる。ユーザ名といっても、設定ファイルに利用する名前なので、人と被らない適当な名前を入力する。当然にして半角英数字で入力してね。

入力後、プロファイルが作成されれば、メニューの登録を開始する。
制御のため、特殊な構文を利用しているので、注意書きにしたがって記載していく。
「例文を見る」をクリックすると、書き方のひな型が表示されるので、これを書き換えていくのがよろしい。

また、メニューの見栄えを良くするために、下記のようなカスタマイズが可能。

1.ポップアップウィンドウの大きさを指定可能
2.メニューそのもののCSSファイルを指定可能

例文はこんな感じで表示される。
+カテゴリ
+サイト名
+x=300,y=300
+css=http://www.usamimi.info/~ryouchi/2panemenu/formchk.css
----
_検索エンジン
Google,http://www.google.co.jp/
Yahoo,http://www.yahoo.co.jp/
goo,http://www.goo.ne.jp/
_動画
YouTube,http://www.youtube.com/
Google Video,http://video.google.com/


1行目:
大項目の名前を入力します(先頭に半角の「+」を必ず入れます)
2行目:
小項目の名前を入力します(先頭に半角の「+」を必ず入れます)
3行目:
メニューを表示した際の横幅と縦幅をpixel単位で入力します
(先頭に半角の「+」を必ず入れます)
横幅200,縦幅150の場合は「+x=200,y=150」となります。
4行目
メニューの表示に用いるCSSファイルのURLを指定します。
このCSSファイルを参考にしてみてください(formchk.css)
CSSファイルは事前にinternet上にアップロードしておいてください。
CSSファイルの文字コードはUTF-8で記述してください
5行目
「----」と半角のハイフンを4つ入力して改行します
(メニュー本文開始のデリミタになります)
6行目移行
「_」から始まるメニューは大項目のメニューとして表示されます
次の大項目のメニューまでの間に、小項目のメニューとタイトルを入力してください。
例文の場合は大項目に「検索エンジン」と「動画」という項目を作り、
それぞれの小項目のメニューを指定しています。
小項目の記述方法は「タイトル名,URL」となります
最終行
最終行は空行を入れないようにしてください
(空行が入ると空のメニューが作成されてしまいます)

まあ、要するにこれを繰り返し登録すれば、メニューが自動更新されるのだ。

プレビュー画面で確認し、問題なければ、メニューを呼び出すためのボタン(またはリンク)の名前を登録し、「これで作成」ボタンを押す。

「これで作成」ボタンを押した後表示されるスクリプト、またはHTMLファイルをBlogに貼り付ければできあがり。

メニューを更新する際には、同じユーザ名でこのサイトに入れば、以前登録したメニューが再度表示されるので、順番を変更したり、カテゴリを変更したりもできる。
上記の設定で作成されたメニューは下記のよーな感じ。



とりあえず、自分だけは便利なのでこれからテキトーにこれを使ってみようと思うっす。
なお、極まれに、自分と同じユーザ名を利用しているユーザが存在しないとも限らないので、なんだか既にいろいろ登録してあるっぽいメニューが表示されたなら、是非とも別のユーザ名で実行してね。
また、不可抗力ということもありえるので、STEP2で記載した内容はテキストファイルに自前でバックアップを取っておくことを強くオススメするっす。


さらに、STEP2では6行目以降にサイトの名前とサイトのURLを指定するのだが、下記のような形式になっている。
サイト名,URL

このタイトル名とURLを入力するのは結構面倒なので、登録したいサイトで、下記のブックマークレットを使うと[サイト名,URL]をJavascriptのプロンプト上に表示します。これをコピーして、新しいウィンドウを開いてブックマークレットで登録を繰り返すとよいと思われます。

2ペインメニュー登録補助(右クリックでお気に入りに追加)


そろそろこのBlogも、前に書いた記事で忘れかけていることも沢山あるので、これを機に整理してみないと・・・
posted by りょーち | Comment(0) | TrackBack(0) | Web周辺技術
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: