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

集まれKotlin好き！Kotlin愛好会 vol.29 @オンライン にて発表

Transcript

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

   View Slide

2. 自己紹介
   HN: マヤミト
   会津大学 学部4年
   Zliという技術系LTサークルやってます
   GitHub: https://github.com/yt8492
   好きな言語: Kotlin, Scala, Go
   最近はウマ娘に脳味噌を破壊されています
   Twitter: yt8492
   

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

6. webfrontについて
   - kotlin-wrappersというリポジトリにある各種ラッパーライブラリを使用
   - kotlin-react
   - kotlin-react-dom
   - kotlin-react-router-dom
   - kotlin-styled
   - kotlin-css
   - ラッパーが提供されていないライブラリも使いたい
   - 自分で書く😇
   - react-markdown
   - remark-gfm
   - react-syntax-highlighter
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. OGP対応
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. できた🎉
    

    View Slide

18. やってみた感想
    - なにもかもKotlinで書けて楽し〜〜〜〜〜✌🤪
    - commonモジュールの型定義を各プラットフォームで使い回せるのは体験が良い
    - ライブラリやコンパイラやIDEのKotlinプラグインのバグを踏みまくりでちょっとしん
    どい楽しい
    - Kotlin 1.5に上げるのは一旦断念しました
    - Issueを立てて貢献しよう！
    - 各プラットフォームに対する理解が深まる
    - みんなもKotlin/MPP、やろう！
    - Kotlinかわいーーーー！！！！！！！！！！！！
    

    View Slide

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

    View Slide