ホーム > タグ > Web系

Web系

新人SEに読んで欲しい！この一冊！

まもなく新入社員研修開始！その前に・・・

間もなく新入社員が入社してまいります。新入社員たちは２ヶ月間、社内で研修を受けてから、開発部門へ配属されていきます。

当社では事前に一冊の書籍を渡し、入社前の準備期間中に読んでもらっています。入社したその日から始まる新入社員研修では、プログラミング！データベース！と専門的な用語がズラズラと出てきます。そんなとき、ほんの少しでも知っている、見たこと・聞いたことのある用語がある、という感覚があるだけで、パニックにならず落ち着いて取り組め、また研修をスムーズに進めることができます。

そんな当社の新入社員に準備期間に読んでもらっているのは、こちらの書籍です。

プログラマの完全常識　開発者が知っておくべきプロの知恵　

矢沢久雄著　技術評論社発行　1,980円（税抜）

  • 第一章：コンピュータの基礎知識
  • 第二章：プログラミング言語
  • 第三章：アルゴリズムとデータ言語
  • 第四章：データベースとネットワーク
  • 第五章：プログラミング設計の考え方と図示方法
  • 第六章：システム開発

この本の著者である矢沢久雄氏はこの本の位置づけをこのよう綴っております。

本書は私がＩＴ企業の新人研修で教えているコンピュータ・プログラミング・データベース・ネットワーク・システム開発の基礎知識、そしてプロのプログラマとしての心構えをまとめたものです。したがって本書の内容は、とても易しく基本的なことばかりです。ただし、プロのプログラマになるための知識は一通り網羅されています。

当社で採用する新入社員は理系出身者だけではありません。文系の学生も多数います。理系の学生には知識の再確認のため、文系の学生にはプログラムとは何か、という基本事項を学んでもらうために最適な書籍ではないでしょうか。

書籍だけでなく、内定者通信を発行し情報処理技術者試験情報をお知らせし、資格取得を推奨しています。

システックスが行っている社内教育についてこちらをご覧ください。

Ajax入門（Adobe Spryでスライドショー）

つづきまして

「Adobe Spry」（アドビ スプライ）を応用したスライドショーの実現例をご紹介しましょう。

Adobe Spry

【公式サイト】
・「Adobe Spry framework for AJAX」（英語）

【特徴】
Adobe Spry とは、Adobeが提供するAjax対応Javasciptです。

Adobe Spry の特徴は、比較的簡単に“XMLデータ”を扱える点にあります。
つまり、XMLデータのデータファイルを元にしたWebページを手軽に作ることができます。
「PartyWeb」のスライドショー機能は、このAdobe Spry （「Photo Gallery Demos」）を応用しています。

なお、Adobe Spry は、スライドショー以外にも、いろんな動き・効果・演出を付けることができます。
具体的にどんなことができるのか？については、下記URLのデモページをご覧下さい。
・「Spry Demo Gallery」

【ダウンロード】

(1) Adobe ID を入手する。

Adobe Spry をダウンロードするために、まず「Adobe ID」を作成する必要があります。
下記URLの「Adobe ID を作成」を押して、ご自分の Adobe ID を作成して下さい。（無料です。）
・「Adobe - サインイン」

(2) Adobe Spry をダウンロードする。

公式サイトにて、右上の「Download vX.X」をクリックします。
この後、ログイン画面が表示された方は、(1)で作成した Adobe ID でログインしてください。
最新版をダウンロードする画面に遷移するので、下記のファイルをダウンロードして下さい。
・spry_X-X-X_YYMMDD.zip
ダウンロードしたzipファイルの中には、Adobe Spry 本体はもちろん、使い方を記したドキュメントやデモ用のHTMLファイルも含まれています。（ただし、英語です。）

【サンプルコード】

※ご注意※
各ファイルを保存する文字コードが異なると、ブラウザで見たときに文字化けすることがあります。
これを回避するために、下記の全てのファイルを同じ文字コード（UTF-8など）で保存することをオススメいたします。

≪SlideShowData.xml≫

<?xml version="1.0" encoding="utf-8"?>
<SlideData>
  <Slides>
    <Slide path="1.jpg" width="500" height="334" thumbpath="1_t.jpg" thumbwidth="75" thumbheight="50" caption="１枚目の写真です。"/>
    <Slide path="2.jpg" width="500" height="334" thumbpath="2_t.jpg" thumbwidth="75" thumbheight="50" caption="２枚目の写真です。"/>
    <Slide path="3.jpg" width="500" height="334" thumbpath="3_t.jpg" thumbwidth="75" thumbheight="50" caption="３枚目の写真です。"/>
  </Slides>
