Comments
Description
Transcript
Ajax Excel de Blog
若手教育課題解決プロジェクトICTチーム 町田智雄（横浜市立千秀小学校） Ajax Excel de Blog ∼WEB担当者とコンテンツエディターとの分業システム∼ 1.はじめに Ajax Excel de Blogの外観 このシステムは、WEB担当者とコン テンツエディター（担任の先生など、 記事投稿者）との分業を実現するシス テムです。昨今はやっているBlogを始 めとするCMSのように、ブラウザだけ でWEBページ更新が完了できるような システムでは、残念ながらありませ ん。 横浜市のように、CGIをサポートし ない上に、CMSもなく、おまけに外部 にページを作成してはいけないといっ た強い縛りがある中で、WEBページを 更新しなければならない自治体で、学 校の全職員でホームページに関わって いこうとするWEB担当者に向け作成し たものです。 2.システム概要 Ajax Excel de Blogの編集画面 エクセルでブログ記事を記述し保存したもの （とあれば画像）を、JavaScriptを使って、テ ンプレートのHTMLに動的に読み込んで表示さ せます。コンテンツエディターは、エクセルファ イルと画像を所定のフォルダに保存するのみ。 WEB担当者は、更新されたエクセルファイルと 画像をアップロードするのみ。お互いの負担 を、大幅に軽減することができます。 3.Blogとの違い 違いについては、クリエイターとユーザーの視点によって捉え方も異なります。まずクリエイ ターの視点から説明します。 Blogでは、まず WEB担当者が、、インターネットエクスプローラ（以下IE）などのWEBブラ ウザ（以下ブラウザ）からアクセスして、コンテンツエディタのユーザーアカウントを発行しま す。次に、コンテンツエディターはブラウザから投稿画面にアクセスし、所定のフォームに入力を 1 若手教育課題解決プロジェクトICTチーム 町田智雄（横浜市立千秀小学校） して、送信ボタンを押すことで記事を投稿できます。必要に応じて、記事は公開承認待ちとなり、 WEB担当者が承認操作をすることで公開されます。以上の流れが全てブラウザ上で完結します。 各記事の修正や削除、Blogのデザイン変更なども全てブラウザ上で行い、主にこれはWEB担当者 が操作します。 これに対し、Ajax Excel de Blog（以下当システム）では、まずWEB担当者がパッケージを解 凍し、テンプレートをカスタマイズします。マニュアルにそってハードディスク上の任意の場所に 保存したあと、用途に合わせて複製をしたり、タイトル画像を用意したり、JavaScriptの一部を 書き換える必要があります。次に、コンテンツエディターは、エクセルのファイルを開き、記事を １行の項目に入力して保存します。必要があれば、画像を所定のフォルダに保存します。最後に、 WEB担当者はエクセルのファイルと画像をサーバーにアップロードします。各記事の修正は、コ ンテンツエディタが、デザインの変更はWEB担当者がそれぞれ行うことができます。 次にユーザーの視点で違いを説明します。見た目は、巷に出回るBlogとほとんど変わりありま せん。これはテンプレートデザインによるものです。スタイルシート（以下CSS）によって、デザ インは柔軟に変更ができます。機能的には、クライアントPCのスペックに依存することと、コメ ントやトラックバックなど、双方向コミュニケーションサービスが利用できないことが挙げられ ます。 一般的なBlog 下準備 Ajax Excel de Blog ネット接続のPC１台が必須。自治体 バージョン2002以降のエクセルがイ などのプロバイダがBlogを提供してい ンストールされたコンピューター１台 るならば、ブラウザから管理画面にア 必須。パッケージを用途に合わせて複 クセスして設定。提供がない場合、プ 製し、各種ファイルの一部をカスタマ ログラムのインストール、データベー イズする必要がある。 スの作成などの作業が必要となる。 記事作成 公開 ブラウザからアクセスし、所定の エクセルファイルを開き、１行記述 フォームに入力、送信。 し、上書き保存。 記事送信と同時に公開、あるいは担当 担当者がサーバーへアップロード。 者の承認決済後公開。 デザイン変更 フリーのブログなどでは、デザインテ 担当者にCSSの知識がないと厳し ンプレートが多数用意されていて、簡 い。テンプレートの提供を検討中。 単にダウンロードして変更できる。 コメント ソート 更新通知 基本的に誰でも記事にコメントができ CGIがサポートされていない環境が前 る。 提のため、不可。 一般的に、データベースに接続して、 デフォルトでは、カテゴリのソートと カテゴリ／投稿月／新着記事などで リアルタイム全文検索が可能。投稿者 ソートが可能。 別などはカスタマイズにより可能。 通常、RSSが出力される。 付属のRSS Generatorで出力可能。 index.htmに記述することも大切。 2 若手教育課題解決プロジェクトICTチーム 町田智雄（横浜市立千秀小学校） 4.ワークフロー サイクル部分となる基本的なワークフロー １から４までは、コンテンツエディ ターが行います。中にはデジタルカメラ 1.デジカメから画像を取り込む からハードディスクに取込むことも困難 な先生方がいらっしゃいますから、事前 の研修は適宜必要でしょう。また、慣れ 2.画像をWEB用に加工 るまではそばで教えてあげるとよいです ね。 画像加工には、「縮小専用。」という フリーソフトを使うと大変便利で、おお 3.画像をphotoフォルダに格納 よその教員が扱えると思います。 コンテンツエディターの編集するファ イルは校内LANの共有スペースにいれて 4.エクセルで記事を入力、保存 おくと、WEB担当者としては扱いやす いです。加工した画像は所定のフォルダ に格納します。 5.更新データをローカルディレ クトリにコピー エクセル(バージョン2002以降)でサ ポートしているxmlスプレッドシート形 式で保存されたファイルを開き、所定の ６項目に入力、上書き保存をします。 6.アップロード コンテンツエディターは、記事を更新 したことを、担当者に報告すべきです。 それをうけて、担当者は、更新データをホームページのローカルディレクトリにコピーし、データ を確認の上、サーバーにアップロードします。 本項目は、あくまでおおよそのワークフローを把握するためのものです。詳細については、後 の項目にゆずります。 5.パッケージ内容の確認 ダウンロードしたパッケージに は、次のようなものが含まれてい ます。ご使用のOSやフォルダオプ ションの設定によって、アイコン が違ったり、拡張子（ファイル名 のあとにある.htmなど）が見えな かったりするかもしれませんが、 ファイル名で参照してください。 3 若手教育課題解決プロジェクトICTチーム 町田智雄（横浜市立千秀小学校） ✦ Ajaxblog.exe---------------------index.htmをカスタマイズするためのアプリケーション。 ✦ RssGenerator.exe--------------RSSを出力するためのアプリケーション。 ✦ 01.xsl , 02.xsl--------------------RSSを出力するために必要なファイル。変更不可。 ✦ readme.txt -----------------説明書です。コンテンツ作成には不要。 ✦ [blog] -----------------------------ブログ本体。 ➡ index.htm ----------------表示の枠となるhtmlファイル。 ➡ data.xml -----------------エクセルで作成した記事のファイル。 ➡ gnav.xml --------------------WEB担当者がリンクを編集するファイル。 ➡ [ js ] ------------------------JavaScriptファイルを格納しているフォルダ。 ‣ prototype.js ---------コーディングを簡単にしてくれるライブラリ。変更不可。 ‣ Lib_Excel.js ---------xmlファイルを加工してくれるライブラリ。変更不可。 ‣ entry.js -----------------htmlに流し込むためのスクリプト。一部変更して使用。 ➡ [ css ] ------------------------スタイルシートを格納しているフォルダ。 ‣ base.css ----------------３段組みレイアウトの基本となるスタイルシート。 ‣ index.css -----------------個別スタイルシート。 ➡ [ photo ] ----------------画像を格納するためのフォルダ。 ‣ empty.jpg ----------------記事に画像が不要な場合に使うダミー画像。 ‣ その他の画像 ---------テスト表示用画像。削除してご使用下さい。 ➡ [ img ] ------------------------アイコンやボタンなどを格納するフォルダ。 ‣ bg_column3.gif ----------３段組み背景画像。 ‣ empty.gif -----------------画像盗用防止のフィルター画像。 ‣ icon_list01.gif ----------左サイドのリストアイコン。 ‣ icon_list02.gif ----------左サイドのリストアイコン。 ‣ icon_list03.gif ----------右サイドのリストアイコン。 ‣ icon_list04.gif ----------右サイドのリストアイコン。 ‣ title.gif ----------タイトル画像。 6.WEB担当者による準備 担当者は、htmlをある程度理解していることが前提となります。オーサリングソフトを使用す る場合は、Dreamweaverをおすすめします。ホームページビルダーでは、xhtmlをサポートして いないうえに、自動的にコードを書き換えてしまったりするので、サポート対象外です。しかしな がら、マニュアルにそっていけば、テキストエディタで十分編集が可能です。ぜひがんばって試し てみてください。 1. 初期設定をする。 Ajaxblog.exeを起動し、学校情報やページ情報などを入力して下さい。RSS用ファイル設 定ボタンをおすと、03.xslというファイルが生成されます。ブログを更新した場合に用いま すので、そのままにしておいてください。テンプレート生成ボタンを押すと、テンプレート の保存先を指定するダイアログが出ますので、任意の名前をつけ（index.htmなどが望まし い）、blogフォルダに保存してください。 4 若手教育課題解決プロジェクトICTチーム 町田智雄（横浜市立千秀小学校） 1. blogフォルダ内のgnav.xmlをカスタマイズする。 サイト全体に及ぶ、いつもかわらないリンクを編集します。 エクセルでファイルを開 き、「ページの名前」と、「ページのURI」を記述して、保存して下さい。その際、ページ のURIは、一度ブラウザでそのページを開き、アドレスバーに表示されているURIをコピーし てはりつけると、間違いをなくすことができます。 2. xmlスプレッドシートを作成する。 エクセルのファイルには、現在特別なマクロプログラムなどは必要としていません。なの で、コンテンツエディターがいつでも、自由に作成してかまいません。が、担当者側で、枠 だけ用意してあげた方が親切だと思います。ぜひ作ってあげてください。 (1)バージョン2002以降のエクセルを起動する。 (2)セルA1に「タイトル」、同様にB1「画像名」、C1「本文」、D1「カテゴリ」、E1 「投稿者」、F1「記事作成日」といったように、コンテンツエディターがどの列に何を 入力したらよいのか迷わないように、表のヘッダを記入します。 (3)名前を付けて保存を選択します。ファイル形式を「XMLスプレッドシート形式」にし て、任意の名前をつけて保存します。例えば２年生のブログであれば2nen.xmlなどでよ いでしょう。 以上のカスタマイズを、設置したいBlogの個数分行って下さい。できたものは、学校の教職員 が作業できるスペースにコピーしましょう。ご自分が管理されているホームページのフォルダにあ るファイルを直接編集させると、リスクが高いです。お互いのためにも、作業スペースをわけたほ うがよいと思います。なお、コンテンツエディターにとって必要なのはエクセルのファイルと、 photoフォルダだけですが、他のものもコピーして再現してあげると、エディターが自分で見栄え の確認ができます。 2.コンテンツエディターによる記事作成 ここでは、各々にマニュアルを作成しなくて済むよう、画像加工についても説明をしておきま す。エクセルで記事を入力することは、正直言って説明する必要ありません。問題は、いずれの システムを使っても壁となるであろう画像加工です。ホームページスペースが無限に用意されてい る自治体もないでしょうし、どちらかと言えばケチな方が多いです。また、ユーザーの視点にたっ てみても、ブロードバンド環境が整ってきたとはいえ、容量の多いデータを無意味に強いるのは よくありません。ホームページ上で扱う画像には通常、最適化をするということが常識でもあり ます。しかし担任の先生など、コンテンツエディターにとって画像の最適化は負担ですね。そこ で、「ディテールはともかく、素早く簡単きれいに」加工するために、フリーソフトの「縮小専 用」を用いることにします。「縮小専用。」は非常に優れたWindows用フリーソフトで、Vector サイトなどでダウンロードすることができますので、ご用意下さい。なお、Macをお使いの方 は、iPhotoに取り込んだ際に生成されるサムネイルをそのまま使うという手もあります。（ピク チャフォルダ → iPhoto Library → Data）ただし、容量が大きめなので、気になる場合 は、Fireworksのバッチ処理などで最適化することをおすすめします。ここでは、 Windows環境で、「縮小専用。」を使っての方法を説明しておきます。 5 若手教育課題解決プロジェクトICTチーム 町田智雄（横浜市立千秀小学校） 1. 画像を用意する (1)デジカメから取り込むなど して、ハードディスク上に画 像素材を準備します。デスク トップに一度コピーするとよ いです。別にメディアや、他 のフォルダから直接でもよ いのですが、「縮専。」に かけると、元画像と同じ フォルダに加工画像ができ あがりますので、煩雑にな らない方法を考えて下さい。 (2)「縮専。」を起動します。 (3)左図①に、加工後の画像の実サイズを指定します。おすすめは240 180か、200 150 です。 (4)左図②のオプションを確認します。「画像をくっきりさせる」と「彩度を上げて保存」 をチェックして、JPEG量子化率を指定で80%を指定します。 (5)左図③は、フォルダを作ってその中に保存を選択した方がよいと思います。 (6)出来上がった画像を、担当者に指定されたphotoフォルダの中に格納します。 (7)格納した画像を任意の名前に変更します。通常、デジカメで撮影した画像の名前は、 IMGとかDMSCなどの接頭語と連番がついています。しかし、このファイル名は決して私 たちが整理しやすいものではありません。カメラの設定をリセットするなどして、同一 ファイル名の画像にでくわす可能性もあります。自分で、画像がプレビューしなくてもわ かるようなファイル名をつけるくせをつけることが望ましいです。例として、私は年月日 に教科名や連想できる名前をつけます。頭に年月日を設けるのは、ファイルを自動的に並 べ替えた際、時系列に沿ってファイルを整理できるからです。ちなみに月から始めると1 月になったときに困ることになります。ex.)070323project.jpg 2. 記事を投稿する。 (1)エクセルのファイルを開く。 (2)各項目にもれがないように入力する。 (3)上書き保存する。 注意するところといえば、空白項目を作らないとい うこと、画像名を半角英数で確実に一致させること、 画像名には拡張子をいれないこと、画像が要らない記 事には、「画像名」項目にemptyと入力すること、 カテゴリは教科名などにとどめてむやみに増やさない ことくらいです。作業が終了したら、担当者に「更新 しました！」と声をかけましょうね。 6 画像名に拡張子（.jpg）は入れない 若手教育課題解決プロジェクトICTチーム 町田智雄（横浜市立千秀小学校） 3.WEB担当者による更新作業 公開まであとちょっと、がんばって下さい。コンテンツエディターによる更新報告をもらった ら、共有スペースから更新の差分ファイルをホームページのローカルディレクトリにコピーしま す。フォルダまるごとコピーするのは、危険ですのでやめましょう。更新されたエクセルのファイ ルと、追加された画像をコピーするようにしましょう。あとは、各自治体の実情にあわせて更新 を行って下さい。 4.より高度なカスタマイズ、改変、再配布など 当システムは、ソースの改変は自由です。まだまだ発展途上のシステムですので、より使いやす いように改造してみてください。再配布に関しては、著作権表示をしてあればかまいません。よ り多くの学校などで使って頂けたら幸いです。 上級者むけに、いくつかのカスタマイズ部分を紹介します。上級者でないと、おそらく意味がわ からないと思いますので、無理して読む必要はありません。 1. 独自のhtmlに応用する。 そもそも、当システムはJavaScriptを使って外部テキストを読み込むという機能がベース となっているため、htmlの枠にはとらわれることがありません。独自に作成されたhtmlに 外部ファイルとして３つのJavaScriptファイルを読み込み、html内bodyタグへid= ajax の 追加と、どこかに<div id= result ></div>の記述があれば、実現することが可能です。各学 校HPのデザインに合わせて、使用されてもよいかと思います。 2. スタイルシートをカスタマイズする。 一番簡単なのは、index.cssでbase.cssを上書きすることです。デフォルトで入れている ものは、タイトル画像の指定のみです。複数のブログを管理する場合、base.cssはいじらず に、index.cssを複製して、それぞれに割り当てることで、容易に見栄えの差別化を図るこ とができます。複数のブログ、すなわちindex.htmとそれに対応するdata.xml、entry.jsを それぞれ複製しておけば、残りのファイルは全て共有することができます。ちょっと改造す れば、entry.jsの一部を修正することで、entry.jsを１つのファイルですませることも可能だ と思います。（千秀小学校の給食のページ参照） とりあえず、index.cssに書かれているタイトル画像の指定ですが、title.gifというファイ ル名を変更しなければ、800 100ピクセルのタイトル画像を用意し、上書きすればよいで す。他の名前を付けた場合は、cssに記述されたファイル名も変更します。 開発者である私自身の力量不足や、コンパクトさを出すための理由で、cssはbaseと indexの２つのファイルしかありませんが、baseのスタイルシートを「レイアウト」の部分 と「デザイン」の部分に切り分けてもよいと思います。cssのコンセプトは、より多くの ファイルでパーツを共有、上書きするところにもありますから。 スタイルシートの熟練者でなければ、レイアウトを指定している箇所には触れない方がよ いと思います。３段組みレイアウトは、簡単そうでかなり難しいです。レイアウト指定箇所 とは、マージンやパディング、横幅や高さ、回り込みを指定している部分です。 7 若手教育課題解決プロジェクトICTチーム 町田智雄（横浜市立千秀小学校） 一方、デザインを指定している部分を操作することで、がらりと雰囲気をかえることがで きるでしょう。デザイン指定箇所とは、主に色指定の部分です。他にも背景として表示して いるアイコンなどの画像部分ですね。画像の作成には、Fireworksがおすすめです。 なお、スタイルシートの記述は、かなり大変なので、できれば Dreamweaverの使用をおすすめします。Dreamweaver8では、 cssをダイアログボックスで指定していけるだけでなく、デザイン ビューでのレンダリング精度もかなりのものがあります。 1. JavaScriptをカスタマイズする。 エクセルで作成したxmlスプレッドシートを利用する場合は、Lib_Excel.jsはかかすこと ができません。ライブラリファイルは、私たちのコーディングを簡素化してくれるもので す。新しいバージョンが出ることもありますので、http://www.openspc2.org/をチェック するとよいかもしれません。同様にprototype.jsも大変すぐれたライブラリファイルで、 Ajaxアプリケーションを作る上ではかかせないものだと思います。当システムでは、ほんの 一部分の恩恵しかうけていませんが、邦訳されたドキュメントなど、検索すればでてきます ので、一度目を通してみるとよいかもしれません。 当システムを利用しながら、カスタマイズを考える場合は、entry.jsのみを書き換えると よいです。例えば、現在はエクセルのシート１しか読み込まないようにしてありますが、複 数のシートを読み込ませることも可能です。また、現在は一つのxmlファイルを読み込んで キャッシュするようにしてありますが、ユーザーアクションによって読み込むxmlファイル を変更し、表示すること等も可能です。そうするとよりAjaxらしさが出てくるのではないで しょうか。 また、39∼52行目に代表されるような、読みこんだxmlをhtmlに整形する箇所ですが、 これも変更することで、デザインをかえることができます。tableタグなどを利用して、表の 形に整形することも可能です。（ただし、tableに流し込むのはコードとしても簡単で実現 できるのですが、文書構造が意味をなさなくなるため、アクセシビリティの観点では推奨で きません。） ユーザーアクションに応じてJavaScriptの機能を呼び出すのには、イベントハンドラとい うものを使うことが主流です。タグの属性にonclickなどと入ったものを見たことがある人 も多いでしょう。しかしながら、xhtmlをより洗練させていくのならば、属性にスタイル シートを直接書かないのと同様に、できればスクリプト（振る舞い）も外部参照にすべきで す。当システムでは、イベントリスナーというかたちでユーザーアクションをキャッチして います。entry.jsないのイベントリスナーを変更することで、関数を呼び出すタイミングを かえることができます。 2. エクセルファイルをカスタマイズする。 当システムは、あくまでWEB担当者とコンテンツエディターとの分業システムとして開発 をし、ブログを実現しましたが、ブログとして使用しなくても、十分応用がきくと思いま す。横浜市立千秀小学校の給食コンテンツや、2006年度の2年生の子どもブログなど、異 なったテンプレートや追加カスタマイズされた機能で、その表現の幅を見てみるのもよいか もしれません。 8 若手教育課題解決プロジェクトICTチーム 町田智雄（横浜市立千秀小学校） 2.FAQ ✤ エクセルのファイルを読み込んでくれません。 ➡ エクセルの拡張子が.xlsになっていませんか？保存形式はかならずxmlスプレッド形式で 保存して下さい。 ➡ エクセルのファイルで未記入の項目がありませんか？記事の中で空白のセルがあると、 JavaScriptの読み込みがその部分で中止されてしまいます。 ➡ entry.jsの20行目は修正されていますか？読み込むファイル名が一致していないと、読み 込むことができません。 ➡ エクセルのファイル中で、画像名が数字だけになっていませんか？F列をのぞいて各項目 は文字列として認識させています。数字だけですとセルの値が数値としてみなされてしま うため、表示できなくなる恐れがあります。 ➡ エクセルファイル中で、記事の数を減らしませんでしたか(行を削除しませんでしたか)？ xmlに一度書き込まれたセル参照の最大値が一致しなくなり、読み込みができなくなりま す。 ✤ 表示できない画像があります。 ➡ エクセルファイル中で、画像名のスペルがあっていますか？用意した画像の名前と、エク セル中の画像名が完全に一致していなければ読み込みができません。 ➡ 画像名は半角英数になっていますか？全角文字や、スペース等があると表示ができませ ん。 ➡ エクセルファイル中で、画像名の項目に拡張子まで記入していませんか？拡張子は記入し ないで保存して下さい。当システムでは、一般教員にとって分かりにくい拡張子を記入し ないで済むように、画像フォーマットをJPEGに限定してあります。JPEG以外の画像を表 示させたい場合は、entry.jsを修正してください。 ✤ MacのブラウザSafariで文字化けしてしまいます。 ➡ Safariでは、エンコーディングがUTFであることを明示しなくてはなりません。コンテン ツエディターが作成したエクセルのファイルを、テキストエディタなどで開き、一行目の <?xml version="1.0"?>に encoding="utf-8"を追記して保存して下さい。残念ながら、 エクセルファイルを上書きする度にこの追記部分が削除されてしまうので、更新の度に追 記しなくてはなりません。<?xml version="1.0" encoding="utf-8"?>というパーツを 作っておいて、コピペできるようにするとよいかもしれません。 ✤ 編集していたエクセルのファイルが開けなくなりました。 ➡ 担当者がほかのアプリケーション(Dreamweaverなど)で、再度編集しませんでしたか？ 拡張子xmlのファイルを、どのアプリケーションを使って開くのかを指定し直す必要が出 る場合があります。たいていは、右クリック→プログラムから開く→excelを選択するこ とで開くことができます。また、エクセルを一度起動してから、ファイルメニュー「開 く」から開くことができます。上書き保存をすれば、アイコンもエクセルに戻ると思いま す。 9