http://www.asahi.com/business/update/0529/TKY201005290356.html まるでウィルスのようだ。むしろウィルスの方が監視ができるだけたちが良い。 折しもGoogleさんのSSLバージョンが出ましたね。いいことです。

avast! 5を入れました。日本語版の「アバスト！無料アンチウイルス」はあまりにもダサいので英語版の「avast! FREE ANTIVIRUS」を入れました。文字化けもすることなく快適に使えています。

今まで大幅に軽量化された（おそらくexe形式だったモジュールがdllになったため）事もさることながら、SSLで通信されるウィルスもスキャンできるようになったことが気に入りました。

メーラ→(平文)→avast!→(SSL)→サーバ
と、通信されているようです。

だから、もちろんメーラ側は平文で通信する設定にしとかないといけないわけです。
Thunderbirdの場合はツール>アカウント設定>サーバ設定
のセキュリティ設定のとこで保護された通信を使用しないにすると、いけると思います。
このとき、ポート995を設定していた場合はかってに110になると思いますがそれでいいです。

遊びでVMware Player 3.0RCとそれにUbuntuを入れてみました。Ubuntuに関しては予想に反してすんなり使えるようになりました。ただ、予め知っていたので覚悟はしていたのですが、現在使っているファイアウォールとの関係上通信の設定には手間取りました。

ちなみにVMware Playerは2.5（正式版）より3.0RCの方が良かったです。2.5は挙動不審だったので。でもRC版はもちろん人にはお勧めできませんので、普通長谷一子基盤を使いましょう。

Ubuntuを使ってみた感想ですが、つまらないほどに快適でした。インターネットやメールとか行った用途では困ることはないんじゃないかと思います。（無線LANの設定はしてないので、難しいのかどうかは分かりません。）

CPUはシングルコア、メモリは512MiBでも普通に動いてくれます。設定を変えたり、VMware Toolsをインストール（注：3.0RCでないとインストールできません）したりした感じでは堅牢性もなかなか良さげです。

これはもう乗り換えても良いんじゃないかと思って、普段使っている作業用アプリケーションを考えてみると、

• Mozilla Firefox (Ubuntuプリインストール)
• Mozilla Thunderbird (クロスプラットフォーム)
• Openoffice.org (クロスプラットフォーム)
• Maxima (クロスプラットフォーム)

こんな感じで、作業をするだけなら特に何の問題もなく移行できそうなことに気づいてしまいました。

ただ、問題はゲームなりその他の暇つぶし用ソフト達です。Ubuntu上で動かせるようにするとなると、せっかく（現状）ウィルスが少ないという利点が失われて悲しいことになりそうです。かといってUbuntu上で仮想PCを立ち上げてその中でわざわざGPUやらDirectXやら使いまくりなソフトをやるのも本末転倒です。

そんなわけでデュアルブートもしたくないので、Vista上の仮想PCの中でUbuntuを使うというわけになるのですが、流石にメモリ2GiB積んでるVistaの方がメモリ512MiBのUbuntuより幾分快適なので普段使うならVistaというわけになってしまうわけです。特殊な利用の場合を除いては。

でも、二代目パソコンに入れるのには有りですね。片方のパソコンが壊れたときにOSの違うパソコンがもう一台あると便利なので。

ちなみにGNU/Linux上でも.NETできます。よかったね。

Openoffice.org 3.0が正式リリースされましたね。

今回の更新でMS office 2007のファイルも開けるようになって嬉しい限りです。

あと、PDFの直接編集や使ったことは有りませんがExcellのVBAをサポートするといったことが更新内容です。

というか、ごちゃごちゃいじってる間にOpenoffice2.xがインストール出来なくなってしまったのが、3.0でインストール出来るようになったのが一番嬉しいかったりします。

ダウンロードは公式サイトだとか、他には日本語での利用に最適化されたwaoooだとか。VBAにかなり互換性の高いGo-oo、それにIBMのLotus Symphonyなんかが無料で手に入るOpenOffice系列では有名ですかね。

使ってみた感想ですが、起動も速くなったし、細かい操作性もよくなって良い感じです。

↓Openofficeの感想とか

• ITmedia
• マイコミジャーナル

ただ、OpenOfficeは画像やらテンプレートやらが少ないので、自分で素材をインストールしたほうがいいですね。

• 素材OOo拡張機能

この講座で、このページに初めて来られた方へ。本講座の目次があります。

画像を入れてみよう！

今回は画像を挿入してみましょう。

今回は前回の続きですので、前回アップロードしたファイルを用意してください。

• 親子丼の画像

そして、この画像ファイルをダウンロードします。右クリックして保存を押せば出来ます。

できたら、このファイルを「ウェブサイト作成講座」フォルダに保存するんですが、後々ファイルが増えてくると困るので画像と文書を分けて保存するようにしましょうか。

「ウェブサイト作成講座」フォルダの中に「images」というフォルダを作ってください。

その中に今ダウンロードしたoyakodon.jpgをぽいぽいっと放り込んでください。[基本ファイル操作編を後々開講予定]

それではreciepe1.htmlに、この完成した親子丼の写真を入れてみたいとおもいます。

いきなり画像挿入のタグを書いてしまいましょう。

<img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="90" height="120">

このタグを見て次の２つの事を疑問に思った人はもう既にHTML一級建築士です。

• あれ、開始タグだけなの？　終了タグは？
• このimgってのはブロックレベル要素なの？　それともインライン要素なの？

とりあえず、この辺りの疑問から解説していきましょう。

まず、imgタグですが、これは開始タグだけ書きます。気持ち悪いですね。まあ、</img>を省略しているって考えで間違ってないです。img要素は画像を表してるだけなので、それで囲む文字列は存在しませんからね。こんな感じでタグで囲む部分が存在しないから、開始タグだけ書く要素を空要素（からようそ）といいます。本来タグで囲むはずである部分が空（から）なので空要素です。

次に、img要素がブロックレベル要素かインライン要素かということに関しては、これはインライン要素です。ですから、実際にHTMLに書くときは

<p><img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="90" height="120"></p>

こんな漢字で適当なブロックレベル要素に含めてやる必要があります。

今回は画像を段落として使いましたが、画像を並べて箇条書きにしたい場合なんかは

<ul>
 <li><img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="90" height="120"><li>
</ul>

とすれば良いです。まあ、迷ったときはp要素でいいでしょう。

img要素の属性の解説

いよいよ、img要素の属性についてです。このうちalt属性ですが、これは絶対に書かなくてはいけない重要な属性なんですけれれども、説明が長くなるので最後に紹介します。

src属性

src属性は表示させる画像がどこにあるのかを指定します。src属性を書いておかないと、パソコンはどの画像を表示させていいか分からなくなっちゃうので必ず書いておかないといけません。

今回の例でいうとsrc="images/oyakodon.jpg"と、src属性の値がimages/oyakodon.jpgとなっていますね。

ここでの「/」は「～フォルダの」という意味です。今回「oyakocon.jpg」を「images」フォルダに入れたので「imagesフォルダのoyakodon.jpg」という画像を挿入してますよ、と言ってるわけです。忘れず書くようにしましょう。