</SlideData>

≪SlideShow.html≫

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>サンプル</title>
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="Thu, 01 Dec 2000 00:00:00 GMT">
    <link href="SlideShow.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="xpath.js"></script>
    <script type="text/javascript" src="SpryData.js"></script>
    <script type="text/javascript" src="SpryEffects.js"></script>
    <script type="text/javascript" src="galleryEx.js"></script>
    <script type="text/javascript">
        var dsPhotos = new Spry.Data.XMLDataSet("./SlideShowData.xml","SlideData/Slides/Slide");
    </script>
</head>
<body>
    <div id="Slideshow">
        <div id="Transport">
            <ul>
                <li><a href="#" onclick="StopSlideShow(); AdvanceToNextImage(true);" title="前へ" class="On"><span>前へ</span></a></li>
                <li><a href="#" onclick="if (!gSlideShowOn) StartSlideShow();" title="再生" class="Off" id="playButton"><span>再生</span></a></li>
                <li><a href="#" onclick="if ( gSlideShowOn) StopSlideShow();" title="停止" class="On" id="stopButton"><span>停止</span></a></li>
                <li><a href="#" onclick="StopSlideShow(); AdvanceToNextImage();" title="次へ" class="On"><span class="FontSpace">次へ</span></a></li>
                <li><span id="playLabel">再生中...</span></li>
            </ul>
            <div style="clear: both;">
            </div>
        </div>
        <div id="Middle">
            <table>
                <tr>
                    <td>
                        <div id="thumbnails" spry:region="dsPhotos">
                            <div spry:repeat="dsPhotos" onclick="HandleThumbnailClick('{ds_RowID}');"
                                 onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0], '{@thumbwidth}', '{@thumbheight}');"
                                 onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
                                <img id="tn{ds_RowID}" alt="" src="{@thumbpath}" width="24" height="24" />
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
            <div style="clear: both;">
            </div>
            <div id="Slide">
                <div id="mainImageOutline">
                    <img id="mainImage" alt="" src="" />
                </div>
                <div id="Caption">
                    <span id="mainMessage"></span>
                </div>
            </div>
        </div>
        <div id="Footer">
        </div>
    </div>
</body>
</html>

≪galleryEx.js≫
galleryEx.js は、「Photo Gallery Demos」で使われている gallery.js を、今回のサンプル用に少し改良したものです。
gallery.js を改良した部分を抜粋します。（他は gallery.js と変わりません。）

/*
dsPhotos.addObserver(function(nType, notifier, data) {
    if (nType == "onPreLoad")
        StopSlideShow();
});
*/

function SetMainMessage(msg)
{
    var spn = document.getElementById("mainMessage");
    if (spn) {
        spn.innerHTML = msg;
    }
    var cap = document.getElementById("Caption");
    if (cap) {
        if (msg != "") {
            cap.style.display = "";
        } else {
            cap.style.display = "none";
        }
    }
}

function ShowCurrentImage()
{
    var curRow = dsPhotos.getCurrentRow();
    SetMainImage(curRow["@path"], curRow["@width"], curRow["@height"], "tn" + curRow["ds_RowID"]);
    SetMainMessage(curRow["@caption"]);
}

function StartSlideShow(skipTimer)
{
    gSlideShowOn = true;
    if (!skipTimer)
        SetSlideShowTimer();
    var playLabel = document.getElementById("playLabel");
    if (playLabel)
        playLabel.firstChild.data = "再生中...";
    var playButton = document.getElementById("playButton");
    if (playButton)
        playButton.className = "Off";
    var stopButton = document.getElementById("stopButton");
    if (stopButton)
        stopButton.className = "On";
}

function StopSlideShow()
{
    gSlideShowOn = false;
    KillSlideShowTimer();
    var playLabel = document.getElementById("playLabel");
    if (playLabel)
        playLabel.firstChild.data = "停止中";
    var playButton = document.getElementById("playButton");
    if (playButton)
        playButton.className = "On";
    var stopButton = document.getElementById("stopButton");
    if (stopButton)
        stopButton.className = "Off";
}

≪SlideShow.css≫

/* スライドショー */
div#Slideshow
{
    margin-top: 10px;
    margin-left: 5px;
}
div#Slideshow *
{
    padding: 0px;
    margin: 0px;
}

