Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Kotlin/MPPでブログを作った話
Yuta Tomiyama
May 19, 2021
Programming
0
460
Kotlin/MPPでブログを作った話
集まれKotlin好き!Kotlin愛好会 vol.29 @オンライン にて発表
Yuta Tomiyama
May 19, 2021
Tweet
Share
More Decks by Yuta Tomiyama
See All by Yuta Tomiyama
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
39
Compose for Webを始めよう
yt8492
0
130
Compose Multiplatform 1.0.0
yt8492
0
52
Kotlin/NativeからCの標準ライブラリを呼び出そう
yt8492
0
54
2021年のKotlin入門
yt8492
0
130
Jetpack Compose + Decomposeで始めるクロスプラットフォーム開発
yt8492
1
170
サキドリJetpack Compose for Web
yt8492
0
78
Kotlin/JSでもSSGしたい!
yt8492
1
83
サーバーサイドKotlin/JSのフレームワークを作った話
yt8492
0
98
Other Decks in Programming
See All in Programming
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022
manfredsteyer
PRO
0
120
Get Ready for Jakarta EE 10
ivargrimstad
0
1.5k
1時間半で克服するJavaScriptの非同期処理/async_javascript_kokufuku
marchin1989
2
590
Terraform Plan/Apply結果の自動通知
ymmy02
0
280
PythonユーザによるRust入門
rmizuta3
9
3.1k
What's new in Android development tools まとめ
mkeeda
0
250
Independently together: better developer experience & App performance
bcinarli
0
160
Reactive Java Microservices on Kubernetes with Spring and JHipster
deepu105
1
160
Git・Git-Flowについて
nerusan_main
0
410
How we run a Realtime Puzzle Fighting Game on AWS Serverless
falken
0
240
Cybozu GoogleI/O 2022 LT会 - Input for all screens
jaewgwon
0
240
Embracing commonMain for Android Development - Droidcon SF 2022
handstandsam
4
230
Featured
See All Featured
BBQ
matthewcrist
74
7.9k
A Philosophy of Restraint
colly
192
15k
In The Pink: A Labor of Love
frogandcode
131
21k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
Facilitating Awesome Meetings
lara
29
4k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Building a Scalable Design System with Sketch
lauravandoore
447
30k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.4k
What the flash - Photography Introduction
edds
61
10k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
What's new in Ruby 2.0
geeforr
336
30k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Transcript
Kotlin/MPPで ブログを作った話 2021/05/19 Kotlin愛好会
自己紹介 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/MPP common - モデルの型定義 - JSONの型定義 server webfront cli
POSIX
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