13日の金曜美術館|アトリエ如瓶|ブログ・ヘッダ画像

このブログは、世の中の様々な「黙っていられん!!」ことを書くことを主旨としております。お客様や、お客様になるかも知れない方が読む可能性のあるブログではありますが、(書き手が勝手に決めたものながら)主旨を尊重し、常体文で記述して参ります。何卒お含みおきの上、お読みくださいますようお願いいたします。

外部ファイルをhtml上で表示できない!

ほとんどのウェブサイトには、ヘッダやフッタなど、サイト全体で共通して使われている部分がありますが、これらを別個のパーツとして作成し、どのページにも読み込ませることができれば、年明けにフッタの年号を変更したいときなど、フッタ用のパーツだけ変更すれば、全てのページに反映されるので、メンテナンス性が非常に向上します。
アプリケーションに付随する機能を使ったり、サーバ上で動作するプログラムを使ったりなど、幾つもの方法がありますが、私はjavascriptというブラウザ上で動くプログラムを使い、アトリエ如瓶サイトの共通部分を一括管理できるようにしています。
とはいえ、奥深いjavascriptについては必要が生じたときに最小限の知識をネットで勉強しているため、思うように動作しなくなるとお手上げになります。
今回のケースについての対処法が役に立ったと思える方は少ないでしょうが、備忘録も兼ねて紹介しておきます。ただし長文なので、文末の結論だけ読んでから、内容を読むかどうか判断してくださって構いません。

サイトの構成と経緯

アトリエ如瓶サイトは、本来のトップページの1つ下の階層にトップページを配置しています。
もともと絵描きだった私は、先に絵画作品を紹介するサイトである「13日の金曜美術館」(以降「13金」)を2000年に公開していたのですが、アトリエ如瓶として独立するにあたって、もともとあったトップページから、絵描きとしてのサイトとデザイナーとしてのサイトを振り分けたサイト構成にして、アトリエ如瓶サイトを制作し、2015年に公開しました。どちらも同じパワーバランスで取り組もうという気持ちを、サイト構成に託したわけです。

アトリエ如瓶サイト(以降AJサイト)は、サイト制作も請けようというデザイナーのサイトなので、先述のjavascript(以降js)や、html5、css3など、最新とはいえなくとも、当面は通用すると思われる手法を極力使って作成していましたが、仕事でウェブ更新やバナー作成などの仕事をしていたものの、cssやjsを使って新規サイトを制作するのは大変な作業でした。

経緯はこれくらいにして、問題が起こったのは、cssもjsも申し訳程度にしか使っていなかった13金サイトをアトリエ如瓶サイトと同様に、cssやjsを駆使したサイトにリニューアルしようと思い立ったところから始まります。

 

症状・フッタが表示されない

13日の金曜美術館サイト構成図
13日の金曜美術館サイト構成図

先述の通りのサイト構成ですが、13金サイトの階層にも、AJサイトと同様にcssファイルやjsファイル、また共通して使うパーツのhtmlファイル用のフォルダ(cmnフォルダ。普通はcommonという名前をつけることが多い)を作り、AJサイトをお手本にしながら制作しようとしていたのが、トラブルが起こったときのサイト構成です。
フッタのhtmlファイルに、AJサイトと同じファイルネームを付け、フッタを表示させたいhtmlファイルのheadタグ内でjsフォルダ内に用意しておいたinclude.js(このファイル内で、cmnフォルダ内のフッタ用のhtmlファイルを読み込むように指示)を読み込ませるようにし、フッタを表示させたい位置にwriteFooter("./")と、ここにFooterを書き出してくださいと、AJサイトのjsのコードをコピー&ペーストしました。("./")の部分で、フッタを表示させたいhtmlファイルと同じ階層にあるjsフォルダ内のinclude.jsファイルを読みに行くように指定してあり、jsフォルダと同じ階層にあるフォルダ内のhtmlファイルに表示させたければ("../")としておくわけです。
準備が整ったので、テストサーバに必要なファイルをUPしてみたのですが、用意していたフッタ用のhtmlファイルが全く表示されませんでした。
AJサイトと全く同じようにしているのに何故!?

 

検証と解決

とりあえず、お手本としてしたAJサイトの該当する部分を見直しましたが、表示したいhtmlファイルの位置とjsフォルダ、cmnフォルダ、さらにcssフォルダの位置まで何度も何度も確認し、ミスタイプや階層の指定違いなどないかまで確認しましたが、正常に表示されているAJサイトと差異はありませんでした。
外部のhtmlファイルを読み込むのに参考にしたサイトをもう一度探したり、冒頭でも紹介した他の方法を試そうと検索しまくったり……と、検証だけで土曜を1日潰してしまいました。
翌日の日曜の朝から、更に土曜にやった検証を繰り返したりしましたが、やはり結果は同じでしたが、そのうち、
「ひょっとしたら、全く同じなのが良くなくて、階層の指定や同じファイル名のjsをブラウザが混同し、コンフリクト(=矛盾。この場合も使って良い言葉かどうかは未調査)が起きているのかも知れない!」
と思ったので、13金の階層内のcontents.htmlだけをAJの階層内のindex.htmlがあるのと同じ階層へUPし、AJサイトのURL+contents.htmlを入力してブラウザで表示してみたところ、AJサイトのフッタがバッチリ表示されました。やはり別な階層であったとしても、jsのファイル名やwriteFooter("./")などの指定が全く同じなのがまずかったようです。

