Skip to content

Commit

Permalink
Add new post
Browse files Browse the repository at this point in the history
  • Loading branch information
aiotter committed May 26, 2021
1 parent 61b36ce commit b325e88
Showing 1 changed file with 40 additions and 0 deletions.
40 changes: 40 additions & 0 deletions _posts/2021-05-27-github-comment-system.adoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
= GitHub を利用した新しいコメントシステムを実装しました
:page-category: Tech
:page-tags: [JavaScript, Blog]

GitHub って特定のコミットに対してコメントする機能があるじゃないですか.
これを技術ブログのコメントに流用したら,どのバージョンに対するコメントなのかがはっきりしてめっちゃ便利なんじゃないかと思いました.ので,このブログのコメント機能として実装してみました.

== どんなもんよ
この記事を一番下までスクロールするとそこにあります.
テスト代わりに書き込んでみてもいいですよ.
気に入ったら真似してくださっても結構です.

== システム概要
仕組みとしては単純で,GitHub の2つの API を組み合わせただけです.

- https://docs.github.com/en/rest/reference/repos#list-commits[List commits]
- https://docs.github.com/en/rest/reference/repos#list-commit-comments-for-a-repository[List commit comments for a repository]

前者は特定のリポジトリのコミット履歴を一覧で取得するものですが,パラメタで指定すると,特定のファイルへの変更を含むものだけを抽出できます.
後者は特定のリポジトリに存在するコミットコメントを一覧で取得できます.

この2つを組み合わせることで,ウェブサイトを管理するリポジトリのコミットコメントのうち,閲覧中の記事に関連するもののみを一覧で取得することができます.


== 開発四方山話
私は JavaScript に対する忌避感が強くて,いくらでもヤバい書き方ができてしまう闇黒な言語だと思っていました.

モダンで明確な書き方もできるだろうとは思っていましたが,初学者の私にはどれが良い書き方でどれがヤバい書き方なのか区別できる自信がなかったので,信頼できる良い教材が見つかれば勉強してみようかなあくらいの気持ちでずっと過ごしてきました.
友人の https://github.com/kirisaki[@kirisaki] さんに https://jsprimer.net/[JavaScript Primer] を教えてもらったので,重い腰を上げてちょっと勉強してみたら,案外簡単に書けました.

これからは JavaScript とも適度な距離感を保ちながら仲良くして行こうと思います.
私は JavaScript とかよりも Julia とか Rust とかがやりたいんだよなあ.


== 課題
2 種類の API のうちどちらも,一回のリクエストでは同時に 100 件のコミットコメントなりコミットなりしか取得できません.

まあひとつの記事を 100 回も書き直すことはまずないのでコミットの方はどうでもいいんですが,コミットコメントの方はリポジトリ全体で 100 件が限界なので,このブログへの累計コメント数が 100 件に達する前にページネーションを実装する必要があります.

そのうちやる気が出たらやります.でもその前に CSS のヤバさをなんとかしないといけない……

11 comments on commit b325e88

@sevenc-nanashi
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

adocで記事って書けるんだ、勉強になります(コメントテストもかねて)

@aiotter
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sevenc-nanashi asciidoc は表現力が高くて技術ブログとかに向いている印象があります。
Jekyll だといわゆる Frontmatter を書かなくてもいけるので、ブログ記事を直接そのまま asciidoctor が解釈できて特にいい感じですね。
このへん Hugo は下手くそなのであまりおすすめできません。(その辺の話はこの記事にまとめました)

今気づいたんですが、コメントへの返信がメールで通知されるのも嬉しいですね

@Lazialize
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello World

@sizumita
Copy link

@sizumita sizumita commented on b325e88 May 28, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

でかめ

@peacock0803sz
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

android, vivaldiからテスト

@peacock0803sz
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sizumita めんしょんてすと

@peacock0803sz
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aiotter
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#5, #6 の問題を #7 で修正しました!
動作確認を手伝ってくれた @peacock0803sz に感謝 🙏

@Khiroka
Copy link

@Khiroka Khiroka commented on b325e88 Jun 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

試しに来ました。凄いです。
そういえばpythonjpに貼られたリンクだとtechが抜けてて404になってました

@aiotter
Copy link
Owner Author

@aiotter aiotter commented on b325e88 Jun 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Khiroka ありがとうございます!

c9ffc09 で SEO 対策と一緒に permalink を変更したのですが,それで以前の記事のリンクが切れてしまいました.
Jekyll の側では以前のリンクを有効にすることはできないっぽいんですよね.Netlify の側でリダイレクトを設定して対応しようかな……

追記: ff0e6a6 で対応しました

@nennneko5787
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

これすごいですね、、、
僕もこれを使いたくなってきました、、、

Please sign in to comment.