技術メモ カテゴリー

web系技術メモ

いわゆるSSLのページです。「https」で始まるセキュアなページ。
リンクの書き方でちょっと工夫する必要があるのですが、エレガントな記述方が見つかりません(ノ∀`)

リンクの記述方

セキュアなページ「へ」のリンク

通常のページからセキュアなページへ飛ぶには、リンクをhttpsから始まる絶対パスで記述します。

セキュアなページ「から」のリンク

セキュアなページから通常のページへ飛ぶには、リンクをhttpから始まる絶対パスで記述します。

不都合

  • ローカル環境で確認しにくい
  • 更新直前に書き直す必要が生じる場合が多い
  • 複雑化する

なんだか、必要以上に面倒くさいのです。「必要以上」と言うのは個人的な感覚に過ぎませんが、もっとエレガントな方法を取れば労力を大きく節約できるに違いありません。
おそらく諸悪の根源は、URI(URL)に位置情報であるサーバ名やファイル名だけではなく、通信情報であるポート番号やプロトコル(スキーム)まで含まれていることです。

どうなればエレガントか

プロトコルとパスの指定を分離できれば。例えば、
<a href=”../index.html” by=”http”>トップページへ</a>
などと記述できれば、プロトコル指定が必要で位置を相対指定できない問題が解消されます。
ええ、無いものねだりですとも・゚・(ノД`)・゚・

コメントは受け付けていません。

メニューなどで、マウスが乗ると画像が反転したりする、アレのお話です。
(ソースを格好よく表示するプラグインが本末転倒になっておりますが…)

昔は、Javascriptで反転

メリット

  • とにかく、安定して動く
  • 印刷でも背景扱いにならない

デメリット

  • とにかく、HTMLソースが読み辛い
  • IEでツールチップ(ポコっとなるaltの代替テキスト)が出る

トップへ

昨今は、cssで反転

メリット

  • HTMLソースが読みやすい
  • 複数の画像を1つにまとめちゃったりもできる
  • ツールチップが出ない

デメリット

  • CSSソースが読み辛い。凝り具合によっては壊滅的
  • 印刷が背景扱いになる
トップへ

これから(既にか?)は、再びJavascript

メリット

  • HTMLソースはなかなか読みやすい
  • CSSソースもかなり読みやすい
  • 印刷で背景扱いにならない

デメリット

  • IEだとやっぱりツールチップが出る
  • 弱いPCだと重い場合も考えられる

トップへ

しばらくJSで行ってみます

hタグに画像が入ったり、ナビ上でツールチップが出ちゃうのが気に入りませんが、座標取りが楽で印刷対応も柔軟に行えますし、なによりcssがキレイなので、来月からはマウスオーバーはJSメインで組もうかな。現在作業中の案件も同様。

Comments (2)

月並みに言いますと、ウェブサイトにはその組織のあり方が鮮明に映し出されています。HTMLコーダ的に、リテール商品を取り扱う大企業をいろいろ観察し、そのエッセンスをまとめてみようと思いました。
…しかし、最初の一つの「三菱東京UFJ」が予想以上に興味深かったので、単体エントリに。

胃が痛くなりそうだが…案外

現場はものすごく頑張っていると思います(ノД`)
三菱東京UFJのサイトは見れば見るほど、胃に来ます。統合の関係でカオスの道を進んでしまった基幹システム部の悲劇は隠しようもなくはっきりと見え、無関係な私でさえ胃が…。
とは言え、純粋にウェブサイトとしてみると、なかなかエレガントではありませんか。情報構造はスルーしますが、ドメインも含めてグループ間でもなかなか統一されています。

リニューアル中?

グループレベルでのデザイン統一は、なかなか骨の折れる仕事です。まず「ちゃんとした仕事」のできる組織でなくてはなりません。さらっと眺めてみると…三菱UFJ信託銀行だけ、ちょっとデザインが違いますね。
巨大サイトですと、少なからず万年リニューアルの様相もあるのですが、これには「大きな節目」のようなものを感じます(←結論としては誤解)。
近頃の流れも踏まえると、

  • より幅広に
  • センター寄せ

な信託銀行の方が新しいのでしょうか。なぜか、納得行きません。しっくり来ません。鈍い私の感覚でも、信託銀行以外の方がビジュアル感覚は優れているような(ノ∀`)
ソースをみてみます。おおーグループのほとんどのページはテーブルレイアウトなんですね。信託銀行だけXHTML定義。最近の流れではCSS化もリニューアルの動機になるようです。よくよく見れば、共通部はCSS化されていたり、トップ以外では印刷スタイルでナビ等を非表示にしてあったりも。なかなか経緯を感じさせる具合です。

三菱UFJ信託銀行