テストサーバ内のcontents.htmlの位置をもとに戻し、jsファイルの名前を書き換えたり、writeFooterf("./")(階層/fine/のfを末尾に付けた)と書き換えるなどしてみましたが、結果は同じでした。結局、/fine/と/dns/と振り分けてはあっても、同一サーバ内で複数の同名jsや同じコマンドを使おうとしていることに問題があるのかも知れない……という結論に至りました。
つまり、次の図のようにサイト構成を組み直す必要があるのではないか……と。

13日の金曜美術館サイト構成図(改・抜粋)
13日の金曜美術館サイト構成図(改・抜粋)

図の通り、振り分けた階層ごとにjsフォルダを用意するのをやめ、それぞれの階層用のjsファイルであることが分かるようなファイルネームに書き換えて別々に用意して、1つのjsフォルダ内に保管し、それぞれのhtmlフォルダに必要なjsファイルを読み込ませ、その中で指定してあるhtmlファイルを読み込むように構成を組み直したわけです。
それぞれのjsファイルを図のようにリネームし、13金サイトと、AJサイトと、それぞれ1ファイルずつ、リネームしたjsファイルを読み込むように指定し直して、それぞれをブラウザで表示してみると……バッチリと、ズバリと、それぞれのフッタ部が正常に表示されました。感動のあまり、目頭が熱くなりました。(苦笑)
すでに出来上がっているAJサイトの全てのhtmlファイル内には、リネーム前のinclude.jsを読み込むように指定がしてあったので、修正する手間を考えると暗澹たる気持ちになりましたが、それも漏れなく終えて、無事解決しました。本当はコーディングに使っているDreamweaverを使えば、複数のファイルの同一箇所の検索・置換ができることは知っていたのですが、連日の検証で参っているところに、取り返しのつかない失敗をしそうなのが怖くて、結局手動で書き換えた次第でした。

 

結論!!

同一サイト内で、デザインや構成の違うサイトを別な階層に振り分けて運営しようと思っても、jsファイルは振り分けるのと同じ階層にjsフォルダを作って1フォルダで管理すべし!!

……ということになります。これらの検証と解決のために、まる2日かかったというお粗末でした。
13金サイトのリニューアルは、まだまだ沢山の課題があるので、もう少し時間を頂くことになりそうです。
それにしても、AJサイトもろとも異常がでるならまだ分かるものの、後から作り始めた13金サイトのjsファイルだけに異常があったのは何故だかは分からずじまい……です。

同じようなトラブルに頭を痛める方のお役に立て……るようなことはないでしょうねえ。

今回は、検索で引っかかりそうな字句をたくさん使ったし、できれば参考にしてほしかったので、敬体文で書きました。

マリンフレッシュの容器

マリンフレッシュの容器
学生の頃に購入したボディーソープ

写真は極力使わずにブログを書こうとする方針は変えないつもりだけれど、今回は写真からスタートしよう。
ただし、ある程度キレイにしたもののばっちい感じの写真だったりする。

被写体はホディーソープの容器で、空になったらきれいに洗い、すっかり乾燥させてから別物の詰め替え用ボディーソープを注ぎ込みという行程を繰り返して、今も現役で使っているものである。
ご覧の通り、容器の印刷もかなり剥げてきていて、メーカーの名前すら判別できないのだが、購入したのが学生の頃だったのは間違いなく、風呂付きのアパートに引っ越したのが大学3年(1988年)の頃だったので、恐らくその頃購入したのではないだろうか。

気になるので、メーカーや発売日などを調べてみた。
さすがにネットが普及するよりだいぶ前の商品なので、容器どころか商品名すら過去のものになっていたが、ライオンの商品で、1984年6月7日発売であることが分かり、発売から5年経っていたとはいえ、上掲の商品で間違いないだろう。
この情報を得られたサイトに、商品の写真の掲載はなかったので、「マリンフレッシュ」なるボディーソープの商品写真がネット上で公開されたのは、発売から34年経った今が初めてのことなのかも知れない。

さて、私が購入したと思われる1988年は昭和の末期であり、この容器を30年間使っていることになるのだが、注目すべきは私がなかなか物を買い替えないケチな男であることではなく、ある程度繰り返して使うことを想定されていたとはいえ、詰め替えずに買い替えるユーザーもいるであろう金額の商品の容器が、30年間の使用が可能な耐久性を持っているということである。やはり日本の工業製品はスゴい。
乱暴な比較かも知れないが、近年の建築物や自動車や家電などにしても、30年経つとかなり老朽化や劣化が進み、正常に機能しなくなりがちなことを考えると、流石に幾らかピストン部の気密性は怪しくなっている気がするものの、購入時の機能は立派に果たしている。

