golgodenka's profileあなたの知らない世界PhotosBlogLists Tools Help
    10/20/2009

    GNR トップメニュー改良(のつもり)

    私は GNR というなんちゃってサイトを立ち上げ、大いなるサイト作成素人の恥さらしを実践している。その中では自分なりに勉強を兼ねて改良(のつもり)を随時施している。

    現在取り組んでいるのは各ページの最上部に並ぶメニューの作りである。

    現在は単純に各ページへのリンクとしてテキストを並べ、それぞれのテキストの間をパイプ(|)で仕切るという極めてシンプルなものとしている。同様の方法でいわゆるパンくずリストも導入している。なぜなら当初はかつて Linux 上でそこそこ愛用していた Lynx のようなテキストブラウザでも見た目が変わらないようにしたいという目標があったからである。

    しかし、そもそもサイトが写真を主体にしていること、またアクセスログ解析から今日ではブローバンド回線が普及しテキストブラウザでの閲覧者が存在しないことを考慮し、見直すことにした。つまりは単純なテキストの横並びではなく、どこかで見かけた受け売りだが『メニューも一種のリストである』という考えを採用し改良することにしたのである。

    現在サイトの基本的な作りとして、XHTML で文章構造を記述し CSS でデザインを定義すると言う至極まっとうなやり方で作成しているつもりでいるため、これに則って改良する必要がある。ところがその方面の知識に疎い私はここ数日悪戦苦闘を重ね、ようやくほぼ見通しがついた。以下にかなり画質が悪いがその前後の比較を示したい。

    ■改良前

    GNR トップメニュー(改良前)

    ■改良後(周囲の枠線はスルーの方向で)

    GNR トップメニュー(改良後)

    何がちゃうねん? とは言わないで欲しい。一応 XHTML の部分だけ解説する(CSS については恐らく美しくないのでここでは内緒)と、まずメニューは以下のような『リスト』構造に変わっている。構造以外の具体的な記述内容については『ベータ版』ということで深追い禁止である。

    <div id="topmenu">
        <ul title="トップメニュー">
            <li><a href="default.htm">トップページ</a></li>
            <li><a href="reports/railway/railway-index.html">廃線調査報告書</a></li>
            <li><a href="reports/road/road-index.html">道路調査報告書</a></li>
            <li><a href="reports/industry/industry-index.html">産業遺構調査報告書</a></li>
            <li>記念碑調査報告書</li>
            <li><a href="reports/mini/mini-index.html">小ネタ</a></li>
            <li>掲示板</li>
            <li><a href="blog/blog-index.html">ブログ</a></li>
            <li><a href="links/link-index.html">リンク</a></li>
            <li><a href="introduction/introduction-index.html">管理人について</a></li>
        </ul>
        <p><a href="default.htm">トップページ</a> &gt; <a href="introduction/introduction-index.html">管理人について</a> &gt; サイト開設経緯</p>
    </div>

    余談だが、これがテキストブラウザでどのように表示されるのかは不明だが、恐らくは各リンクが通常の『リスト』として縦に並んでしまい、通常のブラウザとは大きく見た目が異なるのではないだろうか。また、上記の『リスト』化以外の変更点としては以下のとおりである。あまり多くの事を一気に実施すると頭が混乱するので

    1. 最上段の『GNR - Golgodenka Nanchatte Research』の文字サイズを縮小
      私自身は主に IE と Google chrome を利用しているがいつも文字の大きさを『最小』にしているため、気が付かなかったが『中』にするとこの文字列が大きくなりすぎることが判明したため、そこまでアピールするほどの文字列ではないの性格にあわせ控え目にした。
    2. 各行間の余白を縮小
      これは賛否両論あるかも知れないが、これまでは行間を広めにすることにより読みやすさが増すと考えていたが、改めて見てみるとここまで広くなくてもいいのではないかという気になり、改良に至った。

    これにより、比較画像をご覧頂ければ一目瞭然ではあるが、トップメニューの見た目は変えずにパイプ(|)を取り除きながら各テキスト間に適度な余白を挿入することに成功し、また、行間を詰めたことによりページの縦の長さを縮めることにも成功した。

    これらの施策を私自身は『改良』と思って実施する予定であり、全ページに手作業での修正に取り掛かるところであるが、『おいおい、こりゃ改悪だろ』という意見があればご教示頂けると幸いである。

    『そんなヒマあったらコンテンツ増やせよ』というご意見は既に頂いたものとして捉えさせて頂き、これに対しては全力で取り組む所存であるため温かい目で見守って頂けるとこれまた幸いである。

    10/15/2009

    北斗の拳

    素晴らしい動画を発見した。まさに世界平和に貢献し得る力を持っていると確信している。何はともあれ見て欲しい。

     

     

    元ネタはニコニコ動画であるということで、アカウントをお持ちの方は以下からご覧頂きたい。最高である。

    北斗の拳を熱唱する外国人

    10/7/2009

    日本国有鉄道百年写真史

    廃線跡や旧道及びその他の産業遺構を追いかけている私はプチ資料オタク(かなり鉄道系に偏っているが)でもある。そしてまた最近新たな資料を手に入れた。毎度のごとく東京は神田神保町の鉄道関係の古書が充実しているいつもの古書店を物色中に発見したものである。それが今回取り上げる『日本国有鉄道百年写真史』である。ちょっと注意が必要だが、『百年史』ではない。

    これは全部で 10 数巻に及ぶ『日本国有鉄道百年史』から、その名の通り写真を主体にダイジェスト版としてまとめたものである。ダイジェストと言っても 100 年分なので 400 ページを超すなかなかのボリュームである。この本もかねてより存在は知っていたが例によってなかなかのハイスペック価格であったため二の足を踏んでいた。上に紹介しているリンクは 2005 年に出版された復刻版であるが、\21,000 となっている。おいそれと買えない。ちなみにオリジナルは 1972 年の出版である。

    では何故入手できたかというと、古書店で復刻版ではなくオリジナルを発見したのだが、発行年がその古書店からすると大した『古書』ではなかったのと、カバーがボロボロであったこと等が原因と思われるが、破格の \2,100 で販売されていたためである。正直目を疑ったが確かに値札にそう書いてあったので店の主人の気が変わらないうちにとそそくさと購入と相なったわけである。

    当ブログでもいくつかの古書を紹介してきたが、度々通っているとこのような掘りだし物に当たることもあるのだとつくづく感じた。筆不精なため、まだまだ紹介していない古書(または復刻版)もあるので今後も少しずつでも紹介していきたい。

    そして、手に入れた資料も GNR での調査報告書に少しでも生かしていきたい。

    10/6/2009

    GNR と Google Friend Connect

    私のメインサイトである GNR に今回新たな機能を追加した。それはコメント機能である。これまで当サイトについて閲覧者からの情報提供の場を用意していなかった。というのも、いわゆる『掲示板』のような類はどの会社のどのサービスを利用すればよいかの判断材料も持っておらず、またスパム対策等の対応も必要となりイマイチ踏み出せなかったのである。

    従って、これまでは閲覧者の皆さんからは電子メールか自己紹介ページの Windows Live Messenger の埋め込みフォームを利用するしか管理人である私への情報提供が不可能だったのである。

    電子メールの場合は自らのメールアドレスを私に晒すことになるため、どうしても敷居が高い。かと言って Windows Live Messenger フォームも使い慣れていない人からすれば得体の知れないものである。そこで、何かこう SNS ライクな機能を持った Web サービスを利用して掲示板のような仕組みを用意し、気軽に利用できないかと物色を続けていた。

    世間は今まさに Web によるコミュニケーション真っ盛りである。私はこの手の類のツールは積極的には利用しないほうであるが、GNR に利用できないかといろいろと物色してみた。

    しかし、そもそも見るものが間違えているとも思うがどれもが基本的には日本でいうところの mixi のようなものであり、個々の説明は省くが私が求めるものではなかった(本当は Windows Live Groups が理想であったが)。そんな折、最近になって見つけたのが Google Friend Connect である。実はこのサービスも以下の宣伝文句のように上述のサービス同様 SNS を意識したものである。

    Google Friend Connect を使用すると、ソーシャル機能でサイトを充実させて、サイトに訪れるコミュニティを今すぐ活性化し、強化できます。

    この説明だけでは何なので若干補足すると、このサービスにより提供されるガジェットを自サイトに埋め込むことによって SNS の機能を自サイトに取り入れることができるのである。つまりは、コメントや評価、レビュー機能等がパーツを埋め込むだけで自サイトに実装可能となる。例えば、最近ではブログや自サイトで動画を見せたい場合 YouTube のプレーヤーを貼り付けるのがほとんどだと思うが、それと似たようなものである。また、アカウントは Google、Yahoo、Twitter 等のアカウントを既に取得済みであれば、それを利用できるため自サイト側にユーザ認証の仕組みやそもそも独自のユーザーを用意する必要がないのである。つまり、例えば Google のアカウントで私のサイトに『ログイン』してコメントを残す、というようなことが可能となる。

    しかも、これらの実装がプログラミング一切不要で実現できるのである。Google Friend Conecct というサービス自体は少々以前より存在していたが、当初は利用するためにはもっと複雑な手順等が必要だったため敬遠していたが、つい最近改良されたのである。

    まさにこれは私にとって『渡りに船』であった。ガジェットを貼り付けて利用するため、必要なものだけを利用できるのである。GNR では各調査報告書に対する『コメント』機能さえあればまずは充分と考えていたので、『コメント』のガジェットだけを導入すればよいのである。さりとて、実際に利用するには Google とかのアカウントがいるやん、と思われると思うが、コメントのガジェットに関しては匿名つまりは非ログイン状態でも利用可能なのである。ただし、ほんとに誰だか分からなくなるが。

    と言う訳で、早速このサービスを取り入れたみたのである。長々と書いたが全然説明になっていないと思うので、実際にイメージで説明したい。GNR の各調査報告書にもあるが、ここでは冒頭にも紹介した自己紹介ページを例として取りあげたい。

    まず最初は以下の画像のようにコメント欄の右上に『ログイン』ボタンが見える。この状態でログインせずにいわゆる『名無し』としてコメントを残すことも可能である。

    Google Friend Conecct

    ここで、ログインボタンをクリックすると以下のような画面が別に立ち上がる。表示されている各サービスのいずれかのアカウントで『ログイン』ができる。既に以前ログインしたため、初めての場合とは少々画面の内容が異なる(参加というリンクがあったような気が)。

    Google Friend Conecct

    私の場合は Google のアカウントでログインした。すると別画面は消え元のページに戻るが以下のようにログインが完了していることが確認できる。この状態で今後このサイトにはログアウトしない限りこの名でコメントを残せるのである。コメントとという概念はブログ等で一般的に実装しているものと変わりない。GNR の場合は各調査報告書巻末にもそれぞれ独立したコメント欄を設置したため、これ以上何もしなくてもそれぞれのページにおいてこの名前で書き込める。

    Google Friend Conecct

    また、書き込まれたコメントや参加してくれたユーザーは同サービスの管理画面で一元管理される。これらの管理者側の機能はまだ使い始めたばかりなので使い勝手等が把握できていないため、追々紹介していきたい。

    今回私はこのように『コメント』ガジェットしか利用していないが、他にも評価 / レビューのガジェットや参加者を一覧表示するガジェット(mixi のマイミク一覧のようなもの)、また今後もガジェットは追加で開発されていくようなので、私が理解可能で閲覧者の皆さんにも役に立ちそうなものがあれば今後も取り入れていきたいが、まずは気軽に GNR に心温まるコメントを残して頂けると幸いである。

    ただ、Microsoft のサービスをメインで利用している私としては、本当は Windows Live ID でこのようなサービスを提供してくれると嬉しかったが、いいものはそれに拘らず積極的に利用していきたいと思う。でも、頑張ってくれよ。> Microsoft

    ところで、Google SideWiki もさりげなく導入しているのは秘密である。

    10/1/2009

    GNR と検索エンジン対策

    私のメインサイトである GNR はゼロからの手作りである。従って、書かれている HTML(正確には XHTML)は決して美しくない。まさに素人がなせる大いなる恥さらしとも言っていい。

    本来ならばこのような『ソース(Source)』は理路整然と書かれ、メンテナンスの面からも可読性を高くするべきであり私もそうしたいが、そのような理想とは程遠い。しかもいっぱしの Web オーサリングツールを利用していながらである。ちなみに、同サイトの構築環境等は同サイト中でサイト環境としてさっくり紹介しているので参考にならないかもしれないが参考にして頂きたい。

    こんないい加減な作りのサイトであるが、なぜか検索エンジンとりわけ Google には思ったより受けがよく、いくつかのキーワードで検索するとかなりの上位に表示される。全くもって他サイトの管理人諸氏には恐縮である。

    同サイトは廃線跡・古レール・旧道・産業遺構を主な柱とする私のなんちゃって現地調査の記録であるが、このうち『古レール』について Google で検索すると、恐れ多いことに 2 番手につけてしまう。

    古レール – Google 検索

    Google での『古レール』検索結果

    ちなみに、不動の 1 位にある『古レールのページ』は私にとっては古レール調査に関するバイブルであり、1 位は全くもって正しい結果だと思っている。そして我が GNR は質量共にお話にならないサイトであるにも関わらず、なんと 2 位にランクインしている。その次にある『レールの構築』ページを含む『環境デザインマニアック』も古レールで構築された駅のホーム上屋についてデザインという観点から書籍まで出版されており、参考にさせて頂いているサイトである。

    さらに、その次の『古レールのアーチ橋』ページを含む『フカダソフト』も土木学会に情報を提供する等、非常に有益な情報を提供するサイトであり、これまた情報収集によく利用されて頂いている。ところが、最近このサイトのリンク集に私のサイトが載っていることに気が付きさらに恐れ多い気持ちでいっぱいである。

    これらのサイトは私のサイトを除き、膨大な情報量と高い正確性を持った有益サイトであり、私のサイトごときが肩を並べるべきではないが、Google ではなぜかこのような検索結果となる。これが、Microsoft の検索エンジンである Bing (旧 Live Search)では、このような結果となる。この時の順位は画像では分かりにくいが 28 位である。

    古レール – Bing

    Bing での『古レール』検索結果

    この場合でも、112,000 件中とあるので恐れ多いことにはあまり変わりがない。そこでなぜこのような調子のいい検索結果になるのかと少々考察してみたい。

    まず、検索結果で上位に表示されるように対策することを SEO(Search Engine Optimization) とか、SEM(Search Engine Marketing) などと呼ぶが、当然これらの概念は近年検索エンジンの台頭と共に叫ばれ始めたものであり、それ以前より稼働しているサイトではこれらの概念が取り入れられていない可能性が高い。ただ、かく言う私もあまりこれらの概念を把握していない。ざっと思い出してみるとせいぜい以下の点に注意しているくらいである。

    • XHTML の文法を最大限準拠する(タグ閉じ忘れ等のケアレスミスも無くす)
    • XHTML は文章構造のみに使用して見栄えは CSS にて別途管理する
    • robots.txt と sitemap.xml を利用する
    • keyword 及び description meta タグの実装(以下その例)
      <meta name="keywords" content="キーワード 1,キーワード 2" />
      <meta name="description" content="ページの説明" />
    • 見出しタグの正しい利用(以下その例)
      <h1>大見出し</h1>
        <h2>中見出し 1</h2>
          <h3>小見出し 1</h3>
          <h3>小見出し 2</h3>
        <h2>中見出し 2</h2>
    • 画像には alt 属性を用いて必ず説明を付与する
    • フレームは使わない
    • CGI 等のプログラムや動的ページを作らない
      これは私のスキル的に作れと言われても無理である
    • 検索エンジン対策なんぞ考えるヒマがあったら実際の内容を『何をいかに書けば少しでも閲覧者の役に立つか』に注力する

    どれもプログラミングなんぞ一切できない私にとっても難しいものではない。また近頃はすっかり身近になったブログではこのような対策はさらに多くの項目も含め裏で勝手にやってくれており我々利用者は意識する必要がない。ちなみに、このような対策をまとめたガイドラインも検索エンジンごとに示されているが、参考として Google の場合は以下のリンクより確認できる。

    ウェブマスターのためのガイドライン

    ただ、個人的にはあれこれ難しいことを考えるよりも上に示した最後の項目のように『以下に読み手のためになるか』という気持ちが最も大事ではないかと思う。GNR でそれが実現できているかははなはだ疑問ではあるが、少なくともその気持ちは持っているつもりである。これからも更新頻度はあてにできないが、その気持ちだけは持ち続けたいと思っている。みなさんも自サイトをお持ちであれば、初心に帰りサイトを見つめ直した上で例えば上述のガイドラインを参考に最新の技術をさりげなく取り入れてはどうだろう。

    最後にいささか宣伝っぽいかも知れないが、私のサイトが Google の検索結果で栄えある 1 位に輝くキーワードのいくつかを紹介したい(変動している可能性もあるが)。

    はんだい海峡 – Google 検索

    2 個以上の単語を組み合わせると当然と言えば当然だが 1 位になるものが増える。

    狩勝峠 旧線 – Google 検索

    田老鉱山 地図 – Google 検索

    簗川ダム 建設予定地 – Google 検索

    ただ、私としてはこれらの結果はあまり気にしていない。所詮は検索エンジン側がおのおの決めたルールに従ってふるいにかけた結果であり、私が気にしてどうにかなるものでもないのである。ただ、検索エンジンが目指しているのは『本当に役に立つサイトの発見』だと思うので、サイトを持つ身としても前述の通りそのようなサイトを目指すための手法の一つとして捉えるようにしている。

    でも、私の場合は何よりも情報収集力や文章力を何とかせねば。。。