サイト更新2010/01/12 22:24

昨年の途中から、長い間更新をサボっていましたが、2010年代に入ったのを機会に、とりあえずサイトのデザインを一新してみました。

ほとんどのページの横幅を、1680ピクセル以上のワイドディスプレイに合わせて拡大してみました。17インチクラスのいわゆるSXGA画面での表示では、収まりきらないデザインになっていて申し訳ありませんが、ワイドディスプレイ上での「なんだか表示がせせこましい」といった印象は、払拭できたと思います。

変更対象のページは100ページ近くあったのですが、そのうち60ページ以上はMicrosoft Expression WebのダイナミックWebテンプレート(DWT)を利用して作成してあったので、HTMLコードもCSSを差し替えるように一括変更が可能でした。もちろん、置換などの編集機能も併用していますが、これらの60ページより、テンプレートが適用されていない20ページほどの修正のほうが、手がかかってしまいました。ふだん、HTMLページの作成にはエディタを使っていますが、やはり、こうしたサイト全体の更新には、Expression Webのようなアプリケーションが便利です。

なお、当然ですが、新デザインの画像は、そのほとんどをCorelDRAWで作成しています。一部のビットマップ加工に、PHOTO-PAINTも利用していますが、基本的なレイアウトの構成から各パーツ画像の作成までを、CorelDRAWで作り上げたといっても過言ではありません。

ただし、HTML/CSSコードの記述は、CorelDRAWやPHOTO-PAINTではWeb標準のソースにはならず、そもそも論理的な文書構造やレイアウト構造を記述するには自分自身の(頭脳の)論理性に頼るのが一番なので、エディタでのいわゆる手打ちが主体です。

www.ne.jp、「安全なサイト」として回復2009/03/18 23:12

先に報告した、C.D.R.サイトの親ドメイン「www.ne.jp」が「安全ではないサイト」としてNorton Safe Webで警告されるですが、プロバイダ(ASAHI-NET)より、問題を確認したとの連絡がありました。それによると、実際に、あるユーザーサイトにウイルス感染したファイルがアップロードされていたとのことです。

また、そのファイルは既に削除されているようで、現時点で既にNorton Safe Webは、www.ne.jpドメインを「安全なサイト」として報告しています。

Norton Safe Webの表示

というわけで、C.D.R.サイトも、晴れて「安全なサイト」となりました(もともと、安全なサイトです)。

IE8 Beta22008/08/31 12:25

8月28日にMicrosoft社のInternet Explorer 8 Beta2 日本語版公開されました。

当C.D.R.サイトは、2006年1月以降、標準準拠のHTMLやCSSで記述するようにしているため、IE8 Beta2 でも概ね、問題なく表示されます。

しかし、一部のJavaScriptが正しく動作しないため、以下のページでは、IE8でIE7互換表示になるようにしています。

IE7互換表示にするため、これらのページにはmeta要素で次の指定を行っています。


<meta http-equiv="X-UA-Compatible"
 content="IE=EmulateIE7" />

CSS、スクリプトの解釈で、まだいくつかわからないところもあるIE8 Beta2ですが、それはWeb制作での問題であり、Webページを表示・閲覧するうえでは、Beta2とはいえ、非常に快適で便利なブラウザーに仕上がっています。C.D.R.サイトも、今後はIE8での表示を基準に、サイト制作を進めていきます。

ブログレイアウトの変更2008/04/07 01:04

当ブログのレイアウトも、本サイトに合わせ、コンテンツが中央揃えで表示されるように変更しました。

また、左側のナビゲーション部分は、従来はInternet Explorer専用のスタイルシート(filterプロパティのalpha)を使って、背景を透過させていましたが、透過PNGファイルを背景画像に使用する方法に変更しました。このため、FirefoxやOperaでも透過表示されるようになりますが、反対に、IE6以前では透過されなくなります。これは、PNG画像の透明度に、IE6以前が対応していないためです。

しかし、日本でもWindows UpdateでIE7への自動更新が始まったので、ブログ、本サイトともに、IE7以降で利用可能なCSSを積極的に取り入れることにしました。

