마우스만으로 지금 Qiita의 최신 기사를 고양이에게 말하고 싶다면
고양이라고 해도 외모 미워… (죄송합니다 누군가 온 것 같다…)
소개
Scratch3.0에서 확장 블록을 만들고 싶어서 WebAPI를 이용하는 블록을 만들어 보았습니다!
또한 이 문서는 Qiita夏祭り2020_パソナテック
항목 기사입니다.
테마 페이지는 여기
언어로서는 JavaScript로 확장 블록을 추가해 갑니다!
Scratch로 확장 블록 만들기
참고 기사
* htps : // 코 m/히로유키_오사키/있어 ms/아 46에 1c881d3 아에 d4661f7
* h tp // w w. 모온미. 네 t/bぉg/아 r ゔぇs/10331
매우 도움이되었습니다.
역시 많은 정보가 있네요.
그러나 vm과 gui의 폴더를 오가는 것은 확실히 어렵습니다 ...
소스 코드
이번에는 axios
를 사용하여 Qiita API를 사용합니다.
그래서 우선 axios
의 인스톨입니다.
npm i axios
이 후 브라우저를 다시로드하는 것만으로는 안됩니다. 로컬에서 시작한 Scratch를 삭제합니다.
yarn start
에서 다시 시작이 필요했습니다.
아래는 scratch-vm/src/extensions/scratch3_newblocks/index.js
의 일부입니다.
const axios = require("axios");
(略)
{
opcode: "tagBody",
blockType: BlockType.REPORTER,
text: "tag: [TEXT] の最新記事の内容",
arguments: {
TEXT: {
type: ArgumentType.STRING,
defaultValue: "Qiita",
},
},
},
(略)
tagBody(args) {
const tag = Cast.toString(args.TEXT);
return axios
.get("https://qiita.com/api/v2/items?per_page=1&query=tag:" + tag)
.then((response) => {
console.log(response.data);
return response.data[0].body;
})
.catch((err) => {
console.log("err:", err);
return err;
});
(略)
약어가 많네요. 만지는 파일도 많으면 날아다니면서 쓰지 않으면...
사용해보기
시험에 스크래치 캣에 말해 보았습니다.
지능형 고양이가 되었어요 ...
귀여워 ぃぃeeeee! !
결론
확장 블록을 만드는 것은 한 번 알면 쉽게 할 수 있을 것 같습니다만, 역시 다양한 파일이나 개소도 날아다니는 장소를 만지지 않으면이기 때문에 무섭네요.
하지만 블록을 만드는 것은 재미 있습니다!
Reference
이 문제에 관하여(마우스만으로 지금 Qiita의 최신 기사를 고양이에게 말하고 싶다면), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tkyko13/items/2d7a5bd17bb79d7c6063
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
참고 기사
* htps : // 코 m/히로유키_오사키/있어 ms/아 46에 1c881d3 아에 d4661f7
* h tp // w w. 모온미. 네 t/bぉg/아 r ゔぇs/10331
매우 도움이되었습니다.
역시 많은 정보가 있네요.
그러나 vm과 gui의 폴더를 오가는 것은 확실히 어렵습니다 ...
소스 코드
이번에는
axios
를 사용하여 Qiita API를 사용합니다.그래서 우선
axios
의 인스톨입니다.npm i axios
이 후 브라우저를 다시로드하는 것만으로는 안됩니다. 로컬에서 시작한 Scratch를 삭제합니다.
yarn start
에서 다시 시작이 필요했습니다.
아래는
scratch-vm/src/extensions/scratch3_newblocks/index.js
의 일부입니다.const axios = require("axios");
(略)
{
opcode: "tagBody",
blockType: BlockType.REPORTER,
text: "tag: [TEXT] の最新記事の内容",
arguments: {
TEXT: {
type: ArgumentType.STRING,
defaultValue: "Qiita",
},
},
},
(略)
tagBody(args) {
const tag = Cast.toString(args.TEXT);
return axios
.get("https://qiita.com/api/v2/items?per_page=1&query=tag:" + tag)
.then((response) => {
console.log(response.data);
return response.data[0].body;
})
.catch((err) => {
console.log("err:", err);
return err;
});
(略)
약어가 많네요. 만지는 파일도 많으면 날아다니면서 쓰지 않으면...
사용해보기
시험에 스크래치 캣에 말해 보았습니다.
지능형 고양이가 되었어요 ...
귀여워 ぃぃeeeee! !
결론
확장 블록을 만드는 것은 한 번 알면 쉽게 할 수 있을 것 같습니다만, 역시 다양한 파일이나 개소도 날아다니는 장소를 만지지 않으면이기 때문에 무섭네요.
하지만 블록을 만드는 것은 재미 있습니다!
Reference
이 문제에 관하여(마우스만으로 지금 Qiita의 최신 기사를 고양이에게 말하고 싶다면), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tkyko13/items/2d7a5bd17bb79d7c6063
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
확장 블록을 만드는 것은 한 번 알면 쉽게 할 수 있을 것 같습니다만, 역시 다양한 파일이나 개소도 날아다니는 장소를 만지지 않으면이기 때문에 무섭네요.
하지만 블록을 만드는 것은 재미 있습니다!
Reference
이 문제에 관하여(마우스만으로 지금 Qiita의 최신 기사를 고양이에게 말하고 싶다면), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tkyko13/items/2d7a5bd17bb79d7c6063텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)