DTDがXHTMLな事も有り、tableも散見されるものの、まぁ一応CSS的か。そして…これは、硬派(ノД`)1行目に<?xml version=”1.0″ encoding=”shift_jis”?>が記述されています。
書いても書かなくても良いこの1行目。XML(HTMLではなく)としては書くのが理想的な表記なんだそうです。ただ、コーディング的にはIE6と非常に相性が悪く、なかなか厄介な存在。この1行を書くだけで、IE6への対応が大きく変わってしまう、難儀な呪文です。テーブルの多用はその辺にも理由があるのかもしれません。

成り立ちを調べてみる

そういえばそうそうそうそうでしたね。信託銀行は「引っ張りダコ」だったんでしたっけ。ひょっとすると、その辺の影響が表れているのかもしれません。
スタートは、2005年の10月。確かに、CSSとtableの混ざり具合は2005年的かもしれません(ノ∀`) Internet Archive的にも、近年こうなった訳ではなく、2005年の発足当初から今のデザインだったようです。つまり、リニューアル中でもなんでもなく、最初からそうだったんですね。

得られたエッセンス

銀行系サイトですと、どこも結構イライラするんです。私は。得たい情報になかなかたどり着けなかったりで。手っ取り早く電話で聞いちゃったりさえします。なので、醍醐味の詰まっているであろう情報構造に関してはあえてスルー\(^o^)/銀行系の経験もありませんし、情報構造に踏み込むのはちょっと失礼な気もしました。
…まぁ、そもそも失礼なエントリなんですがね(笑)

避けては通れないカオスが存在する

ネットバンキングが2系統ある。このカオスだけで逝けます。要望や命令も2系統なんでしょうか(ノД`)それを吸収し翻訳する機能を持つ部署なり担当者がいらっしゃるのでしょうが、その方が神なんですかね。

レギュレーションこそ古いが頑張っている

究極クラスの超カオスの中、スタートアップはすばらしい仕事をしたと言えるでしょう。
そして、おそらくそのカオスへの対処は今日でもなお、大変な作業。費用も非常にかかっているでしょうし、レギュレーションの大幅改訂にも迫られているかもしれません。他人事ながら、頭が下がる思いです。

コメントは受け付けていません。

SyntaxHighlighterを入れてみました。

表示のズレ

私の環境ではcssが被って表示がずれてしまったので、SyntaxHighlighter.css を微調整。1行目にカンマを入れw6,7行目を追加。むむ、なんか変更点を文章で表現するのは早速格好悪いですね・゚・(ノД`)・゚・

.dp-highlighter,
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
	margin: 0 !important;
	padding: 0 !important;
	font-weight: normal;
	font-family: "Consolas", "Monaco", "Courier New",
	Courier, monospace !important;
	font-size: 12px;
}

専用タグを拡張

[code='css'] ここにコードを書く [/code]
等とするのがこのプラグインの書式です。
非常に便利なのですが、専用タグはなんかこう、ムズムズします。プラグインを変えた場合にコードとして扱われなってしまう痒さ。もっとも、専用タグを一括置換してしまえば良い気もします。
今回は、<pre>タグも専用タグとして使えるよう弄ってみました。

書き換えたソースも説明してみるつもりだったのですが、該当部が専用タグそのものなので上手く使えず・゚・(ノД`)・゚・
いきなり大失敗の予感です。

コメントは受け付けていません。

ページトップへ

背景画像の印刷

[技術メモ] 2008年5月8日(木曜日) 19:54

おのれwMSめぇwww

IEのデフォルトでは、背景扱いの画像が印刷されません。
「ツール→インターネットオプション→詳細→背景の色とイメージを印刷する」の呪文を唱える必要があります。IEは、なんでまたこんな深い場所に隠すのでしょう(ノД`)ちなみにOperaは印刷時にサクっと選択できるので素敵です。

文字列代替画像

例えば、<h1>ページのタイトルだぜこんちきしょう</h1>等とタグを書きます。
そして、単純な装飾では足らず、画像に置換するケースが少なく無いのですが、これが、印刷されません。
「呪文」を唱えれば済むとは言え、そこをナントカしてくれという要望も存在します。

印刷専用時専用の画像をHTMLレベルで入れ込む

<img … class=”forprint” />などとし、印刷時(@media print)以外は 非表示(display:none;)に。
しかし、タギング的にモヤモヤしますし、これ実は非印刷時でもしっかり読みこまれてます。(少なくともIE6では)印刷用に大きな画像読んじゃおうかな!なんて欲張ると結構な転送量に。

印刷専用スタイルにする

画面の印象と大分変わってしまいます。それを逆手にとって「画面はモニタインタフェイス専用、刷れば即A4パンフ!」なコンセプトしてしまうのも手ではあります。

DOMスクリプティングで置換

なにやらJavaScriptで無理やり(笑)imgタグに置換する手段もあるようです。一見もっとも強引ですが、案外、エレガントかもしれません。

妙技

「背景印刷の注意書きでは駄目ですか…」と心を決めたそんな中、クライアントから(おいw)妙技を教わりました。
h1#sample{
color: #fff;
display: list-item;
list-style-image: url(head_bg.png);
list-style-position: inside;
letter-spacing: -1000em;
font-size: 1pt;
}

