Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

デスクトップCGIにinnerHTMLを使ったAjaxを導入する

デスクトップCGIでWebとデスクトップを融合する 第7回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/06/01 14:00

連載第7回となった本稿では、前回iframeで読み込んでいたフィード情報をinnerHTMLに置き換え、Ajaxを使って表示させます。

目次

まえがき

 前回に引き続き、デスクトップCGIフレームワークについて考えます。最終的には、デスクトップCGIを使う、実用的なRSS/Atomフィードデータベースを構築できるような枠組みを作成していきます。

 本連載第6回では、第4回から第5回で導入したAtomフィードのMySQLデータベースから、Atomのタイトル(title要素)、カテゴリ(category要素)、更新日時(updated要素)と記事内容(content要素)を表示させるCGIブラウザを作りました。前回はJavaScriptをCGIでデータと一緒に出力することで、インタラクティヴな操作性を持つブラウザを作成できる可能性を示すことができました。

 今のところ、機能的にはAtomフィードのURLを引数にして、記事(entry要素)をすべて読み出し、1件ずつ表示するだけですが、さまざまな条件に基づいて表示させたい記事を選択するインターフェイスを作ることは比較的やさしいと思います。興味があれば、ぜひチャレンジしてください。ご質問等ございましたら、jscripter9@gmail.com(@は小文字)宛てにメールをいただいても結構です。ご質問に基づいて得られた内容につきましては必要に応じて本連載で使わせていただく予定です。

 さて、今回は引き続きJavaScriptをCGIで出力することによってAtomフィードデータを1件ずつ表示するインターフェイスを考えます。前回は、iframeを使って、記事内容を表示させましたが、今回は、innerHTMLを使って、HTMLに埋め込む形で記事を表示させます。また、AtomフィードデータをAjaxを使って読み出してみましょう。

「デスクトップCGIによるWebとデスクトップの融合」の記事一覧

今回の記事に必要な環境

 前回同様、今回の記事の前提となる環境の導入方法は、本連載の第1回と第4回にまとめられているので、そちらをご参照ください。少なくともWindows環境下でApache(あるいはAnhhtpdなどの他のHTTPサーバ)、MySQL、PerlとFirefoxを使える必要があります。その他の項目は必要に応じて参照してください。

 既に連載初回の記事から1年近く経過していますので、各ソフトウェアのバージョンも上がってきています。今回の記事では、最新の環境であるApacheは2.2.4に、ActivePerlはバージョン5.8.8のBuild 820で動作検証を行っていますが、特に問題はありませんでした。Firefoxのバージョンは2.0.0.3を使用しています。

新しい読者のために - デスクトップCGIフレームワークの使い方

 詳細は前記のように過去の記事に委ねますが、デスクトップでローカルのHTTPサーバとMySQLが動作していれば、以下の項目を参照すれば、比較的早く設定できるでしょう。

環境変数の設定

DOCROOT

 HTML文書を格納する「C:/anhttpd/htdocs」のようなディレクトリ、すなわちドキュメントルートを「DOCROOT」という環境変数に設定します。

CGIDIR

 CGIスクリプトを格納する「/cgi-bin/codezine」のようなパスを「CGIDIR」という環境変数に設定します。

USERDIR

 Windowsシステムの環境変数「USERPROFILE」の値と同じ値を「USERDIR」という環境変数に設定します。

Firefox

ブックマーク

 ブックマークに「ATOM」というフォルダを作成して、Firefoxから自分が読みたいAtomフィードを登録します。

HTML文書

起動用HTML - codezine.html

 今回は、デスクトップCGIフレームワークを試すための起動用HTMLを設定しました。現時点ではまだCGIスクリプト動作の確認のためのものです。環境変数「DOCROOT」のディレクトリに格納してください。「http://localhost/codezine.html」等としてFirefoxから起動します。

デスクトップCGI

 現在のデスクトップCGIフレームワークのメンバーとなるCGIを今回分も含めて一覧表にまとめておきましょう。これらすべてのCGIファイルを、環境変数「CGIDIR」のパスに対応するディレクトリに格納しておきます。

デスクトップCGIフレームワークのCGI一覧
CGIファイル名 役割 参照先
feeds2.cgi FirefoxのブックマークのATOMを参照し、フィードリストを得る。それぞれのフィードURLをパラメータとして、Atomフィードの新記事表示とMySQLデータベースへの読み込みを行う。「atom2msrdb.cgi」と第6回と今回の記事で作成したMySQLデータベースリーダー4種のCGIスクリプトをリンクさせる。将来はRSSフィードのリーダーも兼ねる。 連載第7回(今回)
atom2msrdb.cgi AtomフィードのURLをパラメータにAtomフィードのXMLを解析し、HTMLに変換して表示すると共に、Atomフィードデータベース(MySQL)に解析結果を格納する。 連載第4回
rss2html.cgi RSSフィードのURLをパラメータに、RSSフィードのRDF/XMLを解析し、HTMLに変換して表示する。CodeZine記事ではまだ未発表なので使えません。 「実践実用Perl」
atom2msrdb_read_js.cgi MySQLデータベースからAtomフィードのURLをキーにして、Atomフィードデータベースに格納されたフィードデータを1件ずつ読み出す。iframe版。 連載第6回
atom2msrdb_read_js2.cgi MySQLデータベースからAtomフィードのURLをキーにして、Atomフィードデータベースに格納されたフィードデータを1件ずつ読み出す。entry要素データの読み出しには「atom2content.cgi」を起動する。iframe版。 連載第6回
atom2content.cgi 「atom2msrdb_read_js2.cgi」から起動される。 連載第6回
atom2msrdb_read_js3.cgi MySQLデータベースからAtomフィードのURLをキーにして、Atomフィードデータベースに格納されたフィードデータを1件ずつ読み出す。 連載第7回(今回)
atom2msrdb_read_ajax3.cgi MySQLデータベースからAtomフィードのURLをキーにして、Atomフィードデータベースに格納されたフィードデータを1件ずつ読み出す。 連載第7回(今回)
atom2entry.cgi 「atom2msrdb_read_ajax3.cgi」から起動される。 連載第7回(今回)

MySQLデータベースの生成

 MySQLのデータベースの生成の仕方は、「第4回 MySQLでAtomフィードをデータベース化 前編」の記事を参照してください。

デスクトップCGIフレームワークの外観

 本稿で述べる新しいデスクトップCGIを含むフレームワークの動作してる画面を図1に示します。「codezine.html」を起動し、著者のサイトのAtomフィード記事をMySQLデータベースから読み出して参照している画面です。Atomフィードリーダーとしては、「atom2msrdb_read_ajax3.cgi」が動作しています。

図1 本稿のデスクトップCGIフレームワーク動作外観
図1 本稿のデスクトップCGIフレームワーク動作外観

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:PerlでデスクトップCGI

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5