集まれKotlin好き!Kotlin愛好会 vol.29 @オンライン にて発表
Kotlin/MPPでブログを作った話2021/05/19 Kotlin愛好会
View Slide
自己紹介HN: マヤミト会津大学 学部4年Zliという技術系LTサークルやってますGitHub: https://github.com/yt8492好きな言語: Kotlin, Scala, Go最近はウマ娘に脳味噌を破壊されていますTwitter: yt8492
Kotlin/MPPをフル活用してブログを作りましたJSファイルがクソデカ(約3MB)なのでWi-Fi環境でのアクセスをオススメします😇https://blog.yt8492.com
プロジェクトの構成- 4つのGradleのモジュールから構成されている- common- ユーザーや記事などのモデルの型定義- このモジュールをserver, webfront, cliの3つのモジュールから読みこむ- server- Ktor- webfront- Kotlin/JS, React, Ktor Client- cli- Kotlin/Native, kotlinx-cli, platform libraries, Ktor Client
プロジェクトの構成Kotlin/MPPcommon- モデルの型定義- JSONの型定義server webfront cliPOSIX
webfrontについて- kotlin-wrappersというリポジトリにある各種ラッパーライブラリを使用- kotlin-react- kotlin-react-dom- kotlin-react-router-dom- kotlin-styled- kotlin-css- ラッパーが提供されていないライブラリも使いたい- 自分で書く😇- react-markdown- remark-gfm- react-syntax-highlighter
JSライブラリのラッパーの作り方1. ライブラリをimplementationするreact-markdownの場合implementation(npm("react-markdown", "5.0.3"))
JSライブラリのラッパーの作り方2. ライブラリのコードを読む(TSの型定義があると楽)
JSライブラリのラッパーの作り方3. 読んだコードをもとにラッパーを書く関数名などはJS側の定義に合わせる必要がある(変える場合は@JsNameで元の名前を渡す)
ReactをKotlinで書くのは気持ちがいい- JSXではなくKotlinのDSLで書く
OGP対応- ページのHTMLのヘッダーにOGPの情報を含める必要がある- SPAで記事ごとにOGP出すのしんどい😇- NginxなどでHTMLファイルを配信するやり方ではしんどそう 🤔- Ktorでkotlinx.htmlを使い、HTMLだけサーバー側で動的に生成することに- OGPの生成はJavaのAWTで動的に頑張ってます😇- もっといい方法あったら教えて下さい……
OGP対応
ビルド時にJSを一緒に生成するようにする- serverのbuild.gradle.ktsにwebfrontのビルドを一緒に実行するように書く
管理用CLIツールについて- macosX64をtargetにしたKotlin/Nativeのプロジェクト- 本当はhierarchical structureで複数プラットフォーム対応したかったけど IDEのバグっぽいのを引いて断念(Issueは立てた)- 管理ユーザーログイン、記事の投稿・編集・削除の機能を実装- ビルドすると実行可能なバイナリになる
各種コマンドの実装- kotlinx-cliを使用- コマンドライン引数などを簡単に扱うことができる- これのSubcommandを継承したクラスを実装し、 main関数から読み込んで使う
ファイル操作など- platform librariesを使う(実質C言語😇)- file pointerなどをゴリゴリに使うので便利関数で隠蔽するのがおすすめです
できた🎉
やってみた感想- なにもかもKotlinで書けて楽し〜〜〜〜〜✌🤪- commonモジュールの型定義を各プラットフォームで使い回せるのは体験が良い- ライブラリやコンパイラやIDEのKotlinプラグインのバグを踏みまくりでちょっとしんどい楽しい- Kotlin 1.5に上げるのは一旦断念しました- Issueを立てて貢献しよう!- 各プラットフォームに対する理解が深まる- みんなもKotlin/MPP、やろう!- Kotlinかわいーーーー!!!!!!!!!!!!
リンクなど- ブログのリポジトリ- https://github.com/yt8492/Blog- 実装の解説記事- https://blog.yt8492.com/entries/aboutthisblog