blue
PAGE [ 1  /  2  /  3  /  4  /  5  / ALL ]

続々・ページ内リンク(ID)にするするっと移動する

  • Posted by: SOMA Hitoshi
  • August 8, 2007 1:48 PM
  • web

コードを少しだけ修正しました。詳しくは「fdScroller.js ちょこっと改良」を参照ください。

 なかなか最終版がかたまらずすいませんが、「続・ページ内リンク(ID)にするするっと移動する」のつづきというか、それに対して「leva」さんから、「サイト内リンクをスムーズに移動するJavascript プラスワン」というトラックバック記事をもらったことを承けて。同記事では、私が「続・ページ内リンク〜」の記事で紹介したスクリプトに対し、

これには1つ大きな問題があって肝心のサイト内リンクを踏んでも、URIの後ろにフラグメントID(#xxxみたいな)が付かないんですね。
Liner Note - サイト内リンクをスムーズに移動するJavascript プラスワン

という指摘がなされていて、それはまったくごもっとも、たしかに大きな欠点だった。で、つづけて同記事ではその点についての改良案を示してくれているのだが、当初書かれてあったその改造法を試したところ動作の具合がうまくなく、で、私のほうでも代案を示そうと思っていたところが、いまあらためて訪れてみると「leva」さん自身が改造法を修正していた。

 その新しいほうの改造法は私が示そうとしていたものとほとんど同じで、つまり出番はなくなったのだが、一応こちらのほうでも修正版のソースを提示しておくほうがいいだろうと思い、以下にまとめておきます。

... 続きあります »

fdScroller.js 画像リンクでダメ?

  • Posted by: SOMA Hitoshi
  • August 3, 2007 2:56 PM
  • web

 「続・ページ内リンク(ID)にするするっと移動する」で紹介したページ内スクロールのためのJavaScript(仮称:fdScroller.js)に対して、マーさんから質問をもらった(直前の記事で書いたようにそのときブログのコメント欄がうまく機能していなくて、コメント投稿ができないからメールで書き送ってくれた)。

この、jsを利用しようと思い、設定を行いました。
見事なまでのスムーズな動きに感動しました。

が、1つ問題が発生しました。
「このページの先頭へ」など、テキストに対してリンクを張れば問題ないのですが、このテキスト部分を画像に替えると、何も反応しなくなります。

確認環境は(WindowsXP SP2 / Firefox2)です。
jsの書き換えが必要でしょうか?

 「え?そうなの?」と思いつつ、画像リンクを用いたサンプルページを作成、書かれてある「WindowsXP SP2 / Firefox2」の環境で確認してみたのだが、うーん、問題ないなあ。マーさんのほうでは上記のサンプルページ、動作してますか?

 サンプルページが動作しているとして質問を重ねますが、マーさんが試みているリンク部分のソースは、サンプルにあるのと同じような、

<a href="#ID"><img タグ></a>

というものでしょうか? それともちょっとちがいますか?
 あと、併用しているほかのJavaScriptなどありますか?
 どうでしょう?

続・ページ内リンク(ID)にするするっと移動する

  • Posted by: SOMA Hitoshi
  • July 23, 2007 9:51 PM
  • web

以下に紹介しているスクリプトでは「肝心のサイト内リンクを踏んでも、URIの後ろにフラグメントID(#xxxみたいな)が付かない」という指摘があり、それをもとに修正したものを「続々・ページ内リンク(ID)にするするっと移動する」にて紹介していますので、現時点での最新版スクリプトとしてはそちらを参照ください。

2006年10月に紹介した「ページ内リンク(ID)にするするっと移動する」ためのJavaScriptだが、このスクリプトにはじつは、「はんこ、いりますか?」の「番頭」さんも指摘するとおりの弱点がある。

番頭の環境(WindowsXP SP2 / Firefox1.5.0.9)では、リンク先のIDが画面下のほうにあるとき、延々と下にスクロールし続ける(スクロールバーで上に移動しようとしてもすぐ一番下まで下がる)と言う不具合が。
(リンクで指定した場所がウインドウの一番上に来るまでスクロールし続ける仕様なのではないかと思います)
はんこ、いりますか? » ページ内リンクをアニメーションで

そうなんですよ、はい。知ってました。(なんだけど、私としてはひとまず「仕様」と割りきってほうってあった。)

今回、「番頭」さんの記事をきっかけにふたたびこのスクリプトのオリジナル作者のサイト「frequency decoder」へ行き、「その後どうなってるかな」というのを覗いてきたというのは、この「弱点」、考えてみれば比較的容易に気づかれるはずのものだから、すると「これ、どうにかならないかなあ」という声も届きやすく、オリジナル作者がすでに対応/改良している可能性が高いと踏んだからだ。で、やっぱり思ったとおりで、オリジナル作者のサイトでは該当するスクリプトがちがうものに置き換わっていた。それが、これ(「frequency decoder」で使われている外部jsファイルから該当する部分のみを抜き出し、少しだけ編集したもの)。

... 続きあります »

検索語句から疑問を復元して答える、あるいはチャーハン

  • Posted by: SOMA Hitoshi
  • July 20, 2007 12:06 AM
  • web

アクセス解析を入れていると、人がどういった言葉で検索をかけ、そうしてウチがひっかかってやって来たかを知ることができる。言葉は単一のものである場合もあるし、複数の語句が並べられている場合もある。たとえば、

 「Windows IEのCSSに関するバグについて知りたい」

という目的がある場合、多少手慣れた者であればこれを複数の単語に切り分け、間にスペース(半角でも全角でも)を入れて、

 「Win IE CSS バグ」

というふうな文字列で検索するのがふつうだ。手慣れていない者がこれを真似し、ついつい、

 「Win IE CSS バグ 知りたい」

と検索してしまうケースも考えられるが、これがだめなのは「自分」を探してしまうからである。

... 続きあります »

RSSを購読されている方へ(フィードの統合)

  • Posted by: SOMA Hitoshi
  • July 19, 2007 8:56 PM
  • mt | web | whatsnew

「HOME」タブ内にあるここのブログ──そんなこと言われてもって感じだとは思いますが、個別記事のURLにひっそり示されるとおり一応「blue」という呼び名になります──と、日記である「Yellow」とで、いままでは別々のRSSフィードを用意していましたがそれを統合しました。いずれは「Pink」なども統合しようと思いますが、実質いまは更新休止中のようなものなのでひとまず「blue」と「Yellow」のみ。

今後はひとつのRSSフィードをチェックすることで、「blue」「Yellow」両方の更新情報を受け取ることができます。人によっては〈ありがた迷惑〉な場合もあるかと思いますが、まあ、そうさせてもらいます。

それぞれの旧フィードから新しい統合フィードへはリダイレクトをかけてあり、すでに購読されている方は特段意識することなく移行しているかと思いますが、一応、リンクを張ったのが統合フィードのアドレス。FeedBurner(日本語版)を使ってます。

で、以下は統合フィードを用意するにあたっての技術的なメモ。

... 続きあります »

Re: 渡辺さん家の事情(IE5.0とUTF-8での文字化け、はたまたBloggerのテンプレートHTMLにWinIE分岐のスタイル指定を加える法)

  • Posted by: SOMA Hitoshi
  • February 27, 2007 11:47 PM
  • web

さてと。

そんな中、渡辺道子さんの驚くべき発言がありました。

「我が家のパソコンではこのブログの文字がすべて■になって表示されてるの」

文字化けして全く読めないそうです。

彼女の家のPC事情を聞きだしたところ、どうやらOSはwindows98でブラウザはIE。ちなみにPCは昔友人にもらったものだそうです。たぶんそれは何とかすれば見れるようになると思うのですが、いかかでしょうか相馬くん。

adieuがはじまる: 渡辺さん家の事情/笠木泉

「OSはwindows98でブラウザはIE」というのがまた漠然とした情報だけどしょうがない。言及されている「このブログ」というのは Blogger を使って作られたサイト。一方にいわば〈最新鋭の〉サイトがあって、もう一方には古いOSとブラウザがある。文字が〈全滅〉しているらしいことから、予想されるのはおそらくUnicode (UTF-8) 絡みの現象だろうということで、使用しているブラウザがこの比較的新しい文字コードに対応できていないか、それに絡んだバグがあるかするのではないかとまずは想像する。

試しに Blogger でアカウントを作ってその管理画面(ダッシュボード)を覗いてみると、文字コードはあらかじめ「UTF-8」に固定されているようで、出力エンコードを変更できるような設定箇所は見当たらない(「エンコード設定とは何ですか」というヘルプ記事があるからには少なくとも以前は設定できたとおぼしいが、ベータ版から正式版になって機能が削られたか?)。まあ、仮に変更できるとしても、ブログサイトとして推奨されるべきは「UTF-8」だろうから、できれば変更したくはないところ。

... 続きあります »

世に言うclearing問題(直前のfloatだけをclearしたい)

  • Posted by: SOMA Hitoshi
  • February 6, 2007 10:14 PM
  • web

さて、上山君に質問をもらっていた件の、(私なりの)解答編。おさらいだが、質問は次のようなものだった。

4231のソースをテーブルからスタイルシートに書き換えているのですが、floatタグで英夫日記を左に寄せて、恭子日記を右に来るようにすると、恭子日記で写真がある後にclear:leftしたときに、次の行が英夫日記の下まで飛んでしまいます。

clearが一個上のfloatまでしか効かないようにするにはどうすればいいのでしょうか?

まず最初に断っておかないといけないのは、ブラウザのこの「気の利かない」挙動(CSS解釈)はべつにバグなのではなくて、CSSの仕様に従った正しいものであるということ。「clear」は基本的に、それ以前にあるすべての「float」を解除する(ただしもちろん「clear: left」は「float: left」のみを、「clear: right」は「float: right」のみを解除する)。

じゃああきらめざるを得ないかというとそんなことはなく、いくつかの方法があるが、まずは上山君が実現したいと思われるレイアウトを、以下に単純化して図示しておこう。

... 続きあります »

ページ内リンク(ID)にするするっと移動する

  • Posted by: SOMA Hitoshi
  • October 24, 2006 4:36 PM
  • web

「続・ページ内リンク(ID)にするするっと移動する」のほうで改良版のスクリプトを紹介しています。そちらも参照ください。

きっかけとなった記事は「このページの先頭へ、をちょこっとおしゃれに」

ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長~いページだとそのリンクで一瞬に先頭に行ってしまい、読んでいる人が混乱することもよくあります。
そこでご紹介したいのが「するするるーーー」と先頭まで戻ってくれるJavascript。このページの先頭へ、をちょこっとおしゃれに | S i M P L E * S i M P L E

これはいいと思った。視覚効果としての楽しさもそうだが、いわゆる「ページ内リンク」の弱点をカバーしてくれるという点で好ましく思われる。というのも、ページ内リンクというやつはときに「リンクの結果自分がいったいどこに飛ばされたのかわかりにくい」からだ(「このページの先頭へ」の場合にはあらかじめどこに行くかが意識されているはずだからそれほど問題ないと思うが、それ以外の場合に)。

ユーザたちは、リンクをたどるときの明確な思考モデルを形成済みで、それはいくつかの要素に分けることができる。

  1. リンクをクリックすることは、別の場所に移動する。
  2. クリックすると、前にみていたページは消える。
  3. 新しく読み込んだページはウィンドウに読み込まれ、前にみていたページと入れ代わる。
  4. まずは、新たに読み込んだページの最上部がみえる。
  5. 戻るボタンは、以前のページに戻る。

ほとんどのクリックがこのような動作をするため、ユーザたちは、ウェブがこのように機能するだろうという、強い期待値を持っている。論理的で、簡単な思考モデルだ。

ユーザたちの思考モデルの全 5 要素すべてにページ内リンクは反している。Alertbox: ページ内リンクの使用は避けよう(2006年2月21日)

とはいえ、(少なくとも作る側からすると)ページ内リンクにはページ内リンクの利点があり、そうそう簡単に手放せるものではなく、そこで前掲のギミックである。ページ内の移動の場合もともとウィンドウはスクロールしているわけだが、混乱のもとはそれが一瞬であるということだ。じっさいにスクロールしている様を見せることにより、別ページに飛んだのではなく、同じページ内を下に(あるいは上に)移動したのだとユーザーに意識させることができる。「スクロールのアニメーションに付き合う」と言っても、うっとうしいほどの時間をとられるわけではない(と私は思う)。

で、その JavaScript を導入してみようとよくよく記事を読んでみると、これは私の思っていたものとちょっと異なるのだった。まず第一にここで紹介されているスクリプトは「ページトップに戻る」場合に特化されていて、ページ内リンク一般に適用することができない。加えてわがままを言うなら、リンク部分に onclick イベントを追加しないといけないから、既存のページに適用するには手間が要る。

というわけで、ページ内リンク一般に対して適用可能なバージョンの紹介。ようやく本題。

... 続きあります »

Lightbox JS v2.0 と Flash

  • Posted by: SOMA Hitoshi
  • October 23, 2006 7:52 PM
  • web

web-conte.comでも画像の拡大表示時に使っている「Lightbox JS v2.0」。これ、ページ内にFlashが同居していると厄介なのである。自分のサイト(ここ)だとそもそもFlashを置いていないから気づきにくい問題なのだが、先日あるサイトを作っていてこのことに気づいた。Flashオブジェクトは z-indexなどの指定を無視し、基本的にドキュメントの最前面にあるように表示されてしまうため、Flashだけは背景に追いやられず、Lightboxで拡大表示させた画像のさらに手前に出てきてしまう。

このことの解決策はひとまずあって、たとえば「小粋空間: Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す」などの解説が丁寧だ。要は、Flashを埋め込む際の記述のひとつに「背景を透過する」という命令にあたるものがあって、それを書き加えてやればいい。

<!-- object要素内に下記を追加 -->
<param name="wmode" value="transparent" />
<!-- embed要素に下記の属性を追加 -->
wmode="transparent"

ちなみに、ActiveXコントロールのアクティブ化問題のために、adobeから配布されている「AC_RunActiveContent.js」「AC_ActiveX.js」を利用して記述している場合には、

AC_FL_RunContent();
の引数の最後に、
'wmode','transparent'
を追加してやればいい。

AC_FL_RunContent( 'xxx','XXX','yyy','YYY', ... 'wmode','transparent'); //end AC code

で、この対応策で万事うまくいくのは Win IE。うまくいってくれないのが Safari である(中間な感じが Firefox)。本題はここから。

... 続きあります »

はやいなあ。──ブロガーライセンス発行

  • Posted by: SOMA Hitoshi
  • May 31, 2006 11:21 PM
  • web

ひとつ前の記事(「フレッシュリーダー試用中」)をアップ後、メールにて記事の掲載確認申請をしたのが16時すぎ。すると、「記事の掲載を確認させていただきましたので、下記の通りライセンスを発行させていただきます」のメールが早くも18時12分に来たのだった。はやいなあ。

PAGE [ 1  /  2  /  3  /  4  /  5  / ALL ]
 

広告