Qiita의 기사를 미사와로 물들인다

8630 단어 ChromeQiita재료LINQ

Qiita 문화



Qiita의 개발팀 문화에 미사와가 있다고 합니다

가라앉다

예를 들어 채팅이나 github상의 온라인 커뮤니케이션에서는 감정면의 정보가 크게 누락되기 때문에 조금 어긋난 형태로 전해져 버리는 경우도 자주 있습니다.

그것을 피하기 위해

온라인으로 직접 구두로 말할 때 이상으로 말씀을 정중하게 한다
코드 리뷰는 어디까지나 코드를 비판하고 있으므로, 필자를 비판하고 있다고 파악되지 않도록 주의한다
이모티콘과 이미지를 적극적으로 사용
(생략)
덧붙여서 폐사에서는 채팅에 'misawa'라고 쓰면 미사와 화상을 랜덤하게 붙여 주는 편리한 bot가 있습니다.

그렇다고합니다. 훌륭한 문화입니다! !
그런 Qiitar들이 꼭 사용하면 좋지 않을까라는 Chrome 확장을 발견했기 때문에 소개합니다.

みさわ

hrysd/misawa_md - Github
저자 블로그 Github에서 코드 리뷰를 편안하게하는 Chrome 확장을 만들었습니다.

사용법(상기 작자 블로그에서)


  • Chrome 웹 스토어에서 다운로드합니다.
  • 오른쪽 상단에 추가된 MISAWA의 얼굴을 터치!
  • 사용하고 싶은 이미지를 클릭!
  • 클립 보드에 복사되므로 cmd + v로 붙여 넣습니다.
  • 멋진 상호 작용 완성

  • 간단하네요! !

    라고 사용법의 설명 뿐이라면 이것으로 이야기가 끝나 버리므로, 모처럼이니까 어떤 만들기가 되어 있는 것일지도 공부가 와서 보았습니다.

    메커니즘



    내용을 보자.

    manifest.json



    어느 것. 어떤 확장인지 들여다 보자.

    manifest.json
    {
      "name": "MISAWA::MD",
      "version": "0.9",
      "description": "markdown形式で名言をコピーします。",
      "manifest_version": 2,
      "icons": {
        "128": "images/icon_128.png",
        "48": "images/icon_048.png",
        "16": "images/icon_016.png"
      },
      "browser_action": {
        "default_icon": "images/icon_019.png",
        "default_title": "MISAWA::MD",
        "default_popup": "popup.html"
        },
      "permissions": [ "http://cloud.github.com/*/*", "clipboardWrite"]
    }
    

    과연!
    분명히 브라우저의 오른쪽 상단에 아이콘을 표시하고 (popup.html이라고 쓰는 곳) http://cloud.github.com/なんとか/かんとか에 액세스하여 작동하는 Chrome 확장 프로그램처럼 보입니다.

    스크립트



    리포지토리의 src/javascripts 디렉토리를 들여다 보았습니다.jquery.js linq.min.js popup.js 라는 파일이 있습니다.

    jQuery.js



    이 녀석이 무엇인가는, 여기를 보는 사람이라면 대체로 알고 있을 것입니다.
    version1.7을 사용하는 것 같습니다. 후술의 LINQ가 minify 되고 있는데, 이쪽이 원시인 것은 수수께끼입니다.

    linq.js



    존재를 처음 알았는데, 요점은 Underscore.js와 Lo-Dash, Lazy.js 등과 같은 데이터 배열 처리 등을 지원하는 라이브러리입니다.
    일부 메서드는 Underscore.js보다 훨씬 빠르고 작동하는 것 같습니다.

    underscore_vs_linq.coffee
    array = [1,2,3,5,8,13,21,33]
    
    ## 偶数だけ二倍して出力
    # linq
    Enumerable.From(array)
    .Where((x) ->x % 2 is 0)
    .Select((x) -> x * 2)
    .ForEach((x) -> document.writeln x)
    
    # Underscore
    _(array)
    .filter((x) ->x % 2 is 0)
    .map((x) -> x * 2)
    .each((x) -> document.writeln x)
    

    popup.js



    jQuery를 팝업의 Dom 취득과 Ajax 통신에, LINQ.js를 API로부터 취득한 json 처리에 사용하고 있는 것 같습니다.
    검색 양식의 입력 문자열은 미사와 그림 제목, 문자 이름 및 그림에서 괄호가 모두 단어를 검색하는 것 같습니다.

    좀 잘 모르는 것이 API에 http://cloud.github.com/downloads/june29/horesase-boys/meigens.json를 지정하고 있는 곳.
    어쩌면 june29/horase-boys - Github을 작동시켜 데이터가 꽉 찼다 meigens.json을 얻고 있다고 생각하지만 ...
    cloud.github.com은 어리석은.

    みさわ

    기타 참고 사이트



    Chrome Extensions API 참조 ... 공식 문서의 비공식 일본어 번역판입니다.
    Chrome Extensions API (본가) ...영어에 거부반응을 일으켰기 때문에 거의 읽지 않습니다.

    좋은 웹페이지 즐겨찾기