/* スライドショー：操作パネル */
div#Slideshow div#Transport
{
    font-size: 12px;
    line-height: 120%;
    text-align: center;
    width: 700px;
    height: 53px;
    background-color: #333333;
}
div#Slideshow div#Transport ul
{
    list-style: none;
    margin-left: 5px;
}
div#Slideshow div#Transport ul li
{
    float: left;
    margin-top: 5px;
}
div#Slideshow div#Transport ul li a.On
{
    display: block;
    float: left;
    color: #ffffff;
    width: 92px;
    height: 34px;
}
div#Slideshow div#Transport ul li a.Off
{
    display: block;
    float: left;
    color: #00ffff;
    width: 92px;
    height: 34px;
}
div#Slideshow div#Transport ul li span
{
    display: block;
    margin-top: 10px;
}
div#Slideshow div#Transport ul li span#playLabel
{
    display: block;
    color: #ffffff;
    margin: 18px 0px 0px 10px;
    font-size: 16px;
}

/* スライドショー：中間部分（サムネイル＋スライド） */
div#Slideshow div#Middle
{
    width: 700px;
    background-repeat: repeat-y;
    padding: 0px;
    background-color: #333333;
}
div#Slideshow div#Middle table
{
    width: 700px;
    border-width: 0px;
}
div#Slideshow div#Middle table td
{
    text-align: center;
}

/* スライドショー：サムネイル */
div#Slideshow div#Thumbnails
{
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
}
div#Slideshow div#Thumbnails div
{
    position: relative;
    width: 24px;
    height: 24px;
    float: left;
    margin: 8px;
    padding: 0px;
    float: left;
    display:inline;
}
div#Slideshow div#Thumbnails img
{
    border-right: #404040 1px solid;
    border-top: #999999 1px solid;
    right: 0px;
    left: 0px;
    float: left;
    border-left: #404040 1px solid;
    width: 24px;
    border-bottom: #333333 1px solid;
    position: absolute;
    height: 24px;
    cursor: pointer;
    cursor: hand;
}
.selectedThumbnail {  border: solid 2px #ffcc00 !important; }
.inFocus {  border: solid 1px #ffcc00 !important; }

/* スライドショー：スライド */
div#Slideshow div#Slide
{
    margin-top: 5px;
    padding: 0px;
    text-align: center;
}
div#Slideshow div#mainImageOutline
{
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    background-color: #333333;
    padding: 10px;
    overflow: hidden;
    width: 0px;
    height: 0px;
}
div#Slideshow img#MainImage
{
    width: 100%;
    height: 100%;
}
div#Slideshow div#Slide div#Caption
{
    padding-right: 11px;
    padding-left: 11px;
    padding-bottom: 10px;
    margin: 1px 0px 0px 0px;
    color: #ffffff;
    padding-top: 10px;
    background-color: #333333;
    text-align: left;
    font-size: 14px;
    width: 500px;
    margin-left: auto;
    margin-right: auto
}

/* スライドショー：フッター部分 */
div#Slideshow div#Footer
{
    width: 700px;
    height: 16px;
    background-repeat: no-repeat;
    background-color: #333333;
}

≪xpath.js≫
≪SpryData.js≫
≪SpryEffects.js≫
これら３つは、公式サイトからダウンロードしたものをそのまま使います。

サンプルコードの解説

「Photo Gallery Demos」を元にしたサンプルコードです。

SlideShowData.xml では、<Slide>１つで、１つの画像データを表しています。
各属性は、下記を表しています。
・path … オリジナル画像へのパス
・width … オリジナル画像の幅（ピクセル）
・height … オリジナル画像の高さ（ピクセル）
・thumbpath … サムネイル画像へのパス
・thumbwidth … サムネイル画像の幅（ピクセル）
・thumbheight … サムネイル像の高さ（ピクセル）
・caption … 画像のキャプション（題名）

SlideShow.html を見ると、ちょっとコムズカシイHTMLになっていますが、ポイントは２つあります。

１つ目のポイントは、

<script type="text/javascript">
    var dsPhotos = new Spry.Data.XMLDataSet("./SlideShowData.xml","SlideData/Slides/Slide");
</script>

です。
これにより、SlideShowData.xml の画像データの集まり（配列）が、dsPhotos に読み込まれます。

２つ目のポイントは、

<div id="Thumbnails" spry:region="dsPhotos">
    <div spry:repeat="dsPhotos" onclick="HandleThumbnailClick('{ds_RowID}');"
         onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0], '{@thumbwidth}', '{@thumbheight}');"
         onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
        <img id="tn{ds_RowID}" alt="" src="{@thumbpath}" width="24" height="24" />
    </div>
