Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Yuta Tomiyama

May 19, 2021
Tweet

More Decks by Yuta Tomiyama

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. できた🎉

    View full-size slide

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

    View full-size slide

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

    View full-size slide