ラウンジ(兼FAQ掲示板)

電光!について
過去ログ NO.1131772244
□ misa [2005年11月09日10時20分]
はじめまして。
こちらの電光!はとても便利で長い事使わせて頂いております。
設置URLですが、現在学校のPTA専用アクセスページへの設置にて
公開することが出来ません。
設置自体には問題が無いと言う事でご容赦願った上で質問させて頂きます。

この度サイトリニューアルに伴い、重要な更新をチェックして貰う為の
情報を提示する掲示板として使いたいと思っているのですが、
なにぶんPTAと言う限定アクセス者でパソコンに不慣れな方が圧倒的に多く
リンクをホームページアイコンからチェックすると言う作業もままならない様なのです。

コメント本文をクリックして、そのコメントに関連のあるURLに飛ばす事は可能でしょうか?
確か以前そのような設定になっている電光!を見かけた記憶があるのです。
CGIその物を変更しなくても、コメント記入時にリンクタグが使えれば問題ないのですが
試した所出来ないようでして…。

何か方法がありましたらご教授頂けると大変あり難く、よろしくお願いいたします。
(過去・ログマニュアル拝見したつもりですが、既出でしたらすみません)
□ NXer [2005年11月09日15時10分]

misa様 はじめまして。NXerと申します。

>現在学校のPTA専用アクセスページ、、、公開することが出来ません

非公開ということ、了解しました。
(以下、必要なところだけを選んでお読みください。)

>PTAと言う限定アクセス者でパソコンに不慣れな方が圧倒的に多く

当方にはPTAの構成年齢が不明です。幼小中高と保護者の華麗なる加齢
現象に比例して、機械ものに抵抗感も増すようです。電光!設置者・
運営者としては、オーディエンス(利用者)の代表的な方々(例、学年
委員さんなど、小学校では少なくとも6歳の年齢差がありますから)に、
一度試していただくなどの試行を経て、本格運用されますことをお勧め
します。

その1)初期設定の変更愚案

>ホームページ(HP)アイコンからチェックすると言う作業

原因は、HPアイコンサイズにあります。次のように初期設定されています。
通常は、変更する必要はありませんが、misaさんが直面されている問題
を解消するには、この値を変えます。
-----------------------------------------------行番号はおよそその付近
133 $img_size = "width=15 height=15"; # ↑これらの画像サイズ
-----------------------------

原作の値  width=15 height=15 です。これを次のように変更してみます。
新規1の値  width=20 height=20
新規2の値  width=25 height=25
新規3の値  width=30 height=30

最後の30(単位ピクセル)ではいかがですか。どなたか複数の人に使いやすさ
を試してもらってください。設置者と利用者では微妙に感覚がことなります。
また、たびたびの変更は信頼性を損ないますから、表示ページに電光!がデザ
イン上よくなじむ納得のいく値を探求してください。

なお、上記30ピクセルは次の電光!バー全体の高さに制限されています。
-------------------------------------------------------------
140 $bg_height = 30; # 領域全体の高さをピクセル値で指定
--------------------------------------------------------------

その2) 特大にしたい(30ピクセルを越す場合)

保護者集団の構成によっては、さらに大きいアイコンが見やすい、使いや
すいということがあるかもしれません。その場合は次のような変更が必要です。

-------------------------------------------------------------
140 $bg_height = 40; # 領域全体の高さをピクセル値で指定 +10
--------------------------------------------------------------
133行の値もそれぞれ40に変更します。

問題は、次のjpg画像です。
----------------------------------------------------------------------
$bgimg = "solid_silver.jpg"; # 領域全体の背景画像(指定しない場合は "
-----------------------------------------------------------------------
solid_silver.jpgはimageファイルに同梱されています。
その画像は10x30ピクセルです。40-30=10ピクセルだけ、画像の高さが不足して
デザインが変になります。

画像編集ソフト(例、HPビルダーのウエブアートデザイナー)で画像の大きさを
10x40に設定して、元画像の高さを調整します。同名で保存すれば上書きされます。

その3)HPアイコンをPTAや学校のロゴアイコンに変えるとか

サイズ変更に加えて、アイコンを校章とか馴染みのものにするのはどうでしょうか。
また、アイコンが目立つように背景画像を、すえぽんさんの電光!スキンから
いただくのも、リニュアルついでに検討されてはいかがですか。設置は簡単です。
サンプルページからダウンロードして、imageファイルに保存して、$bgimgの名前を
変更するだけです。

