カテゴリー: javascript

特定のページでのみ外部JavaScriptフィイルを読み込ませたい、 と言う要請は、 WordPressなどではfunctions.phpを用いて実装するのは最早お馴染みの手法である様に、 割と頻繁に受けるものです。

稼働中システムの追加要請

処が諸事情に因り、例えば企業などでは一旦導入したシステムは使い続けるのが通常ですから、 往往にして融通の効かない古い独自のCMS上で此れを実現しなければならない場面があります。 具体的には各々ページに読み込みファイルが書き込んであって、一括管理できない、 と言う形式の上ではなかなか実装が難儀だったりする訳です。 その様なCMSのシステム上でソースを読んで一括管理できそうなファイルを見付けて、 例えばPHPに於いては $_SERVER など環境変数で場合分けしようとしても ヘッダー部分にのみ反映されるファイルだったりすることもあるでしょう。

手元の事例では幾ら新規に必要な外部JavaScriptファイルの読み込みに成功しても、 機能しないのに首を捻って、更に突っ込んで見てみると、 其のJavaScriptファイルはjQueryを必要としているのに、 当のjQueryファイルがフッター部分での読み込みになっていたりします。 必要なjQueryが読み込まれていないのですから機能する筈もありません。 しかもそのjQueryファイルを読み込むのは各ファイルにインクルードの旨、直書きされる、拡張子 .html のHTMLファイルで .htaccess を書き換えて拡張子の制限を広げたりするのも要らぬオーバーヘッドが発生しそうですし、 全読み込み元ファイルをPHPファイルなどにするのも工数が嵩みますし、 成る可くなら他に影響を与えたくないための当初取ろうとした手法であれば、本末転倒です。 するとフッターファイル内で場合分け操作ができない状況も鑑みねばなりません。

現在一般的なレスポンシブWebデザインでは、 基本的にパソコン画面と同様のHTMLソースをスマホ画面でも表示させます。 其の際、スタイルシートを駆使しますが、 一般的に縦長画面で閲覧されるスマホ画面では工夫が必要になります。

画面縦長変化に於ける工夫

パソコン画面で横に広く表示させていたコンテンツも スマホ画面では縦長にならざるを得ないため、 例えば横に並列して並べていたコンテンツを故意にカラム落ちさせ、 縦表示させるテクニックはごくごく基本的な手法です。

処がコンテンツによっては其の基本的な手法が適切でない場合もあります。 其の様なケースではスマホ画面の場合にはタブ切り替えは屡々採用されるテクニックです。 ネットで検索しても有用な情報が多く見付けられます。 例えばQiitaにも2017年8月6日付けで以下の情報が寄せられています。

jQueryとCSSでシンプルなタブ切り替え

記載されるコードは散見される同様な情報が上手くまとめられたように、 簡便さに加え汎用性も考慮され書かれています。 基本的には切り替えボタン用のタブを構成するタグと、切り替えられるコンテンツを表示させるタグが同数用意され、 初期に表示される以外のコンテンツを含むタグには非表示属性、 display: none; がスタイルシートで付与されており、 クリックされたタブと同じ、先頭から数えた数のコンテンツタグ以外に非表示属性が与えられるように jQuery で処理される、当該機能の定番的な構成が取られています。

TABLEタグの場合

処でレスポンシブWebデザインで扱い難いデータに表組み（tableタグ）があります。 一般的にパソコンの広い画面では一覧性に富み、 表組みも全体を表示させられる余裕がありますが…

スマートフォンに於けるWebサイト表示では PC表示に比べて一般的に表示領域が狭くなります。 スマートフォンでは縦に構えて閲覧される場合が多ければ特に横幅は制限が生じるものです。 此の為、一覧性が劣れば工夫が表示にも必要になります。

問題点の検出と本記事の目論見

例えば図に見られる様にリンクリストをカテゴリ毎にまとめ 上部にタブを設え該当するリンクリストのタブがタップされた場合に リンクリストの表示を切り替えるのはしばしば見られる手法でしょう。 図ではデフォルトでオレンジ色のリンクリストAがアクティブとなって表示されており、 他の緑色のリンクリストB、薄紫色のリンクリストCは非表示となっています。

処で、其々のリンクリストカテゴリ内のリンクが増えれば、 此れ又、縦に長くなってスクロール必須の一覧性の劣る事態が生じますから、 下の図の如く其々のリンクリスト下部に示した様な其々のカテゴリに応じた ページングを表示するのも良く用いられる処でしょう。

此れを何も考えず其々のリンクリスト上のページングリンクをタップすると どのカテゴリのリンクリスト上あったとしても 新しく開かれるページはデフォルト状態であり、 上の図で言えばリンクリストB上のページング、リンクリストC上のページングから遷移して開かれるページでは リンクリストAが表示されてしまうでしょう。 閲覧者の身になればリンクリストB上のページングから遷移したページでは 開かれるタブはリンクリストBでなければ困惑してしまいます。 此れではユーザービリティ上、大きな問題を抱えていると言わざるを得ません。

其処で此の問題を解決する為に…

デザイン上、問題ないレベルのレイアウトを安易に実現出来るため屡々採られる一部を幅広に取るモデルがあります。

