- 投稿日:2020-09-14T23:49:17+09:00
【JavaScript, jQuery】nullとremoveメソッドを使ったif文で、click表示を1つだけに収める方法(+α oneメソッドとの比較)
「ボタンを連打したら何個も同じメッセージが生成されてうざったい。1つだけの生成でいいのに。」
・・・この問題を解決するコード記述で詰まったので、備忘として残す。例えば下記のような挨拶ボタンを作りたいとする。
プレビューはこんな感じ(cssの記述は、内容と直接関係ないので割愛。)
※黒い部分はただの墨塗りです。気にしないでください。
挨拶ボタンを押すと、「こんにちは!私の名前は(以下略)」と定型文を出力するようにする。
しかし、このままだと挨拶ボタンをクリックする度にメッセージが何個も出てくる。
click表示(挨拶メッセージ)1つだけに収めたいので、下記のようにnullを使ったif文を関数の中に追記する。
つまり、if文で「あるHTML要素がすでに存在している場合(nullではない場合)」と「存在している場合(else)」の処理をそれぞれ実行できるようにする。
「!= null」は、null(不存在)ではないという意味。
その結果、何度ボタンを押してもclick表示は1つだけしか表示されない。
(正確には、「(ボタンを2回目以降押した場合は、一度既存の表示を削除(remove)し、あらたに生成(append,text)」している。)
「挨拶ボタンのclickイベントを1回だけしか実行させない。」という目的だけを実現するのであれば、oneメソッドを使った方が簡素な記述で済む。
例)$("#btn-greeting").one("click",function() { $("#greeting").text(greeting()); });今回のように、決まった定型文を出力する場合はこれでもよい。
しかし、「10歳の田中太郎」以外も挨拶ボタンを使いたい場合、つまり挨拶文の内容(名前や年齢)を変更し、ボタンを押すことで更新(再表示)するようなプログラムを作成したい場合は、oneメソッドでは融通が利かないため、前述のif文が有効である。
- 投稿日:2020-09-14T21:02:27+09:00
【初心者でもわかる】ふちに模様がついてるデザインの時、模様の大きさをキープしたまま可変に対応させる方法
どうも7noteです。左右などに模様がついたデザインを作る時のちょっとしたコツについて
今回は以下のようなデザインを作る方法です。
文字の右上と左上に模様が入った場合のデザイン。
まず、1枚の背景画像として画像を設置した場合の書き方はこうなります。
index.html<h2>ここに見出しが入ります</h2>style.cssh2 { width: 300px; text-align: center; background: url(sample_bg.png) no-repeat; }結果
上手に入れる事ができました。
ではもし横幅がもっと長くなればどうでしょうか。
このように意図しないような広がり方になってしまい、模様が切れてしまいます。
画像の横幅に依存してしまっては表示が崩れてしまうのです。横幅が可変でかわったとしても崩れないようにする方法
模様の画像を左右それぞれ分けて用意し、CSSを以下のように書き換えてください。
style.cssh2 { width: 300px; text-align: center; background-image: url(sample_bg_left.png),url(sample_bg_right.png); background-repeat: no-repeat; background-size: 50px 50px; background-position: left top, right top; }結果
このように横幅が変化しても、模様自体は常に同じ大きさをキープすることができます。
まとめ
背景画像にはカンマ(,)で区切ることで複数画像を指定することができます。これを利用して常に同じ大きさの画像を左上・右上に配置することで横幅に依存することなく可変にも対応することができます。
ちょっとした工夫が他のWEBサイトとの差になるので、このような所にも丁寧さが現れるサイト作りを意識したいものですね。
おそまつ!
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
- 投稿日:2020-09-14T20:29:36+09:00
Tyハロトレ21日目
HTML
インライン要素とブロック要素
インライン(inline)・・・ライン上の
img・・・線上の中にある画像img
srcとaltと幅・高さを指定する必要があります。
幅と高さは、元画像の幅と高さを指定することが多いです。<img src="apple.gif" width="60" height="60" alt="リンゴの絵">aタグ
a ・・・anchor
href ・・・hyper reference(すんげえ参照先)<p><a href="link_b.html">Bページへジャンプする</a></p>リンクの対象となるものを囲みます。
絶対パスと相対パス
現在と同じ階層は「./」、現在よりも1つ上の階層は「../」と表します。
絶対パス : <a href="http://127.x.x.x:xxxxx/yasai/tomato.html>トマトに行く</a> 相対パス : <a href="../yasai/tomato.html>トマトに行く</a>ビジネスメールについて
①宛先 相手のメールアドレス
②件名
③内容
相手の名前
自分の名前
(挨拶)
初日から楽しい授業ありがとうございます。
これから頑張ります。(会社名)(会社の連絡先) 名前、メールアドレス
strong
sectionとarticle
市場調査
オンラインショップ
【メリット】
家から出なくてよい、面倒な店員に話しかけられない、色んなものを見比べられる、店舗にないものを見れる、感染症対策、見たい情報を見れる
【デメリット】
配送料がかかる、配送まで数日かかる、支払い方法限定、買いすぎてしまうリアル店舗
【メリット】
実際に見て、イメージできる、ネットで得られない
【デメリット】
地方には店がない、自分のペースで見れない、24h空いてないid
楽天
楽天が小さい部屋で10人規模だったのに、大手商社をぶち抜いた理由
・導入が5万円で安かった。
・ページの更新のシステムを作った
・昔はロイヤリティが4~5%で安かった(今は上がって、辞める会社が増えている)ZOZOTOWN
ZOZOTOWNと
ショッピングモール:{Amazon、楽天、Yahoo}との
①違いはないか
②ターゲットは誰か?
③どうやって莫大な利益を上げているのか?
④他と違うサービス、特徴は何?
⑤ZOZO離れはなぜ起こったか?(企業が離れていく理由)
⑥その他、気づいたこと参考
この記事は以下の情報を参考にして執筆しました。HTML5&CSS3標準デザイン講座 30LESSONS【第2版】
- 投稿日:2020-09-14T15:53:31+09:00
画像にマウスオーバーすると背景をグラデーションにしてメニューが出るようにする
Youtubeの動画やfreepikのように、画像にホバーすると画像にオーバレイすると、メニューが出てきて、メニューの背景にはグラデーションが掛かったデザインがありますが、それを実現するサンプルです。
See the Pen QWNxvgW by emesh (@emesh) on CodePen.
定義要件としては、
1.ホバーすると画像がグラデーションになる
2.下にメニューが表示される
3.画像からでもリンクできると言う点が必要でした。まずグラデーションはHTMLにマスクの要素を用意し、それをCSSで調整するようにしています。画像のリンクはそのままではできないのでよくある要素全体に拡大するコードを使っていますが、そのコードではメニューにも影響を及ぼし、文字が一つの場所に集合してしまうというバグにも影響が及ぼすので下記のコードでpositionをキャンセルさせることにしています。
figcaption a { position: initial !important; color: #fff; }参考になりましたらどうぞ。
おまけ
ホバーするとメニューが表示するのではなく常時メニューを表示させたい場合にはこちらを。
See the Pen メニューを常時表示したいとき by emesh (@emesh) on CodePen.
参考サイト
- 投稿日:2020-09-14T13:16:39+09:00
【React】ボタンクリックで別のDOM要素のイベントを起動する方法
はじめに
ボタンクリックで別のDOM要素のイベントを起動する方法についてです。
Material Uiの
<Button />
など、あらかじめカスタムされたコンポーネントだと別のDOM要素を紐付けるカスタムは面倒です。
ここではuseRef()
を使用し、onClick
でDOMの参照に対する操作を行うことで解決します。※通常は
<Form />
要素を使用することで複雑な実装なく動作します。シチュエーション
ボタン(
<Button />
)と、透明な入力ボックス(<input />
)がある
<input type="file" />
を使用したファイルアップロードをボタンから行えるようにしたい。やりたいこと
ボタンをクリックしたら、入力ボックスがクリックされた挙動をさせたい
関数コンポーネント<Button onClick={handleClick} > <input type="file" style={{display: 'none'}} />
方法
React.useRef()
を使って、入力ボックス(<input />
)の参照を得るonClick
したら、関数内で参照をクリックさせる関数コンポーネントconst inputRef = React.useRef(); const handleClick = () => inputRef.current.click(); // ..... <Button onClick={handleClick} > <input type="file" ref={inputRef} style={{display: 'none'}} />まとめ
React.useRef()
を使うことで、操作したいDOMへの参照を得るonClick
内で参照に対する操作を行うこうすることで、あるボタンから別のDOM要素のイベントを起動できる。
- 投稿日:2020-09-14T11:39:26+09:00
HTML についてあらためて学びなおしてみた
はじめに
この記事は、HTMLの書き方ではなくHTMLとは?について形骸化している知識を改めてまとめなおした記事です。既に知っているが記憶がボンヤリしている方や、HTMLって何だろう?と気になっている人の目に留まれば良いなと思いつつ書きます。
HTMLとは
まず、皆さんご存知のHTMLですが。
正式名称は、Hyper Text Markup Language でございます。長いですね。
タダ書いても、初めて見る方には
「へえ~、ハイパーなテキストでマークアップ言語とやらなんだ」で終わってしまいます。しかし皆さん、ここでは終わりません。ここからがマグマなんです。
文節毎に、どんな意味を持っているのか詳しく掘り下げていきましょう。
Hyper Text とは
ハイパーリンクを用いる事が出来るようになった強いテキストといったところでしょうか。
テキストとは、皆さんが今読んでいる文章の事ですね。
次に、ハイパーリンクという新しい言葉も出てきました。もしかすると、ハイパーリンクも聞いた事見た事が無い人もいると思うので
↓に記載します。ハイパーリンクについて知る
試しに、一行下に「キータ」というハイパーリンクを作ってみました。
コントロールキー(Macはcommand)を押しながらクリックしてみてください。別のタブで、キータのトップページが表示されたはずです。
本来、キータのトップページを見る場合「トップページのURLを知っている」必要があります。
しかし、ハイパーリンクを用いればURLを認識していなくても
クリックするだけでその場所まで遷移する事が出来る!!すごい仕組みです。
通常は、リンクと呼ばれたりしています。Hyper Text Markup Language とは
上記に記載した、ハイパーテキストの特性を持っている
+
文章の構成を、コンピュータに認識させるための言語です!!!人間であれば、一枚の情報誌のページを作る時
「ここが段落で~こっちは見出しにして~」と一枚絵にして視覚的にもわかりやすくとすんなり行きます。
しかし、その人間が作ったイメージをどのようにコンピュータに認識させるのでしょうか?
そう、一筋縄ではいかないのです。
そこで冒頭から説明してきた Hyper Text Markup Language の出番ですね。
コンピュータが認識出来るように決められたルールに従って記述をすれば、希望通りのデザインになるはずです。
(CSSの話はしません!)実際にどんな感じで書かれているのか、見る事も可能です。
PCの方は、Ctrl + U を押してみてください。
Androidの方は、URLの先頭にview-source:
を付けてみてください。(view-source:https~~~
となる)
iOSの方は、出来ないらしいです。悲しいね。
初見だと、見慣れない文字ばかりの光景が広がっていると思います。
それが、コンピュータが人間の要望を認識出来るようにするための元(素??)です。
その元があって → コンピュータが命令を実行して → 命令の結果を画面に出力するのです。おわりに
HTMLとは?について書いてみました。
HTMLの記法も、機会があれば書いてみたいですね。
- 投稿日:2020-09-14T11:39:26+09:00
[HTML]についてあらためて学びなおしてみた
はじめに
この記事は、HTMLの書き方ではなくHTMLとは?について形骸化している知識を改めてまとめなおした記事です。既に知っているが記憶がボンヤリしている方や、HTMLって何だろう?と気になっている人の目に留まれば良いなと思いつつ書きます。
HTMLとは
まず、皆さんご存知のHTMLですが。
正式名称は、Hyper Text Markup Language でございます。長いですね。
タダ書いても、初めて見る方には
「へえ~、ハイパーなテキストでマークアップ言語とやらなんだ」で終わってしまいます。しかし皆さん、ここでは終わりません。ここからがマグマなんです。
文節毎に、どんな意味を持っているのか詳しく掘り下げていきましょう。
Hyper Text とは
ハイパーリンクを用いる事が出来るようになった強いテキストといったところでしょうか。
テキストとは、皆さんが今読んでいる文章の事ですね。
次に、ハイパーリンクという新しい言葉も出てきました。もしかすると、ハイパーリンクも聞いた事見た事が無い人もいると思うので
↓に記載します。ハイパーリンクについて知る
試しに、一行下に「キータ」というハイパーリンクを作ってみました。
コントロールキー(Macはcommand)を押しながらクリックしてみてください。別のタブで、キータのトップページが表示されたはずです。
本来、キータのトップページを見る場合「トップページのURLを知っている」必要があります。
しかし、ハイパーリンクを用いればURLを認識していなくても
クリックするだけでその場所まで遷移する事が出来る!!すごい仕組みです。
通常は、リンクと呼ばれたりしています。Hyper Text Markup Language とは
上記に記載した、ハイパーテキストの特性を持っている
+
文章の構成を、コンピュータに認識させるための言語です!!!人間であれば、一枚の情報誌のページを作る時
「ここが段落で~こっちは見出しにして~」と一枚絵にして視覚的にもわかりやすくとすんなり行きます。
しかし、その人間が作ったイメージをどのようにコンピュータに認識させるのでしょうか?
そう、一筋縄ではいかないのです。
そこで冒頭から説明してきた Hyper Text Markup Language の出番ですね。
コンピュータが認識出来るように決められたルールに従って記述をすれば、希望通りのデザインになるはずです。
(CSSの話はしません!)実際にどんな感じで書かれているのか、見る事も可能です。
PCの方は、Ctrl + U を押してみてください。
Androidの方は、URLの先頭にview-source:
を付けてみてください。(view-source:https~~~
となる)
iOSの方は、出来ないらしいです。悲しいね。
初見だと、見慣れない文字ばかりの光景が広がっていると思います。
それが、コンピュータが人間の要望を認識出来るようにするための元(素??)です。
その元があって → コンピュータが命令を実行して → 命令の結果を画面に出力するのです。おわりに
HTMLとは?について書いてみました。
HTMLの記法も、機会があれば書いてみたいですね。
- 投稿日:2020-09-14T10:37:39+09:00
ローカルのサーバを立ち上げてHTMLを開く
背景 ローカルで以下のようなhtmlファイルを作成 iframe.html <html> <head> </head> <body> <iframe src="iframe_content.html" width="200" height="300" id="iframe-01"></iframe> </body> </html> iframe_content.html <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>iframe内</h1> <div class="iframe-width"></div> <script> const win = window.window; $('.iframe-width').text('iframeの幅 : ' + win.innerWidth + 'px'); console.log(win.parent); </script> </body> </html> そしてファイルパスを使って(/Users/.../iframe.html)アクセスしたところ,以下のようなエラーがコンソールで出てしまった. Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame. 調べてみたところ,ローカルでサーバを立てて動かせばこのエラーが出ないっぽいので,やってみることにしました.(参考) Dockerでnginxを起動 環境 OS : macOS ブラウザ : Google Chrome(バージョン85) ディレクトリ構成 * ├- Dockerfile └- sample_html/ ├- iframe.html └- iframe_content.html Dockerfile作成 nginxのイメージを基に作成します. sample_html 配下のフォルダを表示対象とします. Dockerfile FROM nginx COPY sample_html /usr/share/nginx/html docker imageの作成 sample というイメージ名で 1.0 というタグをつけて,カレントディレクトリにあるDockerfileを元にイメージを作成 $ docker build -t sample:1.0 . dockerコンテナの生成・起動 バックグラウンドで sample というイメージ名で 1.0 というタグがついているdockerイメージを起動 $ docker run -d -p 8080:80 sample:1.0 docker run のオプションについて -p : ホストのポート:コンテナのポート ポート番号の紐付けを宣言 アクセス確認 http://localhost:8080/iframe.html にアクセス すると,コンソールにエラーが表示されずにiframeの親の情報を取得することができる. 参考 とりあえずhtmlの表示をDocker使って行う[nginxバージョン] Docker入門 Nginxを動かしてみる
- 投稿日:2020-09-14T03:39:14+09:00
【Python】HTMLをJSON形式にしたり、簡易的にjQueryのセレクタっぽい解析ができるモジュールを作ってみた。
きっかけ
唐突にHTMLをJSON形式に変形したい衝動に駆られたので書きました。
ついでにセレクタ機能もどきもつけてみようかと。このセレクタ機能もどきを使えばQiitaのトップページから2行でトレンド情報のJSONを抜き出せます。
構造
・ディクショナリクラスを継承して、辞書としての機能のほか、タグや親(子)要素、テキストなどの情報を個別に保持できるクラス
・HTMLの各タグを上記クラスに加工する関数
・おまけのHTTPリクエストから加工までやってくれる関数以上
実装
html2json.pyimport re class html(dict): def __init__(self, tag, parent=None, attributes={}): super(html, self).__init__(attributes) self.tag = tag self.parent = parent self.attributes = attributes self.child = [] self.text = '' self.innerText = '' self.__dict__.update( {re.sub("[-\s]", "_", k): v for k, v in attributes.items()}) if tag: self.jq = self.parent.jq else: self.jq = {} def addChild(self, child, attributes={}): c = html(child, self, attributes) if child in self.child: if type(self[child]) != list: self[child] = [self[child], c] else: self[child].append(c) else: self[child] = c self.child.append(child) for k, v in attributes.items(): t = '#' + v if k == 'id' else '.' + v if k == 'class' else f'{k}="{v}"' if t in self.jq.keys(): if type(self.jq[t]) == list: self.jq[t].append(c) else: self.jq[t] = [self.jq[t], c] else: self.jq[t] = c t = child if t in self.jq.keys(): if type(self.jq[t]) == list: self.jq[t].append(c) else: self.jq[t] = [self.jq[t], c] else: self.jq[t] = c return c def atext(self, t, inner=True): if t: self.text += ("\n" + t) if self.text else t if inner: self.innerText += t if self.parent: self.parent.atext(t, False) def parse2json(h): a = html("") k = 0 p = a singlet = set(re.findall("</?(\S+?)(?:\s.*?)?>", h)) ^ set( re.findall("</(\S+?)>", h)) scripts = (s for s in re.findall("<script.*?>(.*?)</script>", " ".join( h.splitlines()))) h = re.sub("(<script.*?>).*?(</script>)", "\\1\\2", " ".join(h.splitlines())) styles = (s for s in re.findall("<style.*?>(.*?)</style>", h)) h = re.sub("(<style.*?>).*?(</style>)", "\\1\\2", h) for i in re.finditer('<(.+?)(\s.+?)?>', h): tag = i.group(1) attr = dict(re.findall('\s?(.+?)="(.+?)"', i.group(2))) if i.group(2) else {} p.atext(h[k:i.span()[0]]) k = i.span()[1] if tag[1:] == p.tag: p = p.parent elif tag in singlet or i.group(0)[-2] == '/': if not attr: continue else: p.addChild(tag, attr) else: p = p.addChild(tag, attr) if tag == "script": p.text = scripts.__next__() elif tag == "style": p.text = styles.__next__() return a def url2json(url, headers={}): from requests import get resp = get(url, headers=headers) resp.encoding = 'utf-8' return parse2json(resp.text)機能の紹介
htmlクラスのメンバ
.tag
: タグ
.parent
: 親要素
.child
: 子要素(リスト)
.text
: タグ内のテキスト要素(子要素のテキストを含む)
.innerText
: タグ直下のテキスト要素(script, styleは対象外)
.attributes
: 属性及びその値(辞書)
.jq
: jQuery的なセレクタをちょっとだけ再現した辞書(使い方は使用例を参照)
.addChild(追加する子要素のタグ名(str), その属性(値)(dict))
: 子要素を追加する関数
.aText(追加するテキスト(str), innerTextか(bool))
: テキスト要素を追加する関数parse2json(HTML(str))
str型のHTMLを受け取ってJSON形式(dict)に加工して返す関数
url2json(URL(str), headers = {}(dict))
str型のURLを受け取ってHTTPリクエスト、得られたHTTPを
parse2json()
に渡した戻り値を返す関数。
第2引数でheadersを指定可能。使用例
jQueryを意識して
jq
という名前の辞書(htmlクラスのメンバ変数)にタグや属性に対応する要素の参照が格納されています。
jq['タグ名']
や、jq['.クラス名']
、jq['#id']
、jq['属性="属性値"']
といった形で解析できます。あくまで辞書なので複数条件で検索するなどは出来ません。試しにQiitaのトップページからトレンドを取得してみたいと思います。
from html2json import * j = url2json("https://qiita.com/") #もしくはHTTPのstrを直接渡して、 #from requests import get #text = get("https://qiita.com/").text #j = parse2json(text) j
出力
out{'html': {'head': {'meta': [{'charset': 'utf-8'}, {'content': 'Qiitaは、プログラマのための技術情報共有サービスです。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 &amp; 公開することができます。', 'name': 'description'}, {'content': 'width=device-width,initial-scale=1,shrink-to-fit=no', 'name': 'viewport'}, {'content': '#55c500', 'name': 'theme-color'}, {'content': 'XWpkTG32-_C4joZoJ_UsmDUi-zaH-hcrjF6ZC_FoFbk', 'name': 'google-site-verification'}, {'name': 'csrf-param', 'content': 'authenticity_token'}, {'name': 'csrf-token', 'content': 'tqC/csmcj10fm/D8PW+LEYKMny+rvfyb1br8mHfXy480ajaywVIGanwR1gAYOLPsJ6bKnk7iayPSzQ+JfpXIYw=='}, {'name': 'twitter:card', 'content': 'summary'}, {'content': '@Qiita', 'name': 'twitter:site'}, {'property': 'og:type', 'content': 'website'}, {'property': 'og:title', 'content': 'プログラマの技術情報共有サービス - Qiita'}, {'property': 'og:image', 'content': 'https://cdn.qiita.com/assets/qiita-fb-fe28c64039d925349e620ba55091e078.png'}, {'property': 'og:description', 'content': 'Qiitaは、プログラマのための技術情報共有サービスです。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 &amp; 公開することができます。'}, {'content': 'https://qiita.com/', 'property': 'og:url'}, {'content': 'Qiita', 'property': 'og:site_name'}, {'content': '564524038', 'property': 'fb:admins'}], 'title': {}, 'link': [{'href': '/manifest.json', 'rel': 'manifest'}, {'href': '/opensearch.xml', 'rel': 'search', 'title': 'Qiita', 'type': 'application/opensearchdescription+xml'}, {'rel': 'shortcut icon', 'type': 'image/x-icon', 'href': 'https://cdn.qiita.com/assets/favicons/public/production-c620d3e403342b1022967ba5e3db1aaa.ico'}, {'rel': 'apple-touch-icon', 'type': 'image/png', 'href': 'https://cdn.qiita.com/assets/favicons/public/apple-touch-icon-ec5ba42a24ae923f16825592efdc356f.png'}, {'rel': 'stylesheet', 'media': 'all', 'href': 'https://cdn.qiita.com/assets/public/style-93c10f153c2288070357952f30807154.min.css'}], 'script': [{'defer': '" src='}, {'src': 'https://cdn.qiita.com/assets/public/bundle-817a6d71a8cc5bb6072675d7f25cbfa5.min.js', 'defer': 'defer'}]}, 'body': {'div': [{'class': 'allWrapper', 'div': [{'data-hyperapp-app': 'GlobalHeader', 'data-hyperapp-props': '{"unreadNotificationsCount":null,"realms":[{"humanName":"Qiita","isCurrentRealm":true,"isQiita":true,"isQiitaTeam":false,"loggedInUser":null,"teamId":null,"url":"https://qiita.com/"}],"teamFindUrl":"https://teams-center.qiita.com/find_team","isTeamOnlyUser":null,"currentUser":null}', 'div': {'class': 'st-Header', 'id': 'globalHeader', 'div': {'class': 'st-Header_container', 'div': [{'class': 'st-Header_start', 'a': {'class': 'st-Header_logo mr-1 ', 'href': '/', 'svg': {'viewbox': '0 0 426.57 130', 'xmlns': 'http://www.w3.org/2000/svg', 'circle': [{'cx': '167.08', 'cy': '21.4', 'r': '12.28'}, {'cx': '216.33', 'cy': '21.4', 'r': '12.28'}], 'path': [{'d': 'M250.81 29.66h23.48v18.9h-23.48z'}, {'d': 'M300.76 105.26a22.23 22.23 0 01-6.26-.86 12.68 12.68 0 01-5.17-3 14.41 14.41 0 01-3.56-5.76 28 28 0 01-1.3-9.22V48.56h29.61v-18.9h-29.52V3.29h-20.17v83.34q0 11.16 2.83 18.27a27.71 27.71 0 007.7 11.2 26.86 26.86 0 0011.43 5.62 47.56 47.56 0 0012.34 1.53h15.16v-18zM0 61.7a58.6 58.6 0 015-24.21A62.26 62.26 0 0118.73 17.9 63.72 63.72 0 0139 4.78 64.93 64.93 0 0164 0a65 65 0 0124.85 4.78 64.24 64.24 0 0120.38 13.12A62 62 0 01123 37.49a58.6 58.6 0 015 24.21 58.34 58.34 0 01-4 21.46 62.8 62.8 0 01-10.91 18.16l11.1 11.1a10.3 10.3 0 010 14.52 10.29 10.29 0 01-14.64 0l-12.22-12.41a65 65 0 01-15.78 6.65 66.32 66.32 0 01-17.55 2.3 64.63 64.63 0 01-45.23-18A62.82 62.82 0 015 85.81 58.3 58.3 0 010 61.7zm21.64.08a43.13 43.13 0 0012.42 30.63 42.23 42.23 0 0013.43 9.09A41.31 41.31 0 0064 104.8a42 42 0 0030-12.39 42.37 42.37 0 009-13.64 43.43 43.43 0 003.3-17 43.77 43.77 0 00-3.3-17A41.7 41.7 0 0080.55 22 41.78 41.78 0 0064 18.68 41.31 41.31 0 0047.49 22a42.37 42.37 0 00-13.43 9.08 43.37 43.37 0 00-12.42 30.7zM331.89 78a47.59 47.59 0 013.3-17.73 43.22 43.22 0 019.34-14.47A44.25 44.25 0 01359 36a47.82 47.82 0 0118.81-3.58 42.72 42.72 0 019.26 1 46.5 46.5 0 018.22 2.58 40 40 0 017 3.84 44.39 44.39 0 015.71 4.63l1.22-9.47h17.35v85.83h-17.35l-1.17-9.42a42.54 42.54 0 01-5.84 4.67 43.11 43.11 0 01-7 3.79 44.86 44.86 0 01-8.17 2.59 43 43 0 01-9.22 1A47.94 47.94 0 01359 119.9a43.3 43.3 0 01-14.47-9.71 44.17 44.17 0 01-9.34-14.47 47 47 0 01-3.3-17.72zm20.27-.08a29.16 29.16 0 002.17 11.34 27 27 0 005.92 8.88 26.69 26.69 0 008.76 5.76 29.19 29.19 0 0021.44 0 26.11 26.11 0 008.72-5.76 27.57 27.57 0 005.88-8.84 29 29 0 002.16-11.38 28.62 28.62 0 00-2.16-11.22 26.57 26.57 0 00-5.93-8.8 27.68 27.68 0 00-19.51-7.9 28.29 28.29 0 00-10.77 2.05 26.19 26.19 0 00-8.71 5.75 27.08 27.08 0 00-5.84 8.8 28.94 28.94 0 00-2.13 11.31zm-194.97-30.5h19.78v73.54h-19.78zm49.25 0h19.78v73.54h-19.78z'}]}}, 'div': [{'div': {'class': 'st-Header_realmSelector', 'span': {'class': 'fa fa-fw fa-caret-down'}}}, {'div': {'class': 'st-Header_community', 'span': {'class': 'fa fa-fw fa-caret-down ml-1of2'}}}, {'class': 'st-Header_searchButton', 'span': {'class': 'fa fa-serach'}}], 'form': {'class': 'st-Header_search', 'span': {'class': 'fa fa-search'}, 'input': {'class': 'st-Header_searchInput', 'placeholder': 'Search', 'type': 'search'}}}, {'class': 'st-Header_end', 'a': [{'class': 'st-Header_signupButton', 'href': '/signup'}, {'class': 'st-Header_loginLink', 'href': '/login'}]}]}}}, {'class': 'st-HeaderAlert st-HeaderAlert-warning', 'div': {'class': 'st-HeaderAlert_body'}}, {'class': 'p-home is-anonymous', 'div': [{'class': 'nl-Hero', 'div': {'class': 'nl-Hero_inner', 'div': [{'class': 'nl-Hero_start', 'h1': {'class': 'mb-3 nl-Hero_title'}, 'p': {'class': 'nl-Hero_lead'}}, {'class': 'nl-Hero_end', 'div': [{'class': 'nl-SocialSignupWrapper', 'form': [{'class': 'nl-SocialSignup', 'method': 'post', 'action': 'https://oauth.qiita.com/auth/github?callback_action=login_or_signup&realm=qiita', 'button': {'class': 'nl-SocialSignup__button nl-SocialSignup-github', 'type': 'submit', 'span': {'class': 'fa fa-github'}}, 'input': {'type': 'hidden', 'name': 'authenticity_token', 'value': 'tBcjq2Dv7jrgxERww9U6syrFVUTxvyE1HyO5PsqZXDPYPr7YZdrUkgqDKIdzpRhv1sLC/6HHiNZ8+vi2o51HkQ=='}}, {'class': 'nl-SocialSignup', 'method': 'post', 'action': 'https://oauth.qiita.com/auth/twitter?callback_action=login_or_signup&realm=qiita', 'button': {'class': 'nl-SocialSignup__button nl-SocialSignup-twitter', 'type': 'submit', 'span': {'class': 'fa fa-twitter'}}, 'input': {'type': 'hidden', 'name': 'authenticity_token', 'value': '5RxsrHz3s7/krj65B4UmDuDPCWVZ3zW/5eewJdcWpwPP0ExIjWLAX1RTmHnIGdC/6SdfFT3chxLmyVqevbRpDg=='}}, {'class': 'nl-SocialSignup', 'method': 'post', 'action': 'https://oauth.qiita.com/auth/google?callback_action=login_or_signup&realm=qiita', 'button': {'class': 'nl-SocialSignup__button nl-SocialSignup-google', 'type': 'submit', 'span': {'class': 'fa fa-google'}}, 'input': {'type': 'hidden', 'name': 'authenticity_token', 'value': 'SwXL0t7GHPdAdNzqzisAhyp3gWbote8enJ+wH2bzW+Juo0XvLIOOtY+H5iO7KxkQ5S4EQ7MNxc3+CDmjsbas0w=='}}]}, {'class': 'nl-Hero_separator'}], 'form': {'class': 'nl-SignupForm', 'action': '/registration', 'accept-charset': 'UTF-8', 'method': 'post', 'input': {'type': 'hidden', 'name': 'authenticity_token', 'value': 'oTJBMui6N+i1rWwj++rqOEFxFT2s6+0Fb4Oe8fpfBBIH8p0iprqKiQ5Dr+tI2yHNu07ZdmTzylnWgiCkDNCLOg=='}, 'div': [{'class': 'mb-2 nl-SignupForm_group', 'label': {'class': 'nl-SignupForm_label', 'for': 'url_name'}, 'input': {'class': 'nl-SignupForm_input', 'id': 'url_name', 'name': 'user[url_name]', 'placeholder': 'qiitan', 'required': 'required', 'type': 'text'}}, {'class': 'mb-2 nl-SignupForm_group', 'label': {'class': 'nl-SignupForm_label', 'for': 'email'}, 'input': {'class': 'nl-SignupForm_input', 'id': 'email', 'name': 'user[email]', 'placeholder': 'qiitan@qiita.com', 'required': 'required', 'type': 'email'}}, {'class': 'mb-1 nl-SignupForm_group', 'label': {'class': 'nl-SignupForm_label', 'for': 'password'}, 'input': {'class': 'nl-SignupForm_input', 'id': 'password', 'name': 'user[password]', 'placeholder': '********', 'required': 'required', 'type': 'password'}}, {'class': 'mb-2 nl-SignupForm_group', 'style': 'margin-left: 0;', 'input': {'class': 'nl-SignupForm_checkbox', 'id': 'terms', 'required': 'required', 'type': 'checkbox'}, 'label': {'class': 'nl-SignupForm_label', 'for': 'terms', 'a': {}}}, {'class': 'mb-2 nl-SignupForm_group', 'style': 'margin-left: 0;', 'input': {'class': 'nl-SignupForm_checkbox', 'id': 'privacy', 'required': 'required', 'type': 'checkbox'}, 'label': {'class': 'nl-SignupForm_label', 'for': 'privacy', 'a': {}}}, {'class': 'nl-SignupForm_recaptcha', 'script': {'src': 'https://www.google.com/recaptcha/api.js'}, 'div': {'data-sitekey': '6LfNkiQTAAAAAM3UGnSquBy2akTITGNMO_QDxMw6', 'class': 'g-recaptcha '}, 'noscript': {'div': {'div': [{'style': 'width: 302px; height: 422px; position: relative;', 'div': {'style': 'width: 302px; height: 422px; position: absolute;', 'iframe': {' src': 'https://www.google.com/recaptcha/api/fallback?k=6LfNkiQTAAAAAM3UGnSquBy2akTITGNMO_QDxMw6', ' frameborder': '0', 'scrolling': 'no', ' style': 'width: 302px; height:422px; border-style: none;'}}}, {'style': 'width: 300px; height: 60px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;', 'textarea': {'id': 'g-recaptcha-response', 'name': 'g-recaptcha-response', ' class': 'g-recaptcha-response', ' style': 'width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;'}}]}}}, {'class': 'nl-SignupForm_buttonArea', 'div': {'class': 'nl-SignupForm_button', 'button': {}}}], 'span': {'class': 'mb-2 nl-SignupForm_helpText'}, 'script': {'src': 'https://www.google.com/recaptcha/api.js', 'defer': 'defer', 'async': 'async'}}}]}}, {'class': 'px-2 px-1@s pt-4 pt-1@s', 'div': {'class': 'p-home_container', 'div': [{'class': 'p-home_menu pt-1', 'div': [{'class': 'p-home_menuHead mb-1'}, {'class': 'p-home_menuDivider mb-2'}, {'class': 'p-home_menuHead mb-1'}, {'class': 'p-home_mobileMenu', 'select': {'class': 'p-home_mobileMenuDropdown pl-2 pt-1 pb-1 mb-1', 'onchange': 'location.href=value;', 'optgroup': [{'label': 'Article Feed', 'option': [{'class': 'p-home_mobileMenuItem', 'value': '/trend', 'selected': 'selected'}, {'class': 'p-home_mobileMenuItem', 'value': '/milestones'}]}, {'label': 'Question Feed', 'option': [{'class': 'p-home_mobileMenuItem', 'value': '/question-trend'}, {'class': 'p-home_mobileMenuItem', 'value': '/question-waiting-answers'}, {'class': 'p-home_mobileMenuItem', 'value': '/question-feed'}]}]}}], 'a': [{'class': 'p-home_menuItem p-1 pl-2 pl-1@s mb-1 p-home_menuItem-active', 'href': '/', 'span': {'class': 'fa fa-fw fa-line-chart mr-1of2'}}, {'class': 'p-home_menuItem p-1 pl-2 pl-1@s mb-1', 'href': '/milestones', 'span': {'class': 'fa fa-fw fa-flag-checkered mr-1of2'}}, {'class': 'p-home_menuItem p-1 pl-2 pl-1@s mb-1', 'href': '/question-trend', 'span': {'class': 'fa fa-fw fa-line-chart mr-1of2'}}, {'class': 'p-home_menuItem p-1 pl-2 pl-1@s mb-1', 'href': '/question-waiting-answers', 'span': {'class': 'fa fa-fw fa-question mr-1of2'}}, {'class': 'p-home_menuItem p-1 pl-2 pl-1@s mb-1', 'href': '/question-feed', 'span': {'class': 'fa fa-fw fa-sort-numeric-asc mr-1of2'}}]}, {'class': 'p-home_main mb-3 mr-0@s', 'div': {'data-hyperapp-app': 'Trend', 'data-hyperapp-props': '{"trend":{"edges":[{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T07:53:22Z","likesCount":202,"title":"オブジェクト指向は単なる【整理術】だよ","uuid":"2aa9859d4da41991bbb7","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163629/profile-images/1567829792","urlName":"br_branch"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T03:08:08Z","likesCount":63,"title":"間違えて違うブランチで作業を始めてしまったときの対処法【Git】","uuid":"dc21de47c617b0d0eebf","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675596/profile-images/1598685340","urlName":"paleo_engineer"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T13:59:19Z","likesCount":71,"title":"CPUのキーワード(ブランド、命令セット、マイクロアーキテクチャ、拡張命令セット)の説明","uuid":"656bac4c3871031a4448","author":{"profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/79744/profile-images/1501125720","urlName":"kaityo256"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T17:26:06Z","likesCount":54,"title":"Pythonでコンソールに綺麗なグラフを描画できる「AsciichartPy」使ってみた。","uuid":"aff5c301aacb8513a11d","author":{"profileImageUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/535270/3e59522dfca791fd0ce7f98d863a9a796ca95a16/large.png?1574159780","urlName":"kkent030315"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T10:57:35Z","likesCount":37,"title":"スプラトゥーン2のプレイ動画から、やられたシーンだけをディープラーニングで自動抽出する","uuid":"acbc0906046bb7b2b1db","author":{"profileImageUrl":"https://avatars3.githubusercontent.com/u/16898831?v=4","urlName":"tfandkusu"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T10:57:47Z","likesCount":31,"title":"データ構造 Fenwick tree (binary indexed tree, BIT) にどっぷりと入門し、その美しき構造に心を洗われたい方のための紹介記事です!","uuid":"7d50ff180a4e5c294cb7","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352395/profile-images/1557632578","urlName":"ngtkana"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":false,"node":{"createdAt":"2020-09-11T09:35:58Z","likesCount":40,"title":"様々な日本語文章を、目線移動無く早く読めるオープンソースツール(Riot Shield)を公開しました","uuid":"c7e48f9f9b3e937c5dad","author":{"profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/85111/profile-images/1499606550","urlName":"am_nimitz3"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T08:11:54Z","likesCount":20,"title":"自分のQiita記事をインクリメンタル検索するAlfred Workflowを作ってみた","uuid":"6909b534a59d3550093e","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/profile-images/1596162182","urlName":"ryo2132"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":false,"node":{"createdAt":"2020-09-11T06:43:05Z","likesCount":30,"title":"SQLアンチパターン\u3000ファントムファイル","uuid":"cc811929485471897c89","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257405/profile-images/1585098105","urlName":"fktnkit"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T08:22:19Z","likesCount":37,"title":"TypeScriptリポジトリの歩き方","uuid":"a63882c4c42c6ccf8c66","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54872/profile-images/1573246604","urlName":"sisisin"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T09:04:26Z","likesCount":19,"title":"Ractor超入門","uuid":"f9d1917fda770bcdbe2a","author":{"profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/191521/profile-images/1531325180","urlName":"S_H_"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T13:32:05Z","likesCount":13,"title":"SwiftUIとCombineの練習がてらmacOS向けのピアノアプリ作ってみた","uuid":"0230a14ec6c3a8174568","author":{"profileImageUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/67153/e88c7b2790238820700627c60482ade9228609f7/x_large.png?1575435001","urlName":"Kyome"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T13:07:56Z","likesCount":13,"title":"Raspberry PiにVS Code Insider版をインストールする方法","uuid":"fb50b6ac5c175b9b1045","author":{"profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/81919/profile-images/1549284868","urlName":"karaage0703"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-10T16:01:19Z","likesCount":35,"title":"【JavaScript】Promiseくんと仲良くなろう","uuid":"4af009c9b21c13d5a368","author":{"profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/252036/profile-images/1548799764","urlName":"al_tarte"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":true,"hasCodeBlock":false,"node":{"createdAt":"2020-09-11T13:14:11Z","likesCount":28,"title":"《コロナに負けず!!》29歳で営業職からジョブチェンジ。未経験で受託開発企業から内定を頂けました。","uuid":"3eafbcc52c04241788a5","author":{"profileImageUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/635167/4df257c74aac0acdbb03f0e7f63e276aa42830a0/x_large.png?1591368347","urlName":"ki-ku"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-10T22:39:44Z","likesCount":24,"title":" scikit-learnで機械学習パイプラインをインタラクティブに描画、HTML保存する方法","uuid":"55c7f567ca79b81c36ab","author":{"profileImageUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/191401/185398f529f8156fed141d7b2e1b0a78fc114172/large.png?1599774000","urlName":"sugulu_Ogawa_ISID"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T11:29:02Z","likesCount":13,"title":"production-ready なGo製2Dゲームライブラリ Ebiten の紹介 \\u0026 リンク集","uuid":"1fd6077327f99245b807","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348791/profile-images/1565355993","urlName":"eihigh"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":true,"hasCodeBlock":false,"node":{"createdAt":"2020-09-12T00:49:28Z","likesCount":18,"title":"【翻訳】wordpressのプラグインで毎月5万収益を得ている話","uuid":"ab1b2b6d5676dc55144b","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705937/profile-images/1599573315","urlName":"kirishima_app"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T14:56:56Z","likesCount":14,"title":"たった3行でVSCode(codeserver)をGoogle Colabで使う方法","uuid":"ebcc8d51476f6f7c5b72","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24723/profile-images/1574818910","urlName":"kojikanao"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T23:36:29Z","likesCount":13,"title":"Docker × Laravel 8 Jetstream でログイン、ユーザー登録、2要素認証を実装する","uuid":"7824d1293fef4698c212","author":{"profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/52879/profile-images/1540380605","urlName":"ucan-lab"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T01:56:00Z","likesCount":12,"title":"PythonでDICOM画像を扱う","uuid":"f145675055796c69e228","author":{"profileImageUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/680528/4c5642d036920f85daf6640335027d9a0387cecc/x_large.png?1595678226","urlName":"asparagasu"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T08:15:21Z","likesCount":14,"title":"FlutterでTextFieldのフォーカスを正しく外す方法","uuid":"d7fde1d998a30292add7","author":{"profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/99169/profile-images/1473707726","urlName":"tsukushibito"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T04:42:29Z","likesCount":10,"title":"量子GUIシミュレータ (QPlat)","uuid":"95450143c8ed9a580f31","author":{"profileImageUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/517405/23c55e72f59a70704447c7701ed83bb7994a1906/large.png?1571976772","urlName":"KeiichiroHiga"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":false,"node":{"createdAt":"2020-09-11T14:02:08Z","likesCount":14,"title":"【技術書典9】ゲーム関連技術頒布物(新刊)まとめ (2020/9/11 22:00 時点)","uuid":"5f535164ee46f7e0c52d","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258608/profile-images/1566747392","urlName":"takehara-ryo"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T13:08:53Z","likesCount":9,"title":"Unityで録音して、録音したサウンドを再生する最小実装","uuid":"b3430e52574831afec92","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/profile-images/1595687179","urlName":"ohbashunsuke"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":true,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T13:59:38Z","likesCount":25,"title":"Kubernetesの負荷試験で絶対に担保したい13のチェックリスト","uuid":"56a5442c1fc4d714c941","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45875/profile-images/1595854294","urlName":"taisho6339"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":true,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T08:48:31Z","likesCount":6,"title":"Prism の Prism Full App (.NET Core) テンプレートを見てみよう","uuid":"cfbf5c9eaea6c5aed4e1","author":{"profileImageUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/70288/edf16d4d4fdd1abcb3e61b06730b0609cdc77adb/x_large.png?1585128349","urlName":"okazuki"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":false,"node":{"createdAt":"2020-09-11T07:26:47Z","likesCount":16,"title":"VSCode Live Share+Flutterでのリモートモブプログラミングの現状","uuid":"08db86881da446d70646","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26446/profile-images/1581214874","urlName":"hummer"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T09:18:03Z","likesCount":8,"title":"簡易LISP処理系の実装例(JavaScript版)","uuid":"2124d6ceba7f3a628a8c","author":{"profileImageUrl":"https://pbs.twimg.com/profile_images/1247901639429640194/7IvBd3i7_bigger.jpg","urlName":"ytaki0801"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":true,"hasCodeBlock":false,"node":{"createdAt":"2020-09-13T01:57:50Z","likesCount":14,"title":"音声分析におけるフーリエ変換とスペクトログラムを理解する","uuid":"6af2cc4c4be0c57bef06","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651198/profile-images/1591512068","urlName":"shirowanisan"}}}]},"scope":"daily"}'}}, {'class': 'p-home_aside', 'div': [{'class': 'p-home_ad', 'div': {'data-hyperapp-app': 'GPTSlot', 'data-hyperapp-props': '{"id":"home-side-ad","adUnitPath":"/383564218/p_qiita_300x250_anonymous_feed_sidebar-top","size":[300,250]}'}}, {'data-hyperapp-app': 'Announcement', 'data-hyperapp-props': '{"announcement":{"id":"QW5ub3VuY2VtZW50LTI0","title":"質問フィードの大型アップデート行いました","body":"\\u003cp\\u003e質問フィードの大型アップデートを行いました?\u200d♀️\\u003cbr\\u003e\\n記事とフィードを分けた上でフィードの種類を追加しており、それに伴い「回答できるタグ」を有効化できるようになりました。\\u003c/p\\u003e\\n","detailUrl":"https://blog.qiita.com/question-feed-update-202009/?utm_source=qiita\\u0026utm_medium=announce","isStaffOnly":false,"isReadByViewer":false}}'}, {'data-hyperapp-app': 'UserRanking', 'data-hyperapp-props': '{"userRanking":{"edges":[{"score":654,"node":{"name":"Masa U","profileImageUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/173746/083715c7c11148d94e3512aa1ab76f2540222214/large.png?1581744613","urlName":"_masa_u"}},{"score":455,"node":{"name":"","profileImageUrl":"https://pbs.twimg.com/profile_images/1274400166120812544/DAWcpHec_bigger.jpg","urlName":"yutorisan"}},{"score":427,"node":{"name":"Yuki Aki","profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/152231/profile-images/1488816012","urlName":"freddi_"}},{"score":360,"node":{"name":"","profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/38580/profile-images/1473687818","urlName":"Hassan"}},{"score":359,"node":{"name":"Ryo Kawamata","profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/profile-images/1596162182","urlName":"ryo2132"}},{"score":346,"node":{"name":"Yuichi Sugita","profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209705/profile-images/1588766257","urlName":"jun40vn"}},{"score":342,"node":{"name":"Yuki","profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335670/profile-images/1598003375","urlName":"yukiji"}},{"score":340,"node":{"name":"すぐる(小川雄太郎@電通国際情報サービスISID)","profileImageUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/191401/185398f529f8156fed141d7b2e1b0a78fc114172/large.png?1599774000","urlName":"sugulu_Ogawa_ISID"}},{"score":332,"node":{"name":"","profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/11714/profile-images/1473682126","urlName":"__pandaman64__"}},{"score":287,"node":{"name":"Yutaro Shimoda","profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512695/profile-images/1586063736","urlName":"shimotaroo"}}]},"scope":"WEEKLY"}'}, {'data-hyperapp-app': 'TagRanking', 'data-hyperapp-props': '{"tagRanking":{"edges":[{"score":237,"node":{"mediumIconUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-tag-image/56ffccc25b126744837a2b9a64d6c8d5ef98293b/medium.jpg?1591469101","name":"Python","urlName":"python"}},{"score":210,"node":{"mediumIconUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-tag-image/989fbf0489716777eb66116a6cd45429af2facc7/medium.jpg?1595403395","name":"JavaScript","urlName":"javascript"}},{"score":144,"node":{"mediumIconUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-tag-image/ac6cff4d72fe5db793d9cb997b777f982a12008c/medium.jpg?1590068480","name":"Ruby","urlName":"ruby"}},{"score":129,"node":{"mediumIconUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-tag-image/353fa0bbbfd79c4e8837b9c0b13232d80c32c6e8/medium.jpg?1554029821","name":"Rails","urlName":"rails"}},{"score":97,"node":{"mediumIconUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-tag-image/f9384932787d996b6e1ed26d7d0b2bc2a9e36441/medium.jpg?1443704516","name":"初心者","urlName":"%e5%88%9d%e5%bf%83%e8%80%85"}},{"score":95,"node":{"mediumIconUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-tag-image/00f6ce83b6ee54dc44dd953fccd436d467de2766/medium.jpg?1558892430","name":"AWS","urlName":"aws"}},{"score":91,"node":{"mediumIconUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-tag-image/b871970ded17b8af635a100cd45b4d701419a122/medium.jpg?1574663257","name":"PHP","urlName":"php"}},{"score":80,"node":{"mediumIconUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-tag-image/7afc7bca8bd52cac0c49e868f67b979b9a4dd501/medium.jpg?1595403313","name":"Docker","urlName":"docker"}},{"score":75,"node":{"mediumIconUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-tag-image/1bfaf60121121d7dec866c83d4c4453347ec93e2/medium.jpg?1436171387","name":"Java","urlName":"java"}},{"score":75,"node":{"mediumIconUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-tag-image/30af4a22607c5936f3ac647331e94978f6feb20a/medium.jpg?1462785908","name":"Python3","urlName":"python3"}}]},"scope":"WEEKLY"}'}, {'data-hyperapp-app': 'OrganizationRanking', 'data-hyperapp-props': '{"organizationRanking":{"edges":[{"score":35,"node":{"name":"エンジニアと人生コミュニティ","logoUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-organization-image/9edf7645984bfd3c7436a1fd049ccbfa748054bc/original.jpg?1592116881","urlName":"engineerlife"}},{"score":13,"node":{"name":"IoTLT","logoUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-organization-image/67955531570736d618f59dd5e615b01285b22217/original.jpg?1485315227","urlName":"iotlt"}},{"score":12,"node":{"name":"プロトアウトスタジオ","logoUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-organization-image/7c7925faf150fc608840d63309ee2c9e933c9827/original.jpg?1561535995","urlName":"protoout-studio"}},{"score":11,"node":{"name":"株式会社エイチームブライズ","logoUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-organization-image/b22c46bdbedb99dd5b28a9afa4246b462822150a/original.jpg?1509347496","urlName":"brides-a-tm"}},{"score":9,"node":{"name":"株式会社ZOZOテクノロジーズ","logoUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-organization-image/3125228ca91ca488ba9ed21c69f214cf23c3bb40/original.jpg?1538318109","urlName":"zozotech"}},{"score":7,"node":{"name":"BOOM TECH CAFE","logoUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-organization-image/0d3a5d6dc16a1ce2f12ece86141e50dfd8119186/original.jpg?1589648747","urlName":"boomtechcafe"}},{"score":7,"node":{"name":"転職クエスト","logoUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-organization-image/94217737be2a958c8d8af3f8cf88b1d02ebf4c6e/original.jpg?1599367938","urlName":"tensyoku_quest"}},{"score":7,"node":{"name":"運営者ギルド","logoUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-organization-image/3fd54146cf16402656ade1852e0d1bcbe8b30ad8/original.jpg?1570259460","urlName":"admin-guild"}},{"score":7,"node":{"name":"株式会社インプル","logoUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-organization-image/8d52f9a75fac189f7d7a723f1f7a790c6d013abd/original.jpg?1595832620","urlName":"impl"}},{"score":6,"node":{"name":"N 高等学校","logoUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-organization-image/3c15890d4bd9d46e3c77ab420bb4fd120aeba689/original.jpg?1525836432","urlName":"nnn-school"}}]},"scope":"WEEKLY"}'}, {'data-hyperapp-app': 'QiitaZineFeed', 'data-hyperapp-props': '{}'}, {'data-hyperapp-app': 'CommunitySponserList', 'data-hyperapp-props': '{"sponsers":[{"alt":"パソナテック","src":"//cdn.qiita.com/assets/public/community-sponsers/005_pasona-0222c6e2b6546073800c90a8f0062349.png","link":"https://www.pasonatech.co.jp/"},{"alt":"Avanade","src":"//cdn.qiita.com/assets/public/community-sponsers/008_avanade-fa6c44688ed11dc2f6f15b1d7ce9e3ce.png","link":"https://www.avanade.com/ja-jp/careers"},{"alt":"ガリレオスコープ","src":"//cdn.qiita.com/assets/public/community-sponsers/009_shimane-itworks-51407c33af2be339823167bf379479df.png","link":"https://shimane-itworks.jp/event/3314?utm_source=qiita\\u0026utm_medium=display\\u0026utm_content=logo_banner"},{"alt":"CircleCI","src":"//cdn.qiita.com/assets/public/community-sponsers/010_circleci-f1b29b31d4379d82989e2e4ea567575f.png","link":"https://circleci.jp/signup/?utm_source=qiita\\u0026utm_medium=display\\u0026utm_content=sponsorlogo_Sep2020"},{"alt":"wolfSSL","src":"//cdn.qiita.com/assets/public/community-sponsers/011_wolfSSL-9559e8f3486340efb962d1e042ac7f29.jpg","link":"https://www.wolfssl.jp/wearehiring/?r=qi"}]}'}], 'a': {'target': '_blank', 'rel': 'noopener', 'href': 'https://jobs.qiita.com/campaigns/celebration/2020aug?utm_source=qiita&utm_medium=sidebar_top&utm_campaign=jobseeker_202008', 'img': {'style': 'margin-bottom: 16px;', 'src': 'https://cdn.qiita.com/assets/public/qiita_jobs_celebration_2020aug/banner-300x200-b152f48111b22f752dcb998e44e9ae50.png'}}}]}}]}], 'footer': {'id': 'globalFooter', 'class': 'st-Footer', 'div': [{'class': 'st-Footer_container', 'div': [{'class': 'st-Footer_start', 'div': [{'class': 'st-Footer_logo', 'svg': {'viewbox': '0 0 426.57 130', 'xmlns': 'http://www.w3.org/2000/svg', 'circle': [{'cx': '167.08', 'cy': '21.4', 'r': '12.28'}, {'cx': '216.33', 'cy': '21.4', 'r': '12.28'}], 'path': [{'d': 'M250.81 29.66h23.48v18.9h-23.48z'}, {'d': 'M300.76 105.26a22.23 22.23 0 01-6.26-.86 12.68 12.68 0 01-5.17-3 14.41 14.41 0 01-3.56-5.76 28 28 0 01-1.3-9.22V48.56h29.61v-18.9h-29.52V3.29h-20.17v83.34q0 11.16 2.83 18.27a27.71 27.71 0 007.7 11.2 26.86 26.86 0 0011.43 5.62 47.56 47.56 0 0012.34 1.53h15.16v-18zM0 61.7a58.6 58.6 0 015-24.21A62.26 62.26 0 0118.73 17.9 63.72 63.72 0 0139 4.78 64.93 64.93 0 0164 0a65 65 0 0124.85 4.78 64.24 64.24 0 0120.38 13.12A62 62 0 01123 37.49a58.6 58.6 0 015 24.21 58.34 58.34 0 01-4 21.46 62.8 62.8 0 01-10.91 18.16l11.1 11.1a10.3 10.3 0 010 14.52 10.29 10.29 0 01-14.64 0l-12.22-12.41a65 65 0 01-15.78 6.65 66.32 66.32 0 01-17.55 2.3 64.63 64.63 0 01-45.23-18A62.82 62.82 0 015 85.81 58.3 58.3 0 010 61.7zm21.64.08a43.13 43.13 0 0012.42 30.63 42.23 42.23 0 0013.43 9.09A41.31 41.31 0 0064 104.8a42 42 0 0030-12.39 42.37 42.37 0 009-13.64 43.43 43.43 0 003.3-17 43.77 43.77 0 00-3.3-17A41.7 41.7 0 0080.55 22 41.78 41.78 0 0064 18.68 41.31 41.31 0 0047.49 22a42.37 42.37 0 00-13.43 9.08 43.37 43.37 0 00-12.42 30.7zM331.89 78a47.59 47.59 0 013.3-17.73 43.22 43.22 0 019.34-14.47A44.25 44.25 0 01359 36a47.82 47.82 0 0118.81-3.58 42.72 42.72 0 019.26 1 46.5 46.5 0 018.22 2.58 40 40 0 017 3.84 44.39 44.39 0 015.71 4.63l1.22-9.47h17.35v85.83h-17.35l-1.17-9.42a42.54 42.54 0 01-5.84 4.67 43.11 43.11 0 01-7 3.79 44.86 44.86 0 01-8.17 2.59 43 43 0 01-9.22 1A47.94 47.94 0 01359 119.9a43.3 43.3 0 01-14.47-9.71 44.17 44.17 0 01-9.34-14.47 47 47 0 01-3.3-17.72zm20.27-.08a29.16 29.16 0 002.17 11.34 27 27 0 005.92 8.88 26.69 26.69 0 008.76 5.76 29.19 29.19 0 0021.44 0 26.11 26.11 0 008.72-5.76 27.57 27.57 0 005.88-8.84 29 29 0 002.16-11.38 28.62 28.62 0 00-2.16-11.22 26.57 26.57 0 00-5.93-8.8 27.68 27.68 0 00-19.51-7.9 28.29 28.29 0 00-10.77 2.05 26.19 26.19 0 00-8.71 5.75 27.08 27.08 0 00-5.84 8.8 28.94 28.94 0 00-2.13 11.31zm-194.97-30.5h19.78v73.54h-19.78zm49.25 0h19.78v73.54h-19.78z'}]}}, {'class': 'st-Footer_catchcopy'}, {'class': 'st-Footer_socials', 'a': [{'class': 'fa fa-twitter', 'href': 'https://twitter.com/qiita'}, {'class': 'fa fa-facebook-square', 'href': 'https://www.facebook.com/qiita/'}]}]}, {'class': 'st-Footer_end', 'div': [{'class': 'st-Footer_qiita', 'div': [{'class': 'st-Footer_label'}, {'class': 'st-Footer_list', 'div': [{'class': 'st-Footer_column', 'a': [{'href': '/about'}, {'href': '/terms'}, {'href': '/privacy'}, {'target': '_blank', 'href': 'http://help.qiita.com/ja/articles/qiita-community-guideline'}, {'href': '/release-notes'}]}, {'class': 'st-Footer_column', 'a': [{'href': '/api/v2/docs'}, {'href': '/feedback/new'}, {'href': 'https://help.qiita.com'}, {'target': '_blank', 'href': 'https://qiita.com/ads?utm_source=qiita&utm_medium=referral&utm_content=footer'}]}]}]}, {'class': 'st-Footer_increments', 'div': [{'class': 'st-Footer_label'}, {'class': 'st-Footer_list', 'div': [{'class': 'st-Footer_column', 'a': [{'href': 'https://increments.co.jp/company/'}, {'href': 'https://increments.co.jp/jobs/'}, {'href': 'https://blog.qiita.com'}]}, {'class': 'st-Footer_column', 'a': [{'href': 'https://teams.qiita.com/'}, {'href': 'https://jobs.qiita.com?utm_source=qiita&utm_medium=referral&utm_content=footer'}, {'href': 'https://zine.qiita.com?utm_source=qiita&utm_medium=referral&utm_content=footer'}]}]}]}]}]}, {'class': 'st-Footer_copyright'}]}}, {'class': 'p-messages', 'div': {'data-hyperapp-app': 'Message', 'data-hyperapp-props': '{"messages":[]}'}}, {'id': 'dataContainer', 'style': 'display: none;', 'data-config': '{"actionPath":"public/home#index","settings":{"analyticsTrackingId":"UA-24675221-12","assetsMap":{},"csrfToken":"duV2y08R2thnFOLaqveARlH54dn/7sSG/e5hux4H7Mj0L/8LR99T7wSexCaPoLi79NO0aBqxUz76mZKqF0XvJA==","locale":"en"},"currentUser":null}'}]}}}出力を見るとトレンドの情報は
data-hyperapp-app="Trend"
の属性を持ったdiv
タグのdata-hyperapp-props
属性に入っていることが判るので、trends = j.jq['data-hyperapp-app="Trend"'].data_hyperapp_props trendsで取得できます。
Pythonの文法上ハイフンや空白はアンダーバーに置き換えてあります。
出力
out'{"trend":{"edges":[{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T07:53:22Z","likesCount":202,"title":"オブジェクト指向は単なる【整理術】だよ","uuid":"2aa9859d4da41991bbb7","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163629/profile-images/1567829792","urlName":"br_branch"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T03:08:08Z","likesCount":63,"title":"間違えて違うブランチで作業を始めてしまったときの対処法【Git】","uuid":"dc21de47c617b0d0eebf","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675596/profile-images/1598685340","urlName":"paleo_engineer"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T13:59:19Z","likesCount":71,"title":"CPUのキーワード(ブランド、命令セット、マイクロアーキテクチャ、拡張命令セット)の説明","uuid":"656bac4c3871031a4448","author":{"profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/79744/profile-images/1501125720","urlName":"kaityo256"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T17:26:06Z","likesCount":54,"title":"Pythonでコンソールに綺麗なグラフを描画できる「AsciichartPy」使ってみた。","uuid":"aff5c301aacb8513a11d","author":{"profileImageUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/535270/3e59522dfca791fd0ce7f98d863a9a796ca95a16/large.png?1574159780","urlName":"kkent030315"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T10:57:35Z","likesCount":37,"title":"スプラトゥーン2のプレイ動画から、やられたシーンだけをディープラーニングで自動抽出する","uuid":"acbc0906046bb7b2b1db","author":{"profileImageUrl":"https://avatars3.githubusercontent.com/u/16898831?v=4","urlName":"tfandkusu"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T10:57:47Z","likesCount":31,"title":"データ構造 Fenwick tree (binary indexed tree, BIT) にどっぷりと入門し、その美しき構造に心を洗われたい方のための紹介記事です!","uuid":"7d50ff180a4e5c294cb7","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352395/profile-images/1557632578","urlName":"ngtkana"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":false,"node":{"createdAt":"2020-09-11T09:35:58Z","likesCount":40,"title":"様々な日本語文章を、目線移動無く早く読めるオープンソースツール(Riot Shield)を公開しました","uuid":"c7e48f9f9b3e937c5dad","author":{"profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/85111/profile-images/1499606550","urlName":"am_nimitz3"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T08:11:54Z","likesCount":20,"title":"自分のQiita記事をインクリメンタル検索するAlfred Workflowを作ってみた","uuid":"6909b534a59d3550093e","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/profile-images/1596162182","urlName":"ryo2132"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":false,"node":{"createdAt":"2020-09-11T06:43:05Z","likesCount":30,"title":"SQLアンチパターン\u3000ファントムファイル","uuid":"cc811929485471897c89","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257405/profile-images/1585098105","urlName":"fktnkit"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T08:22:19Z","likesCount":37,"title":"TypeScriptリポジトリの歩き方","uuid":"a63882c4c42c6ccf8c66","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54872/profile-images/1573246604","urlName":"sisisin"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T09:04:26Z","likesCount":19,"title":"Ractor超入門","uuid":"f9d1917fda770bcdbe2a","author":{"profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/191521/profile-images/1531325180","urlName":"S_H_"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T13:32:05Z","likesCount":13,"title":"SwiftUIとCombineの練習がてらmacOS向けのピアノアプリ作ってみた","uuid":"0230a14ec6c3a8174568","author":{"profileImageUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/67153/e88c7b2790238820700627c60482ade9228609f7/x_large.png?1575435001","urlName":"Kyome"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T13:07:56Z","likesCount":13,"title":"Raspberry PiにVS Code Insider版をインストールする方法","uuid":"fb50b6ac5c175b9b1045","author":{"profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/81919/profile-images/1549284868","urlName":"karaage0703"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-10T16:01:19Z","likesCount":35,"title":"【JavaScript】Promiseくんと仲良くなろう","uuid":"4af009c9b21c13d5a368","author":{"profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/252036/profile-images/1548799764","urlName":"al_tarte"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":true,"hasCodeBlock":false,"node":{"createdAt":"2020-09-11T13:14:11Z","likesCount":28,"title":"《コロナに負けず!!》29歳で営業職からジョブチェンジ。未経験で受託開発企業から内定を頂けました。","uuid":"3eafbcc52c04241788a5","author":{"profileImageUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/635167/4df257c74aac0acdbb03f0e7f63e276aa42830a0/x_large.png?1591368347","urlName":"ki-ku"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-10T22:39:44Z","likesCount":24,"title":" scikit-learnで機械学習パイプラインをインタラクティブに描画、HTML保存する方法","uuid":"55c7f567ca79b81c36ab","author":{"profileImageUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/191401/185398f529f8156fed141d7b2e1b0a78fc114172/large.png?1599774000","urlName":"sugulu_Ogawa_ISID"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T11:29:02Z","likesCount":13,"title":"production-ready なGo製2Dゲームライブラリ Ebiten の紹介 \\u0026 リンク集","uuid":"1fd6077327f99245b807","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348791/profile-images/1565355993","urlName":"eihigh"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":true,"hasCodeBlock":false,"node":{"createdAt":"2020-09-12T00:49:28Z","likesCount":18,"title":"【翻訳】wordpressのプラグインで毎月5万収益を得ている話","uuid":"ab1b2b6d5676dc55144b","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705937/profile-images/1599573315","urlName":"kirishima_app"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T14:56:56Z","likesCount":14,"title":"たった3行でVSCode(codeserver)をGoogle Colabで使う方法","uuid":"ebcc8d51476f6f7c5b72","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24723/profile-images/1574818910","urlName":"kojikanao"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T23:36:29Z","likesCount":13,"title":"Docker × Laravel 8 Jetstream でログイン、ユーザー登録、2要素認証を実装する","uuid":"7824d1293fef4698c212","author":{"profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/52879/profile-images/1540380605","urlName":"ucan-lab"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T01:56:00Z","likesCount":12,"title":"PythonでDICOM画像を扱う","uuid":"f145675055796c69e228","author":{"profileImageUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/680528/4c5642d036920f85daf6640335027d9a0387cecc/x_large.png?1595678226","urlName":"asparagasu"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T08:15:21Z","likesCount":14,"title":"FlutterでTextFieldのフォーカスを正しく外す方法","uuid":"d7fde1d998a30292add7","author":{"profileImageUrl":"https://qiita-image-store.s3.amazonaws.com/0/99169/profile-images/1473707726","urlName":"tsukushibito"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T04:42:29Z","likesCount":10,"title":"量子GUIシミュレータ (QPlat)","uuid":"95450143c8ed9a580f31","author":{"profileImageUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/517405/23c55e72f59a70704447c7701ed83bb7994a1906/large.png?1571976772","urlName":"KeiichiroHiga"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":false,"node":{"createdAt":"2020-09-11T14:02:08Z","likesCount":14,"title":"【技術書典9】ゲーム関連技術頒布物(新刊)まとめ (2020/9/11 22:00 時点)","uuid":"5f535164ee46f7e0c52d","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258608/profile-images/1566747392","urlName":"takehara-ryo"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T13:08:53Z","likesCount":9,"title":"Unityで録音して、録音したサウンドを再生する最小実装","uuid":"b3430e52574831afec92","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/profile-images/1595687179","urlName":"ohbashunsuke"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":true,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T13:59:38Z","likesCount":25,"title":"Kubernetesの負荷試験で絶対に担保したい13のチェックリスト","uuid":"56a5442c1fc4d714c941","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45875/profile-images/1595854294","urlName":"taisho6339"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":true,"hasCodeBlock":true,"node":{"createdAt":"2020-09-12T08:48:31Z","likesCount":6,"title":"Prism の Prism Full App (.NET Core) テンプレートを見てみよう","uuid":"cfbf5c9eaea6c5aed4e1","author":{"profileImageUrl":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/70288/edf16d4d4fdd1abcb3e61b06730b0609cdc77adb/x_large.png?1585128349","urlName":"okazuki"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":false,"node":{"createdAt":"2020-09-11T07:26:47Z","likesCount":16,"title":"VSCode Live Share+Flutterでのリモートモブプログラミングの現状","uuid":"08db86881da446d70646","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26446/profile-images/1581214874","urlName":"hummer"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":false,"hasCodeBlock":true,"node":{"createdAt":"2020-09-11T09:18:03Z","likesCount":8,"title":"簡易LISP処理系の実装例(JavaScript版)","uuid":"2124d6ceba7f3a628a8c","author":{"profileImageUrl":"https://pbs.twimg.com/profile_images/1247901639429640194/7IvBd3i7_bigger.jpg","urlName":"ytaki0801"}}},{"followingLikers":[],"isLikedByViewer":false,"isNewArrival":true,"hasCodeBlock":false,"node":{"createdAt":"2020-09-13T01:57:50Z","likesCount":14,"title":"音声分析におけるフーリエ変換とスペクトログラムを理解する","uuid":"6af2cc4c4be0c57bef06","author":{"profileImageUrl":"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651198/profile-images/1591512068","urlName":"shirowanisan"}}}]},"scope":"daily"}'この状態だと少し扱いづらいので、
" → "
と置き換えてJSONとして読み込んでしまえば、import json json.loads(trends.replace(""",'"'))
出力
out{'trend': {'edges': [{'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-11T07:53:22Z', 'likesCount': 202, 'title': 'オブジェクト指向は単なる【整理術】だよ', 'uuid': '2aa9859d4da41991bbb7', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163629/profile-images/1567829792', 'urlName': 'br_branch'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-12T03:08:08Z', 'likesCount': 63, 'title': '間違えて違うブランチで作業を始めてしまったときの対処法【Git】', 'uuid': 'dc21de47c617b0d0eebf', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675596/profile-images/1598685340', 'urlName': 'paleo_engineer'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-11T13:59:19Z', 'likesCount': 71, 'title': 'CPUのキーワード(ブランド、命令セット、マイクロアーキテクチャ、拡張命令セット)の説明', 'uuid': '656bac4c3871031a4448', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.amazonaws.com/0/79744/profile-images/1501125720', 'urlName': 'kaityo256'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-11T17:26:06Z', 'likesCount': 54, 'title': 'Pythonでコンソールに綺麗なグラフを描画できる「AsciichartPy」使ってみた。', 'uuid': 'aff5c301aacb8513a11d', 'author': {'profileImageUrl': 'https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/535270/3e59522dfca791fd0ce7f98d863a9a796ca95a16/large.png?1574159780', 'urlName': 'kkent030315'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-12T10:57:35Z', 'likesCount': 37, 'title': 'スプラトゥーン2のプレイ動画から、やられたシーンだけをディープラーニングで自動抽出する', 'uuid': 'acbc0906046bb7b2b1db', 'author': {'profileImageUrl': 'https://avatars3.githubusercontent.com/u/16898831?v=4', 'urlName': 'tfandkusu'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-12T10:57:47Z', 'likesCount': 31, 'title': 'データ構造 Fenwick tree (binary indexed tree, BIT) にどっぷりと入門し、その美しき構造に心を洗われたい方のための紹介記事です!', 'uuid': '7d50ff180a4e5c294cb7', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352395/profile-images/1557632578', 'urlName': 'ngtkana'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': False, 'node': {'createdAt': '2020-09-11T09:35:58Z', 'likesCount': 40, 'title': '様々な日本語文章を、目線移動無く早く読めるオープンソースツール(Riot Shield)を公開しました', 'uuid': 'c7e48f9f9b3e937c5dad', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.amazonaws.com/0/85111/profile-images/1499606550', 'urlName': 'am_nimitz3'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-12T08:11:54Z', 'likesCount': 20, 'title': '自分のQiita記事をインクリメンタル検索するAlfred Workflowを作ってみた', 'uuid': '6909b534a59d3550093e', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/profile-images/1596162182', 'urlName': 'ryo2132'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': False, 'node': {'createdAt': '2020-09-11T06:43:05Z', 'likesCount': 30, 'title': 'SQLアンチパターン\u3000ファントムファイル', 'uuid': 'cc811929485471897c89', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257405/profile-images/1585098105', 'urlName': 'fktnkit'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-11T08:22:19Z', 'likesCount': 37, 'title': 'TypeScriptリポジトリの歩き方', 'uuid': 'a63882c4c42c6ccf8c66', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54872/profile-images/1573246604', 'urlName': 'sisisin'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-12T09:04:26Z', 'likesCount': 19, 'title': 'Ractor超入門', 'uuid': 'f9d1917fda770bcdbe2a', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.amazonaws.com/0/191521/profile-images/1531325180', 'urlName': 'S_H_'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-12T13:32:05Z', 'likesCount': 13, 'title': 'SwiftUIとCombineの練習がてらmacOS向けのピアノアプリ作ってみた', 'uuid': '0230a14ec6c3a8174568', 'author': {'profileImageUrl': 'https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/67153/e88c7b2790238820700627c60482ade9228609f7/x_large.png?1575435001', 'urlName': 'Kyome'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-12T13:07:56Z', 'likesCount': 13, 'title': 'Raspberry PiにVS Code Insider版をインストールする方法', 'uuid': 'fb50b6ac5c175b9b1045', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.amazonaws.com/0/81919/profile-images/1549284868', 'urlName': 'karaage0703'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-10T16:01:19Z', 'likesCount': 35, 'title': '【JavaScript】Promiseくんと仲良くなろう', 'uuid': '4af009c9b21c13d5a368', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.amazonaws.com/0/252036/profile-images/1548799764', 'urlName': 'al_tarte'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': True, 'hasCodeBlock': False, 'node': {'createdAt': '2020-09-11T13:14:11Z', 'likesCount': 28, 'title': '《コロナに負けず!!》29歳で営業職からジョブチェンジ。未経験で受託開発企業から内定を頂けました。', 'uuid': '3eafbcc52c04241788a5', 'author': {'profileImageUrl': 'https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/635167/4df257c74aac0acdbb03f0e7f63e276aa42830a0/x_large.png?1591368347', 'urlName': 'ki-ku'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-10T22:39:44Z', 'likesCount': 24, 'title': ' scikit-learnで機械学習パイプラインをインタラクティブに描画、HTML保存する方法', 'uuid': '55c7f567ca79b81c36ab', 'author': {'profileImageUrl': 'https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/191401/185398f529f8156fed141d7b2e1b0a78fc114172/large.png?1599774000', 'urlName': 'sugulu_Ogawa_ISID'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-12T11:29:02Z', 'likesCount': 13, 'title': 'production-ready なGo製2Dゲームライブラリ Ebiten の紹介 & リンク集', 'uuid': '1fd6077327f99245b807', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348791/profile-images/1565355993', 'urlName': 'eihigh'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': True, 'hasCodeBlock': False, 'node': {'createdAt': '2020-09-12T00:49:28Z', 'likesCount': 18, 'title': '【翻訳】wordpressのプラグインで毎月5万収益を得ている話', 'uuid': 'ab1b2b6d5676dc55144b', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705937/profile-images/1599573315', 'urlName': 'kirishima_app'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-11T14:56:56Z', 'likesCount': 14, 'title': 'たった3行でVSCode(codeserver)をGoogle Colabで使う方法', 'uuid': 'ebcc8d51476f6f7c5b72', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24723/profile-images/1574818910', 'urlName': 'kojikanao'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-11T23:36:29Z', 'likesCount': 13, 'title': 'Docker × Laravel 8 Jetstream でログイン、ユーザー登録、2要素認証を実装する', 'uuid': '7824d1293fef4698c212', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.amazonaws.com/0/52879/profile-images/1540380605', 'urlName': 'ucan-lab'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-12T01:56:00Z', 'likesCount': 12, 'title': 'PythonでDICOM画像を扱う', 'uuid': 'f145675055796c69e228', 'author': {'profileImageUrl': 'https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/680528/4c5642d036920f85daf6640335027d9a0387cecc/x_large.png?1595678226', 'urlName': 'asparagasu'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-11T08:15:21Z', 'likesCount': 14, 'title': 'FlutterでTextFieldのフォーカスを正しく外す方法', 'uuid': 'd7fde1d998a30292add7', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.amazonaws.com/0/99169/profile-images/1473707726', 'urlName': 'tsukushibito'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-11T04:42:29Z', 'likesCount': 10, 'title': '量子GUIシミュレータ (QPlat)', 'uuid': '95450143c8ed9a580f31', 'author': {'profileImageUrl': 'https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/517405/23c55e72f59a70704447c7701ed83bb7994a1906/large.png?1571976772', 'urlName': 'KeiichiroHiga'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': False, 'node': {'createdAt': '2020-09-11T14:02:08Z', 'likesCount': 14, 'title': '【技術書典9】ゲーム関連技術頒布物(新刊)まとめ (2020/9/11 22:00 時点)', 'uuid': '5f535164ee46f7e0c52d', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258608/profile-images/1566747392', 'urlName': 'takehara-ryo'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-11T13:08:53Z', 'likesCount': 9, 'title': 'Unityで録音して、録音したサウンドを再生する最小実装', 'uuid': 'b3430e52574831afec92', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/profile-images/1595687179', 'urlName': 'ohbashunsuke'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': True, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-12T13:59:38Z', 'likesCount': 25, 'title': 'Kubernetesの負荷試験で絶対に担保したい13のチェックリスト', 'uuid': '56a5442c1fc4d714c941', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45875/profile-images/1595854294', 'urlName': 'taisho6339'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': True, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-12T08:48:31Z', 'likesCount': 6, 'title': 'Prism の Prism Full App (.NET Core) テンプレートを見てみよう', 'uuid': 'cfbf5c9eaea6c5aed4e1', 'author': {'profileImageUrl': 'https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/70288/edf16d4d4fdd1abcb3e61b06730b0609cdc77adb/x_large.png?1585128349', 'urlName': 'okazuki'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': False, 'node': {'createdAt': '2020-09-11T07:26:47Z', 'likesCount': 16, 'title': 'VSCode Live Share+Flutterでのリモートモブプログラミングの現状', 'uuid': '08db86881da446d70646', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26446/profile-images/1581214874', 'urlName': 'hummer'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': False, 'hasCodeBlock': True, 'node': {'createdAt': '2020-09-11T09:18:03Z', 'likesCount': 8, 'title': '簡易LISP処理系の実装例(JavaScript版)', 'uuid': '2124d6ceba7f3a628a8c', 'author': {'profileImageUrl': 'https://pbs.twimg.com/profile_images/1247901639429640194/7IvBd3i7_bigger.jpg', 'urlName': 'ytaki0801'}}}, {'followingLikers': [], 'isLikedByViewer': False, 'isNewArrival': True, 'hasCodeBlock': False, 'node': {'createdAt': '2020-09-13T01:57:50Z', 'likesCount': 14, 'title': '音声分析におけるフーリエ変換とスペクトログラムを理解する', 'uuid': '6af2cc4c4be0c57bef06', 'author': {'profileImageUrl': 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651198/profile-images/1591512068', 'urlName': 'shirowanisan'}}}]}, 'scope': 'daily'}無事トレンドの情報を得られました。
もう一度一連の流れをまとめて書くと、
getTrends.pyfrom html2json import * import json j = url2json("https://qiita.com/") json.loads(j.jq['data-hyperapp-app="Trend"'].data_hyperapp_props.replace(""",'"'))_人人人人_
> 2行 <
 ̄Y^Y^Y^Y^ ̄ちなみにQiitaのトップページの場合パースにかかる時間は5ms程度でした(Ryzen 5 3600)。
まとめ
使いみち次第では結構便利だと思うので使ってみてね。
(正規表現のバックスラッシュでQiitaのシンタックスハイライト崩れるの直らないかな...)
- 投稿日:2020-09-14T02:01:18+09:00
pictSPACE店舗説明文の装飾タグ
はじめに
同人専用自家通販サービスの pictSPACEさんで設置できる店舗スペースの説明文に、htmlが使用できるとのことだったので、装飾タグを作成してみました。
ご自由にコピー&ペーストしていただき、オンライン同人イベント参加の際の店舗設営の際にお役立てください。
※店舗の設置方法については pictSPACEさんのサイトをご覧ください。免責事項
※本記事に記載された内容については、正確性を保証しません。
※本記事の内容を用いたあらゆる結果について、著者はいかなる責任も負いません。記事のコードの使用は自己の判断、責任において行ってください。
※再配布はご遠慮ください。店舗装飾タグ(全部のせ)
頒布物管理>説明文の部分に以下のソースを入れると画像のようになります。
※改行を入れるとbrタグが挿入されてしまう仕様のため、このようなコードになっています。一度説明文にこのタグをこのままコピー&ペーストして、不要な部分を削っていくとよいと思います。
(後述の各パーツ対応ソースを参照して、削ってみてください。)<div style=" padding: 0.1em 0.6em; color: #fff; font-weight: bold; background: -moz-linear-gradient(left, #ff5e63, #ff9964); background: -webkit-linear-gradient(left, #ff5e63, #ff9964); background: linear-gradient(to right, #ff5e63, #ff9964); margin-bottom: 0.5em;">New!</div><span style="color: #fffafa; background-color: #ff1493; display: inline-block; padding: 0.1em 0.6em; font-weight: bold; border-radius: 0.5em; margin-right: 0.5em;">R-18</span><span style="color: #fffafa; background-color: #2196f3; display: inline-block; padding: 0.1em 0.6em; font-weight: bold; border-radius: 0.5em; margin-right: 0.5em;">全年齢</span> <p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p> <p style="margin-bottom: 2em;"><a href="ここに通販URL1" target="_blank"><span style="background-color: #ffc107; padding: 0.5em 1em; margin-right: 0.5em; font-weight: bold; border-radius: 0.5em; border: solid 3px #d82329; margin-right: 0.5em;"><font color="#d82329">某通販</font></span></a><a href="ここに通販URL2" target="_blank"><span style="background-color: #fff; padding: 0.5em 1em; margin-right: 0.5em; font-weight: bold; border: solid 3px #000; margin-right: 0.5em;"><font color="#c72c3c">Hoge</font></span></a><a href="ここに通販URL3" target="_blank"><span style="background-color: #dc4d50; padding: 0.5em 1em; margin-right: 0.5em; font-weight: bold; margin-right: 0.5em;"><font color="#fff">Hoge</font></span></a></p>各パーツ対応ソース
New!
<div style=" padding: 0.1em 0.6em; color: #fff; font-weight: bold; background: -moz-linear-gradient(left, #ff5e63, #ff9964); background: -webkit-linear-gradient(left, #ff5e63, #ff9964); background: linear-gradient(to right, #ff5e63, #ff9964); margin-bottom: 0.5em;">New!</div>年齢制限
どちらかを削除して使用してください。(全年齢の時は両方削除でもいいかも)
<span style="color: #fffafa; background-color: #ff1493; display: inline-block; padding: 0.1em 0.6em; font-weight: bold; border-radius: 0.5em; margin-right: 0.5em;">R-18</span><span style="color: #fffafa; background-color: #2196f3; display: inline-block; padding: 0.1em 0.6em; font-weight: bold; border-radius: 0.5em; margin-right: 0.5em;">全年齢</span>外部通販リンク
それっぽい色味のものを用意しました。
ご自身が使われている通販サイト様に合わせてどうぞ。
ここに通販URL1に通販ページURL
某通販の部分に表示させたい文字を入れてください。<a href="ここに通販URL1" target="_blank"><span style="background-color: #ffc107; padding: 0.5em 1em; margin-right: 0.5em; font-weight: bold; border-radius: 0.5em; border: solid 3px #d82329; margin-right: 0.5em;"><font color="#d82329">某通販</font></span></a>
ここに通販URL2に通販ページURL
Hogeの部分に表示させたい文字を入れてください。<a href="ここに通販URL2" target="_blank"><span style="background-color: #fff; padding: 0.5em 1em; margin-right: 0.5em; font-weight: bold; border: solid 3px #000; margin-right: 0.5em;"><font color="#c72c3c">Hoge</font></span></a>
ここに通販URL3に通販ページURL
Hogeの部分に表示させたい文字を入れてください。<a href="ここに通販URL3" target="_blank"><span style="background-color: #dc4d50; padding: 0.5em 1em; margin-right: 0.5em; font-weight: bold; margin-right: 0.5em;"><font color="#fff">Hoge</font></span></a>外部通販を使用しない場合
以下を削除してください。
<p style="margin-bottom: 2em;"><a href="ここに通販URL1" target="_blank"><span style="background-color: #ffc107; padding: 0.5em 1em; margin-right: 0.5em; font-weight: bold; border-radius: 0.5em; border: solid 3px #d82329; margin-right: 0.5em;"><font color="#d82329">某通販</font></span></a><a href="ここに通販URL2" target="_blank"><span style="background-color: #fff; padding: 0.5em 1em; margin-right: 0.5em; font-weight: bold; border: solid 3px #000; margin-right: 0.5em;"><font color="#c72c3c">Hoge</font></span></a><a href="ここに通販URL3" target="_blank"><span style="background-color: #dc4d50; padding: 0.5em 1em; margin-right: 0.5em; font-weight: bold; margin-right: 0.5em;"><font color="#fff">Hoge</font></span></a></p>この記事が少しでもオンラインイベントのお役に立てれば嬉しいです。
- 投稿日:2020-09-14T00:09:08+09:00
プログラミング学習記録 序章(今日で3日目)
Rubyの環境構築 よくわからない VScode使えない
【2020/09/12】6時間 (html)
とりあえず、Atomを使った実践編をやってみる HTML CSSはプロゲートでとりあえず学習して、補完をする こんなんでやっていけるのだろうかHTML サイト作成 定期面談
【2020/09/13】4時間 (html)
HTMLのサイト作成 楽しかった WEB制作の方が向いているかもしれない でも、ポテパンやランテックを目指しているのでとりあえずやってみる →マナブさんの有料教材で、WEB制作は学んでいきたい
GITの課題を明日からやっていく。来週末の連休中には終える。そしてRubyへ。 PROGATEをやりながらやっていくと、わかりやすいとのこと。
来週中はGITのPROGATEを終えて、課題に取り掛かっていく。勉強したら記録残すために毎日更新します。
そしてブログにします。
- 投稿日:2020-09-14T00:09:08+09:00
プログラミング学習記録 序章(今日で3日目くらい)
Rubyの環境構築 よくわからない VScode使えない
【2020/09/12】6時間 (html)
とりあえず、Atomを使った実践編をやってみる HTML CSSはプロゲートでとりあえず学習して、補完をする こんなんでやっていけるのだろうかHTML サイト作成 定期面談
【2020/09/13】4時間 (html)
HTMLのサイト作成 楽しかった WEB制作の方が向いているかもしれない でも、ポテパンやランテックを目指しているのでとりあえずやってみる →マナブさんの有料教材で、WEB制作は学んでいきたい
GITの課題を明日からやっていく。来週末の連休中には終える。そしてRubyへ。 PROGATEをやりながらやっていくと、わかりやすいとのこと。
来週中はGITのPROGATEを終えて、課題に取り掛かっていく。勉強したら記録残すために毎日更新します。
そしてブログにします。