</div>

です。

時折出てくる「spry:～」や「{～}」の部分が、Adobe Spry独自の構文です。

具体的な構文の説明は省きますが、上記のような記述をすることにより、dsPhotos に読み込まれた画像データの集まり（配列）が順番に読み出され、その度、<div> や <img> が出力されます。

SlideShowData.xml には、３つの <Slide> があるので、最終的には、

<div id="Thumbnails">
    <div onclick="HandleThumbnailClick('0');"
         onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);"
         onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0], '75', '50');">
        <img id="tn0" alt="" src="1_t.jpg" width="24" height="24">
    </div>
    <div onclick="HandleThumbnailClick('1');"
         onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);"
         onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0], '75', '50');">
        <img id="tn1" alt="" src="2_t.jpg" width="24" height="24">
    </div>
    <div onclick="HandleThumbnailClick('2');"
         onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);"
         onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0], '75', '50');">
        <img id="tn2" alt="" src="3_t.jpg" width="24" height="24">
    </div>
</div>

というHTMLが出力されることになります。

やってみると分かりますが、SlideShowData.xml の <Slide> を増減させたり、各属性の値を変えたりすると、スライドショーの内容を自由に変更することができます。（ただ、XMLデータとして構文が正しくないと動きませんので、ご注意下さい。）

【参照URL】
・「Spry Documentation」（英語）
　Adobe Spry のドキュメントです。

・「逆引きAdobe Spryリファレンス」
・「逆引きAdobe Spryリファレンス（Spry pre release 1.6.1）」
　「Adobe Spryで、こんなことができるのかな？」と思ったら、ご確認ください。

・「Adobe Edge: 2007年2月 「Ajax したい！」Web デザイナーのための Spry 集中講座」

・「@IT - アドビのAjaxフレームワーク「Spry」を使ってみよう」

終わりに

さて、３回にわたって、Ajax についてご紹介をさせて頂きましたが、いかがだったでしょうか？

Ajax対応Javascript の登場により、リッチなWebページ作成の敷居がグッと下がりました。
最近では、安定性も動作速度も増して、多くのWebサイトが、Ajax を利用したコンテンツを採り入れています。

もし、今回の「Ajax入門」で Ajax に興味を持って頂けたのなら、まずは、サンプルをダウンロードして、いろいろ試してみるところから始めてみることをオススメいたします。
今まで実現したくても難しそうでできなかったことが、意外にカンタンに実現できてしまうかもしれませんよ。

皆様のWebサイト作りに、今回の「Ajax入門」がお役に立てましたら幸いです。

Ajax入門（jQueryとThickbox）

何はともあれ

百聞は一見に如かず、です。

まずは、下記に続くサンプルを試して頂きながら、
「Ajax対応のJapascriptライブラリ」の“便利さ”を感じて頂ければ、と思います。

jQuery

【公式サイト】
・「jQuery」（英語）

【特徴】
Javascriptライブラリ（Javascriptの塊）の一つ。
Webページ内の要素（文字とか段落とか画像とか）に対して、比較的簡単なJavascriptのコードを記述するだけで、様々な効果を与えることができます。

【ダウンロード】
上記公式サイトにて、「Download（jQuery）;」ボタンをクリックすると、最新版をダウンロードする画面に遷移するので、下記のファイルをダウンロードして下さい。
　・jQuery-X.X.X.min.js

【コード例】
≪sample.html≫

<html>
<head>
    <title>jQueryサンプル</title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <link href="sample.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    <!--
    $(function() {
        $('#Area1').mouseover(function(){
            $(this).css("background-color","#ff0000")
        });
        $('#Area1').mouseout(function(){
            $(this).css("background-color","#ffffff")
        });
        $('#Area2').click(function(){
            $('div#Area2 span').fadeIn("slow")
        });
    });
    //-->
    </script>
</head>
<body>
    <div id="Area1">
        ココのエリアに、マウスカーソルを重ねたり外したりすると、色が変わります。
    </div>
    <div id="Area2">
        ココのエリアをクリックすると・・・<br />
        <br />
        <span>文字がフェードインされます。</span>
    </div>
