Home | 制作等 »

Home > HP関係 > ブログ

2006年10月18日
2006年10月18日

スパムメールの防止

追記がありますまずは全部読んでから。

ホームページやブログを開設して、内容が充実して来訪者が増え
アクセスが増えてくるのは嬉しいがスパムメールが多くなるのに
悩んでいる人は多いと思います。

多い時は1日に200を超えたりして非常に処理に困った経験が
あるのですが、こういう時にサイトの開設者は
メールを公開するのを止めたいでもまともなメールは受け取りたい
と悩んでしまいますね。

スパムメールは大体はロボットでホームページの各ページに載っている
メールアドレス ○○○@○○.com 等のメールアドレスを
自動的に収集して飛ばしてくるので、要はメールアドレスを直接
公開してなければ収集されるのをかなり避けれるようです。

おっさんのブログで迷惑防止の為、JAVAを利用しやってみた例

1.テキストエディタを開き

mail="メールアドレス";
document.write(mail.link("mailto:user@domain←自分のメールアドレスに変更"));

と書き込んだら名前を mail.js で保存します。
保存のときの文字コードはブログで使用しているものと同じ。

2.1で作成した mail.js を自分のブログのディレクトリにアップロードします。

3.メールアドレスへのリンクをおきたい所に

<script type="text/javascript" src="<$MTBlogURL$>mail.js"></script>

を コピーペーストして再構築します。

これで来訪者はJAVAが使用できる状態であれば普通にメールを送れますし
php html等を巡回してメアドを収集するロボットは避けれます。


HTMLエンティティ生成(これでもか!って方法)
わかり易く言うとメールアドレスを通常とは違う表示にしちゃいます。
例えば
aaa@bbb.ccc は aaa%40%62bb.ccc となります。
上の mailto:user@domain の部分をHTMLエンティティ変換して
書き換えてしまえば2重の防止策になります。

詳しくは ab.jpn.ph

かなりいけてます^^
(と思っていた…)

***追記***
これでスパムがこないと思っていたらすぐにきやがった。1通だけ。
頭に来て対策方法を再度検索したら強力なのを見つけました。

暗号化メールアドレスの簡単生成 ←これです。

これで自動生成したJAVAタグを貼り付ければ大丈夫そうです。

2006年10月13日
2006年10月13日

MovableTypeパスワード忘れ

MovableTypeを使いだして、最初はよくわからず
難しいパスワードを設定してしまいパスワードが分からなくなってしまった。

MTパスワードの変更方法

1.MT Medic でソースをダウンロードする。

2.解凍し mt-medic.cgi をテキストエディタで開き
 