また、リンクのときもそうだったんですが、他のサイトの画像を表示させたいときはsrc属性の値にURIを入れるといいです。Petanko.orgのバナーだったら

<img src="http://shed.petanko.org/banner/banner1.png" 
alt="Petanko.org" width="88" height="31">

こんな感じですね。さり気なくsrcの属性値以外のところも色々変わってますけど、後で説明しますので今は気にしない気にしない。

そんでもって、これはHTML自体とは関係ないのですが、他の人が作った画像や他のサイトの画像をこのように自分のサイトで表示させること（一般的には直（「じか」もしくは「ちょく」）リンクと呼ばれています）はマナー違反や場合によっては法律違反（具体的には著作権法違反）になり得ます。

ほとんどのサイトさんでバナー意外のが画像ははしたらダメよという方針をとっています。Petanko.orgでもバナー意外の画像は他のサイトからは表示出来ないように設定しています。

中にはバナーも直リンクしないように書いているサイトさんもありますが、この場合はバナーを保存して（右クリックでできます）自分のウェブサイトのフォルダに入れて利用してくださいということです。

直リンクしてもいいよとも、直リンクしたらだめとも書いてないサイトのバナーはどうすればいいかということは、ケースバイケースで分かりませんね。保存しておけば安全ということに間違いはありませんが......。

width属性とheight属性

width属性の値にはその画像の幅の大きさを、height属性の値にはその画像の縦の大きさを書きます。画像ファイルにマウスを合わせた状態で右クリックして、「プロパティ」とかそういう感じの言葉を選べば見られます。手持ちのWindows Vistaでは「右クリック→プロパティ→「詳細」と書かれたウィンドウの上の方のタブ→「イメージ」で区分されたところの「幅」と「高さ」で見ることができます。

「大きさ88×31」みたいに書いてる場合もありますが、その場合、普通は「（幅）×（高さ）」という順番です。逆に書いてる場合はトラップです。

これらは出来る限り書いた方がいいのですが、どうしても分からなかったというような場合は書かなくても特に大きな問題はおきません。

また、ここに書く値は「表示させるときの大きさ」であって、元の画像の大きさと同じである必要はありません。実際にrecipe1.htmlに次のように書いて結果を見比べてみましょう。

<p><img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="90" height="120"></p>
<p><img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="180" height="240"></p>

後のほうが幅も高さも２倍の大きさで表示されたことが分かるでしょう。

alt属性

alt属性はimg要素を使うときには必ず書く必要があります。これには画像が表示されない場合、代わりに表示される文字列を書いておきます。

画像が表示されない場合というのは、主に次のような場合を想定できます。

• サーバ（ウェブサイトを見るときにアクセスする先のコンピュータ）が混雑していて画像をダウンロードできなかった。
• 携帯電話などで画像を非表示にしている。
• 視覚障碍者が音声読み上げソフトや、点字ソフトを使って読んでいる。

こういう人が利用する情報だと言うことを考えて、内容を書かないと行けないところがaltの難しいところです。

実際色々な流派がありますので、この辺は自分のサイトの利用者層を考えて適当な書き方をすればいいと思います。代表的な例だけ挙げましょう。

見出しに画像を使っている場合

<h1><img （略）></h1>とすることで画像を見だしとして利用することができます。受け将棋研究室なんかがその例ですね。そのような場合はどんなaltの属性値をつければいいでしょうか。

これに「タイトル画像」なんて書いてしまうと、利用者はずっとそのページのタイトルすら分からないわけです。ですから、alt="受け将棋研究室"とタイトルそのものを代わりに利用出来るようにしておくのがいいわけです。

「注意！」「注目！」などと書かれた画像を段落の最初に置いている場合

これはalt="注意："等と書くのがいいかと思います。

グラフの場合

これは読みづらいことを覚悟の上でalt="○○についてのグラフ。2000年:101件。2001年：96件。......"と書いて行くしか無いと思います。

さて、それでは今回の場合はどうでしょうか？　写真の場合は文字で情報を伝えるのが難しいので一筋縄ではいかないんです。

alt=""

本文に関係のない画像なんかはalt=""と書くことが一般的です。例えば、HTML的に好ましくない例ですが見出しの前後に飾りの画像をいれて居る場合なんかは、alt="見出し用飾り"なんて書かれても読みにくいだけですからね。今回の画像も「ええい、できあがり画像なんかただの飾りじゃい。無くても材料も作り方も必要事項は全部あるじゃないか」と思う方はaltの属性値が空になります。でもあんまりおすすめは出来ません。

alt="親子丼のできあがりの画像"

HTMLの仕様書にも使われた形ですので、一番標準な書き方ではないかと思います。携帯とかで、画像が非表示にしてる人も画像の情報を読んで見たければダウンロードできるといった点がメリットです。ただ音声ブラウザの人には不完全な情報しか伝わらないかもしれませんね。

alt="おいしそうな親子丼ができました。"

「この画像は一体何を表現したいんだろう？　そうだ、できあがった親子丼の美味しそうな様子を伝えたいんだ。」という発想に基づいて書かれたもの。音声読み上げのとき、違和感のない文章になるメリットがありますね。ただ、携帯で見た人は「なにこの画像？」って思ったり、冗長になるという問題があるかもしれません。

alt="親子丼のできあがりの画像：おいしそうな親子丼ができました。"

じゃあ、どっちも書いちゃおうじゃないかという発想です。さっきの場合より更に冗長になるという問題がありますね。

このくらいの知識あれば、割と自由に画像を入れられる事ができるのではないかと思います。また、

<a href="http://petanko.org/" title="ウェブサイトPetanko.orgを参照"><img src="http://shed.petanko.org/banner/banner1.png" alt="Petanko.org" width="88" height="31"></a>

とすれば、画像から他のページにリンクを張ることも出来ます。このようなことをする場合、alt属性に適切な情報を入れて画像を見ることが出来ない人が迷わないように配慮する必要があるでしょう。また、この例のようにリンクのa要素にtitle属性を書いておくとリンク先について詳しい情報を記すことができるので利用すると便利になるかもしれません。

この講座で、このページに初めて来られた方へ。本講座の目次があります。

リンクの張り方

今回はリンクを張って見ましょう。この回では前回までに作業を進めていたファイルが必要です。まだ作ってない人の為に前回まで進行したファイルを用意しておきましたので、ダウンロードしておきましょう。

まず、リンクとは何かということについて説明しましょう。リンクとは、ウェブ上の情報の繋がりのことです。さらに、この繋がりの特徴として方向性がある、つまり一方通行の繋がりであるということがあげられます。

文字列 → 文書、画像、動画、その他

こんな感じですね。文書中のある画像から矢印が延びていって目的地の情報へと繋がっていくイメージです。そして、その矢印の根本をリンクの始点、矢印の伸びた先をリンクの終点といいます。

それでは実際にリンクを張って見ましょう

同一サイトでのリンクの張り方

まず、第２回で作った日記から第３回で作った日記にリンクを張って見ましょう。