</body>
</html>

≪sample.css≫

div
{
    border-right: #000000 1px solid;
    border-top: #000000 1px solid;
    border-left: #000000 1px solid;
    border-bottom: #000000 1px solid;
}
div#Area1
{
    width: 400px;
    height: 100px;
    left: 100px;
    top: 100px;
}
div#Area2
{
    width: 400px;
    height: 100px;
    left: 100px;
    top: 400px;
}
div#Area2 span
{
    display: none;
}

【参照URL】
・「jQuery: jQuery実践サンプル」
　豊富なサンプル量を公開しています。
・「はじめてのjQuery」
　jQueryを使って何かやってみたい方は、一度、これを見ておいてもいいかもしれません。

ThickBox

【公式サイト】
・「ThickBox 3.1」（英語）

【特徴】
jQuery対応のJavascriptライブラリで、ブラウザ上の特定のエリア（テキストや画像）を、ポップアップのように表示することができます。特に、画像の拡大表示やスライドショーとして応用されることが多いです。
「PartyWeb」では、Webアルバム機能に ThickBox を応用しています。

【ダウンロード】
上記公式サイトにて、「Overview」のところにある「Download」にリンクされている下記のファイルをダウンロードして下さい。
　・thickbox.js、もしくは、thickbox-compressed.js
　・ThickBox.css
　・loadingAnimation.gif
　　（※loadingAnimation.gif　は、thickbox.js を基点に「images/loadingAnimation.gif」となるように配置して下さい。）

【コード例】
≪sample2.html≫

<html>
<head>
    <title>Thickboxサンプル</title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="thickbox.js"></script>
    <link href="thickbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <a class="thickbox" title="1" rel="group1" href="images/1.jpg"><img alt="1" src="images/1_t.jpg" /></a>
    <a class="thickbox" title="2" rel="group1" href="images/2.jpg"><img alt="2" src="images/2_t.jpg" /></a>
    <a class="thickbox" title="3" rel="group1" href="images/3.jpg"><img alt="3" src="images/3_t.jpg" /></a>
</body>
</html>

【参照URL】
・「Thickbox・Examples」
　ThickBox の公式サイトの「Example」にて、いくつかのサンプルが公開されています。
・「class=”thickbox” に rel をつけると画像が表示されない」
　Thickbox 3.1 + jQuery 1.3.2 で、上記のコード例のようなスライドショーを作ろうとするとハマると思います。
　対処としては、Thickbox.js の79行目の「@」を削除して保存するだけです。

【ちなみに】
2009年9月30日、ThickBox の作者・Paul Irish氏は、
「しばらく Thickbox のメンテは行わない。」という告知をしており、
Thickbox と同じような動きをする下記のようなJavascriptライブラリを紹介しています。

・「colorbox」
・「jQueryUI Dialog」
・「fancybox」
・「DOM window」
・「shadowbox.js」

それぞれ、表示の種類やHTML/CSSの書き方や異なりますので、自分の好みと状況によって使い分けるとよいでしょう。

次回予告

いかがでしょうか？
多少のコツは必要ですが、Javascriptライブラリを使えば、
比較的短いコードで、いろんな動き・効果・演出を付けることができそうではありませんか？

次回は、当社の「PartyWeb」の「スライドショー」機能を題材に、
より実用に向けたカスタマイズ方法についてご紹介できれば、と思います。

Googleカスタム検索の導入とサイト内検索レポート

Goolgeカスタム検索の導入

2ヶ月ほど前になりますが、当社の公式サイトにGoogleカスタム検索を導入しました。サイトリニューアル当初はサイト内検索を付けていませんでしたが、コンテンツが増えてきたので検索機能を入れて欲しいという要望があったためです。サイト内検索を実現する方法はいろいろありますが、検討の結果、Gogleカスタム検索を導入することになりました。

Googleカスタムサーチ

カスタム検索エンジンの作成

Googleカスタム検索は簡単に導入することができます。

まずはGoogleカスタム検索のページにアクセスし、カスタム検索エンジンを作成します。必要な情報を入力してプレビュー画面で確認したら完了です。

Googleカスタム検索設定

検索ボックス コード・検索結果コードを貼る

カスタム検索エンジンを作成したら、検索ボックスと検索結果を表示させるコードを取得して、htmlに貼ります。

Googleカスタム検索 コードを取得

