jQueryで外部テキストファイルを読み込み、文字化け対策をしてみる

仕事も好きだが昼寝も好き、そんな代書人零細事業主がいた、とします。

あくまで、たとえば、の話です。

そいつはウェブサイトを保有してそこから集客しており、昼寝中あるいは諸方へ逐電中は電話を受け付けたくない、そういう状況にあるとします。

あくまで、たとえば、の話です。

そこで、そいつのウェブサイトではこれまでインラインフレームを用いて当日の電話受付状況を表示し、逆に言えば受け付けていない時間帯には電話が来ないようにしていたわけです。

インラインフレームの中に表示されるＨＴＭＬファイルは、今はもう作者のウェブサイトすら存在しない１０年前のフリーウェアを使って、マウスクリックで定型文のＨＴＭＬファイルを作成してアップロードする、という方法で日々の受付状況を更新していたのです。

…つまり、横着なシステムを横着に運用できていた、と。

問題が出てきたのはここ数年です。そのフリーウェアが作成するHTMLファイルが太字等の非推奨のタグを多用している、そのように世の中が変わってきました。さらには、赤い題字で黄色い背景、というのもちょっとどうかな、と思えてきたのです。

これをなんとかする方法の一つの手がかりは、その零細事業主の古い悪い友人が在籍する医療法人のウェブサイトにありました。

そちらでは、ウェブサイトにお知らせの表示区画を設けて、JavascriptまたはjQueryで外部のテキストや画像を読み込ませる方法でお知らせの部分のみを更新していたのです。

…そういうのがほしくなりました

いえ、それを見た零細事業主も、そういうのが欲しくなったようなのです。

このほかに、静的なHTMLで作ったページの一部だけ外部ファイルを読み込んで更新する手法としては、サーバが対応しているならSSIを使う、<object>タグで囲んでその中に読み込む、という手法があるのですが、前者はその勉強をせねばならず、後者は読み込んだファイルに対するCSSでのスタイル指定があまり上手くいかなさそうです。

たまたまその零細事業主は別の事務所さんのウェブサイトに依頼費用を自動計算するシステムがあるのを知り、そういうのがほしくなってしまって自分のところでもJavascriptを使って作ってしまった、という状況にありました。

対応環境の有無で問題になることはあるのですが、今日びのブラウザがJavascriptに非対応ということはあまりありません。数日に一回、家庭用ゲーム機で（！）給料未払やらなんやらというキーワードで来られる方もいますが…これはまぁ例外的、としましょう。

最初はJavasriptで何か簡単なプログラムを書かねばならないのかな、と考えていたのですがjQueryを導入するのが簡単そうです。『ヌー？』といううさぎさんのサイトでいろいろ調べた結果、そうなりました。

ところで上記リンクのサイト、jQuery日本語リファレンスで検索をかける前に『jQuery ヌー』で検索したらしっかりトップに出てきました。素敵です（笑）

そちらのサイトのうさぎさん、吹き出しの部分にマウスオーバーすると変化が生じます。ウェブサイト自作派の同業者さん方がどこまで自作で粘るかはさておいて、jQueryは活用できれば何かと便利な気がします。

より具体的に調べてみます。

１．jQueryで外部テキストあるいはHTMLファイルを読み込んで表示する方法を説明されている企業さんのブログの記事が見つかりました。（GOWEB Blogの記事）

２．これをそのままいただいて、試してみたらいきなり破綻しました（笑）

テンプレートのNEWSの欄にテキストファイルを読み込ませてみたのですが、文字化けしています。

３．『jQuery load　文字化け』等の検索を試みて、手がかりになる記事にたどり着きました。たぶん、この分野の制作に携わっておられる方のブログなのだと思います。(メモ　の記事)。なんでも、jQueryにUTF-8でないテキストファイルやHTMLファイルを渡すと文字化けが出るのだとか。現用のフリーウェアではShift_Jisのファイルしか作れません。これはよくありません。

４．そちらの記事では.htdocsなるファイルを使ってサーバサイドで対策を施した、とあります。このファイルをさらに調べると、簡単に言えばサーバの振る舞いを決めるものである（つまり、自分でサーバを保有していない人は利用できない）けれど、理屈としては『サーバがテキストファイルをjQueryに渡す段階で、何らかのかたちで文字コードを明示できればいい』という理屈のようです。

５．さらにさらに調べると、CMSの運用中に文字コードの違いに上手く対処できない場合の文字化け対策として、.htaccessで文字コードを明示することで対応できるらしい、という記事が見つかりました。(小粋空間　の記事)

ただし、jQueryに引き渡すデータにそうした方法が使えるか示した記事は見つかりません。

６．じゃ、試しにやってみよう、ということで、レンタルサーバーの中に一つフォルダを作ります。そこに実験用のテキストファイル（文字コードはもちろんShift_Jis）と、テキストファイルのデフォルトの文字コードをShift_Jisにするという設定だけを書いた.htaccessファイルをアップロードします。そのテキストファイルを、jQueryで読み込ませてみました。

７．今度は普通に表示できました。画面左下の＜本日の業務は終了しました＞以下が、読み込んだテキストファイルの記載です。この部分にはまるテキストファイルを現用のフリーウェアでアップロードしてあげれば、jQueryがそれを読み込んでHTMLのページの一部にして表示してくれる、そんな理屈です。逆に.htaccessを削除してページを読み込ませたら、文字化けが出ました。つまり同ファイルによる文字化け対策が有効だと確認できました。

８．試しに同部分のCSSをいじってあげると、最初の一行目は赤に（p:first-line　で指定）、それ以外は該当箇所のidに指定した通りの色になって出力されています。なぜか、いまのところフォントサイズは調整できません。

９．あとは一回だけ保有サイト内全HTMLファイルの更新をおこない、この情報を表示する箇所とjQueryの導入をしてしまえば、その零細事業主はこれまでどおり、電話受付状況その他のお知らせをサイト内に表示する、表示の元となるテキストファイルはフリーウェアを利用して簡単にアップロードできる、という環境が実現できることになります。これ自体は、一斉に置換するソフトを利用すれば文字通り一斉に終わります。

手順を整理してしまえば理屈は簡単なので、借りているサーバで.htaccessが使えて、あとはテキストエディタ（またはHTMLエディタ）とFTP機能を兼有しているようなソフトをお持ちであれば、どなたも簡単にウェブサイト内に更新が簡単なお知らせの表示機能を持たせることができそうだ、ということになりました。

---

さて。上記はあくまで『そんな事業主がいたようだ』というおはなしです。

当事務所のウェブサイトにも今後お知らせの追加や受付状況のご案内が実装されるかもしれませんが、それはデザイン性とわかりやすさの両立を目指す改善施策の一環であり、決して決して、昼寝時間の確保のためではありません（遠い目）

最後に、リンク先の記事をお書きになった皆さま方、大変参考になりました。どうもありがとうございました。おかげで昼寝が（以下略）