Qiipedia를 폭속으로 만든 이야기 【무료】 【간단】

Qiita 사용자가 기술 용어 설명을 쓰면 알기 쉬운 프로그래밍 사전을 할 수 있을까요?

만든 것 (Qiipedia)





실현하고 싶은 것(동기) = 투고자에게 부담을 주지 않는 Qiita의 열람성 향상



처음 기술을 배울 때 wikipedia의 내용이 1%도 모르고 Qiita에게 도움이 되는 경우가 많다.

즉, Qiita에는 이미 유용한 기술 용어의 해설 기사가 다수 존재한다.

하지만 Qiita의 해설 기사 검색은 외부의 google 의지로 추적할 수밖에 없다.

한편, 기술 정보의 기술 정보를 아웃풋은 허들이 높기 때문에, 해설을 의식하면 기사의 아웃풋이 적어져 버릴 우려가 있다.

Qiipedia라고 하는 프로그래밍 사전의 실현은, 투고자에게 있어서 Qiita의 기사 투고에 극력 가까운 방법이 바람직하다.

Qiipedia로 실현할 수 있는 일



- 투고자는 통상의 기사 투고와 완전히 같은 조작으로 Qiipedia의 쓰기를 할 수 있다
- 대상에 대한 설명 기사를 「스톡 수」라고 하는 평가 순서로 취득할 수 있다
-편집 리퀘스트 기능에 의해, Qiita 유저간에서 타이포 수정이나 가필이 가능

Qiipedia 사용법



Qiipedia에 기고하는 법



Qiipedia에 대한 기고는 간단합니다.

작성한 기사의 설명 대상인 タグ를 부여해, 합쳐서 태그 설명 태그를 부여해 투고해 주세요.

Qiipedia를 참조하는 방법



TOP 페이지



아래 UserScript를 설정하면 첫 번째 이미지와 같은 TOP 페이지가 됩니다.
단지, Qiipedia의 헤더를 붙이는 것만

UserScript의 내용을 확인합니다.

Qiipedia.js
// ==UserScript==
// @name         Qiipedia
// @namespace    http://tampermonkey.net/
// @description  Qiitaのタグ説明
// @author       j5c8k6m8
// @match        https://qiita.com/tags/%e3%82%bf%e3%82%b0%e8%aa%ac%e6%98%8e
// ==/UserScript==
const tagShow = document.querySelector('div.p-tagShow');
console.log(tagShow)
tagShow.insertAdjacentHTML(
    'afterbegin',
    '<div class="px-2 px-1@s pt-4 pt-1@s" style="max-width: 1100px; margin: 0 auto;">' +
      '<div class="px-4 py-2" style="background-color:#fff; border: solid 1px #55c500; border-radius :4px;">' +
        '<p>' +
          '<span class="mr-2" style="font-size: 28px; color:#3f9200">Qiipedia</span><span style="font-size: 18px;">へようこそ</span></p>' +
        '<p class="pt-1">' +
          '<span class="ml-1">Qiipediaは</span>' +
          '<span class="ml-1"><a href="https://qiita.com/j5c8k6m8/items/6214d551900aa5b3a8ef" style="color:#3f9200">誰でも編集できる</a></span>' +
          '<span class="ml-1">エンジニアのための</span>' +
          '<span class="ml-1">プログラミング辞書です</span>' +
        '</p>' +
      '</div>' +
    '</div>'
);
const tagShowContainer = document.querySelector('div.p-tagShow_container');
tagShowContainer.classList.remove("pt-4")
tagShowContainer.classList.add("pt-3")



검색 페이지



위의 검색 페이지를 열고 検索したいタグ名 부분을 조사하고 싶은 단어로 변경하고 검색 버튼을 누르십시오.

재고 수를 기준으로 정렬하려면 기본 "관련 순서"를 "주식 수 순서"로 변경하고 다시 검색하십시오.

더 자세한 사용법



자세한 내용은 여기 페이지를 참조하십시오.

【폭속】【무료】【간단】을 실현하기 위해서 사용한 것


  • Qiita 태그 기능
  • Qiita 검색 기능
  • 기타 Qiita 기능
  • UserScript (TOP 페이지 헤더 용)

  • 거의 의미가 없는 헤더의 부여 이외, 모두 Qiita의 기능을 사용한 것으로, UserScript 작성만(약 1시간)이라고 하는【폭속】【무료】【간단】한 개발을 실현했습니다.
    이것이 진정한 서버리스 개발

    tl;dr



    Qiita 여름 축제 을 곱해, 「태그 설명」태그의 사용법을 기사로 하기 위해서, UserScript를 썼다.

    사이고에게



    이 기사는 ポエム 입니다만, (TypeScript의 정적 형 붙이와 같은) 생략 가능한 Qiita의 사양입니다.
    본 사양을 채용한 실장이 늘어나, 태그 안전한 Qiita의 실현에 가능성을 느끼고 있습니다.
    찬동해 주신 분은 「LGTM」하거나 「태그 설명」기사를 써, 태그 안전한 Qiita의 실현에 협력해 주세요.

    좋은 웹페이지 즐겨찾기