メモ帳でnikki1.htmlを開いてください。[ここに開き方の説明へのリンクつけるかも]

リンクを作る場合にはまず、始点と終点を考えます。今回はnikki1.htmlにある文字列「親子丼」を始点として、recipe1.htmlにリンクを張って見ましょう。それでは、実際に作業するところを抜粋してみますね。

親子丼 → recipe1.html

まず、始点に要素「a」を与えてやりましょう。

<a>親子丼</a> → recipe1.html

こうですね。次に、このa要素にリンクの終点を教えてやります。

<a href="recipe1.html">親子丼</a> → recipe1.html

今までに見たことのない記号が出てきました。この例のhrefをa要素の属性といいます。

hrefはハイパーリファレンス属性の略ですね。超意訳すれば「すっごく便利に参考文献が見られるよ属性」てなとこです。

href="recipe1.html"の""で囲まれた部分であるrecipe1.htmlをhref属性の値だとか、属性値だとかいいます。

属性と属性値は今後良く出てくるので覚えておきましょう。まとめると、

<要素 属性="属性値"></要素>

となります。属性をつけるのは開始タグだけでOKです。というか、終了タグにつけてはいけません。

リンクの場合は

<a href="終点のファイル名">リンクの始点</a>

と書いておきましょう。

何はともあれリンク一つが完成しました。できたHTMLはこんな感じです。

<p> 今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>
<p>そして、朝ご飯（＝昼ご飯）に<a href="recipe1.html">親子丼</a>を食べました。</p& gt;

他のサイトにリンクを張ろう

自分のサイトのページにリンクが張れたら次は、他のサイトにも張りたいですよね。とりあえず、Petanko.orgのトップページにリンクを張る方法を考えてみましょう。

ここで悩むのはリンクの終点の記入方法です。ウェブ上にある大量のファイルから、他のサイトのページをただ一つに特定する記述であるURIを使います。ウェブページを見ているときウィンドウのどこか（多分上の方）に「http://」から始まる文字列がありませんか？　それがURIです。URLだとかアドレスとも呼ばれてますね。

このURLをhref属性の値として、リンクを張ればいいです。Petanko.orgに張りたければ、リンクの始点が文字列「Petanko.org」、終点が「http://petanko.org/」ですから、

<a href="http://petanko.org/">Petanko.org</a>

こうなります。

注意

ここで注意が一つあるのですがa要素の中にa要素は入れられません。

<p><a href="url 未定"><a href="http://petanko.org/"> Petanko.org</a>のウェブサイト作成講座にようこそ！</a>< /p>

このようなリンクの張り方は不正です。これからリンクを張りたければ

<p><a href="http://petanko.org /">Petanko.org</a>の<a href="url未定"& amp;gt;ウェブサイト作成講座にようこそ！</a></p>

このような感じにしましょう。

強調

a要素を習ったついでに、これよりも簡単な強調の仕方について覚えちゃいましょう。ここまで来た皆さんには簡単です。

強調をしたいところの要素はemです。そして、強い強調をしたいところの要素はstrongです。特に属性は必要なく、これらの要素のタグをつけてしまえばおわりです。

さらに、このemやらstrongは重ねがけができて、

<p> 普通のところ<em>強調したいところ<em>もっと強調したいところ</em></em></p>

だとか、

<p> 普通のところ<em>強調したいところ<strong>めちゃくちゃ強調したいところ<em>死にそうなくらい強調したいところ</em>< /strong></em></p>

ただし、以前説明したのと同じように[!シラバスの変更必要有!]emの袋もstrongの袋も破れちゃだめで、

<p> 普通<em>強調<strong>もっともっと強調</em> もっと強調</strong>普通</p>

こういう風に書いたらだめです。こんな感じで強調させていきたかったら、

<p> 普通<em>強調<strong>もっともっと強調</strong></em><strong>もっと強調</strong>普通</p>

このように書くといいですよ。

インライン要素について

今回a、em、strong要素について学びましたが、この性質は今まで習った他の要素の性質とは異なります。ですから、これらの要素をインライン要素といって前回習ったブロックレベル要素とは区別します。

段落や箇条書きと、このaやem、strong要素の違いについて比較してみましょう。

ブロックレベル要素は文章を基本的な構造として分類するものです。

ですから、ブロックレベル要素の始まりでは行が、新しい行に移っていると思います。

このように、文章をページの端から端まである長方形、つまりブロックで囲まれるように分類するという特徴があります。

これに対して、a、em、strong要素はブロックレベル要素が作った基本的な構造に肉付けする役割を持っています。

段落などの基本的な構造は誰がマークアップしても同じような仕上がりになりますが、リンクや強調といった肉付けは作者によってばらばらの結果になります。インライン要素は作者の主観によってつけられるというのもインライン要素の特徴の一つですね。

さて、このインライン要素ですが、インライン要素は全てブロックレベル要素の中に無いといけません。文章の骨組みの前に肉付けがあるとおかしいですからね。つまり、

<p><a href="終点のURI">始点の文字列</a></p>

はＯＫですが、

<a href="終点のURI"><p>始点の文字列</p></a>

こういうのはNGです。

作る順番としても、まずブロックレベル要素で骨組みを完成させてからインライン要素で肉付けさせるように心がけましょう。

このたびトップページを改装したんですが......またしてもＩＥですか。
ここまで僕に喧嘩売りますか。
そんなに僕が憎いですか。
Firefox、Opera、Safariは普通に見れてるのに、IE......
なんなんだお前......という事で調べてみた結果がこちら。
li要素の子孫にリスト要素があるとリストマークが上方にずれる
そうですか。マイクロソフトは2003年に見つかってるバグを未だに直さないんですか。
今までＩＥでもちゃんと見られるように配慮してサイト作ってきましたが。もう無理です。回避策も思いつきません。
というわけで、IEでは全く表示されない版のトップを作ってみました。これですっきり。
IEと他のブラウザで見比べて見ると愕然としますよ。
（このリンクはそのうち消されると思います。）
以下IEのダメな点。
・Firefox、Opera、SafariはHTML(+CSS)もXHTML（+CSS）も表示できるのに、IEはHTML(+CSS)しか表示できない。
・そのHTML（+CSS）でさえも正しく表示できない。

まあ、致命的な表示になったらあれですが、多少変なぐらいだからいいでしょう。IE8になったら多分直るとおもうし...

この講座で、このページに初めて来られた方へ。本講座の目次があります。

注意：講座を書く順番が前後したため、講座４は未公開ですが内容は既習のものとして書いています。ご了承ください。

正式なHTML

「そろそろHTMLにも慣れて来たかな？」と思うのでここらで正しく読みやすいHTMLの書き方を学んでおきましょう。

「今までのは正しく無かったのか！」と怒られそうですね。確かに間違っては居ないのですが、ちょっとカタコトな感じのするHTMLです。

それに間違えがちなポイントもいくつかあるので、そのことにも触れて起きたいのです。

ブロックレベル要素はbody要素にいれよう！

body要素とは実際の文章の表示される部分そのものが含まれる要素です。

