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
620
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
58
Android Autoが思ったよりしんどい話
yt8492
0
170
apollo-kotlinにcontributeした話
yt8492
0
98
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
780
今だからこそ知りたいKotlin Multiplatform
yt8492
0
260
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.2k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
180
Compose for Webを始めよう
yt8492
0
370
Compose Multiplatform 1.0.0
yt8492
0
150
Other Decks in Programming
See All in Programming
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
950
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
300
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
150
楽しく向き合う例外対応
okutsu
0
710
読まないコードリーディング術
hisaju
0
110
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
160
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
340
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
240
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
220
PEPCは何を変えようとしていたのか
ken7253
3
290
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
A designer walks into a library…
pauljervisheath
205
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Statistics for Hackers
jakevdp
797
220k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Producing Creativity
orderedlist
PRO
344
40k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Git: the NoSQL Database
bkeepers
PRO
428
65k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
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