2020.05.25JAVASCRIPTちょっとお勉強したことの備忘録。きましたのでこちらも参考にどうぞ。Centerこのページの解説にあるようにJSON形式のデータとして取得することができます。Notation)は、JavaScriptにおけるオブジェクトの表記法をベースとした軽量なデータ記述言語である。3準拠のJavaScript[1](ECMAScript)をベースとしている。4627で仕様が規定され、MIMEタイプはapplication/json、拡張子はjsonとされた。JSONはJavaScriptにおけるオブジェクト表記法のサブセットであるが、JavaScriptでの利用に限られたものではない。JSONは単純であるので、特にAjaxの分野で利用が広がりつつある。JavaScriptでJSONをパースして読み込むには、文字列をJavaScriptのコードとして解釈させるeval関数を作用させるだけでよい[2]。このように、広く普及しているウェブブラウザ搭載言語であるJavaScriptで簡単に読み込めるため、Ajaxの開発者達から注目を浴びることになった。Wikipediaより一部抜粋...でもこれ読んでも良くわからんよなぁ。ものすごくいい加減で直感的にわかりやすい言い方をすれば「javascript等で扱いやすいデータ集合の記述形式」とでも言えば良いんでしょうかね。はてぶのAPIを使って実例見てもらったほうが早いでしょうか。56docブログこの記事に関するはてぶでの情報を参照するとしましょう。Permanentlyb.hatena.ne.jpこのようにブラウザでリクエストするだけで呼び出すことができます。実際このURLをブラウザのURL入力欄にコピペするかこのリンクをクリックしてみるとブラウザで呼び出されたデータを見ることができます。整形されてないんでものすごく読みにくい文字の羅列になってますが、ここに例に挙げたページのはてぶ上のデータが収納されているのです。【参考】整形されたものがどんな格好になってるか見てみたい人はJSON整形サービスこちらのページに先ほどブラウザに表示されたJSONデータをコピペして変換してみてください。なんとなくデータがネスト・構造化されて整理されてるのがわかるんじゃないでしょうか。JSONデータにアクセスしてデータを取り出す具体的なJSONデータの記述形式について説明するのでここでは割愛します。さしあたっては上記の方法で「あーなんとなくはてぶの情報はJSONとやらで取得できるんだな」ということだけわかってもらえば良いと思います。ここから実際にここからデータを取り出してjavascriptで加工し、ウェブページに表示させる方法。説明の前に実際にデータを取り出して表示させるサンプルページを作りましたのでこちらをご覧下さい。あ、本題に関係ないのでCSSは割愛してます。はてぶJSONデータ取得テストHTMLソースは以下の通り。src="http://b.hatena.ne.jp/entry/jsonlite/?url=https://blog.56doc.net/Entry/150/&callback=displayResult"></script></body></html>若干解説します。src="http://b.hatena.ne.jp/entry/jsonlite/?url=https://blog.56doc.net/Entry/150/&callback=displayResult"></script>こんなJSコードを書いてます。ソース(src)に先ほどのJSONデータ取得のためのURLを指定しています。その最後に「&callback=displayResult」というのを付け足しています。これは「コールバック」と言って、取得したJSONデータを指定した関数(ここでは「displayResult」と言う名前の関数)に渡して処理しますよ、って言う意味です。'</p>';}}comment.innerHTML=commentContent;}</script>この部分です。displayResult(data)」ってあるでしょ?JSONで取得したデータオブジェクトを引数「data」として渡して、これに続く{}内の処理をしますよ、と言うことなんです。ここでやってることをザクっと説明すると、getElementByIdでのちにデータを表示する部分を変数におき、実際に表示させたいJSONデータを.innerHTMLメソッドで置き換える、と言うようなことです。記事タイトルはJSONデータオブジェクト(ここでは引数で渡している「data」)の「title」というプロパティに格納されています。これにアクセスするときには「data.title」とします。その記事のURLは「url」というプロパティに格納されています。これも同様に「data.url」とすることでデータにアクセスできます。href="'+data.url+'">'+data.title+'</a>';この部分なのです。ブックマーク数やスクリーンショット、ブコメについても基本的に同じ流れです。コメントに関しては1つの記事に対して複数あるのでfor文でループして処理しています。はてなブックマークエントリー情報取得APIで取得できること荒っぽい説明で申し訳ないですが、以上のような感じで流れはつかめたでしょうか。この例で挙げた以外にもはてぶ情報取得APIのJSONからは様々なデータを取り出すことが出来ますのでその種類とプロパティの指定方法を一覧にしておきます。JSONデータを格納したオブジェクトを「data」とするとブックマークされた記事のタイトル:data.titleブックマークされた記事のurl:data.urlブックマークされた記事のスクリーンショット画像:data.screenshotその記事の総ブックマーク数:data.countはてなブックマークエントリーページのURL:data.entry_urlはてなブックマークエントリーページの個別ID:data.eidユーザーのブックマークしたデータ(配列):data.bookmarksユーザーのブックマークしたデータはさらに配列になっているので以下のように参照します(ここではブックマークの配列番号をiとしています)。ブックマークしたユーザー名:data.bookmarks[i].userタグ(配列):data.bookmarks[i].tags[j]ブックマークした時刻:data.bookmarks[i].timestampコメント:data.bookmarks[i].commentタグはさらに配列になってるんでややこしいですね。まとめなんでこういうこと調べようかと思ったかというとちょっと前に話題になった週6フリーターもWEBサービス作ってみました。これを読んで「あーはてぶも色々情報取り出していじくれるんだ」と言うことを知って実際どんなもんか試したくなった次第。はてぶの人気記事一覧とか、ただそれだけ取り出しても面白くないんでコメントとか取り出したりできるんだろうかとか色々調べてるうちに今回の記事のような内容にたどり着きました。相変わらず門外漢なんで説明下手でホント申し分けないんです、っていうか説明の仕方として大嘘言ってるかもしれないので色々ご指摘いただけると嬉しいです。いうわけでほぼ自分用の備忘録きじなんですが、こういうの知っているとブログの記事下にブコメ載せるガジェットとかわりと簡単に作れそうだし、週6フリーター的なウェブアプリみたいなものを作るときにも役立ちそうなので参考にでもしていただけると幸いです。コピーgorodokuをフォローする0gorodokuこの記事を読んだ人はこんな記事も読んでいます。JAVASCRIPTブログ拾い読み用ブックマークレットを作ってみました閲覧してるページの選択テキストと一緒にタイトルとそのページのリンクを拾い上げるブックマークレットを作ってみました。ネタフルさんのネタリストみたいにあっちこっちの拾い読み記事書く時にあると便利かと思いまして。JAVASCRIPTtypeof()でオーラロードをこじ開ける(もしくはデータ型について)[オレ得JavaScriptメモ]オレ得JavaScript3枚目書きます。今日は(今日も)長いです。長いけどいっぱいあるサンプルコードはそれぞれ短いです。短くて単純な方がわかり易いからね。今回はデータ型についての再整理と、その結果思ってもみなかったところに繋がる話です。APIの応用という記事で、ある特定のRSSフィードURLからデータを受け取る方法を紹介しましたが、今回は任意のワードを含むであろうブログサイトのRSSフィードURL自身...JAVASCRIPTthisがよくわからないのthis[オレ得JavaScriptメモ]オレ得JavaScriptメモの...えーと何枚目だっけ?4枚目?まぁ何枚目でもいや別に数管理してないし。今回は「this」について調べてまとめてみた。文書ではわかりにくいところもあるので図も使って整理してみたよ。JAVASCRIPTalertとconsole.logのお話[オレ得JavaScriptメモ]手持ちの受注案件が落ち着いて業務処理用にJavaScriptいじりだす年度末のごろどくです、どうも。「手持ちの受注案件落ち着いた」というのはたいがいフェイクで、例年検定後に(私の担当以外のところで)地獄修正くらいます。年一回しかJS触らな...JAVASCRIPT動的に識別子指定したいときはブラケット記法を使おう[オレ得JavaScriptメモ]久しぶりにJSメモです。今日は本当にメモ程度...恥ずかしながら今まで知らなかったブラケット記法について。いや知ってたけど使い方あんまりわかってなかった。単純だけどこいつは強力。JAVASCRIPTブコメ大好きな人のためのWebサービス的なものを作ってみましたいや、Webサービスなんて大そうなもんでもないんですけど。素人がどれくらいのことまで出来るのかちょっと試してみたくなったんで作ってみました、ブコメ大好きな人のためのサイトです。JAVASCRIPT[[prototype]]なんて無い。__proto__も無いと思え![オレ得JavaScriptメモ]タイトル暴論ですみません、ごろどくですどうも。オレ得JavaScriptメモの6枚目か7枚目か8枚目くらいです。プログラミング学習動画サイト『ドットインストール』ウェブ界隈のツイッタラーさんには今さらな話のような気もするけど、多分世の中にはこれ知らない人たくさんいると思うのでぜひ知っていただきたいと思いご紹介。API+LaTeXやMathMLによってHTML上で数式を表現する方法というのを説明したのですが、いずれの方法も独自の記法を覚えないとなかなか実用できないというところのハードルが若干高かったです。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。BLOG検索タイトルとURLをコピーしました。