リスト表示ならAjaxで読み込み

category-icon

 リスト表示のときは、Ajax経由で記事を読み込んで表示させるという感じにしてみました。細かいところの詰めなどあると思いますが、雰囲気は味わえると思います。やっぱり、Ajaxを使うと記事のデータだけをダウンロードするので、ページ全体を読み込むのに比べて表示が速いですね。

 このギミックについて何かアイデアなり、希望などがあればコメントお願いします。

 

— posted by martin at 02:36 am   commentComment [19]  pingTrackBack [0]

この記事に対するコメント・トラックバック [19件]

scrollUp1. ぷらむ — 2006/07/06@05:27:32

記事の表示が早い。これぞajaxという感じで、コメントのとき以上に実感できました。
記事を読んで、閉じれば、リスト画面が出て、見たい記事だけを次々ピックアップが出来ますね。
難しいのでは、レイアウトですね。
クリックしたタイトルの下あたりから、記事が表示されますが、別にリスト画面は見えなくてもいいので、画面の上の方から被せるように表示してもいいのではないかと私は思います。
それから私は、横幅が広がるのが好きではないんですが、そこは調整ができるのでしょうか。
あと、管理画面で、リスト表示を開いた場合も同様にajaxで開きますか?
管理画面では、記事の編集が主目的ですから、ajaxではなく、これまでどおりの表示方法がいいと思いますが。
二つの表示方式を持つのは、複雑になりますか。
とにかく表示が早いですね。

Owner Comment martin Website  2006/07/06@23:45:40

こんばんは。管理画面は、特に弄っていないので、従来のままです。レイアウトは悩ましいところですが、感じとしては、RSSリーダーのように、ワンクリックとかで次の記事に移れるというのを想定しましたので。幅の調整は、スクリプトでどうにでもなりますよ。まぁ、試作品なので;v)

3. ぷらむ — 2006/07/07@06:17:16

私のMeパソコンではちゃんと文字が出ますが、XPパソコンのIEVer6で見ると、角丸コーナーが入った記事は、その囲み以外の文字がまったく表示されませんでしたので、ご確認を。

scrollUpOwner Comment martin Website  2006/07/07@21:48:41

こんばんは、これは今もそうでしょうか。IE。。

5. ぷらむ — 2006/07/07@19:29:02

ajaxの記事を見たら、びっくり。ajaxで前後の記事にも移動できるんですね。今気づきました。
小さな画面で見ている人は、長い記事だと最後まで読んで、続けて次の記事を読みたいとき、一番上までまた戻さなければなりません。
記事の上だけでなく、下の方でも前後の記事に移動できるようになっているといいのですが。
Firefoxだときれいに画面の一番上に表示されますが、IEだと上に上がりすぎて上の部分が欠けたりして上にスライドさせないといけなかったりしますね。

Owner Comment martin Website  2006/07/07@21:52:47

ご指摘どうもです。IEばっかりですね。IEだと、Ajaxで読み込んだときの画像がずれたりするんですが。FirefoxやOpera、Safariでは問題なしです。IEは数が多いからなぁ。。

7. ぷらむ — 2006/07/07@21:59:10

>こんばんは、これは今もそうでしょうか。IE。。

XPのIEver6でも、きれいに見られるようになりました。
拡大画像のときのようにバックを多少暗くはできますか?

Owner Comment martin Website  2006/07/07@22:32:14

確認ありがとうございました。
バックを暗くするバージョンも作ったのですが、そうすると”裏側の”本体へのアクセスが出来なくなるので、それもどうかなぁと思いやめました。まぁ数行追加するだけなのですが。

scrollUp9. ぷらむ — 2006/07/07@23:05:12

>”裏側の”本体へのアクセスが出来なくなるので、それもどうかなぁと思いやめました。
わかりました。四隅が直角。どうもmartinさんらしくありません。
少し丸みをつけるのは?
これもIEだとむずかしいのでしょうか。

Owner Comment martin Website  2006/07/07@23:40:21