検索結果をサイト内に表示させる場合は、「iframe を使用して、自分のウェブサイト上で検索結果をホストする」を選択してください。当社の公式サイトはMovableType（MT）で構築されていますが、MTでサイト内に検索結果を表示する場合は、インデックステンプレートを作成するのが良いでしょう。ただし、検索結果ページは600px未満にすることができないので、当社の場合は本来3カラムであるところを無理やり2カラムにして対応しました。

Googleカスタム検索 検索結果

使い勝手を考えると、やはりサイト内に検索結果を表示する方が良いと思います。

サイト内検索レポートの設定

Googleカスタム検索が優れているところは、検索されたキーワードをGoogleAnalyticsで解析することができるところです。

GoogleAnayticsの設定で、サイト内検索レポートを有効にして、クエリパラメターを入力してください。

GoogleAnalytics サイト内検索の設定

設定をしてしばらくすると、データが反映されるようになります。

GoogleAnalytics サイト内検索キーワード

サイト内検索を設置されていないウェブマスターの方は、是非Googleカスタム検索を使ってみてください。

Ajax入門（JavaScriptとAjax）

はじめに

IT業界に（特にWebの世界で）「Ajax」という言葉が流行りだして、しばらく経ちます。
そして、現在では、もはや開発技術の一つとして立派に確立した地位を得るまでに至りました。
システックスでも、PartyWebをはじめ、いくつかの開発事例の中で Ajax が採り入れられるようになっています。

『Ajax入門』では、そんな「Ajax」とシステックスの関わりを書いていこうと思います。

Ajaxとは？

IT業界の方なら、もうご存知の方も多いでしょうけど、何事も基本から、ということで。

「Ajax」の正式名称は、「Asynchronous JavaScript + XML」といいます。
直訳すれば、「非同期通信するJavascript と XML の技術の集まり」といったところでしょうか。
（ちなみに、略称の「Ajax」の読み方は、「エイジャックス」とか「アジャックス」が主流のようです。）

いきなりコムズカシイですが、その実体は、・・・ただの“Javascriptの塊”です。

はて？
ただの“Javascriptの塊”に何ができるんでしょう？　何がそんなにスゴいんでしょう？

・・・と、その前に、すこしWebの世界の思い出話を紐解いてみましょう。

Javascript黎明期

実は、Ajaxを構成する「Javascript」「XML」「非同期通信するJavascript」という技術自体は、別に、目新しい技術でもなんでもありません。
「Javascript」に至っては、それこそ、Web（インターネット）の世界が普及し始めた頃から、すでに存在している技術です。

当時、Javascript の出現により、動きのないタダのHTMLファイルだけのWebサイト（ホームページ）に対して、様々な動きやギミックが付けられるようになりました。
それにより、ユーザーに使いやすいWebサイトをつくることができるようになりました。

ただ、当初のJavascriptはまだ黎明期で、今で言う「Google Map」のようなホームページを作ることは非常に困難でした。
なにせ、
「Webページ内で、再読込することなしに、地図をドラッグする」
なんてフクザツカイキな動き、当時のJavascriptだけで実現できる人は、そうはいませんでした。
もちろん、当時だって、やろうと思えばJavascriptでも実現することはできたと思います。
でも、そう“簡単”にはいきませんでした。

簡単にいかなかった理由の一つとして挙げられるのが、
「ブラウザ（のバージョン）ごとに、Javascriptの命令の書き方や挙動が異なる時がある。」
という事実でした。
例えば、全く同じJavascriptを書いたとしても、IE5ではうまく動いても、IE6では全く動かなかったりしたわけです。
（その逆のパターンもありました。）

当時は、まだ「Web標準」という言葉が定着していなかった時代でした。
各社・各団体が、それぞれ独自色を備えたブラウザを提供していた時代だったのです。

この事実は、Webサイトの作り手としては、大変な労力を強いられることになりました。

Webサイトを公開したとしても、ユーザーとしては、どのブラウザで閲覧するかは自由です。
つまり、作り手としては、ユーザーがどのブラウザで閲覧するか分からないわけです。
前述の通り、ブラウザが異なれば、動きが変わってしまうかもしれません。

どんなブラウザでも同じような動きになるように対応するのであれば、まず、各ブラウザに合わせて、Javascriptの命令を書き換えなくてはならず、かつ、ちゃんと動くか全てのブラウザで確認していかなくてはならなかったのです。
メジャーで使われているブラウザに限定したとしても、バージョン違いも含めれば、最低２～３個以上のブラウザに対応する必要があります。