---------------------------------11、12ポイントもお試しください。
# デフォルトの文字サイズ10(pt)
$font_size = 10;
---------------------
原作は、優れた原石です。さらに研磨して、実用性と芸術性を加えてください。

以上です。
**************************************愚観
電光!が公共機関とりわけ学校などで2年ほど前から設置運用され
ているようです。ウェブサイトには、長期保存のページと短期
(例えば、修学旅行の出発から帰宅まで2泊3日)、時には即席
のメッセージ用掲示板が必須のアイテムのようです。
すえぽんさんが電光!を開発され、電光!が独自の成長をしてい
く様子に偶然立ち会っています。貴PTAのご経験は、非公開ですが
類似の企画をされておられる皆さんの道しるべになるものと思い
ます。愚案は、ご希望の移動するメッセージにリンクを貼るという
発想でない点は、当方の能力の限界とご容赦ください。
なお、この愚案は、無料です。PTAに改造の報告が必要な場合は
そのようにご報告してください。

□ misa [2005年11月10日00時01分]
NXer様

早速丁寧なご回答、ありがとうございます。
当方は高校のPTAのサイトでして、保護者は勿論学校長や教職員も含めますと、
ご指摘の通り、利用者にはかなりの年齢的幅があります。
その中で圧倒的な率を占めるのは「母親」でして…その方達のインターネットに関する
スキルは年齢的な物というより、環境や性格に左右される事が大きいようです。

携帯メールは出来るようになったけど…と言うお母様方にも、パソコンに
慣れ親しんで貰いたい…と言う目的ももって、一人でも多くの人に見てもらえるサイトを
育てて行こうとサイト設置2年目を迎え頑張っている所です。

そう言った目的から、電光!は、ページを開いた途端目に付く「動きがあって面白くて
つい目が行くので良い」と設置当初(1年半前)から好評を頂いておりました。

使い方としては
 「校長通信第○号が更新されました。メニュー○○をご覧下さい」
 「○○委員からのお知らせがあります。   〃       」
 「保護者会のお知らせ配布されました。   〃       」
と言ったように、コンテンツメニューの更新内容のお知らせを見やすく
リアルタイムにトップページで表示すると言う物でした。

リニューアルに際して、色々な希望を取った所、問い合わせのような希望が
多く寄せられてしまったと言う訳なのです。

正直白状いたしますと、サイズを大きくすると言う改造は、既にさせて頂いておりました。
(老眼世代も多くいるのが現状ですので…汗)
季節毎に変える壁紙に合わせて背景を変える等と言う事もしてまいりました。
それなりにかなり使い込ませて頂いております。

今回、コメントから直接リンクが不可能と言う事は残念ではありますが、
ご説明頂いた「アイコンを見やすい物に変更する」という所までは手をつけて居りませんでした。
馴染みの深い校章画像をアイコンにするというのも楽しそうですね。

早速その方法で取り掛かり、オーディエンスチェックをしてもらう事に致します。
上手く行きましたら、リニューアル後反応等、ご報告させていただきますね。

ありがとうございました。
□ NXer [2005年11月11日14時38分]

ご丁寧な返信ありがとうございます。NXerです。

心理学の教科書に、同じ矢印でも、先端の矢じりが上向きと下向き
で、一方が長く見える錯覚のテストがあります。同じサイズで、そ
うですから、一方を短くすると、他方は、相対的に長く見えるかも
しれません。アイコンも同じことではないかと試してみました。
このように試すのは、現在、コンピュータが様々な人間の特性に
対応する、ユニバーサル・デザインを目指していることからも、
以下のテストは興味があります。
もし時間があり、またテスト協力者の方がお近くにおられましたら
で結構ですが、お試しください。

変更ポイント 134行の追加 ( )は既存の行
---------------------------------------------------------------
(133) $img_size = "width=25 height=25"; # ↑これらの画像サイズ
134 $img_sizepta ="width=35 height=35"; # home01の画像サイズ用
(中略)
(137) $bg_height = 35; # 領域全体の高さをピクセル値で指定
---------------------------------------------------------------------
そちらの設定は当方には不明です。参考までに、高さを35ピクセルにして
みます。電光!の諸機能、つまり、スキップやメールなど、他のアイコンの必要度
も不明です。したがって、ここでは、それらは、原作+10ピクセルの25にしました。
さて、ホームページアイコンは、新たに作成されましたか。
------------------------------------
$img_sizepta ="width=35 height=35"
$img_sizepta ="width=40 height=35"
$img_sizepta ="width=45 height=35"
--------------------------------------
このようにwidthを広げると、アイコン画像も横長なデザインが
可能です。その画像サイズが、初期設定の $img_sizeptaに代入されます。