前々回で学んだブロックレベル要素、これらは全てbody要素の中に入っていなければなりません。そして、逆にbody要素のすぐ中にはブロックレベル要素しか入る事ができません。前回の講座でインライン要素はブロックレベル要素の中にだけ書くことを習いましたね。

title要素はhead要素にいれよう！

head要素は文章として直接表示するわけではない、文章に付随する情報が含まれます。

残ったtitle要素をhead要素の中に入れておきましょう。そして、head要素はbody要素よりも前に記述しておきましょう。

title要素はブラウザのタブや、タイトルバー、お気に入りの名前として表示されます。

html要素にhead要素とbody要素をいれよう！

そうして出来たhead要素とbody要素をhtml要素の中に入れます。すると、html要素の外に有るのはドキュメントタイプの宣言のみになるはずです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

 <head>
  <title>タイトル</title>
 </head>
 
 <body>
 <h1>見出し</h1>
  <p>本文</p>
 </body>
 
</html>

こんな感じですね。逆に、ここもhtml要素の中にはhead要素とbody要素しか入れることができません。

ところで、この例のhtml開始タグに変な属性がついてますね。なんか「lang="ja"」と書いてあります。これは、このhtmlが日本語の文章の属性をもっていますよ、ということです。

HTMLの論理構造

なぜこんなややこしいことをするのか。HTMLは文章に構造を持たせることで文章を意味づけしているからです。

HTMLの要素を、文章の一部分を入れる袋みたいなものだと考えましょう。

まず、大きなhtmlという袋があります。これを開けると、headとbodyというタグのついた袋があります。

headは文章の情報が入っている袋ですので、こっちの袋を先に開けてみましょう。titleの袋が入っていますね。titleの袋を開けてみるとこの文章が何について書かれているのか分かりました。

次に、bodyの袋を開けてみましょう。bodyには文章の本文が入っています。色々袋はありますが、とりあえず「ul」という袋が有りました。これは......覚えていますか？　「順序の関係のないリスト」が入っていますね。

liという袋を開けるとリストひとつひとつの内容が入っていました。

このよう、小さい袋が大きい袋にすっぽり収まっていく構造がHTMLの最大の特徴です

ですから次のような構造は、正しいHTMLとは認められません。

<p>なんか文章<a>なんか文章</p>なんか文章</a>

なんか袋が破れちゃってますね。こんな袋はカラスの格好の標的になってしまうので気をつけてください。

その他、説明しきれなかったこと

他にもちょこちょことしてはいけない決まりが有ります。これはきちんとルールを覚えようとすると大変なので、ここでは大ざっぱに「これを守っておけば大丈夫」という感じのルールを選んでおきます。

タグの要素名（titleとかpとかh1とか...）は半角小文字で書こう！

昔は大文字と小文字を区別しないことになってたので、大文字で説明してる先生も多いです。でも、最近新しくできたバージョンでは小文字で書くように決められていますので、みなさんは今から小文字で書く癖をつけておきましょう。

箇条書きは「ulやol」の中に「li」が入るけれど、その他のブロックレベル要素にはブロックレベル要素をいれない！

<p>なんか文章<p>何か文章</p>何か文章</p>

段落の中に段落が......よく分かりませんね。謎文章です。その他見出しの中に見出しだとかも謎文章です。こんな謎文章は書けません。

HTML中にコメントをつけることも出来ます。

<!-- コメントの内容 -->という記述でHTML中にコメントを書き込むことができます。

Another HTML-lint gatewayで文法チェック！

これだけの複雑なルールがあるのに全てを正確に書くなんてとてもない......。そんな心配もあるでしょうが大丈夫です。世の中にはAnother HTML-lint gatewayという素晴らしいサービスがあって、これはなんと自分が書いたHTMLをチェックして点数をつけてくれるのです。ただ、まだ今の知識では１００点を取ることは出来ません......。「よくできました」と評価がでたらまあOKでしょう！

章末問題

未制作。間違いを正して貰う問題でも作ろうかな......。

この講座で、このページに初めて来られた方へ。本講座の目次があります。

今回は料理のレシピを作ってみましょう！

料理のレシピを用意するのが面倒臭かったのでタケピーさんからネタをお借りしました。

今回マークアップするのはこんな文章です！

今日のごはん

品目

• 親子丼

材料

• 鳥ムネ肉60gくらい
• 玉ねぎ半分くらい
• 鶏卵一個
• ミックスベジタブル（冷凍食品）適量
• 水60cc
• 砂糖8g弱
• 醤油15cc
• めんつゆ少々

作り方

1. 肉と玉ねぎ切って、水とかとあわせて煮る
2. 溶き卵を入れて弱火
3. 火を止めて煮る
4. ご飯にかける
5. ウマー

費用･手間

案外楽に、安くできました。

その他

久しぶりにご飯らしいものを作った。美味しいです。ただ、残った鶏肉と玉ねぎどうしようかな......また親子丼かな～。

今回はこの前の文章とはひと味違いますね。

この前は「タイトル」と「段落」の２種類にしか分類しませんでした。今度は他に何が有るでしょうか？　「見出し」と「箇条書き」そして、「順番が関係する箇条書き」です。

つまり、見出しなどのタグの書き方を学べば、同じような文章が書けるようになるはずです。

というわけで、見出しのタグから学んでいきましょう！

見出しのタグ

見出しのタグには<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>の６種類があります。

あるページの中で一番大切な見出しにh1をつけます。通常h1の見出しはページに１つだけあって、タイトルと似たような内容になると思います。

そして、２番目に大きな見出し、３番目に大きな見出し......と順番にh2,h3......を使います。

今回の例では、「今日のごはん」がh1、「材料」「作り方」「手間･費用」「その他」がh2だと見ることができそうです。h3より小さい見出しはありませんね。

箇条書き

箇条書きなHTML用語では「リスト」といいます。......よくよく考えたら、日常用語でもリストですか。

そんでもって、リストには「順序無しリスト」と「順序付きリスト」とがあります。これらを一遍に解説していきましょう。

まず始めに、この２つのリストはそれぞれどんな時に使うかを見ていきましょう。

順序無しリストはその名の通り、順序の関係のない箇条書きに使います。この例では「材料」がそれに当たりますね。材料をそろえるのに順番は必要ありませんからね。

順序有りリストは、順番が大切な内容のリストを作るときに使います。この例では「作り方」がそうです。ご飯にかけて食べた後で弱火に掛けたら、えらことになりますよね。

それぞれのリストの使う場面が分かったところで、実際の使い方を見ていきましょう。

リストは、順序の有無に関わらず<li>と</li>で囲みます。その例は

   <li>鳥ムネ肉60gくらい</li>
   <li>玉ねぎ半分くらい</li>
   <li>鶏卵一個</li>
   <li>ミックスベジタブル（冷凍食品）適量</li>
   <li>水60cc</li>
   <li>砂糖8g弱</li>
   <li>醤油15cc</li>
   <li>めんつゆ少々</li>

と

   <li>肉と玉ねぎ切って、水とかとあわせて煮る</li>
   <li>溶き卵を入れて弱火</li>
   <li>火を止めて煮る</li>
   <li>ご飯にかける</li>
   <li>ウマー</li>