これ、無理やり「リスト化」し「ポインタ画像」として背景を読み込むと印刷される!という技のようです。
実際試してみると、width:0pxなど色々調整する必要があり、その上IE以外の主要ブラウザで表示出来ないという致命傷まで。残念(ノ∀`)

ん?なら、IEにだけ印刷スタイルを用意して、それで上記テクによる再置換をするのがベストか?
「背景印刷呪文」の弊害はIEのシェアの広さに起因しますので、いっそIEのみ対応で良いんじゃないかなと。
IEだけびブラウザ判定ならConditional commentsが使えるのも利点でしょうか。

コメントは受け付けていません。

<!–more–>
いわゆる「続きを読む」でページをたたむwordpressのタグです。たたんだ際に意図しない空行が入ってしまうことがありませんか?見出し直下で折りたたむのが悪いのですが(笑)だんだん気になってきて…って最初からソースを見ればよかったんですよね。

結論

行頭に入れるべし。
しかし…

ビフォアー

投稿時のエディタ上
<h3>そもそもマークアップは必要なのか</h3><!--more-->
HTMLコーダーとしては、そりゃ、あった方が良い。

画面出力
空行が入ってしまう例
出力HTML
<h3>そもそもマークアップは必要なのか</h3>
<p><span id="more-63"></span><br />
HTMLコーダーとしては、そりゃ、あった方が良い。

投稿時のエディタ上

<h3>そもそもマークアップは必要なのか</h3>
<!--more-->HTMLコーダーとしては、そりゃ、あった方が良い。

画面出力
空行が入らない例
出力HTML
<h3>そもそもマークアップは必要なのか</h3>
<p><span id="more-63"></span>HTMLコーダーとしては、そりゃ、あった方が良い。

思い出した

なんで最初の頃、この空白に妥協したのかを。
「続きを読む」を押して飛ぶと、ビッタリ未読の続きに飛びます。つまり、見た記憶にない文字列が飛び先。しかも、上部に空間がなく正にビッタリ。折角、位置がビッタリ合っているのに、それに気付かず「あれどこだっけ?」とスクロールし、見た事のある行を探してしまいます。

ならば、2,3行戻った所に飛んでくれるのが良いのですが…一筋縄ではいかず、これも課題に。
そもそも、たたまなくても良いじゃんとも思います。たたまずに見やすい見せ方であれば。そうでない場合の格好良いたたみ方を実装したい。

コメントは受け付けていません。

yahoo!pipesの出力で化け

サイドバーの「近頃気になった本」は「はてブ」のフィードをyahoo!pipesで加工したものを元に表示しています。
今日起きたら派手に「文字化け」。どうやらyahoo!pipesの出力段階で化けている模様。
ググってみると、結構よくあることのようです。

いつの間にか直っていた

試行錯誤の中、何も変えていない状態で文字化けが直っている・゚・(ノД`)・゚・yahoo!pipesの気まぐれといった印象。
再発に備えて手を打っておくことに。

もう一つサービスを挟んでみる

フィードバーナーを挟んでみる事にしました。

  1. はてブ→yahoo!pipes→FeedBurner
  2. はてブ→FeedBurner→yahoo!pipes

FeedBurnerにyahoo!pipes出力の文字化けを直す力があれば、前者。
FeedBurner出力にyahoo!pipesが文字化けする原因を取り除く力があれば、後者。
とりあえず、両方用意し、前者をブログに掲載。
また文字化けが起こる事を楽しみに(ノ∀`) 仕込み終了

マッシュアップって実は微妙?

個人レベルでは、楽しいし便利なマッシュアップですが、これ、混ぜれば混ぜるほど、ダウンタイムが増えますよね。
年に5日落ちるサービスを3つ繋げれば、年に14日?(超概算)程度落ちてしまう訳で、仕事用で使うのは場合によっては怖いところです。
SaaS (software as a service)の肝はマッシュアップには無いのかもしれませんね。

コメントは受け付けていません。

一覧機能が弱い

前々から、なんかブログって使い辛いと感じていました。

  • 人によってインターフェイスが違うからかな
  • 広告が多くて、記事の場所が分かりにくいからかな

と薄々思っていましたが、決定的なのは、

  • 単体記事から、前後数件のリストに飛べない

これですね。わかります。
最新記事からつらつら読む分には、ページャーもあり便利なのですが、例えば、検索エンジンから単体記事に飛んだ場合。
「関連記事」や「前後1件」のリンクこそあれど、いや、俺が飛びたいのは、ずらーっと時系列でならんだアレなんだよー!!と。
最新記事から順にさがせっていうのかよぉーーあsdふぁldkfj です。
あのブログのあの記事!前見たアレがみたいのに~!なんとなく前後関係で覚えているのに「カレンダー」や「アーカイブ」なんてまどろっこしい。

ソリューションが見つからない((((゜д゜;))))

「前後1件」だけだよって\(^o^)/
まだ深く考えていませんが、これって、ページャー(このサイトの場合「wp-pagenavi」)に機能追加するのが楽なんですかね?
さらっとソースをみた感じでは、少なくとも今の私には手に負えない。しかし、検索なんかよりよっぽど負荷も軽いと思うのですが…課題です。

next_post_linkの同カテゴリリンクにしても、子カテゴリを反映しないし(・ω・)

Comments (1)