極めてメンドーです。
「Webページ内で、再読込することなしに、～」のような複雑な動きをつけるとしたら、そのメンドーさは莫大になります。

他にも、メンドーだった理由として、
「特殊なHTMLの使い方をしないといけなくて、それによりWebページの作り方が多少制限されてしまう。」
「まだ技術的にバグが多く、それを回避するための労力を必要としてしまう。」
などが挙げられます。

・・・そのメンドーさ加減を“劇的に”解消したのが、「Ajax」でした。

Ajax の登場

「Ajax」という言葉が流行りだしたのは、「Google Map」の登場がきっかけでした。

思い出してみてください。
「Google Map」の登場以前だって、地図検索できるWebサイトはいくらでもあったはずです。
でも、「Google Map」が他社・他団体のサービスより優れていたのは、
「一度表示した地図を、“再読込なしで”ドラッグして動かしたり、拡大・縮小できること」でした。
このインタラクティブかつ軽快な動きは、当時のユーザーの度肝を抜きました。（私もその一人です。）

同時に、当時のWeb開発者にとっては、
その「Google Map」が、特別な新技術を使って作られたのではなく、
元からあった「Javascript」を応用したに過ぎないことを知ったときには、さらに度肝を抜かれたことでしょう。

この出来事は、Webサイトの新たな可能性を開いた、とも言えます。
この「Google Map」の登場が、Ajaxの知名度を爆発的に増加させてくれました。

次回予告

次回は、Ajaxの中でも比較的とっつきやすい jQuery や Thickbox などの活用例をもとに、
Ajax の導入の仕方とその容易さについてご紹介できればと思います。

無料アクセス解析ツール（ブログパーツ）4つのご紹介

みなさんはWebサイトのアクセス解析ってされてますか？もしまだという方がいれば、今すぐはじめてみてください。Webサイトを運営する上で、それがいかなる種類のサイト（ECサイト、コーポレートサイト、ブログ等）であっても、アクセス解析は基本中の基本です。サイトの現状を知らずして、対策も何もあったものではありませんから。

アクセス解析をするためのツールは世の中にたくさんありますが、無料で利用できるものもあります。今回はお勧めの無料アクセス解析ツールとブログパーツをご紹介しようと思います。いずれもメジャーなツールなので、既にご存知の方も多いかもしれませんね。

GoogleAnalytics

GoogleAnalyticsは、最もポピュラーな無料のアクセス解析ツールです。多くのサイトで利用されています。当社のホームページやこのブログ、さらにはPartyWebのサイトもGoogleAnalyticsでアクセス解析を行っています。ECサイトの運営においても必要な機能は網羅されており、ユーザビリティに関しても申し分ありません。まずはGoogleAnalyticsを入れてみましょう。

GoogleAnalytics

GoogleAnalyticsの導入方法

  1. Googleのアカウントを取得します
  2. GoogleAnalyticsにログインし、ウェブ サイトのプロファイルを追加します
  3. トラッキングコード（解析用のコード）が発行されるので、htmlの タグの直前に貼り付けます（アクセス解析をしたい全てのページ）
  4. トラッキングコードが認識されると、アクセス数が反映されるようになります

※トラッキングコードはすぐには認識されないので心配しないでください

Yahoo!アクセス解析

Yahoo!アクセス解析は、訪問者がサイトでアクションを起こした後にほぼリアルタイムでアクセス状況がレポートに反映されるという特徴があります。とは言え、登場して間もないこともあり、ユーザビリティもまだまだ良いとは言えず、GoogleAnalyticsを差し置いて敢えてYahoo!アクセス解析を使う理由はありません。

アクセス解析のツールによって数字は異なりますし、ツールの特色もあるので、多面的にサイトを分析したいという方はGoogleAnalyticsと平行して導入されてみても良いでしょう。

Yahoo!Analytics

Yahoo!アクセス解析の導入方法

  1. Yahoo! JAPAN IDを取得します
  2. Yahoo!アクセス解析にログインし、プロジェクトの登録をします
  3. 解析用のコードが発行されるので、htmlの タグの直前に貼り付けます（アクセス解析をしたい全てのページ）
  4. アクセス解析が開始されます（プロジェクトを登録した後、解析が始まるまでに最大で1時間程度かかる場合があります）

Yahoo!ログール（ブログパーツ）

