人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

どうもいつもお世話になっております。
また図々しい質問で申し訳ないのですが、ライブドアの件なのですが、長い記事を書くと、スマホ版では、たぶん6000文字程度のところで分割されてしまい、次のページにされてしまいます。
これを、自分でエディタからscriptを入れて、なんとか分割されないようにできないものかと悩んでいます。
これについて、Chromeでソースを調べると、スマホ版でも、記事内容は、全部読み込んでいるのに、表示はされておらず、エレメントとしても、入っていないです。
なので、scriptでページネーションをやっているんだろうと思って、調べたら、たぶんですが、http://parts.blog.livedoor.jp/js/jquery-1.7.1.min.js ←この中のどれかがそうだろうと思います。
スマホ版で読み込んでいるほかのscriptには、記事内容を分割するようなものが、見当たらないので、この中にあるのだろうと。
ですが…私には、どれがそうなのかがわからないのと、そのコードを無効化するような逆コードが書けないんです…。

●質問者: Michiko_70554148
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

上のscriptへのlinkは、エディタよりも上で読んでいるので、エディタから書き込めば、そっちのほうが効くと思います。
急ぎませんので、もしも、お時間のあるときに、気が向いたときでけっこうですから、ご協力をいただけると、非常に助かります…。よろしくお願いいたします。


1 ● a-kuma3
ベストアンサー

p.next とか a[rel="next"] な要素があったら、次のページを XHR とかで読み込んで無理やり貼り付けるとかでしょうか。

「続きを読む」があったら、次のページを読み込んで記事に追加するスクリプトです。

document.addEventListener("DOMContentLoaded", function() {
 var read_next = document.querySelector('a[rel="next"]');
 if (read_next) {
 var xhr = new XMLHttpRequest();
 xhr.onload = function(ev) {
 if (ev.target.status == 200) {
 var resp_doc = ev.target.response;

 // clone article
 var next_article = resp_doc.getElementById("article-contents");
 var article = document.getElementById("article-contents");
 if (next_article && article) {
 var e = next_article.firstChild
 do {
 article.appendChild(e.cloneNode(true));
 e = e.nextSibling;
 } while (e);
 }

 // remove "read next"
 var area = read_next.parentNode.parentNode;
 area.parentNode.removeChild(area);
 }
 };
 var url = read_next.href;
 xhr.open('GET', url, true);
 xhr.responseType = 'document';
 xhr.send(null);
 }
});

自分で言うのもなんですが、無理やりな感じです。
2ページ目までしか見てませんし、コメントに書いたように広告やアクセスカウンタなど、元々のブログに持っているスクリプトがきちんと動かない可能性もあります。
また、トップページと潜水ドローンの記事のページをざっと見ただけなので、テンプレートに仕込むときは要注意です。


あと、ぽけっとしすてむさんからコメントがあった、これ。

ライブドアブログのスマートフォン版は、スクリプト設置に幾つかの制限があったように思います。

最近のブラウザなら大丈夫な範囲で書いたつもりですが、ブログのシステムとして何かしらの制限を入れていると動かないかもしれません。




追記です。

…ですが、ひとつ問題が、自力カスタムで、web拍手をスマホのほうにもつけるようにしていたんですが、本来は2ページ目の記事が終わった直後に表示をさせるようにしていたのですが、それは読み込まれていません。

拍手の対応をしてみました。先のスクリプトと入れ替えてみてください。

document.addEventListener("DOMContentLoaded", function() {
 var read_next = document.querySelector('a[rel="next"]');
 if (read_next) {
 var xhr = new XMLHttpRequest();
 xhr.onload = function(ev) {
 if (ev.target.status == 200) {
 var resp_doc = ev.target.response;

 var next_article = resp_doc.getElementById("article-contents");
 var article = document.getElementById("article-contents");
 if (next_article && article) {
 var e = next_article.firstChild;
 var clap_script;
 do {
 var clone = e.cloneNode(true);
 if (clone.nodeType == 1) {
 Array.prototype.forEach.call(clone.querySelectorAll("script"), function(script) {
 if (/livedoorProfileClap/.test(script.innerHTML)) {
 clap_script = script;
 }
 });
 }
 article.appendChild(clone);
 e = e.nextSibling;
 } while (e);
 if (clap_script) {
 e = document.createElement("script");
 e.onload = function() {
 var write_ = document.write;
 var htmls = [];
 document.write = [].push.bind(htmls);
 var script = new Function(clap_script.innerHTML);
 script.call();
 var e = document.createElement("span");
 e.innerHTML = htmls.join("");
 clap_script.parentNode.insertBefore(e, clap_script.nextSibling);
 document.write = write_;
 };
 e.src = "//portal.profile.livedoor.com/js/livedoor_profile_clap.js";
 article.appendChild(e);
 }
 }

 var area = read_next.parentNode.parentNode;
 area.parentNode.removeChild(area);
 }
 };
 var url = read_next.href;
 xhr.open('GET', url, true);
 xhr.responseType = 'document';
 xhr.send(null);
 }
});