もちろん、IE6での表示にも考慮しつつサイトデザインを設計しています。たとえば、本サイトのほうでは、IEの「コメント分岐」を利用して、透明PNGを使う部分には従来のfilterプロパティによる別のCSSを適用させる、といった方法を採っています。ただし、このブログではHTMLコードを変更することはできないので、コメント分岐は使えません。CSSコードの記述内で使える、いわゆる"CSSハック"という手法は、個人的に好みではないので、利用していません。結果として、IE6以前とIE7以降で、完全なデザインの一致を目指すよりも、より標準に準拠したIE7重視の姿勢で、サイト制作をしていくことにしました。

ゆえに、当サイトで完全な表示を再現するには、IE7以降の利用をお奨めします。

サイトリニューアル進捗状況2008/04/02 22:35

サイトデザインの部分的変更が、8割ほど終了しました。

見た目上の変更部分は、ページ内容が中央揃えになるようにした点です。旧来の記事ページは、ほぼこのデザインに直しました。

また、各記事ページでは、JavaScriptを使い、全見出しのリストが自動生成され、さらにリストから各見出しへのリンクも自動的に生成されるようにしています。このリストは、ページ左上(サイトロゴの下)に「contents」として表示されます。

「展示」コーナーの記事ページは、レイアウトを少し変更し、ページ上部に7つのサムネールを並べるようにしました。その下に画像と解説記事も載せていますが、サムネールをクリックすると画像が表示されるようにもなっています。おおよそ、1024×768のウインドウサイズに、このサムネール部分が収まるようにしてみました。

サムネールのクリックで拡大画像が表示される機能は、やはりJavaScriptで実現しています。こうしたスクリプトでは、「lightbox」がよく使われているようですが、その動作を参考に、自分でスクリプトを書いてみました。とはいっても、lightboxのソースコードは、私にはまったく理解できないので、「画面がブラックアウトして画像が表示される」にはどうすればよいかを自分なりに考え、CSSとの組み合わせにより実現したスクリプトです。同様に、自動見出しリストも、私のオリジナルです。もともと、プログラムやスクリプトは苦手で敬遠していたのですが、なぜか3月ごろに突如としてアイデアが閃き、簡単なJavaScriptであれば、私でも書けるようになりました。

なお、展示の記事ページは、新しいデザインに合わせて画像を作りなおさなければならないので、今のところ、「ハナちゃん」のイラスト集だけがリニューアルされています。

その他、目に見えないところでは、サイト作成に利用しているMicrosoft Expression Webの、「ダイナミック Web テンプレート」(DWT)機能を活用しています。各コーナーの扉、一般記事、展示用記事は、それぞれ統一されたフォーマットなので、この元レイアウトをDWTで作成し、それをひな形として各ページを作成しています。これによって、CSSによるデザイン管理のように、HTMLコードの部分も一括変更が容易になります。

JavaScriptやDWTの活用は、講師を担当している職業訓練校の授業内容に反映させる目的もあって、取り組んでいるのですが、C.D.R.サイトの記事でも、今後、こうした内容を取り上げていこうと考えています。そのため、最近はほとんど質問のこないQ&Aコーナーの扉は廃止し、そこを「Webデザイン」コーナーに変更しました。まだ、新規掲載記事はありませんが、HTML、CSS、JavaScript、そしてWeb画像作成やExpression Webによるサイト作成などを、取り上げていこうと思っています。

ホームページ更新2008/02/20 13:20

C.D.R.サイトのホームページを、更新しました。とは言っても、「新装開店」というわけではなく、見た目のレイアウトや画像は、ほとんど変わっていません。

変更は、XHTMLとCSSによる、ページの設計に関わる部分です。この1、2年で習得したXHTML/CSSの技法を、最大限に活かし、ページを組みなおしています。見た目は同じでも、内部は大改装といった具合です。私は、講師を務めている職業訓練校でHTML/CSSの講義を担当しているのですが、そこで教えている最新レベルの内容に、C.D.R.ホームページの設計も合わせてみました。

まあ、そうした作業を自分自身のサイトで行っていかないと、タグやプロパティ名を忘れてしまうだけでなく、さまざまな注意点を見落としてしまったり、新しい発見や発想がなくなってしまうので、自己鍛練のためにこんな改装をしてみたまでです。

