2019年4月6日土曜日

署名Webについて


署名Webをネットに公開していた頃のスクリーンショット画像

 署名とは

 ここでいう署名とはネットニュースやメールなどの文末に送信者を示すために用いられたアスキーアート(以下AA)入りの Signature のことを指します。つまり顔文字などのアスキーアートと本人の名前、あるいはハンドルネームなどとメールアドレスを組み合わせた形式のものです。


その署名とはこういうものです。

--

/////||
|0-0-b|  へのへの・もへじ   
(ζ  )゛henohenomoheji@,email,or,jp
======================================


そんな署名を集めているのが『署名Web』です。

 以前にWebサイトを作ることが好きでいくつかホームページを作っていたことがあります。HTMLタグもろくに知らないで夢中になって作ったいくつかのホームページは、思うところあって独自ドメインを破棄しネットでのWeb史を閉じてしまいました。

  その閉じてしまったWeb史の一つに署名Webというのがあり、ネットニュースの記事などに使われていた投稿者を示す署名を許諾を得て収録公開していました。今回その署名Webを再度公開できればと思ってブログを作成しました。

 ブログって日記形式で、もともと日記のようなことを書くのを主としていたと思いますが、ブログ形式ですが署名Webはホームページみたいな感じで作っていきたいと思っています。

✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂

  以前に公開していた署名Webの様子をハードコピーしましたのでご覧になってください。なかなかよくできていると思いませんか。自己満足かな(´▽`;)

署名Webのスクリーンショット画像

 サイトはフレーム構成にし、マイクロソフト標準のメールソフトに似せてアウトルックエクスプレスを思わせるように作ってあります。

  HTMLでフレームを作り、その中に画像を埋め込んでアウトルックエクスプレス風のページに作るのに苦労しましたが、こんな発想で作られたサイトはたぶんいまだにネット上にはないのではと思います。

  それぞれのペインはHTMLで文章や画像が表示されます。それでは当時のサイトのようすを少し説明してみましょう。


各ペインの説明
  1. 「フォルダペイン」は画像だけの表示で受信トレイが開いている状態だよということを示しています。
  2. 「連絡先ペイン」にはリンク先アイコンや、時々のCMなどを貼っていました。
  3. 「件名・送信者等ペイン」はメールの件名・形式でリンクが入れてあり、スクロールすることで多くのページへリンクします。件名クリックで下部の本文ペインに内容が表示されるようになっています。
  4. 「本文ペイン」はネットニュースから収集した署名を集めたページになっています。
  5. 収集してある署名はすべてその署名者の許諾を得て掲載してあります。また閲覧者の方が、収録署名をコピーして使うことに対しても許諾を得てあります。 
 以前の署名Webの説明は以上で終です。

✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂

それでは署名Webでブログって行きます。 


 署名Webに収録してある署名を Hatena Blog に掲載するべく工夫してある程度見られるようになったのですが、Android で表示では意図した通りになっていませんでした。スペースがどうにも潰れてしまうにです。

 今やネットの閲覧はPCよりもスマホの方が普通になってきています。ブログの更新もスマホやタブレットになってきていますので、スマホで署名が意図した通りに見えないのではダメでしょう。

 PC/AT互換機としてのパソコンと Android開発のGoogle であれば、 PCとスマホの融和性も高いのは当然と言えば当然なので、Hatena Blog をあきらめて Blogger にお世話になることにしました。

 Hatena Blog でももう少しCSSの知識あれば Android でも表示が崩れないようにできると思いますが、ない知恵を無理に絞り出すことに苦労するより、出来る場所で咲こうということです。

 それでも Blogger でも、署名を含むAAを直接貼り付けるとこんな風になってしまいます。

AA1
/////||
|0-0-b| 
(ζ  )゛henohenomoheji@,email,or,jp

 さ、猿 ぅ(´▽`;)


 ソースを見るとこんな風になっています。

<br />
/////||<br />
|0-0-b|&nbsp; <br />
(ζ&nbsp; )゛henohenomoheji@,email,or,jp<br />
<br />

 これではだめですが Blogger では HTMLでタグがかなり有効的に使えますので、少し工夫をすることで意図した署名が表示できそうなのです。ちなみにこの文字列は『&nbsp;』スペースの記号(本来は別の目的とか)になります。


  
AA2
 /////||
|0-0-b| 
( ζ     )゛henohenomoheji@,email,or,jp

 AA1を口まわりの部分にスペース(空白)を入れて少し調整してみました。何とか見られるようになりました。でもこれは見せかけでよくなったように見えているだけで、本来のテキストアート的というかAA的にはダメです。

 これをコピペしてテキストエディタ貼り付けたら、頬っぺたの部分は広がり過ぎて文字絵になっていません。みたいに見える方が、テキストアート的文字絵としては完成しているのです。


 のよう見える署名の行間の隙間がもっと狭まければ、より文字絵らしく見えそうなので、分からないときは ggr ですから Google 先生にご教授いただきましたw


 検索で調べて次のように記述することにしました。

<pre class="code lang-aa" style="line-height: 1.0em;">
/////||
|0-0-b|   
(ζ  )゛henohenomoheji@,email,or,jp
</pre>


 上記記述をHTML編集で任意の個所に貼り付ければ次のように表示されした。これなら署名らしくていいと思います。