----------------------------------------------------------
692 BUF+='<td><a href="" onMouseover="st(3);return true;" onMouseout="st()"  onClick="mov(1); return false;"><img src="$img_dir$home0" name=home $img_sizepta border=0 alt="【ホームページ】\\n色の付いているときは登録有りです."></a></td>';
----------------------------------------------------------
692行目の
$img_size  を
$img_sizepta
と変更します。

以上です。

********************* 最初のご質問について

>リンクタグが使えれば問題ないのですが

タグとは、ウェブページを作成する時に使うHTMLの用語です。一般的な
掲示板は、安全が保障されている範囲で、このようなタグの使用を許可
することがあります。

しかし、misaさんが修正を加えようとされているsub js_outputは
j(ava)s(cript)で記述されています。そのために、電光!の文字が
表示される部分は、HTMLのタグが単純には機能しないおそれがあり
ます。スクリプト全体はperlで記述します。このように複数の言語
を使うウェブ・プログラム(スクリプト)をハイブリッドスクリプト
といいます。このように複雑で高機能な掲示板は他にあまり例があ
りません。それだけに、改造への興味はつきません。

また、電光!が視覚認識、聴覚認識を補助する諸機能を伴うような
さらなる進化は、今後の課題かと勝手に愚考しています。
ご利用の環境をとても詳しくお知らせいただきありがとうございました。
電光!が、長期にわたりウェブマスターさんと多数の保護者に愛用され
ていることに深く感動し、いらぬ愚考を添えました。失礼します。

折角のご質問ですから、参考書を書いておきます。
末永政昭、『JavaScript+CGIハイブリッドスクリプト』ディー・アート
2004
□ misa [2005年11月11日23時21分]
NXer様

再度色々なご提案ありがとうございます。

実は、あれから色々悩んでおりまして…。

ご想像通り、当サイトにおいてはスキップやメールに関しては殆ど必要性がなく
コメントとホームアイコンに視覚集中してもらう事が一番と考え
とりあえず「書き込み」「スキップ」「並べ替え」アイコンを小さくし(W20×H40)
さて…ホームアイコンの幅を広げるには…と色々不慣れながらも画策していた所でしたので
ご教授くださった特定アイコンの領域のみ広げる方法は、本当に我が目を疑うほど嬉しい物でした。

早速追加変更をし、アイコンも作製いたしました。

校章も作っては見たのですが、結局コメントとアイコンの存在の関連を
説明する事の必要性も考慮し、home_off.gifは無地にし、home.gifに
「記事を読む」と言う文字を赤く入れることにしてみました。
そしてアイコン位置の入れ替えをし、ホームアイコンをコメントのすぐ右に移動しました。
それに加え、オンマウスでの表示コメントは
〜【対象記事ページリンク】赤色の文字表示がある時にクリックすると対象ページに飛びます〜
に変更いたしました。

それによって、コメントにURL登録(記事ページへのリンク)があった場合
無地だった場所に赤く文字が浮かぶと言う事になり、視覚的インパクトも強くなったと思われます。

これで、早速仲間の保護者の方々に見て頂こうと思っております。


