タブ表示したカテゴリ毎のリンクリストでリンク先でも同カテゴリを表示する

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

スマホでリンク先リストをカテゴリ毎にタブ表示する

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

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

リンクリスト上のタブをタップすればリンクリストの表示が切り替わる

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

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

"タブ表示したカテゴリ毎のリンクリストでリンク先でも同カテゴリを表示する" の続きを読む

jQueryによるaタグリンクアドレスへのディレクトリ挿入処理

スマートフォン閲覧用のWebサイト制作にあたって、 「/sp/」などと命名したディレクトリを立て、 ルート「/」のPC版と一対一で対応させた上でスマートフォンからのアクセスの場合には スマートフォン専用ページを表示させるのは以前は一般的な手法でした。 現在ではレスポンシブWebデザインが主流となり余り見られなくなった手法ではありますが、 当該手法を採用したWebサイトのメンテナンスに於いては PC版との整合性を取る必要に迫られる事案もあります。

 

例えばブログシステムに於いて一般の利用者が記事投稿する際に 内部リンクを記載すればPC版にリンク先を求めるのは当然でしょう。 すると然るべきリダイレクトが施されていない場合には スマートフォンで当該サイトを訪れた閲覧者はPC版リンクを踏みますから 折角用意したスマートフォンページは表示されはせず、 一般的に横幅の広い、従って小さな文字のページの閲覧を強いられる格好になってしまいます。

其処で問題のあるリンクに於いては スマホ版での巡回に支障をきたさない様に配慮し、 PC版のリンクアドレスをリンク時に改変して「/sp/」を先頭に挿入したい要請があります。 本記事では此の実現にjQueryを用いて解決を図りたく思います。

"jQueryによるaタグリンクアドレスへのディレクトリ挿入処理" の続きを読む

WordPressにJavaScript背景画像スライダーVegasを導入する

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

Webページの一部分だけ幅広にするデザインモデルに於いて幅広のメイン画像部分を画像スライダーにするデザインモデル

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

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

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

此の問題を解決するために…

"WordPressにJavaScript背景画像スライダーVegasを導入する" の続きを読む

テーブルタグのレスポンシブ対応とiPhoneのフォント指定無効問題

スタイルシートで確りフォントサイズの指定をしているのに iPhoneに限って其の折角の指定が無効になっている場合が多々あります。 確認の為にPCブラウザのエミュレータで見て見ても問題ないのにiPhoneでは想定外のフォントサイズで表示されている事例としては Portraitモード、即ち縦位置で見ている画面をLandscapeモード、即ち横位置にすると 文字サイズがは大きくなる現象は割と知られているのではないでしょうか。 此れはスマホに於けるユーザービリティを考慮して スマホのブラウザでのみ有効な -webkit-text-size-adjust なる属性が用意され効いているのに起因するのも周知されている処だと思います。

しかし例えば自前のブログでは屡々振り仮名を持ちいるのですが 此の時利用する ruby タグで囲った部分には此の属性は効かないようで タグ内に記入した文字は横位置でも縦位置と同じフォントサイズであれば 横位置では思わぬ不揃いの文章表示となってしまうのでした。 此れなどは以下のリンク、サイト ヒビヅレの2011年5月24日の記事などに代表される情報を参照すれば bodyタグ、若しくはフォントサイズを指定する箇所の大枠部分に -webkit-text-size-adjust: 100%; を効かせてやれば解決するのでした。

"テーブルタグのレスポンシブ対応とiPhoneのフォント指定無効問題" の続きを読む

CSSのみでスマホのときだけ電話番号をタップ発信させる方法

商売上のホームページではヘッダーやフッター、及び必要コンテンツ内に 電話番号を表示するのは閲覧者に連絡を取って貰いたいならば欠かせません。 表示させるだけならばHTML上で記述すれば済む話です。 しかし最近ではスマートフォンが充分普及し個人個人が所有するようになり ホームページの閲覧も多くがスマートフォンからのものを配慮する必要があるようになりました。

スマートフォンは携帯電話ですから出来得るならば 電話番号の表示をタップしたと同時に通話発信して欲しいものであるのは言わずもがな、 此の事情を配慮して電話番号とおぼしきテキスト表示には スマートフォンに依っては自動でタップ即発信機能を持たせた機種も多くあります。

ところでデザイン上の配慮などで画像で電話番号を表示させたい要請も多くあります。 此の時画像をタップして通話発信させるには例えば以下のようなリンクを張る必要があります。

<a href="tel:0123456789"> <img src="/images/0123456789.png" alt="0123456789" /> </a>

此のHTMLコードはもちろん スマホでもPC画面上でも適用されますので 機能して欲しくないPCに依る閲覧時にもクリックで電話発信しようとして 警告ダイアログを閲覧者に拝ませる羽目になります。 此の事態は出来るならば避けたいものです。

"CSSのみでスマホのときだけ電話番号をタップ発信させる方法" の続きを読む

Windows10機へのCompassの導入とDEPRECATION WARNING問題

3D用にと誂えたWindows10機も仕事用に漸く侵食されつつあり 此れでMicrosoft社のオフィスでも導入しよう日が来ようものならば世の儚さを思わされ なかなか悲しいものがありますが此れもまた世の習いなれば致し方なし、 さてこそホームページの作成、編集に最早 Compass は欠かせないツールとなっておりますれば オフィスの導入に先立っての導入となりましたが CompassのインストールとCSS変換時に文字が消える問題の解決 の如く多少トラブルのも毎度のこと、 観念して対応作業を実践した顛末が本記事と相なります。

CSSフレームワーク Compass には其のインストールに先立って拠って立つ処の Sass 、そして Sass を導入するための RubyGem 、 そして又 RubyGem を動かすための言語 Ruby の導入が必須となりますが Compass 利用者には既知のこととて改めて述べる迄もないでしょうが老婆心ながら下に軽く手順を記し置きます。

"Windows10機へのCompassの導入とDEPRECATION WARNING問題" の続きを読む

ポワッソン分布に於ける加法性の証明

X1、X2が独立で、 それぞれ平均a1、a2のポワッソン分布に従うとき、 Y=X1+X2は平均 a1+a2のポワッソン分布に従う。

上記の命題が真であることを証明するには…

"ポワッソン分布に於ける加法性の証明" の続きを読む

GAEに於いてcount()で1,000件以上を取得する

自らの運営する HamaZoランクチェック!Google App Engine (以下GAE)上に構築していて、 はまぞう(HamaZo)ブログシステムに於いて 一度でも200位以内に入ったブログをDBに登録しています。 機能の一つとして パーソナル検索 を用意していて当該ページを開くと 現在DBに登録されているブログ数を表示しています。

この数値を取得を count() で得ていた訳ですが、GAEの仕様で1,000以上の数値は返されませんでした。 DBに1,000件以上レコードが登録されていても all().count() で返ってくる数値は1,000だったのです。

遂に先月は2011年5月に HamaZoランクチェック! に於ける登録ブログ数も1,000ブログを越えましたので、 この問題に対処する必要が生じました。 これを解決するのに参考にしたサイトが…

"GAEに於いてcount()で1,000件以上を取得する" の続きを読む

Firebug と Gmail

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

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

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

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

Google App Engine SDK for Pythonをアップデート

Google App Engineを利用してWebアプリを開発するには SDK(Software Development Kit) が必要な訳ですが、 これを2011年4月26日に暫く振りでアップデートしました。

メインマシンのWindows7に Google App Engine SDK for Python の最初のインストールをしたのは…

"Google App Engine SDK for Pythonをアップデート" の続きを読む