署名:署名Web オリジナル
=====================================
/////||
|0-0-b|   
(ζ  )゛henohenomoheji@,email,or,jp
=====================================

 文字絵の崩れもなく、行間も狭めてあるので、文字絵が線で描いた絵のように見えてくるはずです。

✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂

Webとメモ帳での見え方の違い


 AAを作成するときはテキストエディタでの作成が基本です。Webで作ったものはWebで見ている分にはAA風に見えているだけで、AAとしての普遍性がありません。でもそれが悪いということではないです。

 テキストエディタとはWindows PCであればメモ帳です。フリーソフトでも使いやすいテキストエディタがいくつもありますので、そちらを使うのも良いかと思います。

 「署名Web ブログ版」ではテキストで作った文字絵の署名が中心ですが、いずれHTML形式の署名も取り上げていきたいと思っています。

 ネットで拾ってきたAAも Blogger にそのまま貼り付けるとこんな風になって少し崩れてしまいます。


   ∩___∩
   | ノ      ヽ
  /  ●   ● | クマ──!!
  |    ( _●_)  ミ
 彡、   |∪|  、`\
/ __  ヽノ /´>  )
(___)   / (_/
 |       /
 |  /\ \
 | /    )  )
 ∪    (  \
       \_)


 こんな風にならないようにするには、HTML編集で「<pre class="code lang-aa" style="line-height: 1.0em;"></pre>」を張り付け、<pre class="code lang-aa" style="line-height: 1.0em;"></pre>の間に直接このクマさんのアスキーアートを貼り付けばOKです。

 ほらこんなに素敵な署名に改編できました (´▽`)


 署名者:署名Web

   ∩___∩
   | へ  へヽ
  / ●  ● | クマった~!?
  |  ( _●_) ミ
 彡、   |∪|  `\
/ __  ヽノ/´> )
(___)  / (_/
 |     /
 | /\  \
 | /  )  )
 ∪  (  \   署名Web ブログ版」は
     \_) henohenomoheji@signature,dayo,jp


 実際にはネットでコピペしたクマはWeb上ではクマらしく見えていたと思いますが、それはWebでスペースを余分に入れてクマらしく見えるようにしてあったからです。

 このAAをメモ帳にコピペしてみれば分かりますが、上にある表示が崩れた状態がそのAAの正体です。

 署名者:署名Webとなっているクマの署名は、余分なスペースを取り除いて修正したものです。

✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂

AA2
 /////||
|0-0-b|
( ζ     )゛henohenomoheji@,email,or,jp

 これは先に出てきたAA2です。口回りにスペースを余分に入れブラウザで署名らしく見えるようにしたものです。この署名をメモ帳にペーストするとアAA崩れになっちゃうのも先に言ったとおりです。



図1 AA2を画像画像にしました。
文字絵
←画像です。
メールで使いたいとは思わないよ!





AA1 フォントで作った署名/////||
|0-0-b| 
(ζ  )゛henohenomoheji@,email,or,jp 

 猿みたい顔のAA1です。コピペしてメモ帳に貼り付けてみれば下の図2のように表示されます。



図2 AA1を画像にしてみました。
文字絵
←画像です。
メールにはこれですね。





 メールは最近はHTMLも増えましたが基本はTXT(テキスト)メールなので、そのTXTで崩れずに表示されればよいのです。

 でもWeb(HTML)掲載では崩れるので、HTMLタグを利用して崩れないようにしさらに行間を狭くするわけです。



✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂

まとめ

 文字を利用してテキストアート的AAを作るのは脳の活性化にもよろしいので、是非皆さんも文字絵の入った署名やテキストアートにチャレンジなさってください。コメント欄での自作署名の投稿もお待ちしております。ネットで見かけたAAを利用して自分なりの署名に作るのもありです。

✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂

自作署名投稿についてのお願い

  1. 署名は必ずメモ帳で作ってください。
  2. メールアドレスダミーに変えるなどしてください。
  3. 実際のメールアドレスである場合は、アドレスのドットをカンマに変えるなどして使えないように工夫ください。
  4. お名前はハンドルペンネームをご利用ください。
  5. 署名に本名を記載されたときはネットに本名を公開することを了承したものと解釈します。
  6. 投稿は連絡フォームコメント欄をご利用ください。
  7. 投稿時に署名が崩れていても、メモ帳で作成してあるならばそのまま送信してください。
  8. 署名Webは投稿された署名の修正をすることがあります。
  9. 以上をご理解の上で投稿ご登録をお願いいたします。





()署名Web ブログ版

✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂

追記


 いやいや、修正に次ぐ修正でかなり時間を使ってしまいました。スマホ系 Andoroid OSで一部の署名は激しくズレが出ます。

 AT/PC互換機と Andoroid スマホとの関係、果ては各種ブラウザによってもAA入り署名はズレて見えます。今のIEなどではオプションで設定で等角フォントを選択しても署名がズレています。これはブログというフォーマットも影響しているのでしょう。

 OS間との問題、ブラウザの問題、ブログ形式での問題などが相互に絡んでくる問題だろうと思います。これらを乗り越えて等しく同じ署名を見せるには画像という選択肢しかないのかなって気もします。

 掲載された署名の実態を知るにはテキストエディタ(Windowsパソコンであればメモ帳)にコピペしていただければ署名所有者の意図したとおりに署名が表示されます。




0 件のコメント:

コメントを投稿

他の方を中傷するような記述は避けてください。