これは、角丸スクリプトでやっても良いですが、画像を使ってみましょうかね。IEでも行けると思います。Firefoxだけなら、スタイルシートの指定だけで出来ますが。

11. ぷらむ — 2006/07/08@06:01:39

タグの項目をクリックして、記事の表示順が変わっているので驚きました。驚いたと言うよりうれしくなりました。
アーカイブやカテゴリと違って、投稿が古い順に並べられているではありませんか。
ただ基本的にはそのように見えますが、一番記事数が多い「ppBlog」で見ると、古い順らしいが、完全にはそうではない。
他はすべて古い順に並んでいますが、記事数が少ない。
そこで、タブ分類では、古い順に記事を並べるように変更されましたか?
確認です。

ブログは新しい順に並べるのが原則ですが、それが当たり前だと思います。
しかし、アーカイブやカテゴリで見た場合、新しい順に表示されることにいつも違和感を持っています。
例えば、「明日何々をします」と書いて、翌日「何々をしました」と書きます。
アーカイブで、ある月の記事一覧表を出したとき、最初に31日が、最後に1日が表示されるので、「何々をしました」「明日何々をします」と言ったように記事が逆転して表示されるので、へんな感じがします。
これはカテゴリでも同様なことが起こります。
そこで、以前アーカイブやカテゴリのときは、古い順で見たいとお願いしたことがあります。検索結果だけは、古い順、新しい順で選択できるようになりました。
アーカイブやカテゴリでは、古い順がいいという考え方は変わっていませんが、こればかりは、みなさんいろんな使い方をされているのでなんとも言えません。ただ月のアーカイブを出した場合、1日の記事から順に並んでいるのが素直なような感じがします。
Recentlyはもちろん新しい順ですが、私個人としては、他は古い順がいいと思います。
(livdoorなどほかのブログを見てみましたが、すべて新しい順でしたね。つまり30日から順番に並べてありました。やっぱり私の見方がおかしいんですかね。)

12. ぷらむ — 2006/07/10@22:17:21

martin先生、古い順と新しい順が選択できるではありませんか。
もううれしいですね。
ただ見た目でいうと、「選択肢」はあまりつくらないほうがいいと思います。
********************************************************
エントリー 43 件中 6-10 件を ボックス表示 ⇔ リスト表示
新しい順 古い順
« 前の 5 件 | Main | 次の 5 件 »
********************************************************
少なくとも最初のトップ画面の目立つところで、3行はしまりがないように思われます。
最初立ちあげた画面の記事の表示順は、新しい順で決め打ち。
アーカイブで記事一覧を出したときは、古い順で決め打ち。
カテゴリとタブのときは、新しい順と古い順を選択できる。この時だけ選択肢を出す。
こんな感じに私は思いますが、どうでしょうか?
ajaxの記事の囲み、かっこよくなりましたね。グーです。(IEだけちょっとイマイチ)
IEで見た場合、画像位置が少しずれますね。
それから拡大画像が昨日はうまく動作してましたが、きょうはちょっとおかしいです。
でも、すごいブログですね。機能満載。

13. ぷらむ — 2006/07/10@23:10:35

これまでと違って、リスト表示でブログを終了した場合、次回ブログを立ちあげた時、リスト表示になりました。
そこの取り扱いはかわりましたか?

それで思ったんですが、ajaxで記事を出したとき、そこからajaxでコメントも出すことは出来ますか?
もしこれが出来るならリスト表示とajax表示の組み合わせで新しい別系統の表示方式が出来、これまでのメイン表示方式と2系統、デュアルモード方式になりますね。

14. ぷらむ Website — 2006/07/23@09:05:02

