소스 코드 드라이버로 제작된 Laavel Meetup 등단 자료의 뒷면

안녕하십니까? 저는 SCOUTER의 id:kotamat:detail입니다.
며칠 전 3/8에서 열린 LaravelMeetup에 등장했다.
자료는 여기.
이쪽 발표에 사용된 발표 형식이 상당히 호평을 받았기 때문에 소개하려고 합니다.

Giitpitch를 사용하여 소스 코드 드라이버 만들기

이번에 Giitpitch라고 불리는 발표 자료 생성 도구를 사용해 발표했다.
깃허브 등 깃허핑 서비스에 방치PITCHME.md하면 발표자료를 자동으로 제작할 수 있다.
실제 발표 자료의 창고는 여기.인데, 이처럼 소스 코드가 설치된 일반 창고에 설치PITCHME.md만 하면 발표 자료를 완성할 수 있다.
URL은 https://gitpitch.com/$user/$repo/$branch

실제 자료를 만들 때 하는 일.

composter create-Project에서 Laavel 환경 정비

네, 발표자료를 만드는 첫걸음은 라벨을 설치하는 것입니다.
이번에는 Laavel Meetup이기 때문에 아무 생각 없이 Laavel을 설치해 GiitHub에 공개했다.

코드 편집기에서 발표할 때 사용하는 코드

이번 발표에서는 테스트 코드의 쓰기 팁을 발표하고 싶어 앱 측 모바일 코드와 그 테스트 코드를 기술했다.
물론 Phptorm 등 자주 사용하는 편집으로 쓸 수 있기 때문에 코드 링크와 같은 일상생활에서 사용하는 연장선에서 코드를 자동 보완해 쓸 수 있다.

코드는 Mardown에 표시됩니다.

실제 쓴 코드는 다음과 같은 형식으로 호출할 수 있다.

---?code=tests/Feature/ApiTest.php&lang=php&title=tests/Feature/ApiTest.php

@[14-16](GETパラメータを定義しておき)
@[18-19](routeの第二引数にパラメータを渡してレスポンス取得)
@[21](ステータス200かどうかチェック)
@[22](取得したデータをprint_rで表示)

code 매개 변수에서 PITCHME.md와 상대 경로를lang 매개 변수로 지정하는 언어입니다.
하이라이트를 렌더링합니다.js를 사용했기 때문에 여기.에 쓴 언어가 지원됩니다@에서도 강조 표시할 행 수를 지정할 수 있습니다.

교정 도구 가져오기

Mardown으로 기술되어 있기 때문에 Mardown을 사용하는 도구를 가져올 수도 있습니다.
이번에textlint를 가져왔습니다.
먼저 yarn or npm로 설치합니다.

yarn add --dev textlint textlint-rule-preset-japanese textlint-rule-preset-jtf-style textlint-rule-spellcheck-tech-word 

여기에 설치된 것은 다음과 같은 규칙이다.

textlint-rule-preset-japanese

도구 작성자가 만든 일본어 관련 규칙집

textlint-rule-preset-jtf-style

JTF 스타일 가이드의 규칙 집합

textlint-rule-spellcheck-tech-word

WEB+DB PRESS 용어의 통일된 규칙을 바탕으로 하는 azu/technical-word-rules 사전에서 단어 검사

다음textlintrc 파일에서 다양한 규칙을 사용하도록 정의합니다.

{
  "rules": {
    "preset-japanese": true,
    "preset-jtf-style": true,
    "spellcheck-tech-word": true
  }
}

마지막으로 파일 이름을 지정하고 명령을 실행합니다.

./node_modules/.bin/textlint PITCHME.md

실행 후 아래와 같이 문제를 지정할 것입니다.--fix 옵션을 지정하면 수정할 수 있는 것은 자동으로 수정됩니다

PITCHME.md
   13:10  ✔   git => Git                                                                                                      spellcheck-tech-word
   22:57  ✔   でgithub => でGitHub                                                                                            spellcheck-tech-word
   69:3   ✔   句読点には全角の「、」と「。」を使います。和文の句読点としてピリオド(.)とカンマ(,)を使用しません。              preset-jtf-style/1.2.1.句点(。)と読点(、)
   22:32  ✔   一つ => 1つ
数量を表現し、数を数えられるものは算用数字を使用します。任意の数に置き換えても通用する語句がこれに該当します。  preset-jtf-style/2.2.2.算用数字と漢数字の使い分け
    3:15  ✔   原則として、全角文字と半角文字の間にスペースを入れません。                                                      preset-jtf-style/3.1.1.全角文字と半角文字の間
    3:33  ✔   原則として、全角文字と半角文字の間にスペースを入れません。                                                      preset-jtf-style/3.1.1.全角文字と半角文字の間
  108:27  ✔   半角のかっこ()が使用されています。全角のかっこ（）を使用してください。                                          preset-jtf-style/4.3.1.丸かっこ（）

해볼 수 있는 거.

실제 코드를 쓰면서 발표자료를 만들 수 있어 타자나 붙여넣기 등 쓸모없는 작업을 줄였다

실행 가능한 소스 코드가 보존되어 있어 발표 과정에서 소화되지 않은 사람도 창고를 보고 재현할 수 있음

Markdown으로 기술할 수 있기 때문에 Markdown 주변 기술(lint 등)에 적응할 수 있다

고광등.js를 지원하기 때문에 기본적으로 모든 언어, 텍스트 형식이 괜찮아 보입니다

불만

Giithub에서push를 하지 않으면 동작을 확인할 수 없습니다(일시적으로 Scara로 이동하기 때문에 로컬에 설치하면 이동이 가능할 것 같습니다...)

이미지를 포함하여push를 해도 링크가 끊긴 경우(원인 불분명)

총결산

기술 Tips를 발표하는 무대에서 Giitpitch의 사용은 매우 편리하다.
지피치 위키를 봤는데 아직 사용하지 못한 기능들이 많아서 앞으로 무대에 오를 기회가 되면 도전해보고 싶어요.