Kotlin/MPPでブログを作った話

Transcript

1. Kotlin/MPPで ブログを作った話 2021/05/19 Kotlin愛好会

2. 自己紹介 HN: マヤミト 会津大学 学部4年 Zliという技術系LTサークルやってます GitHub: https://github.com/yt8492 好きな言語: Kotlin,

   Scala, Go 最近はウマ娘に脳味噌を破壊されています Twitter: yt8492

3. Kotlin/MPPをフル活用してブログを作りました JSファイルがクソデカ(約3MB)なのでWi-Fi環境でのアクセスをオススメします😇 https://blog.yt8492.com

4. プロジェクトの構成 - 4つのGradleのモジュールから構成されている - common - ユーザーや記事などのモデルの型定義 - このモジュールをserver, webfront,

   cliの3つのモジュールから読みこむ - server - Ktor - webfront - Kotlin/JS, React, Ktor Client - cli - Kotlin/Native, kotlinx-cli, platform libraries, Ktor Client

5. プロジェクトの構成 Kotlin/MPP common - モデルの型定義 - JSONの型定義 server webfront cli

   POSIX

6. webfrontについて - kotlin-wrappersというリポジトリにある各種ラッパーライブラリを使用 - kotlin-react - kotlin-react-dom - kotlin-react-router-dom -

   kotlin-styled - kotlin-css - ラッパーが提供されていないライブラリも使いたい - 自分で書く😇 - react-markdown - remark-gfm - react-syntax-highlighter

7. JSライブラリのラッパーの作り方 1. ライブラリをimplementationする react-markdownの場合 implementation(npm("react-markdown", "5.0.3"))

8. JSライブラリのラッパーの作り方 2. ライブラリのコードを読む(TSの型定義があると楽)

9. JSライブラリのラッパーの作り方 3. 読んだコードをもとにラッパーを書く 関数名などはJS側の定義に合わせる必要がある(変える場合は@JsNameで元の名前 を渡す)

10. ReactをKotlinで書くのは気持ちがいい - JSXではなくKotlinのDSLで書く

11. OGP対応 - ページのHTMLのヘッダーにOGPの情報を含める必要がある - SPAで記事ごとにOGP出すのしんどい😇 - NginxなどでHTMLファイルを配信するやり方ではしんどそう 🤔 - Ktorでkotlinx.htmlを使い、HTMLだけサーバー側で動的に生成することに

    - OGPの生成はJavaのAWTで動的に頑張ってます😇 - もっといい方法あったら教えて下さい……

12. OGP対応

13. ビルド時にJSを一緒に生成するようにする - serverのbuild.gradle.ktsにwebfrontのビルドを一緒に実行するように書く

14. 管理用CLIツールについて - macosX64をtargetにしたKotlin/Nativeのプロジェクト - 本当はhierarchical structureで複数プラットフォーム対応したかったけど IDEのバグっぽいのを引 いて断念(Issueは立てた) - 管理ユーザーログイン、記事の投稿・編集・削除の機能を実装

    - ビルドすると実行可能なバイナリになる

15. 各種コマンドの実装 - kotlinx-cliを使用 - コマンドライン引数などを簡単に扱うことができる - これのSubcommandを継承したクラスを実装し、 main関数から読み込んで使う

16. ファイル操作など - platform librariesを使う(実質C言語😇) - file pointerなどをゴリゴリに使うので便利関数で隠蔽するのがおすすめです

17. できた🎉

18. やってみた感想 - なにもかもKotlinで書けて楽し〜〜〜〜〜✌🤪 - commonモジュールの型定義を各プラットフォームで使い回せるのは体験が良い - ライブラリやコンパイラやIDEのKotlinプラグインのバグを踏みまくりでちょっとしん どい楽しい - Kotlin

    1.5に上げるのは一旦断念しました - Issueを立てて貢献しよう！ - 各プラットフォームに対する理解が深まる - みんなもKotlin/MPP、やろう！ - Kotlinかわいーーーー！！！！！！！！！！！！

19. リンクなど - ブログのリポジトリ - https://github.com/yt8492/Blog - 実装の解説記事 - https://blog.yt8492.com/entries/aboutthisblog