Yahoo!ログールは、ブログと読者とを結ぶブログパーツです。ブログパーツを貼ると、ブログ読者の詳しい情報（性別、年代、職業、居住地など）を取得できます。また、ブログ読者もブログの情報を見ることができるようになります。Yahoo!ログールの特徴は、単なるアクセス解析ツールではなく、ブログ同士やブログと読者を結びつけることができるという要素を持っている点です。もちろんブログではなく普通のサイトでも利用できるので、是非一度使ってみてください。

Yahoo!ログール

Yahoo!ログールの導入方法

  1. Yahoo! JAPAN IDを取得します
  2. Yahoo!ログールにログインし、利用登録をします
  3. ブログパーツのソースコードを取得して、ブログ（サイト）に貼ります
  4. データの集計が開始されます

なかのひと（ブログパーツ）

なかのひとは、「どんな組織からアクセスがあったか」がわかるアクセス解析ツール（ブログパーツ）です。どんな会社が自分のサイトを見てるのかがわかります。とても面白いツールなので、是非使ってみてください。

なかのひと

このキャプチャーでは一応企業名がわからないように加工してあります。実際には企業名が表示されます。

なかのひとの使い方

  1. なかのひとのユーザ登録をします
  2. ブログパーツのソースコードを取得して、ブログ（サイト）に貼ります
  3. データの集計が開始されます

いずれのツールも導入が簡単なので、もしまだアクセス解析をされていない方はお早めにツールを導入してみてください。GoogleAnalyticsについては、さらに突っ込んだ話題を今後お届けできればと思います。

WordPressを使ってブログを作ろう！

一口にブログといっても・・・

みなさんの中には自分のブログをお持ちの方も多いと思います。一口にブログといっても、AmebaブログやYahoo!ブログなどのように、無料で簡単に作ることができるサービスを利用したり、MovableTypeやWordPressといったツールを利用して自分で構築したりと、その形態は様々ですよね。

WordPressがお勧めです

無料のサービスを利用するのももちろん良いですが、自分でドメインを取得して、サーバを借りて構築したブログというのは、より愛着が強くなるものです。
何年か前までは、自分でブログを構築する場合はMovableTypeを使う方がほとんどだったような気がしますが、最近ではWordPressを使う方が本当に増えてきました。私たちはMovableTypeでもブログを構築していますが、どちらかというとWordPressの方が使いやすいと思います。実はこのブログも、パーティーウェブスタッフブログもWordPressで構築しました。

wordpressの管理画面です

wordpressの管理画面です

MovableTypeを使われたことがある方は、まず再構築が無いことに喜びを感じられるかも知れません。また、テーマ（デザインテンプレート）やプラグインも豊富で、適用がとても簡単にできるというのも魅力です。
MovableTypeもバージョンを重ねるごとに使いやすくなっていますが、インストール等の作業もトータルで考えると、やはりWordPressがおすすめです。みなさんも独自ドメインでブログを構築する際は、WordPressを使ってみてください！

CMS（コンテンツマネジメントシステム）について

みなさんこんにちは。

今日は趣向を変えて、CMS（コンテンツマネジメントシステム）の話題をお届けしようと思います。

CMS（コンテンツマネジメントシステム）とは？

CMSはその名が示すとおり、Webサイトのコンテンツを管理するシステムです。従来、Webサイトの製作といえば、1ページ1ページhtmlをつくり、FTPを使ってWebサーバにアップロードして、修正したかったらまたダウンロードして・・・といったように、管理するのが厄介でしたが、CMSを使えば、Webを介した管理コンソール上で、Webサイトのあらゆる管理が可能になります。

当社ホームページはMovableTypeで構築

CMSには、MovableTypeやXoopxなど、現在では様々なものがあります。サイトの規模やその特性に応じて利用するCMSも異なってくると思いますが、当社のホームページはMovableTypeで構築しています。

システックスホームページ

システックスホームページ

構築にあたっては大変なところもありましたが、以前に比べて格段に運用しやすくなりました。例えば最新ニュースも発信しやすくなりましたし、ちょっとした修正もいちいちファイルをダウンロードしなくてもあっという間にできてしまいます。ページの追加もブログ感覚です。

CMSの利用するメリットは他にもありますが、また後日お届けしたいと思います。

Home > Tags > Web系

最新の記事
カテゴリ
アーカイブ
タグクラウド
ブログ内を検索
Feeds
リンク
ブログパーツ
あわせて読みたいブログパーツ

Return to page top