です。

そして、この作業をした後に順序がない方の全体を<ul>と</ul>で、順序が有る方の全体を<ol>と</ol>で囲みます。例を見せましょう。

  <ul>
   <li>鳥ムネ肉60gくらい</li>
   <li>玉ねぎ半分くらい</li>
   <li>鶏卵一個</li>
   <li>ミックスベジタブル（冷凍食品）適量</li>
   <li>水60cc</li>
   <li>砂糖8g弱</li>
   <li>醤油15cc</li>
   <li>めんつゆ少々</li>
  </ul>

  <ol>
   <li>肉と玉ねぎ切って、水とかとあわせて煮る</li>
   <li>溶き卵を入れて弱火</li>
   <li>火を止めて煮る</li>
   <li>ご飯にかける</li>
   <li>ウマー</li>
  </ol>

どうでしょうか。

ところで、<ul>と</ul>の間や、<ol>と</ol>の間には<li>と</li>で囲まれた部分しかあってはなりません。

<ul>
 <p>段落だよ～</p>
 <li>箇条書きだよ～その１！</li>
 <li>箇条書きだよ～その２！</li>
</ul>

こういうのは御法度です！

そして、品目にある「親子丼」ってやつですが、ここではリストが一個しかない「順序無しリスト」であると解釈しました。ここは段落だという解釈も有りだとは思うんですが、品目が二つ以上あるときもあったらどうでしょう？　箇条書きにしますよね。そして、２，３個品目が合ったとしても順序はそれほど大事ではありません。あ、もちろんレストランのコースなんかは別ですよ。

そして、残った部分「案外楽に、安くできました。」と「久しぶりにご飯らしいものを作った。美味しいです。ただ、残った鶏肉と玉ねぎどうしようかな......また親子丼かな～。」は前回出てきたただの段落ですから、<p>と&li;/p>で囲んで起きましょう。くり返し言いますが、文書の全ての部分を必ず何かの種類に分類してください。見出しでも箇条書きでも無いからって宙ぶらりんにしていてはいけません。まよったら段落って事にしておきましょう。

こうして、料理のレシピの全体像ができました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>今日のごはん</title>
 <h1>今日のごはん</h1>
  <h2>品目</h2>
  <ul>
   <li>親子丼</li>
  </ul>

 <h2>材料</h2>
  <ul>
   <li>鳥ムネ肉60gくらい</li>
   <li>玉ねぎ半分くらい</li>
   <li>鶏卵一個</li>
   <li>ミックスベジタブル（冷凍食品）適量</li>
   <li>水60cc</li>
   <li>砂糖8g弱</li>
   <li>醤油15cc</li>
   <li>めんつゆ少々</li>
  </ul>

 <h2>作り方</h2>
  <ol>
   <li>肉と玉ねぎ切って、水とかとあわせて煮る</li>
   <li>溶き卵を入れて弱火</li>
   <li>火を止めて煮る</li>
   <li>ご飯にかける</li>
   <li>ウマー</li>
  </ol>

 <h2>費用･手間</h2>
  <p>案外楽に、安くできました。</p>

 <h2>その他</h2>
  <p>久しぶりにご飯らしいものを作った。美味しいです。ただ、残った鶏肉と玉ねぎどうしようかな......また親子丼かな～。</p>

どうでしょう？　ところで、これを見てスペースや改行に気づいた人もいるかと思います。このように複雑にマークアップするときはまとまりごとに改行を入れたり、半角スペース（全角はだめ）を入れると見やすい場合もありますよ。この改行なんかは実際表示される時には全て無視されます。

では今回作ったこのファイルも「ウェブサイト作成講座」フォルダに「recipe1.html」という名前で保存しておきましょう。

作業が一通り終わったところで、少し解説をしておきましょう。

今まで「分類」とか「種類」だとか言ってきた、タイトル「title」や段落「p」、見出し「h1～h6」、リスト「li」、番号無しのリストを囲う「ul」、番号次のリストを囲う「ol」などは全て正式には「要素（element)」と言います。

文章とは「段落」や「見出し」や「箇条書き」といった要素が集まって成り立っているんだな～とイメージしてください。

そして、どんな要素が含まれているかをパソコンに教えてあげる道具が「タグ（tag）」です。お店の洋服についてるタグは店員さんに値段を教えてあげますが、それと同じでHTMLのタグはパソコンに要素を教えてあげているのです。

また、実は今まで教えてきたタグはtitle要素意外全て「ブロックレベル要素」という要素でした。ブロックレベル要素とは、見出しだとか段落みたいに文書全体をブロックにして分類する要素です。今はブロックレベル要素しか知らないから「？」という感じだと思います。でも次回「ブロックレベル要素」意外の要素も出てくるので、そのときにピンとくるはずです。乞うご期待！

今回のまとめ

1. 文章がどんな要素で出来ているか考えよう！
2. その要素を示すタグをつけよう！
3. タイトル、見出し、段落、順序のない箇条書き、順序のある箇条書きの要素を習ったよ！
4. そのうちタイトル以外の要素は「ブロックレベル要素」っていう名前。

章末問題

今日は沢山要素が出てきて結構忘れやすいとおもいます。問を解いて着実にマスターしていきましょう！

1. 問１．次の括弧の（ア）～（コ）に入る言葉や数字を書き入れなさい。

   文書は、タイトルや段落、見だし、箇条書きといった、様々な（ア）から構成されている。これら（ア）のうち、タイトル意外の物を（イ）という。文書中のどの部分がどの（ア）であるかをパソコンに示す為に（ウ）を用いる。

   見出し（ア）には（エ）から（オ）までの（カ）種類あって、その文書中で最も重要な見出しが（エ）、最も小さな見出しが（オ）である。

   また、段落要素はアルファベット（キ）を（ウ）の中に書き示し、同様にリストは（ク）と書き示す。そして、順序のある箇条書きはリスト全体を（ケ）要素のタグで、順序の無い箇条書きなリスト全体を（コ）要素のタグでくくる。

2. 問２．タケピーさんのブログの2008年9月19日のレシピをマークアップしてみよう。できたら、「ウェブサイト作成講座」フォルダに「recipe2.html」という名前で保存しておこう。（解答未制作）
3. 問３．前回の講座であなたが作ったレシピをマークアップしてみよう！できたら、「ウェブサイト作成講座」フォルダに「recipe3.html」という名前で保存しておこう。

Petanko.orgのプロジェクト第二弾の先行公開版です。まだ構成は練ってませんので多少分かりにくいです。

ただいまPetanko.orgでは本講座の改良の為、フォーラムにて意見を募集しております。「～の部分が分かりにくい」だけでもいいので書き込んでくれたらうれしいです。

～ウェブサイト初級編。知識０から公開まで～

パソコンを自分一人で起動して、このブログを見ることができる人を対象としています。それでも多少難しいかもしれないので不安名人はパソコンが出来る人に横で見ていてくれるように頼むといいかもしれません^^;　ここが分からないよ！と思ったらフォーラムにご意見よろしくお願いします。

