自分のサイトに表示したい文字を取得する方法

2023/09/06 07:53

このQ&Aのポイント

自分のサイトに表示したい文字を取得する方法をお探しですね。例えば、ヤフーのトップページの「メール（新着9件）」の「9」を取得したいということですか？JavaScriptを使用することで可能です。
取得したい文字を含むソースコードの一部を示します。特定のHTML要素やクラスを取得し、その中のテキストを抽出することができます。
取得した値を自分のサイトに表示するには、取得したテキストをHTML要素に書き込むか、JavaScriptで動的に表示する方法があります。

ベストアンサー

自分のサイトに表示したい文字があるのですが

2016/02/20 23:19

自分のサイトに表示したい文字があるのですが例えば、ヤフーのトップページ http://www.yahoo.co.jp/ の「メール（新着9件）」の「9」だけを取得する方法はあるのでしょうか？取得した値を自分のサイト内に表示させたいです。取得したいソースは -------------------------------------------- <ul class="connect"> <li class="pbmail first"> <a href="http://rdsig.yahoo.co.jp/_ylt=A2RhPBj8dMhW7HEArZOJBtF7/RV=1/RE=1456064124/RH=cmRzaWcueWFob28uY28uanA-/RB=lNNRaNv6KrvPHx.TE7_rjthzmHo-/RU=aHR0cDovL21haWwueWFob28uY28uanAv/RS=^ADAx1OtRsyd7ZV4ZklAXkK83gDBsg0-"> <span class="on" id="mailicon" title="Yahoo!メール"> Yahoo!メール</span><span class="txt">メール</span>（新着9件）</a></li></ul> -------------------------------------------- でした。 JavaScriptが少しだけわかるのですが、 JavaScriptで可能でしょうか？

ITJLIPIGD
お礼率100% (51/51)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

4017B
ベストアンサー率73% (1305/1776)

2016/02/23 19:52 回答No.1

一応、可能は可能ですが…ネイティブのみだと無理。javascriptの拡張プラグインに当たるjQueryと呼ばれるモノを別途導入する必要が有り。それだとさすがに「少しわかる」程度のレベルだと厳しい…！逆にjQueryを使えば2秒で終了と言うか簡単。類似のサンプルコードもweb上に何万と溢れてますので。 P.S. 純粋にjavascriptのみだと仕様上、外部サイトのHTMLを直に読み取る事は出来ない様に設計されています。プログラムテクニックとかそういう事以前に不可能。これはセキュリティ上の仕様なので変更不可能。 jQueryはそれだと最近のweb事情にマッチしてない、不便だよ～と言う声に答えて開発されたモノで。本来ならjavascript上では不可能な事も色々と可能になります。

質問者

お礼 2016/02/27 09:48

ありがとうございました。

関連するQ&A