画像スライダー導入で発生する問題

中でも図示した様にメイン画像の部分を幅広にするだけでなく 其の画像が次々に切り替わる所謂画像スライダーを実現したいと言う要請は決して少なくはないようです。

しかし此の要請の実現に於いては問題が発生します。 画像スライダー部分をページ全体を規定する一定の幅より広く取ると ブラウザの表示時、デスクトップパソコンなどで充分画面サイズが広ければ問題ないのですが 一般にノートPCなどの小さな画面では横幅が収まり切らず横スクロールが発生し、 ちょっとしたことで画面が左右に動き扱い難いだけでなく 此の様なデザインを良しとする向きには許容範囲を超える横スクロールバーが表示されてしまいます。

処で解決のために画像スライダー部分をレスポンシブ対応にすると ブラウザの横表示が狭い場合には横幅はきっちり収まるのですが 縦幅も応じて小さくなってしまい、 他のコンテンツ部分と著しい差が生まれてしまいます。 此の時画像だけならまだしもメイン画像部分には惹句などが記されることも多く 其れ等の文字は極めて読み難い状態が招かれざるを得ません。

問題解決の基本方針

此の問題を解決するためにメイン画像部分を背景画像、即ちスタイルシートで background-images に指定する方法が考えられるでしょう。 此の手法を取れば画像を常に一定のサイズで表示されるにも関わらず 幅広の部分の横幅がブラウザサイズを超えても ブラウザサイズがページ全体を規定する一定の幅以上であれば横スクロールは発生しません。

Firebug の設定が Gmail と干渉することがある様で、 突然 Gmail 上にアラートが表示されました。 以下が引用です。

Firebug を正しく設定しなければ、【独自ドメイン】 メール の速度が低下します。 修正する 表示しない

この文章内の 修正する にはヘルプページへのリンクがはってありました。 Firebug により Gmail の速度が低下します リンク先の内容を見ると兎に角 Firebug をGmail に於いてだけでも停止させろとなっていて、 確かに Gmail 上で Firebug の例えば コンソール を見るとエラーではないものの大量の出力がされており、 好ましくない状態であるのがわかります。

ただ先日 Firebug の有用さを感じたばかりで、 javascript は現在Webに携わるには欠かせませんし、 とは言え Gmail とて無くてはならない状態にあります。

取敢えず手元のメインPCでは特に問題らしい遅延も 出ていませんので様子を見ようと思いますが、 速いマシンがあれば先ずは問題解決なんでしょうね。

本ブログでは javascriptライブラリ ｊQuery を他javascriptファイルから読み込ませていました。 これは単一のファイルに javascript 及び CSS ファイルを全てまとめて、 更新性を良くする為です。

その読み込むための javascript のソースは…

ブログ上で javascript を実装するのは様々な制約がある上に、 記事毎に条件が異なったりとなかなか困難が多くて問題も出易いようです。 2011年4月24日の記事 他ブログ更新情報の自ブログへの表示 でブログのテンプレートに必要な外部 javascriptファイルを読み込ませる様に設定しました。 これは問題なく稼動し始めたのですが、 思わぬ処で問題が出た様です。

このブログはHamaZo（はまぞう）ブログシステムを利用しているのですが…

随分とフィードの表示としてはまともになって来たかな と感じている2011年4月19日の本ブログ記事 フィードの表示文字数を制限するjavascript関数 ですが、まだ大事なものが欠けていました。 それは時間表示です。

フィードに含まれる時間データをそのまま表示するのも無粋だなと思っていたところ 次の記事を見付けました。 jQuery: JavaScriptでサイトのRSSを読み込み&表示。XML操作。ドメイン内部編。 主にはこれはフィードを扱う内容なんですが、 本ブログでは2011年4月18日 ノープログラミングXMLフィードのJSONP変換方法 で解決したクロスブラウザ問題は扱われていません。 実は提供されているダウンロードファイルに含まれるスクリプトには…

文字列を指定数に切り詰める関数として 確か javascript には truncate() が用意されている筈とのうろ覚えで、 しかし使ってみればそんなメソッドをないとデバッガに怒られ続ける始末、 確り調べてみればそれは prototype.js に用意されている関数だったのでした、お恥ずかしい。

それと云うのも本ブログは2011年4月18日の記事 ノープログラミングXMLフィードのJSONP変換方法 で表示したフィードの description が生の儘ですからひどく冗長で記事的にも只のサンプルが邪魔な印象を与えると思い、 文字数を限定する必要があると感じたからです。

さて、ではどうしようと更にグーグル先生に相談した処、 JavaScriptでマルチバイト文字列を決まった長さで省略する方法 なるドンピシャの記事を紹介されました。 この記事によれば…

面白い記事 小学校4年生の三角形の作図の問題です があったのでjavascriptにしてみました。 問題を以下に引用します。

小学校4年生の息子の宿題で、三角形の作図の問題が出されました。 その中に
辺の長さが　３cm、３cm、６cm　の三角形をかきなさい。
・・・というものがありました。

生徒の質問に先生は描けると断じたとの話しで、 以下に三辺の長さによって描画可能かどうか、 調べるスクリプトを書いてみました。 難問です（笑）