スクリプトに、拍手用の外部スクリプトの URL を書いている辺り、なんともかっこ悪いですが、元々の拍手のスクリプトも記事中に URL を書いちゃってますから、良いですよね (^^;

# スクリプトの一部を書き換えました m(_ _)m

# またまたスクリプトの一部を書き換えました


Michiko_70554148さんのコメント
ありがとうございます! できました。 3ページ以上には使えないとしても、2ページにはならないで済むようになれば、かなりラクです。 …ですが、ひとつ問題が、自力カスタムで、web拍手をスマホのほうにもつけるようにしていたんですが、本来は2ページ目の記事が終わった直後に表示をさせるようにしていたのですが、それは読み込まれていません。 これは、移動させるとしたら、1ページ目にあたる部分の、どこらへんに移動させればいいのでしょうか。

a-kuma3さんのコメント
>> …ですが、ひとつ問題が、自力カスタムで、web拍手をスマホのほうにもつけるようにしていたんですが、本来は2ページ目の記事が終わった直後に表示をさせるようにしていたのですが、それは読み込まれていません。 << 回答に追記しました。 # 動くかな?

Michiko_70554148さんのコメント
ありがとうございます。新しいほうでやってみたのですが、なぜか表示がされません。 PC版では、カスタムで追加したぶんの拍手は非表示にして、2ページ目のスタイルタグ内で、スマホ版での表示を!importantで表示をさせているんですが、よく見たら、この記事では、1ページ目のスタイルタグ内にも、もともと入っていました(今は抜きました)。 いつもは、要らないものはなるべく抜くようにしているのですが、たまたま入っていたんですが、それでもスマホでは表示になっていなくて、ローカル環境でStylishから表示を指定してみても、表示がされないので、どうしてなのかわかりません…。

a-kuma3さんのコメント
あ、ごめんなさい。ぼくが間違ってます (´・ω・`) もう少々お待ちを。

a-kuma3さんのコメント
追記のスクリプトを書き直しました。 お手数ですが、貼りなおしてみてください。 2ページ目にある style タグは、1ページ目の記事に差し込まれていることは確認できましたが、きちんと働くかな? Web拍手を表示する script タグも、1ページ目の記事に差し込まれているのですが、スクリプトとして実行されていなかったので。

Michiko_70554148さんのコメント
もう一度貼り直しましたが、2ページ目のstyleタグの読み込みは、できています。 ですが、なぜか、どうしても拍手が表示されないのですが…。 まあ、2ページになってしまった場合のみ、スマホ版のみ拍手なしでも、別にいいかもとは思います。

a-kuma3さんのコメント
いけない、テスト用のコードが紛れこんでました。 追記のスクリプトの一部を修正しましたので、申し訳ないんですが、もう一度 チャレンジを m(_ _)m

Michiko_70554148さんのコメント
面倒なことをお願いしたのに、こちらこそ申し訳ありません。 今度のを貼ったら、拍手以外のものが、何も表示されなくて、真っ白になってしまって、閲覧不可能な状態になったため、いったん、前の段階のスクリプトに戻しました(自分のほうで、コピーをしてありました)。 現段階では、最新の一記事(単独犯説)と、潜水ドローンの記事の2つに、それを貼って、拍手なしで、記事内容を1ページで表示をさせている状態です。 当方は、急ぎませんので、お時間のあるときに、よろしければ、見直していただければ、また、貼り直してみたいと思います。 スマホ版にはもともと拍手がついていないんですが、スマホからの閲覧のほうが多いので、やっぱりスマホにも表示をさせたいと思って、自力でなんとかできないかと思ったら、これは、簡単にできたので、いったん投稿をしたあとに、記事URLを確認してから、記事エディタから毎回手動で貼り付けて、貼り付けています。

a-kuma3さんのコメント
>> 今度のを貼ったら、拍手以外のものが、何も表示されなくて、真っ白になってしまって、 << 「拍手」のスクリプトを確認しました。 今までは、拍手のスクリプトが実行できていなかったのですが、最後の回答で実行できるようになり、そんな挙動をするようになっている、というところまで分かりました。 さて、どう直そうかなあ。 記事中に書いている(と思われる)拍手を表示するコードの場所を変更する、という解決方法は 有り でしょうか。 「他の記事も、全部、直さなきゃいけないのかよー」ということになっちゃうのですが...

Michiko_70554148さんのコメント
はい、拍手divの位置を変えることには、問題はありません。 1ページ目のどこかに入れればよいのでしょうか。 そうすると、display:block !importantも、1ページ目のほうに移すということですね。 過去記事については、2ページに分割されてしまったものは、いくつかありますが、それほどたくさんでもなく、たぶん10件?多くても20件くらいですし、過去記事の分をすべて見直すとすれば、すぐにやる必要はないので、あとからゆっくりやります。 取りあえず、ロシア大使の記事と、潜水ドローンの記事をやって、過去のぶんは、時間のあるときに、少しずつでも、見直せばいいと思います。

a-kuma3さんのコメント
回答のスクリプトを修正しました。 自分で、その問題に直面したときを想像するに、「プログラムに合わせてデータを書き換える」というのは、あまりかっこが良いものではないと思うので、記事を直さずにいけるようにしてみたつもりです(追記のスクリプトを修正してます)。 今は、記事の中に回答のスクリプトを書いていると思いますが、もし、潜水ドローンの記事でうまくいったなら、テンプレートの方にスクリプトを仕込めば、他の記事でもいけるんじゃないかなあと思います。

Michiko_70554148さんのコメント
できました! 拍手も、ちゃんと表示されています。 ありがとうございます。 ちなみに、script内の行間と余白は、全部詰めてしまっても大丈夫でしょうか。 テンプレ機能というのは、ライブドアには見当たらなくて、メッセージボード機能のほうから、スマホ版のほうに入れてみましたが、このコードは機能しませんでした。 あとは、定型文機能というのはありますが、これは、ここからエディタに挿入するときにラクなようにということなので、どのみちエディタのどこかの場所を選んで挿入させないと効果がありません。 なので、たぶん、長い記事を書いて、2ページになったときに、あとから記事の編集でscriptを追加していくという作業になると思います。 これで、たぶんノードで12000文字くらいまでは、1ページでカバーできるようになったので、最後まで読んでくれる人も、増えるのではないかと思います。 今後は、なるべく、その程度の文字数におさめるようにして、超えたら別記事で続きを書くというふうにしていこうかなあと。 3ページ以上にされてしまったものもあって、最高で5ページまであるんですが、そうなるとやっぱり、スマホ閲覧者で、最後のページまでめくって帰る人というのは、非常に少ないというのが、現状です。 なにしろ、助かりました。過去記事のぶんも、ゆっくり直して行きたいと思います。

a-kuma3さんのコメント
>> ちなみに、script内の行間と余白は、全部詰めてしまっても大丈夫でしょうか。 << セミコロンが 2ヶ所ほど抜けていたので修正しました。 <tt>//</tt> のコメントも邪魔くさいので外しました。 詰めちゃって大丈夫です。

Michiko_70554148さんのコメント
ありがとうございます。本当に助かりました。

a-kuma3さんのコメント
ぼくも、いろいろと気付きがあって楽しかった <tt>:-)</tt> ちなみに、3分割の記事ってどれです?

Michiko_70554148さんのコメント
本当に、助かりました。 3分割の記事は、いくつかあったような気がしますが、例えばこれです。 http://cumbersome.ldblog.jp/archives/10150889.html この記事の場合には、内容を削って2ページにおさめるというのも、なかなか難しいし、キリのいいところで別記事を立てるというわけにもいかないので、仕方がないなと。ですが、これだけの内容を読むのに、2回もページをめくらなければならないとなったら、めくってまで全部見て行くというスマホ閲覧者は、なかなか少ないというのが現状です。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