現時点では、ホームページだけの変更です。このため、他のページとの切り替え時に、若干、違和感があるかもしれません。これは、ホームページのコンテンツがページ中央揃えになっているのに対し、他のページでは左寄せになっているためです。いずれ、サイト内の各ページも、設計を更新していく予定です。

サイト内検索フォームを設置2007/03/26 17:42

ホームページおよび各扉ページに、サイト内検索フォームを追加しました。これらのページの右上に、フォームを設置してあります。

検索サイトは、Windows Live Searchボックスを利用しています。これによって、C.D.R.サイト内の記事を日本語で検索することが可能です。

なお、質問コーナー扉ページの検索だけは、C.D.R.質問コーナー」サイトを検索するように設定してあります。

「ハナちゃんの足跡」リニューアル2007/03/22 20:56

愛猫ハナちゃんを記念する「ハナちゃんの足跡」サイトをリニューアルしました。

コンテンツには、基本的に変更はありませんが、デザインを一新しました。HTMLXHTML1.1に、CSSも標準に準拠し、Internet ExplorerだけでなくFirefox等の最新版であれば表示できるようにしてあります。

ただし、スライドショーのページは、Windows XPPowerToyで書き出したものを引き続き流用しているため、これらはIEのみで正常に動作します。また、Netscape 7.1では、標準準拠ページでも一部表示がおかしくなりますが、このような旧式ブラウザに対応する予定はありません。

リニューアルデザインは、当然、フルCSSで組んであります。"レイアウト"テーブルは、使用していません。もちろん、画像類は、CorelDRAW Graphics Suite X3で制作しています。サイト全体の管理、HTMLコードの記述には、Microsoft Expression Webを使用しています。

美しい画像には、(私の技量のほかに)CorelDRAWが、標準準拠のコーディングにはExpression Webが寄与していることは、言うまでもありません。

「Q&Aコーナー」再編2006/11/11 22:30

従来、サイトの「Q&A」ボタンは、直接「C.D.R.質問コーナー」へリンクさせていましたが、他のコーナーと同じように「Q&Aコーナー」ページを設置しました。そして、質問コーナーに投稿された質問に対する回答の一部を、記事として掲載することにしました。現在、2点の記事を掲載してあります。

質問投稿を元にした記事は、「技術・技法」コーナーに掲載していくつもりでしたが、こちらにはより詳細かつ長文の解説に特化します。「Q&Aコーナー」の方には、質問投稿への返答に際し、手順や結果を画像等で説明した方がわかりやすいと判断したものを、なるべく簡潔に記事にします。

これによって、質問コーナーへの回答を、より迅速かつ分かりやすいものにしようと思っていますが、実際のところはどうなるかわかりません。猫に遊んでくれとせがまれたときは、それを何よりも優先しますから...。

十月革命記念日2006/11/07 14:15

今日11月7日は、「ロシア十月革命記念日」です。1917年のこの日(当時のロシアが採用していた暦では10月)に、トロツキーやレーニンを中心とした共産主義者が臨時政府を倒し、ソヴィエトによる権力を樹立しました。この人類初の社会主義革命も、後のスターリニストによって歪曲され、1930年代には収容所国家のごとくに変質してしまいました。そして、1990年代前半には、ソヴィエト連邦は崩壊してしまいます。

現存する「社会主義」国家のうち、このスターリニズムによるカリカチュアの権化として、隣国の朝鮮民主主義人民共和国が耳目を集め、あいも変わらず共産主義の評判を貶めています。かといって、「格差社会」が進行する日本では、ソ連邦崩壊当時のように、無邪気に資本主義の“優位性”を謳歌できるわけでもありません。そんな八方塞がりの状況で、ポピュリストでありファシスト的でもある政治指導者が人気を博しているのは、今も昔も変わらないようです。

当サイトは、基本的にソフトウェアの技術情報を提供することを旨としていますが、どのような人間も、なんらかの社会に所属している以上、その政治的立場は意識的にしろ無意識的にしろ、存在します。私は、十月革命を支持する立場です。そこで、この忘れられつつある(世界史の未履修も問題になっているご時勢ですから)記念日を祝すため、本日限定で、ホームページを飾り付けてみました。