タグを切り替えるJavaScriptについて
下記のurlを参考にして、タグを切り替えるJavaScriptを使いレイアウトをしています。 http://archiva.jp/web/javascript/tab-menu.html やりたいことは各内容をIDセレクタでくくりたいのです。 <div id="page1"> 　<h2>page1</h2> 　<p>パンクズ</p> 　<div class="nav"> 　　<ul id="tab"> 　　　<li><a href="#page1"><span>page1を選択中</span></a></li> 　　　<li><a href="#page2"><span>page2</span></a></li> 　　　<li><a href="#page3"><span>pave3</span></a></li> 　　</ul> 　</div> 　<p>段落１</p> </div> <div id="page2"> 　<h2>page2</h2> 　<p>パンクズ</p> 　<div class="nav"> 　　<ul id="tab2"> 　　　<li><a href="#page1"><span>page1</span></a></li> 　　　<li><a href="#page2"><span>page2を選択中</span></a></li> 　　　<li><a href="#page3"><span>pave3</span></a></li> 　　</ul> 　</div> 　<p>段落１</p> </div> ...page3 このようにやりたいのですが、JavaScriptがIDセレクタの"tab"にしか対応していないため、他のページにいくとクリックが効かなくなってしまいます。 idセレクタをclassセレクタに設定し直してもidセレクタにしか対応していないため効きません。 tag2とtab3に対応させるためにはどのようにすればいいでしょうか。よろしくお願いします。
- ベストアンサー
- JavaScript
jQueryスライドメニューの初歩的な質問です
以下のスライドメニューは、それぞれブロック要素で構成されていて、リンク文字や余白をクリックするとスライドトグルで開閉が行われます（htmlファイルにコピーすれば動作すると思います）。ひとまずイメージ通りに完成したのですが、1つ困ったことがあります。それはリンク文字をクリックしたときにトグルが実行されてしまうことです。ページ遷移する間にメニューが一度開閉してしまうので見た目にあまりスマートではありません。それを修正するためいろいろ試行錯誤したのですが、どうやってもわからなかったので質問いたしました。リンク文字をクリックしたときは、ページ遷移のみでトグルを実行しないようにするにはどのように書けばよいのでしょうか？また、このソースはjQueryを1.7.2以上にすると動作しなくなってしまいます。この原因が分かる方がいらしたらぜひお教えください。どうぞよろしくお願いいたします。  <script type='text/javascript' src='http://www.google.com/jsapi'></script> <script type='text/javascript'>google.load('jquery', '1.7.1')</script> <script type='text/javascript'>  </script>  <style type="text/css"> span.tree_a{ width: 100%; display: block; } </style>  <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー1</a></span> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー1</a></span> <ul> <li><a href='http://www.google.co.jp/'>孫メニュー1</a></li> </ul> </li> </ul> </li> <li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー2</a></span> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー2</a></span> <ul> <li><a href='http://www.google.co.jp/'>孫メニュー2</a></li> </ul> </li> </ul> </li> </ul> 
- ベストアンサー
- JavaScript
jQueryで記事を６列表示にしたいのです。
ｊQueryで記事を６列表示にしたいのです。 jQueryで６列表示をしたいと思って試行錯誤をしていたのですが、全くわからずじまいで、どうしたらいいのかと知恵袋に投稿致しました。各カテゴリごとに表示をするようになっているのですが、オールだけ全て表示になります。５つ残して表示させればいいのですが、各カテゴリが消えてしまうので、どうしてもオールは６行表示させたいと思っています。どなたか助けていただけませんでしょうか？ jQuery ---------------------------------------------- $(document).ready(function() { $('ul#navi a').click(function() { $(this).css('outline','none'); $('ul#navi .all').removeClass('current'); $(this).parent().addClass('current'); var filterVal = $(this).text().toLowerCase().replace(' ','-'); if(filterVal == 'all') { $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden'); } else { $('ul#portfolio li').each(function() { if(!$(this).hasClass(filterVal)) { $(this).fadeOut('normal').addClass('hidden'); } else { $(this).fadeIn('slow').removeClass('hidden'); } }); } return false; }); }); HTML ---------------------------------------------- <ul id="navi"> <li class="all"><a href="#">All</a></li> <li><a href="#">CMS</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> </ul> <ul id="portfolio"> <li class="cms"><a href="#">Movable Type</a></li> <li class="cms"><a href="#">Movable Type</a></li> <li class="cms"><a href="#">Movable Type</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="javascript"><a href="#">prototype</a></li> <li class="css"><a href="#">CSSビギナー</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">plugin</a></li> </ul>
- 締切済み
- JavaScript
javascriptでCSVを読み込み表示する方法を探しています。
javascriptでCSVを読み込み表示する方法を探しています。 <div id="hoge"> <ul class="hogehoge"> <li><a href="1行目の1つ目のデータ">1行目の2つ目のデータ</a></li> <li><a href="2行目の1つ目のデータ">2行目の2つ目のデータ</a></li> ・・・ </ul> </div> で、ulに囲まれた部分をjavascriptで生成させたいのですが・・・（ulのところのCSS指定は、idではなく、classにしたいです）よろしくお願いいたします。
- 締切済み
- JavaScript
javascriptで同一エレメントを抜き出したい
javascriptでクリックしたエレメントの祖先のエレメントが全て同じだった場合に、該当するもののタグ内の言葉を抜き出そうと思っているのですが、どのようにすればすっきり書けるのかがわかりません。例えば下の[例1]、[例2]はともに、「あ」をクリックしたときに、「あ」「い」「う」を抜き出して、「え」「お」は抜き出したくありません。 [例１] <div class = "a"> <ul> <li>あ</li> ←クリック <li>い</li> <li>う</li> </ul> </div> <ul> <li>え</li> <li>お</li> </ul> *** [例2] <div> <span><em>あ</em></span>　←クリック </div> <div> <span><em>い</em></span> </div> <div> <span><em>う</em></span> </div> <span><em>え</em></span> <span><em>お</em></span>
- 締切済み
- JavaScript
.innerHTMLの不一致？
こんにちは。 Javascriptは全くの初心者です。よろしくお願いします。 <div id="test"> <ul> <li><a href="a.html"><span>AAA</span></a></li> <li><a href="b.html"><span>BBB</span></a></li> <li><a href="c.html"><span>CCC</span></a></li> </ul> </div> <script type="text/javascript">  </script> 上記のようなjavascriptを設置し、 <li><a href="a.html"><span>AAA</span></a></li> の<a>にclass="ddd"を適用させようと思います。（<span>には適用させたくない。）しかし、 var data = "AAA"; だと<a>の.innerHTMLは<span>AAA</span>なので <span>AAA</span> ≠ AAA で一致しません。そこで、 var data = "<span>AAA</span>"; としたところ、FirefoxとNNでは成功しましたが、それ以外のブラウザでは駄目でした。初心者でお恥ずかしい限りですが、どうしたらよいのかご教授いただければ幸いです。よろしくお願いします。
- ベストアンサー
- JavaScript
スマートフォン用サイトのアコーディオンメニュー
スマートフォン用サイトのアコーディオンメニューを作成しています。 http://html-five.jp/140/ こちらのサイト様の情報をもとに2段のメニューが作ろうと思ったのですが、空白のページが表示されてしまいますが、どこを修正したらよいのかわかりません。記述したものは下記のとおりです。解答よろしくお願いいたします。 <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <script type="text/javascript"> $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); </script> <div> <ul> <li> <p><span>LIST 6</span></p> <ul> <li> <p><span>LIST 6-1</span></p> <ul> <li><a href="page01.html">LIST 6-1-1</a></li> <li><a href="page01.html">LIST 6-1-2</a></li> <li><a href="page01.html">LIST 6-1-3</a></li> </ul> </li> <li> <p><span>LIST 6-2</span></p> <ul> <li><a href="page01.html">LIST 6-2-1</a></li> <li><a href="page01.html">LIST 6-2-2</a></li> <li><a href="page01.html">LIST 6-2-3</a></li> </ul> </li> <li> <a href="page01.html">LIST 6-3 (not to open)</a> </li> </ul> </li> <li> <p><span>LIST 7</span></p> <ul> <li> <p><span>LIST 7-1</span></p> <ul> <li><a href="page01.html">LIST 7-1-1</a></li> <li><a href="page01.html">LIST 7-1-2</a></li> <li><a href="page01.html">LIST 7-1-3</a></li> </ul> </li> <li> <p><span>LIST 7-2</span></p> <ul> <li><a href="page01.html">LIST 7-2-1</a></li> <li><a href="page01.html">LIST 7-2-2</a></li> <li><a href="page01.html">LIST 7-2-3</a></li> </ul> </li> <li> <p><span>LIST 7-3</span></p> <ul> <li><a href="page01.html">LIST 7-3-1</a></li> <li><a href="page01.html">LIST 7-3-2</a></li> <li><a href="page01.html">LIST 7-3-3</a></li> </ul> </li> </ul> </li> </ul> </div> </body>
- ベストアンサー
- JavaScript
IEの崩れ
以下のようにリストタグの途中でbrを入れるとIEだけ崩れます何かよい方法はないでしょうか？ <ul> <li class="first"><span>2011</span></li><li><a href="#">2010</a></li><li><a href="#">2009</a></li><br /> <li class="first"><span><a href="#">2001</a></span></li><li><a href="#">2000</a></li><li><a href="#">1999</a></li> </ul>
- ベストアンサー
- CSS
luxbarの表示について3
Proof4さん回答ありがとうございます。お陰様で改善できました。申し訳ないのですがあと数点教えてください。 1.luxbarの上部にヘッダー用のlogo画像等設置用のスペースの開けたいのですが可能でしょうか？試しに<br>でスペースを開けてみたのですが不可でした。もしもスペースが確保できた場合のスマホ用の大きさになった場合、ハンバーガーメニューは右上に表示しているのでしょうか？ 2.配色を試しに#91D0CDで行ってみましたが色は変わりませんでした。 3.全てのメニューに多階層を設置したいのですが、メニュー一番初めの　<li class="luxbar-item active"><a href="#">Home</a></li>を　<li class="luxbar-item dropdown"><a href="#">Home</a></li> にすると問題があるのでしょうか？ 4.https://okwave.jp/qa/q9621783.htmlにFlexboxのレシポンシブCSSで困って質問しています。かなりお詳しそうなので是非教えて頂けないでしょうか？初心者なものですから多数質問して申し訳ないのですが宜しくお願い致します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css"> <style>  </style> </head> <body> <br> <br> <br> <br> <div class="luxbar luxbar-static"> <input type="checkbox" id="luxbar-checkbox" class="luxbar-checkbox"> <div class="luxbar-menu luxbar-menu-right luxbar-menu-dark"> <ul class="luxbar-navigation"> <li class="luxbar-header"> <a class="luxbar-brand" href="#">Brand</a> <label class="luxbar-hamburger luxbar-hamburger-doublespin" for="luxbar-checkbox"> <span></span> </label> </li> <li class="luxbar-item dropdown"><a href="#">Home</a> <ul> <li class="luxbar-item" ><a href="#">Max</a></li> <li class="luxbar-item" ><a href="#">Edgar</a></li> <li class="luxbar-item" ><a href="#">John</a></li> </ul> </li> <li class="luxbar-item dropdown"><a href="#">Users</a> <ul> <li class="luxbar-item" ><a href="#">Max</a></li> <li class="luxbar-item" ><a href="#">Edgar</a></li> <li class="luxbar-item" ><a href="#">John</a></li> </ul> </li> <li class="luxbar-item dropdown"><a href="#">HomeHome</a> <ul> <li class="luxbar-item" ><a href="#">MaxMaxMax</a></li> <li class="luxbar-item" ><a href="#">Edgar</a></li> <li class="luxbar-item" ><a href="#">JohnMax</a></li> </ul> </li> <li class="luxbar-item dropdown"><a href="#">HomeHomeHome</a> <ul> <li class="luxbar-item" ><a href="#">Max</a></li> <li class="luxbar-item" ><a href="#">EdgarMax</a></li> <li class="luxbar-item" ><a href="#">John</a></li> </ul> </li> </ul> </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
プルダウンのメニュー表示について
JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1 　●メニュー1-1　　●メニュー1-2 　●メニュー1-3　　●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか？何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか？以下がコードの一部です。 [html] <div class="tree"> 　　<a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a> 　　<div class="tree_sub"> 　　　　<ul> 　　　　　　<li class="left">●メニュー1-1</li> 　　　　　　<li>●メニュー1-2</li> 　　　　</ul> 　　　　<ul> 　　　　　　<li class="left">●メニュー1-3</li> 　　　　　　<li>●メニュー1-4</li> 　　　　</ul> 　　</div> </div> <div class="tree"> 　　<a href="#">○メニュー2</a> </div> [css] div.tree { 　　border-bottom:1px solid #000000; 　　width:365px; } div.tree_sub ul li { 　　float:left; } div.tree_sub ul li.left { 　　width:50%; }
- ベストアンサー
- その他（プログラミング・開発）

自分のサイトに表示したい文字を取得する方法

自分のサイトに表示したい文字があるのですが

質問者が選んだベストアンサー

お礼 2016/02/27 09:48

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

自分のサイトに表示したい文字を取得する方法

自分のサイトに表示したい文字があるのですが

質問者が選んだベストアンサー

お礼 2016/02/27 09:48

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録