「どんどん買い替えて経済も工業も発展させるべし」と、「捨てる理由がないものは使い続けるべし」と、考え方は二手に分かれると思うが、私は後者。
30年に渡って裸の付き合いをしてきたこの容器と、簡単に決別する気にはなれないので、完全に機能を失うときまで、付き合っていこうと思っている。

このブログについて 3

もともとレンタルサーバの利用者が無料で使えるツールを使って書いていたこのブログだったのだが、母体となるサイトのデザインと同様にするのはかなり難しいし、ブログはブログと割り切って別なデザインでもよしとしようと思ってはいたものの、アクセス解析などしていると、ドメインが違うためアクセスを計測できないし……と、何か気乗りしないままで、あまり更新もせずにいた。
この度、せっかくサイトをリニューアルしたことだし、昨年もWordPressというブログツールを用いてお客様のホームページにブログページを追加し、ある程度やり方が分かっていたので、ウチのブログも作ってしまえ……とばかりに、サイトのリニューアル作業の疲れもとれないまま、ブログの移行も試みてしまったのである。

ある程度勝手がわかっていたとはいえ、自分でデザインしたページを、WordPressで作り直すのは至難の業。自分で設計したページならば、ここの幅を変えたいとか、個々の色を変えたいなど、概ね自在に調整できるのだが、WordPress上で作れるページに置き換えていこうとすると、どこのどの部分をどこで制御しているかが把握しづらい。例えそれが把握できたとしても、普段どおりのやり方では思うようにいかないことが多く、何度も勢いで取り掛かった作業を悔いる気持ちになった。
こうした作業の経験のない方には伝わりづらいと思うので言い換えてみるならば、レシピを教わることなく有名店のラーメンをカップ麺で再現しようとするくらい、あるいは別な車をベースに改造を加え、自分の乗りたかった車そっくりに造り変えようとするくらい大変……と書けば、幾らか分かって頂けるだろうか。とにかく、再現するということは、新しくて素晴らしいものを作るより大変なこともあるという一例だと思う。

WordPressでサイト制作をしたことがある方ならば、ブログページだけじゃなくて最初っからサイト全体をWordPressで作れば良かったじゃないか、と仰るかも知れない。そう、WordPressでも、ブログページのような動的なページだけでなく、ブログページ以外のような静的なページを作ることもできる。動的・静的ページについての説明は省くが、前述の通り、まだまだ気心が通じていないWordPressを用いて、平素の自分の実力を発揮できるかというと、これはこれでもう少し修練が必要だし、旧来のページのテイストを踏襲したい部分もあったし、当アトリエの推すbottom 0ナビを組み込むにも、かなりの力業を使わないと「再現」できない。これも置き換えて表現するならば、インドネシアの食材だけで寿司を作ろうとしているようでもあり、彫刻家のロダンに水墨画を描いてくれと依頼するようなものでもあり……と書けば、幾らか伝わりやすいだろうか。

そもそもWordPressというツール自体が無料で使えるだけでなく、ある程度作り込まれた無料で使える「テーマ」というものが無数に存在している。WordPressをインストールし、気に入ったテーマを選択してインストール後有効化し、もともと用意されていたトップ画像を貼り替えたり、背景色や文字色などを変更していけば、初心者でもある程度オリジナリティのあるブログページが作れるようになっているのがWordPressの良いところで、世界中で使われている根拠となっているのだけれど、お代を頂いてデザイン性もオリジナリティも高いサイトを作るのが仕事のデザイナーが、それと同じようなやり方をするわけにはいかず、しかもデザイナーとしての力量が問われる自分のデザイン事務所のサイトなのだから、ロダンに水彩画……は避けたのだ。

あっと、タイトルの話題に戻ろう。
このサイトは、アトリエ如瓶というデザイン事務所のオフィシャルなサイトであり、このブログもオフィシャルであるのが本来の姿のはず。ブログ付きのサイト制作・維持管理を依頼されたお客様には、「ブログはお客様が読む可能性が高いので、失礼の無いよう敬体文で書くのが望ましいです」などとアドバイスしていたくせに、移行前のブログは堂々と常体文で書いており、我ながら自分のサイトがオフィシャルなサイトであることに対する自覚が足りなかったとは思う。それに今更気がついて、この際ブログの主旨も変えてしまおうかと思ったものの、「黙っていられないこと」をテーマに文章を書きたいという気持ちは意外と強く、このまま進めることにした。
やはり、文章というものは書きたいことを書いてこそ、面白みが伝わるのではないかと思うし、幾ら定期的に更新されても、書き手が面白みを感じずに書いた文章でPV向上もないだろうと結論づけ、常体文にて黙ったままにしないことにしたのをご理解いただきたくて、ブログページの前文に「常体文で書きますよ」と断った次第であります。
改めて、この文中でもご理解のほど、よろしくお願いいたします。

あー、リニューアル作業の疲れと戦いながらも、2000字を超えてしまった。ロダンに水彩画という例えのイマイチさに疲れを感じるけれど、PVを集められるようにするには、1000字以内にしないと無理だろうなあ。

最後に、写真のUPテストとして、自撮りしながら失敗したプロフィール写真でもUPして寝るとしますか。

失敗写真
失敗写真