お教えくださった「ハイブリッドスクリプト」に関しましては
cgiの「sub js_output」を検索して見ましたが…私のスキルでは…(^-^;
ですが、仰る事の意味は何となくわかる様な気が致します。


CGIゲームでサーバーの負荷を軽減する為にJAVAスクリプトを取り入れた物を
意味もわからず設置した事があります。
あれもその一種でしょうか…。(全然見当違いでしたらお恥ずかしい限りですが…)

それに致しましても、電光!の奥の深さ…。これからが益々楽しみですね。

これからも足繁く通わせて頂きたいと思います。
(Cookie有効にしてしまいましたし…笑)

本当に色々と有難うございました。
□ NXer [2005年11月12日14時10分]

上記misa様( [2005年11月11日23時21分])の投稿にて、この件の
一連の質問に関する愚論は終結させていただきます。

$img_sizeptaの追記がお役に立てたことは、うれしいかぎりです。
こちらこそ、電光!が、現在の社会でどのように機能しているのか
その有様を活写していただき、深く感謝いたします。NXer。

以上です。
*****************************************************
以下は、ラウンジをお借りして、当方のためのメモを書きますので、すえぽん
さんご理解ください。

>私のスキルでは…(^-^; 
できないことはありません。といいながら、大切なお断りです。これから先
変更時に発生するエラーの責任は、当方に一切ありません。ご質問の際は
新規に投稿してください。 

□-------------------問 
不要アイコンを表示しないようにしたい、どうしたらよいか。
その答えは、そちらの(w20xh40)という設定に重要なヒントが隠れています。

変更ポイント 134,5行の追加 ( )は既存の行 
◆---------------------------------------------------------------
(133) $img_size = "width=25 height=25"; # ↑これらの画像サイズ
134 $img_sizepta ="width=65 height=35"; # home01の画像サイズ用
135 $img_sizepta0 ="width=0 height=0"; # 他ファイル非表示用画像サイズ
----------------------------------------------------------------------
もちろん、答えは (w0xh0)です。 なお、私は次の愚案2のために、HPアイコンの
幅を広くしています。

あらたなサイズ0指定は、次の行です
◆--------------------------------------346 ファイル 695 メルアドアイコン
346 $up_str = "\nBUF+='<td><a href=\"\" onMouseover=\"st(6);return true;\" onMouseout=\"st()\" onClick=\"img_view(); return false;\"><img src=\"$img_dir$atmt0\" name=fileinf $img_sizepta0 border=0 alt=\"【ファイル】\\n色の付いているときは登録有りです\"></a></td>';";
(中略)
695 BUF+='<td><a href="" onMouseover="st(2);return true;" onMouseout="st()" onClick="mov(0); return false;"><img src="$img_dir$mail0" name=mail $img_sizepta0 border=0 alt="【メールアドレス】\\n色の付いているときは登録有りです"></a></td>';
---------------------------------------------------
これは、電光!の記事数が2桁を超えた時、スキップしたり、時系列を反転させたり
する機能を残した場合です。そのあたりは、親記事数との関連で頻繁に削除できる
場合は、サイズ0で非表示になります。ただ、1〜2ヶ月先の行事の予告など残したい
場合、多少スキップ機能などは使う気がします。レス機能も不要ならサイズ0です。

misaさんに、大変具体的に電光!使用の様子を知らせていただき、たとえ
ば、勤務を持つ場合、帰宅後からの短時間に炊事、洗濯、掃除などの主婦/夫業
をこなしその合間のマウスの操作はままならないかもしれない、ということに気
がつきました。そこで次の1をすでに提案しました。しかし、さらに、2の改造を
試みた結果、1の愚案と併用すれば電光!を、マウスの移動だけで操作できる可能
性が発見できましたので、投稿させていただきます。登録URLに音声・音楽情報を
載せれば、聴覚的にも伝えることができるかもしれません。ウェブサイトの文字
情報をクリック一つ、マウスの移動で音声情報に変えるなどの配慮は、今後ます
ます必要になると思われます。

電光!のアイコン中で、URLを主に使う場合には、
1 URL用アイコンだけを大きくする、特にマウスを使うのに不慣れであるとか、
  微妙な操作ができにくい利用者用に幅を広くする・width値を変えます。
(例、上記$image_sizepta)。また、不要アイコンを非表示にします。
2 さらにマウスのクリックがシングルでもダブルでも上手く操作できない、と
  いう利用者が多い場合には、マウスをアイコンに重ねると自動的にURLが別窓
で開くという方法があります。

2の場合は、
2.1 アイコンの中で、URLアイコンの上に載せる、通過するだけでクリック
しない点が他と異なることから、アイコンに「URL別窓表示」などの文字を記
入して、その使い方を利用者に知らせる必要があります。不用意に少しでも、
マウスをアイコンの上を動かすと、見ないつもりのウェブページまで開いてし
まいます。もちろん、home_offのアイコンでは動作しませんから、混乱なく
使用できると思います。
ただ使い慣れると、癖になって、何でも見たくなる、とにかくURLを登録し
たくなる、自分のサイトの画像ファイルURLを登録すれば、2つ右となりの
ファイルアイコンとほぼ同一の機能。クリックしなくてもよい分、便利です。
スライドショウ並に展開できます。画像ファイルは例えば、20Kバイトの制
限がありますが、こちらは、普通の画像でもOK。

2.2 ハイブリッドスクリプト中、javascriptを修正することになります。
HTMLタグを使いperlで記述するのとは、関数で処理したりイベントハンドラー
を使う点が異なります。実際は、簡単ですが、念のために、denkohnew.cgi
などと別ファイル名にしてローカルサーバ、別コンピュータなどで動作確認
をします。開発途上での不具合で、運用中のdenkoh.cgiに影響を与えないよ
うに注意してください。data.cgiもdatanew.cgiと保護策をとってください。

変更点です。必ずしもこのようにしなくていいのですが、当方では
一応動いたということです。
◆-------------------------------------531に//をつけて無効化します。
(529) function mov(sl) {
(530) if (sl == 0 && mail) document.location = "mailto:"+mail;
531 //else if (sl == 1 && home) window.open(home,"","scrollbars,resizable,toolbar,menubar,location,directories,status");
(532) else return false;
(533) }
------------------------------

668〜680は、すべて新規挿入です。 新しい窓を開く関数です。
◆-------------------------------
668 function openWin(str){
669 if (home){
670 window.open(home,'page','width=320, height=400,scrollbars,resizable,toolbar,menubar,location,directories,status')};
671 }
(672) BUF+='<map name=skip2>';
------------------------------手打ちする時は、シングルクォートや{ }に注意

電光!のホームページアイコン表示部分です。ダブルクォートが対応することに注意
◆--------------------------------------
696 BUF+='<td><A href="" onmouseover="openWin(mov(1)); return false;"><img src="$img_dir$home0" name=home $img_sizepta border=0 alt="【ホームページ】\\n色の付いているときは登録有りです."></a></td>';
----------------------------------------$img_sizeptaは、上記書込み参照

簡単な説明をつけます。それぞれの環境に適切な変更を試みてください。
○531行は無効化するか削除します。696行ではエラーがでたことから、代わりに
○668行のサブウィンドウを開くopenWin()関数で、マウスがアイコンに重なった
 ら窓を指定の大きさで開いて、登録したURLのウェブページを表示します。
○669 if (home){
 は、homeの値がある、つまり$urlが登録されている場合にカッコ内は値が
 真となり、{ }内を実行します。登録がないときは、アイコンにポインタを
 重ねてもマウスは働きません。
○696行目は、onmouseoverイベントハンドラで、ダイナミックに別窓を
 開き登録したURLを表示するものです。

「JavaScriptの得意技は、ブラウザに読み込まれた状態で何らかの処理をする」
(末永政昭 2004:105)ことですが、マウスの移動でこの変化を一度経験すると、
たしかにjsの「動的」な魅力の虜になります。あまりにも華麗な技に、肝心のペー
ジが霞んではいけませんが、逆にそのページの中身まで、魅力的になるかもしれません。
化粧は、内面の美しさを引き立てますが、内面の美しさだけでは、外からは判断が
つきません。やはり化粧は必要です。onmouseoverがウェブページの本来的な情報
の価値を引き出してくれれば、ウェブマスタの本望と思います。

なお、misaさんがご指摘の「サーバの負荷を軽減」とは、cgiの内perlがサー
バ上で動作することをさしています。他方、javascriptは、利用者のコンピ
ュータのcpuを利用します。このことから、末永さんは、perlを「静的」とし
javascriptを「動的」と形容されています。内面の美しさがperlで表出される
とすると、さしずめ、javascriptは、それを引き立てる化粧品でしょうか。使っ
てそのよさがわかるというものです(多分に自己満足/陶酔も承知の上)。
さらなる美の追求は、ジェンダーに関わらず、永遠の課題です。無理を承知で
(失礼、前6文字抹消)、ともに、追いかけてみませんか。
一定時間書込が無かったので過去ログに移りました

suepon.com | CGI作成/CGI制作 | JavaScript | ドメイン検索 | バナー自動作成 | Google ダンスツール | 松浦亜弥 | H.P.memo | パソコン | ネイル

Copyright (C) 2002 - 2009 suepon , All rights reserved. Powered by CGI Script Market.