Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Kotlin/MPPでブログを作った話
Search
Yuta Tomiyama
May 19, 2021
Programming
0
610
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
44
Android Autoが思ったよりしんどい話
yt8492
0
150
apollo-kotlinにcontributeした話
yt8492
0
84
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
720
今だからこそ知りたいKotlin Multiplatform
yt8492
0
250
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.2k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
170
Compose for Webを始めよう
yt8492
0
360
Compose Multiplatform 1.0.0
yt8492
0
140
Other Decks in Programming
See All in Programming
MCP with Cloudflare Workers
yusukebe
2
220
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
.NET 9アプリをCGIとして レンタルサーバーで動かす
mayuki
1
770
良いユニットテストを書こう
mototakatsu
4
1.5k
今からはじめるAndroidアプリ開発 2024 / DevFest 2024
star_zero
0
1k
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
160
nekko cloudにおけるProxmox VE利用事例
irumaru
3
420
クリエイティブコーディングとRuby学習 / Creative Coding and Learning Ruby
chobishiba
0
3.9k
Monixと常駐プログラムの勘どころ / Scalaわいわい勉強会 #4
stoneream
0
270
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
180
return文におけるstd::moveについて
onihusube
1
610
tidymodelsによるtidyな生存時間解析 / Japan.R2024
dropout009
1
720
Featured
See All Featured
How GitHub (no longer) Works
holman
311
140k
KATA
mclloyd
29
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Embracing the Ebb and Flow
colly
84
4.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Statistics for Hackers
jakevdp
796
220k
Visualization
eitanlees
146
15k
Git: the NoSQL Database
bkeepers
PRO
427
64k
A designer walks into a library…
pauljervisheath
204
24k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
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