質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.46%

  • JavaScript

    10902questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    4761questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    3773questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CSS3

    1433questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

ルビだけコピーしたくない

解決済

回答 2

投稿 2016/07/09 01:13 ・編集 2016/07/09 02:54

  • 評価
  • クリップ 2
  • VIEW 911

suiheisan

score 27

ルビつきのhtml文章をコピペしたときにルビの部分は飛ばしたいです。

<ruby><rb>親譲</rb><rp></rp><rt>おやゆず</rt><rp></rp></ruby>りの<ruby><rb>無鉄砲</rb><rp></rp><rt>むてっぽう</rt><rp></rp></ruby>で小供の時から損ばかりしている。


上のようなhtmlをコピペすると

親譲おやゆずりの無鉄砲むてっぽうで小供の時から損ばかりしている。

となります。コピペ後の文章は大変読みづらいです。
ルビだけ飛ばしてコピペすることはできませんか?

//こうしたい
親譲の無鉄砲で小供の時から損ばかりしている。

コピペしない方法をネットで調べるとCSS3のuser-selectをやjavascriptのoncopyで禁止する方法が見つかりますが、どちらも指定した要素の外側から選択するとコピーできてしまい、ルビのコピー禁止には向いていません。

試した環境は
window7 + Firefox47.0.1
window7 + IE11
window7 + Opera38.0
window7 + Google Chrome51.0
iOS9.3
android4.2標準ブラウザ

Firefoxはルビをとばしてコピペできますが、それ以外はダメでした。
ルビだけコピーせずにすむいい方法がありましたらよろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • coba-coba

    2016/07/09 02:06

    どのブラウザを試しましたか?Windows10 + Firefox47.0.1だとルビを飛ばしてコピペできましたよ。

    キャンセル

  • suiheisan

    2016/07/09 02:56

    ありがとうございます。 Firefoxは未確認だったのでたった今確認しました。 window7 + Firefox47.0.1 は希望通りのコピペができました。 その他の環境を質問に情報を追加しました。 ご確認お願いします。

    キャンセル

  • coba-coba

    2016/07/09 04:17

    普通に考えたら不特定多数のユーザが対象ですよね。すみません、suiheisanさんのみがコピペする話かと勘違いしていました。

    キャンセル

回答 2

checkベストアンサー

+2

「自サイトのHTMLページ内にてユーザーがコピー&ペーストする際にルビを無くしてコピー&ペーストさせたい」という問題だと受け取りました。
以下のコードでそのような動きになりました。Windows10にてIE11,Edge,Chromeでは動作確認しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>a</title>
</head>
<body>
  <section>
    <h2>おはなし</h2>
    <p>
      <ruby><rb>親譲</rb><rp></rp><rt>おやゆず</rt><rp></rp></ruby>りの<ruby><rb>無鉄砲</rb><rp></rp><rt>むてっぽう</rt><rp></rp></ruby>で小供の時から損ばかりしている。
    </p>
  </section>
  <script>
  document.addEventListener("copy", function() {
    var rtList = document.getElementsByTagName("rt");
    var contentList = [];
    Array.prototype.forEach.call(rtList, function(rt) {
      contentList.push(rt.textContent);
      rt.textContent = "";
    });
    setTimeout(function() {
      Array.prototype.forEach.call(rtList, function(rt) {
        rt.textContent = contentList.shift();
      });
    }, 0);
  }, true);
  </script>
</body>
</html>

Clipboard APIと言われるものに分類されるcopyイベント内でドキュメント内全てのrt要素のテキストをいったん空にして、setTimeoutでこのハンドラを抜けた後に内容をもとに戻してます。これで確実なのかは私もわかりません。copyイベント自体はモバイルブラウザでも対応しているようですが、どうでしょうか。

いままでこんなこと全然気にしたことがなかったのですが、ご質問をみたときに「こんな問題があったのか!」と、とても勉強になりました。興味深かったです。

投稿 2016/07/09 05:03

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/09 05:16

    setTimeoutを使うなんて思いもよりませんでした。参考になります。

    キャンセル

0

guest1213さんの回答を拝見して、私もコードを書き換えました。
とても勉強になります。ありがとうございます。

jQueryでrtタグの表示・非表示をcssで切り替えて、コピペ時にルビをコピーしないようにする方法です。

/* jQuery */

$(function() {
  document.addEventListener("copy", function() {
    $('rt').css('display', 'none');
    setTimeout(function() {
      $('rt').css('display', '');
    }, 0);
  }, true);
});


rubyタグをコピーする時にrtタグのcssをdisplay:none;にします。
コピーが終わったら、ルビが現れるようにrtタグのcssをdisplay:;(削除)にします。

.on('copy')だとMicrosoft Edgeで動かなかったので、guest1213さんのを真似をしました。

次のブラウザでは動きました。
FireFox 47.0
Google Chrome 51.0
Opera 38.0
Android 5.0.2標準ブラウザ
iOS9.3.2 Safari
Microsoft Edge

投稿 2016/07/09 05:04

編集 2016/07/09 05:38

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.46%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    10902questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    4761questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    3773questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CSS3

    1433questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。