この講座では、全１０～１５回程度で簡単なウェブサイトが作れるようになるまでを、最低限の理論と知識だけで説明することを目的としています。

1. 前書き（構成中）
2. 講座１．ウェブサイト作成前の準備
3. 講座２．日記を作ってみよう！
4. コラム１．そもそもなんでＨＴＭＬなんかいるのよ
5. 講座３．料理のレシピを作ってみよう！
6. 講座４．リンクを張ろう！　画像を入れてみよう！（次回公開予定）
7. 講座５．正式なHTML
8. 講座６．公開してみよう！（次々回公開予定）
9. 講座７．文書のヘッダー
   
10. 講座８．デザインしてみよう！
11. 補講１．応用編！　ちょっと特殊なブロックレベル要素
12. コラム２．デザインが面倒臭いです。
13. 番外編１．掲示板をレンタルしよう！　カウンタを設置しよう！

～ウェブサイト制作中級編～
この講座では自分の好きなようにウェブサイトを制作するために必要な知識を学びます。
また、専門用語も学び、他の方の説明を読んでも違和感なく理解できるようになることを目指します。

～ウェブサイト制作上級編～（難しすぎる為Celtの力で制作出来るかは不明）
この講座では、視覚、聴覚に障碍を持ったかたでも、ストレスなく閲覧できるようなサイトを目指します。
Celt独自の哲学を多く含みますので、自らで取捨選択の必要な情報が多く含まれるとおもいます。

本講座の目次があります。

ウェブサイトを作る前の準備

ウェブサイトを作る前に、いくつか知っておかないといけない知識があります。

既に出来る人は読み飛ばしてくれてＯＫです。

・用語について

以下の用語は良く使うので、出来る限り覚えておきましょう。

ウェブページ

いわゆるインターネット（正式には、ワールドワイドウェブ)上にある文書のこと。

ウェブサイト

ウェブページがいくつか集まった物で、全体として一定の内容をもっているもの。これからこれを作ります。

ファイル

パソコンで作った内容を保存するときの単位です。

フォルダ（ディレクトリともいう）

ファイルがいっぱいあると見難いので、フォルダにを用いて分類、整理をします。

ファイルとフォルダはイメージしにくいので少し説明を加えます。

あなたの家に本やCDやDVDがごった返してあるとします。この本やCDなどが、データの保存単位であるファイルだと考えましょう。

数がとてつもなく多いので、とりあえず本を仕舞う部屋と、CDを仕舞う部屋とDVDを仕舞う部屋に分けましょう。これらの部屋がフォルダにあたります。

さて、その「図書室」や「CD室」「DVD室」と名付けたフォルダに整理されましたが、それでも本の数は多くて探しにくいです。そこで図書室の中に本棚を作って「小説」「実用書」と名前をつて整理しましょう。

これもフォルダです。つまり、フォルダのなかにはフォルダも入れることができます。そしてフォルダには自分の好きな名前をつけて整理することができます。

・メモ帳の起動方法

スタートボタン（左下の旗の形のボタン）をクリック
→すべてのプログラムをクリック
→アクセサリを探してクリック
→メモ帳をクリック

・コピー＆ペースト

ウェブサイトにある文字列は、好きなところをコピーしてメモ帳などに貼り付けることができます。

河童の川流れ。

↑の文字列を使って試して見ましょう。

まず、ウェブサイト上のコピーしたい部分の最初のところにマウスを置いて、マウスの左のボタンを押してください。この例では「河童」の「河」の左端です。

そのボタンを押したまま、コピーしたい部分の終わりまで、マウスを動かします。この例では「流れ。」の「。」の右端です。そして、マウスの左ボタンを放します。

すると、「河童の川流れ。」の文字の色が反転したと思います。

次に反転した部分にマウスをおいて、マウスの右のボタンを押します。するとメニューが出てきますので、「コピー」を選びます。

次にメモ帳を起動します。そして、さっきの「河童の川流れ。」を貼り付けたい場所にカーソル（|←こんなのが点滅してるやつ）を持って行きます。ただし、今は起動してすぐですから、貼り付ける場所を選ぶ意味は有りません。既に文章を書いている場合に有効です。

そして、マウスの右のボタンを押して「貼り付け」を選びます。

・拡張子の表示

今まではパソコンの使い方でしたが、今度はちょっとしたパソコンの設定です。

パソコンを買ったままの状態ではファイル名を省略して書くようになっています。

買ったままの状態で、メモ帳で「私のファイル」という名前のファイルを保存したとすると、その本当のファイル名は「私のファイル.txt」です。

「.txt」が何かという説明は後でしますが、とりあえずウェブサイトを作る上ではこれが見えないと何も出来ないので、表示するように設定を変えます。

設定方法はWindows XP以前とWindows Vistaとで分けて説明しますね。

見分け方ですが、画面左下に旗のマークと「スタート」というカタカナが書いてあればXP以前で、旗のマークだけならVistaです。

XP以前の方

スタートボタン
→マイ　コンピュータ
→メニューバーの「ツール」
→フォルダオプション
→出てきたウィンドウ上部にある「表示」
→詳細設定のところの右の方に、見る場所を上下にずらすためのバーがありますのでそれを一番したにずらす。
→下から三番目にある「登録されている拡張子は表示しない」ってところのチェックを外す。
→一番下にある「OK」ボタンを押す。

Vistaの方

スタートボタン
→マイ　コンピュータ
→キーボードの「Alt」キーを押す。（普通は一番下の段のやや左側にあります）
→メニューバーの「ツール」
→フォルダオプション
→出てきたウィンドウ上部にある「表示」
→詳細設定のところの右の方に、見る場所を上下にずらすためのバーがありますのでそれを一番したにずらす。
→下から三番目にある「登録されている拡張子は表示しない」ってところのチェックを外す。
→一番下にある「OK」ボタンを押す。

以上です。

さて、ここで「私のファイル.txt」の「.txt」は何なのかということを学びましょう。パソコン初心者を脱出するためには必須の知識です。

ファイル名のドット「.」より、右の部分を拡張子といいます。パソコンはファイル名の拡張子を見て、そのファイルが画像なのか文章なのか音楽ファイルなのか......だといったことを判別しています。

つまり、この拡張子によってそのファイルを開くソフトを決めているのです。

メモ帳で作ったファイルには拡張子「txt」がつけられますが、私たちはウェブサイトを作っているのでこれをウェブページとしてウェブブラウザを使って開きたいのです。ですから、このファイルの拡張子をウェブページを示す「html」とするためにパソコンの設定を変更しました。

本講座の目次があります。

僕があまりにもコンテンツを作らなすぎたため、最近ottfoekstに蔑まれてきました。というわけで、しぶしぶマークアップ講座を開始しようと思います。ただ不定期 ですので、記事が溜まるまで期待しない方がいいです。のちのちのコンテンツの下書きみたいなもんです。あと、初心者向けなことを考えてWindowsユーザーを想定しております。

はい、それでは早速第２回の講座に入って行きましょう。

その１．いきなり作るその前に

