ブログ

  • 【書評】WebクリエイティブのためのDOM Scripting

    WebクリエイティブのためのDOM Scripting  中村享介(著)

    【良い点】

    1. オールカラーで綺麗で見やすい
    2. JavaScriptとDOMの基礎をわかりやすく解説
    3. サンプルコードをダウンロードして利用可能

    【悪い点】

    1. 実用サンプルのチョイスがいまいち
    2. 3章・4章ではサンプルコードは無く、解説も簡潔すぎ

    【内容について】

    1章のサンプル、『displayを変更する』が、この本で一番、自分には参考になりました(クリックでWEBページの一部を非表示から表示にする操作)。

    この本の解説のメインは、2章から4章なのですが、そこを読んだ後に、この1章のサンプルに戻ると理解が深まります。

    2章から4章にかけて、JavaScriptの基礎とDOMの基礎が、簡潔によくまとまっています。ちょっとしたリファレンスにも使えそうな感じです。

    ただ、5章のライブラリの説明は、触り程度なのでちょっと物足りないかも。

    6章の実用サンプルは、ちょっと自分のニーズには合わなかったです。ここら辺は、各自のやりたいこととの兼ね合いによるので仕方ないのですが。

    ちなみに、この本ではAjaxに触れられていません。Ajaxを勉強していてDOMについて整理したい人には向いています。

    【形式について】

    199ページと比較的薄く、よくまとまっています。紙質が上質でオールカラーなので、読んでいて気持ちがいいです。形式面は大満足です。

    内容で、もう少し自分にあったサンプルが多ければ、かなり評価は高いのですが。

    WebクリエイティブのためのDOM Scripting

  • 【書評】JavaScript中級講座 Ajaxを学ぶ前の基礎知識

    JavaScript 中級講座 ~Ajaxを学ぶ前の基礎知識 藤本壱(著)

    【ポイント】

    この本“JavaScript中級講座”のポイントをあげるなら次の3つ。

    1. JavaScript・DOM・Ajaxの3点をバランス良く解説
    2. 基礎から応用までをカバー
    3. サンプルスクリプトが豊富でダウンロードして使える

    一応、中級講座というタイトルなので、JavaScriptの基礎は必須とも言えますが、この本自体が、JavaScriptの基礎を第1章~4章にかけて丁寧に解説しているので、この本でも基礎を学べます。

    あえて言うなら、この本を読む前に、アンクが出している“JavaScriptの絵本”を一通り読むのがお勧め。絵本を読んで、この中級講座にすすめば理解が早いと思います。

    【良い点】

    1. サンプルスクリプトが豊富
    2. 解説がわかりやすい

    サンプルスクリプトが豊富なのが良いです。
    たとえば、第5章のDOMでは、スタイルシートにアクセスするものとして、タブ切り替えの例などが挙げられています。(YahooJapanトップページニュースのタブ切り替えと同様のものです。)
    第7章のAjaxのサンプルもサーバーで試したらきちんと動きました。

    全体を通して解説もわかりやすく、混乱することなく順次読み進められます。

    【悪い点】

    特に無いです。ただ、このJavaScript中級講座では、Ajaxとサーバーとの連携部分で、Perlが使われているのですが、要望としては、ここをPHPにして、データベースとの連携を解説してくれるとありがたかったです。

    【内容について】

    JavaScript・DOM・Ajaxの3点が揃っています。それに加えて、最後の9章でデバッグを解説しているのがGood。Firebugを使った方法が詳しく解説されています。

    【形式について】

    ボリュームは335ページで適量です。青緑と黒の2色刷り。カラーなら、なお良かったのですが、内容が良いのでそれほど不満点はありません。

    JavaScript 中級講座 ~Ajaxを学ぶ前の基礎知識

  • ホームページビルダーを軽くする方法(PHPによる共通外部ファイルの読み込み)

    ホームページビルダーには、サイトのページ数が多くなるにつれ、次第に動作が重くなるという欠点があります。

    サイトのページ数が、200から300ページを超えるあたりから、『サイトを開く』、『ページを保存する』などの動作が重くて遅くなってきます。

    この重くなる原因として考えられるのが、それぞれのページが相互に持つ内部リンクです。つまり、特定の操作をすると、ホームページビルダーが、その内部リンクの構造を把握するように働き、ページ数が多くなるにつれ、その処理に時間がかかってしまうのです。

    この問題を解消するために、PHPを使います。
    (PHPなどのスクリプトを利用できるサーバーに限ります)

    どのようにするか順に説明します。

    1.まず、ページに記述している内部リンクの部分を外部ファイルとして共通化します。

    2.次に、PHPのファイル読み込み関数「require_once」を使い、元のリンクのあった部分に、1で作った外部ファイルを読み込むようにします。

    これだけです。
    気づいた人もいると思いますが、これは、昔、SSI(サーバー・サイド・インクルード)として広まった手法を、PHPで実現したものです。

    以下、ソースを挙げて具体的に解説します。

    まず、各ページに共通化できそうな部分としてサイドバーのリンクやフッター部のリンクを切り取り、別ファイルとしてサーバー上に保存します。

    common_part.php

    <ul>
    <li><a href="link1">リンク1</a></li>
    <li><a href="link2">リンク2</a></li>
    <li><a href="link3">リンク3</a></li>
    </ul>

    一つのPHPファイルにこのような記述をするだけです。meta情報などは不要です。

    そうしたら、今度は、元のページのリンクのあった部分に次の一文を書き加えます。

    元のページのhtmlファイル

    <?php
     require_once 'common_part.php';
    ?>

    元のページから、common_part.php を呼び出すためこのように記述します。

    たったこれだけです。SSIとして処理していた昔は色々と面倒でしたが、PHPを利用するとこの一文だけで共通部分を読み込み、ページに組み込むことができます。

    この方法は、サイドバーだけでなく、ページのヘッダーやフッターなどの共通部分化にも役立ちます。

    このように、共通化できるリンク部分を外部ファイル化することで、ホームページビルダー自体が、リンク構造を把握する必要がなくなるので、ビルダーの処理の軽さにつながるわけです。

    この処理ができると、共通部分の保守管理も楽になるので是非、利用してみることをお勧めします。

    <追加情報>

    htmlファイルは、通常では、PHPとして動作させることはできません。
    htmlファイルをPHPとして動かすには、下のような一行を書き加えた .htaccess ファイルを当該ディレクトリにアップする必要があります。

    .htaccess

    AddType application/x-httpd-php .html

    .htaccess の最初に付くドットを忘れないように。

  • CORESERVERの『リアルタイム状況』とは?

    CORESERVERの管理画面にある『リアルタイム状況』とは一体どんな機能なのか。

    コアサーバーを借りてサイトを立ち上げたばかりだと疑問に思う人も多いと思います。

    画面の説明には次のようにあります。

    『独自ドメインへの現在のアクセス状況とCPU、メモリー使用状況をリアルタイムで表示します。』

    つまり、現時点、おそらく秒単位でのアクセス状況を示すので、訪問者からのアクセスがその瞬間に無いドメインでは、何も表示されないことになります。

    この点が、この機能のわかりづらい原因になっています。

    この『リアルタイム状況』の機能を実感するには、アクセスがあって訪問者がサイト内にいる時点でこの機能を利用する必要があるのです。

    サイトを立ち上げたばかりでは、アクセスはそれほど無いので、『リアルタイム状況』を開いても何も表示されず混乱してしまうわけです。

    ある程度アクセスが増えてから、この『リアルタイム状況』の機能を利用してみるとよいと思います。

    リアルタイムにアクセスがあると下のように表示されます。

    CORESERVERリアルタイム状況

    (表示部分の一部切り抜き)

    実際には、この機能の恩恵があるのは、一日のページビューが、一万以上あるようなサイトになると思います。

  • Googleセーフブラウジング診断ページの覚書

    ドメインを取得する際に、チェックしておきたいのが、Googleが提供するセーフブラウジング診断です。

    URL:
    http://www.google.com/safebrowsing/diagnostic?site=http://www.google.com/

    上記、?site=『http://www.google.com/』の箇所に取得したいドメインを置き換えてアクセスすると、Googleが安全なドメインかどうかを診断してくれます。

    中古ドメインだけでなく、新規ドメインの取得でも念のため、チェックしておくとよいでしょう。

    その際には、www有りとwww無しの両方でチェックするのがお勧めです。

    また、ドメイン取得後、自分のドメインがスパム判定されていないか確認するのにも役立ちます。