1行目の #!/usr/bin/perl をサーバーが対応している形に修正
(一般的に #!/usr/bin/perl か #!/usr/local/bin/perl の場合が多い)

3.12行目の my $ADMIN_PASSWORD = "ここに設定するパスワード";

4.FTPで mt-medic.cgi を mt.cgi と同じディレクトリにアップロードします。
  パーミッションを755に設定します。

5.http://~~~~mt/mt-medic.cgiにアクセス。設定したパスワードでログイン。

6.メニューから"Authors"を選ぶと、
  MTのログイン名別にパスワードを変更が出来る。
  "Edit"を押してパスワードを変更してから"Save"する。

7.http://~~~~mt/mt.cgiにアクセス。
  6.で設定したパスワードでログインできるか確認します。

8.アップロードしたmt-medic.cgiは削除するか
  パーミッションを000に変更しておきましょう。

無事にパスワード変更できました^^

2006年10月04日
2006年10月04日

ブログのカスタマイズ(小粋空間)

ブログをはじめてとにかく色々といじってみた所色んな事が理解できたが
MovableTypeの様なブログはシステム上どうしても全体の再構築が必要に
なり、また時間が掛かる。またその時間はエントリーの数に比例してるので
ブログを立ち上げてから期間が経ち、エントリーの数が沢山ある状態での
頻繁なサイトの再構築は無理があるので、カスタマイズ等の
確認の為、何度も再構築をする様な作業はエントリーが少ないうちが良いと
思い色々と試してみました。
テンプレートは色んなサイトで拾って5つぐらい試したけど小粋さんのが
表示が崩れにくく、見た目も良くてカスタマイズ性に優れ最高やった。^^

おっさんのブログで色々試した
小粋空間さんのカスタマイズのおっさんの感想

作業的に難しいものから5段階で★、効果に付いて☆ で表現

CSSでタイトルバナーに画像を表示する ★ ☆☆☆☆☆
(CSSを少しだけいじって背景画像をアップするだけで非常に簡単だが見栄えする)

CSSでエントリータイトルに画像を表示する★★ ☆☆☆
(作業自体は非常に簡単。位置あわせが少し悩む)

CSSで画像に影をつける(ドロップシャドウ)★★★ ☆
(作業は簡単、位置がピッタリ合わせれなかった。)

ナビゲーション・バー ★★ ☆☆☆☆☆
(設置は簡単だが、ユーザビリティ向上と見栄えが向上する。)

サイドバーの折りたたみ ★★★ ☆☆☆
(やや難しいが、いらんサイドメニューを折りたためるのは良い)

休日表示付リアルタイムカレンダー ★★★★ ☆☆☆☆☆
(設置自体は難しくない。祭日が赤くなるのは満足度大)
平日の色が変更出来なくなってしまった。誰かお助けを^^;

月送りカレンダー ★★★★★ ☆☆☆☆☆
設置は難しくないのだが、作業自体が多いので一つ一つを慎重に進める。
↓ブログをPHP化している場合は5.カレンダーの設置をいじらなければいけないが



<MTArchivePrevious>
<a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.html"><</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y"$>
<MTArchiveNext>
<a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.html">



上の赤い部分をphpに変えなければカレンダーは表示されずエラーになってしまいます。
これがわかるまでかなり時間が掛かってしまった。
苦労したが、これも満足度の高いカスタマイズだ。

プロフィールのページを作る・アーカイブページを作る
★ ☆☆☆☆☆
(非常に簡単。HTML少しわかるだけで編集もできる。
誰でも全アーカイブページは絶対に欲しいと思う。)

Tag Cloud のページを作る・フォントサイズ切り替えスクリプト
★★★★★ ☆☆☆☆☆
これは、ただ動かす所までは結構簡単にできるが、
ブログに組み合わせページとして構築するのが難しかった。
結構後のカスタマイズだったので出来たが、MovableTypeカスタムに
ある程度慣れてこないと出来なかったと思う。
現時点のエントリーが少ない状態では、別に無くても良いが
エントリーが増えてくれば、その恩恵がわかると思う。
見た目もなかなかクールになりそうな感じ。

新着エントリーのあるカテゴリーに New マークをつける
★ ☆☆☆☆☆(簡単で見栄えが良い^^)

JavaScript 不要なサイドメニューのツリー化 for Movable Type
サイドメニューのツリー化表示
Movable Type の PHP化
★★★★★ ☆☆☆☆☆
エラー出しまくり、どうしても無理なのかと諦めかけた。
約3日頑張ったが無理で小粋さんで質問して、
ブログをPHP化(←これまた1日苦労した)
設置は大変だったが、表示される様になった時の嬉しさと
満足度は1番ある。これが設置してあるとブログへの訪問者は
かなりカテゴリーを把握しやすくなる。

各アーカイブページでのパンくずリスト設定方法
★ ☆☆☆☆☆ (簡単でも効果は大!)

カスタマイズ後 残っている問題点として

1.文字化けをなくす為.htaccessによる文字化け対策  を施すも
  やっぱりたまには(かなり少なくはなったが)文字化けをおこしてしまう。
  ナビゲーションバー→全アーカイブ→RecentEntriesの記事
  の流れで出やすい気がします。
(全てのテンプレートをエディタに貼り付け文字コードUTF-8で保存してから
開きそれをコピー→ペーストしていったら文字化けがほとんどなくなった。)

2.RecentEntriesのツリー表示が微妙(1~2p)にずれてる。

90%以上は満足できているが何とかしたいなぁ。


2006年09月29日
2006年09月29日

テキストの時計表示

ブログ初心者の私はMovable Typeを自分好みにする為
寝る前PCをガチャガチャさわっていると時間の感覚が鈍り、
思ったより長時間PCかまってる事があった為、
ブログに時計が付いてたら良いのにと思い検索してみると
かなり色んな方法で時計が表示できる事がわかった。
(ちなみにウインドウズPCなら右下には時刻表示が出ていると思うが
人間の性質はどうしても視線が左上に集まりやすいらしい)

自分で作ったりする事は出来ないので、フリーの物を探して
最初はフラッシュの時計を置いてみるが、デザインは良いが
どうしてもサイズがでかくなってしまうのと、表示させたい
ページと同じ階層にファイルを置かないと上手く表示されなかったり
するので、あっても無くてもあまり見た目に影響が無いような
シンプルなフラッシュなしのテキストタイプを探して見た。

参考にしたHP→ 時計をテキストに… と HTMLの小技 *時刻を表示する

手順は3つしかないから簡単(まずは最後まで読んでからバックアップとってから)

1・まず時計を表示させたいページの 
<head> から </head>の中に↓を置きます。


<Script Language="JavaScript">
<!--
var spSTim11=" ";
function time01() {
var dayTim,jiTim,funTim,byoTim,goze;
dayTim=new Date();
jiTim=dayTim.getHours();
funTim=dayTim.getMinutes();if (funTim<10) {funTim="0"+funTim}
byoTim=dayTim.getSeconds();if (byoTim<10) {byoTim="0"+byoTim}
if (jiTim<12) goze="AM ";
else {
goze="PM ";
jiTim=jiTim-12;
}
document.getElementById('clk').innerHTML =spSTim11+goze+jiTim+":"+funTim+":"+byoTim;
setTimeout("time01()",1000);
}
// End -->
</Script>


2・(1と同じページの)時計を表示させたい所に↓を置きます。


<div class="clock">
<span id="clk">
<FORM NAME="time01">
<INPUT TYPE="text" size="25" name="timeform">
</FORM>
<Script Language="JavaScript">
<!--
time01();
//--></Script></span>
</div">

3・スタイルシートのどっか(一番下で良い)に↓を置きます。


/* 時計メニュー */
.clock {
color: #483D8B; /* 文字色 */
font-size: 10px; /* 文字サイズ */
}

保存して再構築して確認します。
色を変えたい時はここで見るとわかり易いかも→ HTML色見本

この記事を書くまで知らなかった事はタグをページで表示する方法。

< (タグの左側)は、&lt; で表現し、> (タグ右側)は、&gt; で表現するということです。

テキストエディタの置換を使うと 左、右の2操作で全て変換されます。

<変更点>
私はサイドのレイアウトをいじりたくないのと、表示を上の方に持ってきたかったので、
タイトルをいじって2・の部分を↓としました。この場合は3・の所は必要ありません。


<!-- タイトル -->
<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<div id="banner-description">
<$MTBlogDescription$><span id="clk">
<FORM NAME="time01">
<INPUT TYPE="text" size="25" name="timeform">
</FORM>
<Script Language="JavaScript">
<!--
time01();
//--></Script></span>

</div></div>

JAVAの事わからないけど何とかなりました^^
しかし”転送バイト数の増加”の観点からすると良い方法ではありません。
もっと良いやり方があるはず。。。

2006年09月27日
2006年09月27日

トラックバックとは

ブログが無い時代ににHPを作った事があったが、その時に面倒だったのが
「相互リンクお願いします」のメールをもらった時に、嬉しいのだが
リンクページにリンクを張る作業が、
時間が無い時とかだと結構面倒で困った事があった。

解決策として訪問者が自動サイト登録できるCGIを使い
「登録した場合は相互リンクをお願いします」と表示してみた。
大体は上手くいったのだが、あとで登録サイトを見ていくと、
こちらのページのリンクがどこにも無いHPが、たまにあり悲しくなった。

ブログにはトラックバックという機能を使うとメール等のやりとり無しで
相互リンク的にリンクを貼り付ける事が出来、これらの問題が綺麗に解決できそうな為
導入したが、トラックバックの意味を検索した所、非常にわかりやすく解説されている
ブログを見つけた。

ここです。→トラックバックとは? 

ここを読んでようやくトラックバックのしくみが理解できた。
このエントリーがはじめてのトラックバック使用です。

こりゃ便利だ。^^

2006年09月25日
2006年09月25日

ブログカスタマイズ(MovableType3.3)

ブログをサーバーにアップして動く様になったのは良いが、
何個かエントリーを書いてみたらブログ自体のデザインがパッとしないのに気付いた。
最初からのデザインはどうにも格好良くないので代えたいと思った。

色々検索しているがなかなか希望のスッキリしていて
どこをクリックすれば何が見れるのかわかり易いものが無かったが
「小粋空間」を発見(このブログの右下のバナーにある)

デザインだけではなくてその他のカスタマイズ(休日表示カレンダー等)も
沢山紹介してあり非常にわかり易かった為、テンプレートを
「小粋空間」でダウンロードして張り替えてみると、

3カラム(真中記事・左右にその他のもの)になって、多少ゴチャとした感じになるも
ノーマルよりはかなり良い感じになりました。^^
まずは、小粋空間で色合いをかえる為に色々探して、プロフィールページを作り
24時間以内の記事に”NEWマーク”が出現するようにして、
ブログ上部にナビゲーションバーを付けて、とごちゃごちゃやってみました。

しかしブログのデザインって何故かみんな同じ感じで、テキストで題名でてるけど
何とかここはやっぱり画像だろうと思い左上の”おっさんのブログ”タイトルロゴを
フォトショップで製作してアップした。(所要10分)
前にHP作ったときはスタイルシートは使ったこと無かったけど
こういった簡単な部品やタグは何とかわかるので良かった。

ブログ自体のカテゴリーが何とか見やすくしたくてカテゴリーのツリー化も導入するが
これはブログをはじめて間もない私には実際に表示されるまで丸3日ぐらい
掛かってしまったが、ツリー化成功によりかなり使い勝手よく
見たい記事がすぐに選べると思う。

途中途中でスタイルシートにある記載内容やHTMLタグがわからない時は
とほほのWWW入門 で探し
何とかしたり、小粋空間をソース表示したりして頑張ってみました。

カスタマイズはなかなか大変かもしれないですが、満足度も大きいです。
コツはやり方をゆっくり読みながら少しづつりかいしてゆっくり進める事と、
何かをさわる時は必ずバックアップをとって置く事です。

2006年09月08日
2006年09月08日

ブログ導入

ネットで検索していると無料サーバーのブログは重たく、広告等もチラチラしていて非常に見難かった為、何とか頑張ってサーバーにブログのスクリプトを置いてみました。
なかなかデータベースなど設定も難しくて動くまで1時間ぐらい掛かってしまった。。。

MovableType 3.3 の導入
1.まずはMovableType 3.3 のダウンロード 2.5MB 個人で商用で無ければ無料の様です。(アフリエイト程度の収入は問題無いと思います。)
2.ダウンロードしたスクリプトを解凍します。解凍ソフトが無い方はベクター等で無料で拾えます。
3.ダウンロードしたファイルは沢山なんですが設定をいじるのは mt-config.cgi-original というファイル一つだけです。これをメモ帳だと改行とか無茶苦茶で見難くて大変だからテキストエディタの秀丸で設定します。やり方はココ
4.FTPでアップして起動確認すれば終わり。(終わりかよ!)

なんだけど難しかったのは3の設定の部分で自分のサーバーのデータベース情報がわからないと引っ掛かるかも。私は30分程悩み引っ掛かりました。
mt-config.cgi-originalをmt-config.cgiに拡張子を代えてデータベース設定の

ObjectDriver DBI::mysql
Database    -1-
DBUser     -2-
DBPassword  -3-
DBHost     -4-

データベースmysqが使えるサーバの場合、lこの4つを設定しなければいけないのですが上から3つで大丈夫だと思ってアタフタしてしまいました。
詳しい設定方法等は色んな所で検索出来ますが、簡単と言えば簡単だけどこれと決まった方法がなく使用できるデータベース等によって難しいところがある為、本当のPC初心者と言う方には導入は大変だろうと思います。