ちょっと準備をしましょう。デスクトップ（パソコンに起動したときに見える、壁紙があったりアイコンとかが並んでいる画面）に新しいフォルダを作ります。それでは、デスクトップを表示してください。

今見てるこのページが邪魔で見えないって方いますか？　もし、それで困っていたら、次の作業を最後まで読んでから試してみてください。まず、右上に３つ並んでいるボタンの左端を押せば隠れます。そして、画面下に「[未完成版]ウェブ...」と書いているところを押せば元に戻ります。他のウィンドウも同じ操作で隠したり戻したりできます。

それでは、デスクトップの何もないところにマウスを持って行ってマウスの右のボタンを押しましょう。するとメニューが出てきますので「新規作成」→「フォルダ」としフォルダを作ります。「新しいフォルダ」もしくは「新しいフォルダ（数字）」という名前のフォルダが出来ましたね？　そのサイトに「ウェブサイト作成講座」と名前をつけてください。パソコンに詳しい人はそのフォルダを好きなところに移動してくれて結構です。

これから作るファイルは全てそのフォルダに保存していきます。

その１．とりあえず１ページ作っちゃおう！

いきなり実践です。今回は作ったページを自分のパソコンで見るところまでやっちゃいましょう。公開は第５回ぐらいかな？　多分。

まあ、なんにしてもウェブサイトを作るには文章がいるわけです。今回は練習用に僕が書いておきました。

今日の日記

今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。

そして、朝ご飯（＝昼ご飯）に親子丼を食べました。

まあ、短いですがこんなのでいいです。これを、メモ帳にコピーしてみてください。

次に、この文章を次のように分類していきます。

<ここからタイトル>今日の日記<ここまでタイトル>

<ここから段落>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。<ここまで段落>

<ここから段落>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。<ここまで段落>

ええと、分類というのは分かりにくいでしょうが、例を見れば分かっていただけたでしょうか？　この記事では「タイトル」と「段落」だけですが、他にも「表」「箇条書き」とか色々あります。

ここで、重要なことを２つ言います。

まず、全てのウェブページにはタイトルを必ず一個つけないとけません。１個もなくても２個以上あってもダメです。世の中に何について書かれているか分からない文章ほど奇妙なものはありません。

そして、もう一つ。どこにも分類されていない、仲間はずれの部分を作ってはなりません。どこにも属さないということは、何にも意味を持たないということと同じですので文章中には無いはずです。デザイン上必要なものが含まれてるのかもしれませんが、それはまたいつか対処法を述べます。

これで文章を分類することができたのですが、これを機械の言葉に翻訳しましょう。難しいことではないので、安心してください。

<title>今日の日記</title>

<p>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>

<p>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。</p>

この例を見ながら機械語を解読していきましょう。「<title>今日の日記</title>」に注目してください。タイトルにしたい文字の前後が<title>と</title>で書かれています。さっき分類したやつと見比べると<ここからタイトル>は<title>に、<ここまでタイトル>は</title>に変わってるだけのようです。

同じく段落のところも見ていきましょう。段落にあたる部分を<p>と</p>で囲んでいますね。pはparagraph（英語で段落）の省略です。

つまり、<分類>の部分からその分類の部分が始まっていて、</分類>のところでその分類の部分が終わっていることが分かります。ですから、<分類>を開始タグ、</分類>を終了タグといいます。そして開始タグと終了タグを合わせてタグといいます。

さて、これでウェブページを作る作業は殆ど終了したのですが、大きな問題が発生しました。<title>だとかごちゃごちゃと書きましたが、世の中には<分類>ほげほげ</分類>という形でパソコンにメッセージを与えるファイルがたくさん有るのです......。この書き方は色んなものを指定するのにかなり便利なのでね。

もしかしたら、このファイルがウェブページだと思ってくれないパソコンも有るかもしれません。なんとかして、このパソコンにこのファイルがウェブページであるということを宣言しないといけません。

そこで、文章の頭に

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
と書いておきます。
えっと、これは覚えなくていいです。めちゃくちゃややっこしいですし、必要なときにここからコピーしてくれればＯＫです。
ただ、一応知りたい人の為に、これを日本語に翻訳すると
「この書類の形式（DOCTYPE)はHTMLという形式のバージョン4.01です。W3Cという人がこの仕様を考えて、その仕様は英語(EN)で公開(PUBLIC)されています」
というような感じです。

んでもって、さっきさらっとHTMLと書きました。そう、今書いた機械語はHTMLと呼ばれるものです。よく使う言葉ですので覚えておきましょう。そして、できあがりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>今日の日記</title>
<p>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>
<p>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。</p>

このように、宣言やタグをつけることを文章をマークアップすると言います。

最後に、これを保存します。最初に作った「ウェブサイト作成講座」フォルダに「nikki1.html」という名前で保存してください。そして、できたファイルをダブルクリックして開きます。

今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。

そして、朝ご飯（＝昼ご飯）に親子丼を食べました。

と表示されていたら、成功です。次のステップに進みましょう。タグがそのまま表示されてたら、どこか設定がおかしいです。パソコンの設定（主に拡張子関連）を見直してみましょう。

その２．まとめ

• HTMLという言語をつかってウェブページをつくる
• HTMLには<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">というドキュメントタイプの宣言を一番最初に書いておく。
• 開始タグ<分類>と終了タグ</分類>を併せてタグという。
• タグを使って文章を分類する。
• titleタグは文章中に必ず一つ必要！
• タグによって分類されていない部分があってはならない。
• 文章にタグや宣言をつけることをマークアップするという。
  

その３．問題（やらなくても問題ないです）

問１．以下の文章を、今日習ったタグなどでマークアップしてウェブページを作ってみよう。

40000Hit!

本日Petankoのアクセスが40000ヒットを迎えることができました。

いつもご愛読ありがとうございます。

次はキリ番44444ヒットが待っています。だれが、この縁起の悪い数字をとり見事死亡フラグを立てることができるのでしょうか。楽しみですね。

では、みなさん！　はりきって44444を奪い合いましょう！

問２．自分の日記を書いてみよう。また、その日何を食べたかについて触れておこう。

問３．問１でつくった日記に自分でタグをつけてみよう。できたら、「ウェブサイト作成講座」フォルダに「nikki2.html」という名前で保存しておこう。（答えはまとめを参考に）

問４（予習）．日記で書いた食べ物について、作り方を簡単にメモっておこう（想像でもＯＫです）。パソコンに画像を取り込む技術のある人は、その食べ物の写真をとっておくとなおいいです。

Continue reading

Continue reading

メルアドjtr@ma.akari.ne.jpが来年までにお亡くなりになります。

何気に影響範囲でかいと思われますので、心当たりの有る方は適当に消しておいてください。
代わりのアドレスは決めかねております。んでもって、決めてもここでは公表いたしません。

微分も積分も微分方程式もグラフもこれ一つでばっちりだ。

是非ともみんな使おう。

下手したらウィルスより恐ろしいのに、知名度は未だちょっと低めなマルウェアについて。