ajaxで記事を出したとき、そこからコメントを読むのがやはり手間がかかります。
martinさんの個人ブログを最初からリスト表示のタイトルを見ながら、記事をピックアップして読みました。
ajaxのコメントが使えないので、やむなく旧のコメントをクリックしてコメントを読みました。
ここのブログや配布されているものと違って、martinさんの個人ブログの方では、コメントの書き込み欄に一気に飛ばずに、最初のコメントにフォーカスが行くので、読みやすかったが、そこから再びリスト表示に戻るのがやはり大変でした。(一気にコメント書き込み欄に行かないだけ、ここや配布されているものよりは助かったが。)
もし、できるものなら、ajax記事の方からもajaxコメントが展開できるようにしていただけるとありがたいです。
エントリーや画像ファイルが多くなったことでは、いろいろ手直ししていただきましたが、その関係では完璧に動いています。画像管理のデータベースの再更新もできます。これだけエントリー数が多くなっても、スムーズに動くこのブログは本当にすばらしいですね。

15. ぷらむ Website — 2006/07/23@11:02:04

訂正
<martinさんの個人ブログの方では、コメントの書き込み欄に一気に飛ばずに、最初のコメントにフォーカスが行くので、読みやすかった>
ここは、コメントの書き込みが締め切られたあとは、そうなるのであって、こちらもmartinさんの個人ブログも動きは同じでした。

Owner Comment martin Website  2006/07/24@04:33:41

Ajaxのリストモードでもコメントボタンを表示させるようにしてみました。utils.phpとajax.phpを調整しています。

17. ぷらむ Website — 2006/07/24@07:08:27

martin先生、ありがとうございます。
過去の記事やコメントを読んでいてよく分かりますが、私は大のajax嫌いだったんですね。
ajaxがうまく動かないことが多かったですからですね。
自分のオンボロパソコンでも動くようになれば、どのパソコンでも動くと思い、「動かない」メッセージを送りました。
今ではajaxが快適に作動するようになり、動きが軽いので、大好きになってしまいました。
ところで1点。確認です。
今回のヴァージョンアップから「コメント受付の締め切り」が無効になっています。これはリスト表示からajaxコメントを出すに伴い生じた仕様変更でしょうか?
(私にとって、コメント受付の締め切りの無効は、別に問題ではないが、確認です。)

scrollUp18. ぷらむ Website — 2006/07/29@08:19:32

リスト表示とAjax表示を組み合わせ、あちこち閲覧しています。
次の点が気になりました。
1「Ajaxコメントや続く」をクリックした場合、下のCLOSEボタンの位置はそのまま移動しないので、CLOSEしたいとき特に追加文が長い場合、そこまで戻らなければならず、少し手間がかかります。
できれば、Ajaxコメントが表示された下にボタンが移動するとありがたいです。その際、画像ボタンがむずかしいということならば、下のCLOSEボタンは画像でなくてもいいのではないかと思います。私このCLOSEボタンはかっこよく好きですが、あくまでも機能優先。
2 記事を読んで、CLOSEしたとき、リスト表示が記事を開く前の状態ではなく、リスト表示のトップになってしまいます。
読んだ記事の下のほうを、さらにピックアップして読みたい場合、またリスト表示を下にスライドさせなければならないが、これがかなり手間です。
できれば、記事をCLOSEした時、記事を開くまえのリスト表示の位置に戻していただけると非常にありがたいです。
3 記事の上下に表示される前後記事への移動リンクは、非常に便利です。さらに欲を言えばカテゴリとタグでは、その分類内の前後記事への移動リンクになると最高ですが、これは難しいのでしょうね。

martin先生は、ブログのトップへ移動させるという考え方で、私は文を読み終えたところで、次への移動リンクを示したいという考え方の違い方かも知れません。

あと一つ、カレンダーとタグから記事を見る場合です。
カレンダーとタグから記事を見た場合、その時点におけるモード(リスト表示かBOX表示)によって記事(もしくは記事のリスト)が表示されます。
例えば、リスト表示で見ていた場合、記事が一つや二つでもリスト表示で示されてしまいます。できれば、アーカイブやカテゴリのように、記事がある数より多い時はリスト表示、以下の場合はBOX表示というように表示され、しかもモードは継続されるとありがたいです。

以上、気になりました点を書きました。
そう手間をかけず、できることならば、ご検討を願います。

19. s — 2009/02/08@00:38:11


この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0044 sec.
prev
2024.3
next
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31