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
40
Android Autoが思ったよりしんどい話
yt8492
0
150
apollo-kotlinにcontributeした話
yt8492
0
74
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
710
今だからこそ知りたいKotlin Multiplatform
yt8492
0
240
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
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
900
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
630
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
RubyLSPのマルチバイト文字対応
notfounds
0
120
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
980
Jakarta EE meets AI
ivargrimstad
0
230
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
150
Functional Event Sourcing using Sekiban
tomohisa
0
100
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
610
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Being A Developer After 40
akosma
87
590k
How to Ace a Technical Interview
jacobian
276
23k
What's in a price? How to price your products and services
michaelherold
243
12k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
The Language of Interfaces
destraynor
154
24k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
GraphQLとの向き合い方2022年版
quramy
43
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