気付いたときにはもう遅い――PCを乗っ取るマルウェアの手口より。まあ、ここまで酷いのは有名なセキュリティソフトならなんとかしてくれるとは思いますが……。こんなのが入ってきたら困る人は、ファイアウォールなんかはちゃんと設定しておきましょう。

「Lhaplus」に危険度の高い脆弱性、最新版へのアップデートをより。Lhaplusはこのブログ読んでる人も利用者が多いでしょうから、ささと最新版に更新してしまいましょう。

ちなみに、脆弱性の読み方は「ぜいじゃくせい」です。誤読の多い漢字なので一応。

XP以降のWindowsでは標準で時計合わせが出来るようになっていますね。（2000も設定すればできます。）Windowsの初期設定ではtime.windows.comにアクセスしてアクセスして同期を取るのですが、ここ数ヶ月というかずっと殆ど成功したことがありませんでした。まあ、世界中のWindows搭載マシンが利用してるのですから当然といえば当然なのですが。というわけで、time.windows.comには別れを告げてntp.nict.jpに変えてみました。（初期状態では画面右下にある時計をダブルクリックしたらでてくる（管理者権限がいるかも）「日付と時刻のプロパティ」の一番右のタブ「インターネット時刻」のサーバーってところにntp.nict.jpをコピー＆ペーストしたら設定できます。）

手持ちの電波時計とズレが一秒以内になったのでどっちも割と正確なのでしょう。よかったです。

ところでなんでパソコンの時計なんかにこんなにこだわるのかというと、パソコンの時間がずれていると色々と面倒くさいことになるからです。例えば、未来からメールが届くだとか、向こうから送ってきたメールより自分が返信したメールの方が古い時間になっているとか、複数のパソコンからよく編集するファイルなんかではいつの間にやら編集したはずのファイルがそのときよりも古い日時になっているとか、あんど・そー・おん。一分違っていたら結構まずいのでずれちゃってる人は他のどこか最寄りのサーバに乗り換えることをお勧めします。

この記事はお勧めソフトを探すために資料を考察するものです。ということで、まずは最新の資料を用意してみました。
AV-Test.org Reports Stats from Antivirus Roundupと、Stichprobe: 29 Virenscanner gegen 875.000 Schädlinge
なんかが、新しくて参考になりますかね。
ところが、ここで大問題が発生いたしまして、共に1位2位になっているソフトをよく知らなくてかけません……。と、途方に暮れていたところに資料発見しました。

Continue reading

DVDサイズに1テラバイトの容量が入る「TeraDisc」より。

もはやBlu-rayもHD DVDも過去の遺物となりそうですね～。あとはもはや値段のみ。

壊れた、と言っても２台ついているうちのデータ保存用のほうなので起動は普通にできるんですけどね。何とかがんばれば後数回は起動できそうなのでがんばってデーターを取り出しております。

このブログでは、この機会にしばらくはデータ運用法について考察してみようと思います。

まあ……仕事でもしてないとあまり消えて困るファイルも少ないかと思いますが……。学生のうちで消えてホントに困るはレポートぐらいですかね、時期が悪ければ。あと、もしかしたら卒論とか……。ちなみに、ハードディスクは80％のタイミングで時期の悪いときに壊れやがります。うちのハードディスクが意地悪なせいかもしれませんが……。

Continue reading

先日友人に受けた相談とそのときの解決法のメモ。

Office IME 2007で入力した内容が、ひらがなとカタカナには変換できるが漢字には変換できないというものでした。（実際は20～30回に一回くらいできることもありました）

マイクロソフトのサポートのページの方法で解決です。

ではこんどはリモートアシスタンスを使ってみましょう。リモートアシスタンスとは......えーとパソコン上手な人が下手な人のパソコンを遠隔操作して助けてあげる...的な機能です。

上手く使えばすばらしい機能ですが、初心者複数に教えると大抵一日一回他人のトラブルを解決しなくてはならなくなる悪魔の機能です。と言うわけでよっぽど仲の良い人か物わかりのいい人以外に教えないようにしましょう。それか、最初に「トラブル解決１０分につき２００円（気分や裁量によって減額あり）」とか断っておくといいです。ケチと思われるとか心配する必要はありません。ただ働きさせる人の方がよっぽどケチです。（でもまあ裁量は多めにしてあげましょう）

さて、まあ一番の注意点はこんなとこなんですが、一応設定上の注意。スタートメニュー等から「マイコンピュータ」を探してその上で右クリックします。するとメニューが出てきますので、「プロパティ(R)」を選択します。

すると「システムのプロパティ」た出てきますので一番右のタブのリモートを選択し、「このコンピュータから（以下略）」のチェックが入っていることを確認します。入っていない場合はチェックをいれて下の「OK」を押してください。

さて、なんか書いてたら頭痛がしてきてやる気ががんがん下がってますが頑張って書き上げましょう。チャットをするウィンドウを開いたらフィルムと音符の絵の描いてあるアイコンのアプリを選びます。その中のリモートアシスタンスに招待を選択すると、相手をリモートアシスタンスに招待します。

あとはWindows XP Professional : 機能別紹介 - リモートアシスタントのStep2の「●●相手側●●」以降やリモート アシスタンスのステップ バイ ステップ ガイドのWindows Messenger 経由でリモート アシスタンスを使用するの途中からを読むと分かりやすいと思います。

今日はメモのためにWindows Live メッセンジャーのインストール方法から、設定方法までを簡単にまとめてみたいと思います。ただ、管理人の経験に基づき書いているので間違っている場合も有るかもしれません。

まずは、インストール方法。Windows Live メッセンジャー / MSNメッセンジャーのページの「今すぐダウンロード」と書いてるところからダウンロードします。Windows VistaまたはWindows XP以外のOSの場合はMSN Messengerをダウンロードします。

詳しくは公式ページの説明を参考にすると良いでしょう。ここでは補足説明をします。

まずは「追加機能と設定の選択」。ショートカットを作るかですが……まあ、これは好みですね。意味が分からない人は多分チェックを入れたままにしたほうがいいでしょう。二番目のサインインアシスタントは私も意味が分かりませんでした、すみません。

３番目のMSNホームはInternet Explorerを立ち上げたときに最初に表示するページをMSNホームに変えるものです。私は他のページが開かれたほうが便利なのでチェックを外しました。因みにこの設定はいつでも変更でき、Internet Explorerのメニューの「ツール」を開いて「インターネットオプション(O)...」をクリックします。そこの「ホーム ページ」の「アドレス」に表示させたいページのURLを打ち込むと変更されます。

次にWindows Live IDを取得します。Windows Live IDのページにアクセスして、「無料の MSN Hotmail アカウントにサインアップする」か「既にお持ちのメール アドレスを使用する」かを選択します。メールアドレスを持っていない人やメッセンジャーのメール機能を使いたい人は無料の「MSN Hotmail アカウントにサインアップする」を、今パソコン用のメールアドレスを持っていてこれ以上増やしたく内皮とは「既にお持ちのメール アドレスを使用する」を選べば良いと思います。

さて、無事にインストールが終わったら説明を読んだりしながらチャットを楽しみましょう

2007/08/04 公式サイトの説明のＵＲＬが変わっていたので修正