Blockchain code Metaverse VR

Crypto×VR×SmartContract(505)

スポンサーリンク

//tips

//smart contract

Jsonからfetchして取得した内容をタグ付きのhtmlから普通のテキストに変換する方法を考える。

DOM要素を文字列で取得するサンプルコード

const set = document.querySelector('.' + selector).outerHTML;

他にも下記のものを見つけた。

DOMParserインターフェイスは、 XML や HTML ソースコードを文字列から DOM の Document に解釈するもの。

https://developer.mozilla.org/ja/docs/Web/API/DOMParser

NodeではDOMParserの方が使われるようなのでこちらでの対応方法を考える。

Editページにて挙動を確認したところ再読み込みが早すぎてアクションが打ち消されてしまった。

async function handleOnMediumCard(e) {
e.preventDefault();

再度e.preventDefault();を戻す。

下記で試してみるもcontentの中身部分をうまく取り出せずundeifinedになる。

"content":"\n<p>API test</p>\n<p>next.js</p>\n<img src=\"https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=3800c7813126\" width=\"1\" height=\"1\" alt=\"\">\n","enclosure":{},"categories":[]}]}

var details=results.items[0].content;
let parser = new DOMParser();
let doc = parser.parseFromString(details, 'text/html');
console.log(doc.p);

これはDOMに変換しただけかと気付き、DOMの中のp要素を取り出すようにする。

let parser = new DOMParser();
let doc = parser.parseFromString(details, 'text/html');
var p_element = doc.querySelector("p");
console.log(p_element.textContent);

これでやっと一行目のテキストが取得できた。

また、下記のように変更することで<p>に囲まれた要素を抽出することができた。

console.log(results.items[0].content);

let parser = new DOMParser();
let doc = parser.parseFromString(details, 'text/html');
var p_element = doc.querySelectorAll("p");

p_element.forEach(function(userItem) {
console.log(userItem.textContent);
});

console.log(userItem.textContent);部分を一文になるように追加していければいいので変形させる。

下記のようにして一文で抽出できた。

var detailnew="";

p_element.forEach(function(userItem) {
if(userItem.textContent !=undefined){
detailnew += userItem.textContent+'.'
}
});

console.log(detailnew);

さらに加工することで下記のようにカード表示させることができた。

{
"title": "Hi Medium",
"details": "API test.next.js.",
"category": "Medium",
"id": 6
}

ただ、元のように更新ボタンを押さないと更新されないので、pushではなく、router.reload()に変更。

fetch('http://localhost:8000/notes', {
method: 'POST',
headers: {"Content-type": "application/json"},
body: JSON.stringify({ title, details, category })
}).then(() => router.reload())

ばっちり機能した。

https://nextjs.org/docs/api-reference/next/router

これをもう少し進めて、現在は自分のアカウントのUsername & URLから入力を行うことができるようにしているが、https://medium.com/feed/@の後のUsernameからfeed先のURLを入手できるようにする。

つまり、テキスト入力フォームを作り、そこにusernameを入れてsubmitすると自動的に取得して表示される形にする。

これはcreate.jsと同じ仕組みでできる。

なので、const [uname,setUname]=useState(‘’)を追加し、イベント関数を加工。

async function handleOnMediumCard(e) {
e.preventDefault();

const endpoint = "https://api.rss2json.com/v1/api.json";
//const feed_url = "https://medium.com/feed/@Nakithemagic";
const feed_url = "https://medium.com/feed/@"+uname;
console.log(feed_url);

// rss feed を取得
var res = await fetch(`https://api.rss2json.com/v1/api.json?rss_url=${feed_url}`);

さらに、テキストフォームを追加。こちらに以前固定で入れていたMediumのusernameであるNakithemagicを記入することで無事に現在のmediumに出している自分の記事をカード化することができた。

<form noValidate autoComplete="off" onSubmit={handleOnMediumCard}>
<TextField
onChange={(e)=>setUname(e.target.value)}
//className={classes.field}
//label="Note Title"
variant="outlined"
color="secondary"
fullWidth
required
//error={titleError}
/>

<Box textAlign="center">
<Button
type="submit"
varient="contained"
>
submit
</Button>
</Box>

</form>

これがレッドブル効果か。

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.