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

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

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

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

3c7020b33ae8880dd9514b6469a28ae0?s=128

Yuta Tomiyama

May 19, 2021
Tweet

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