Upgrade to Pro — share decks privately, control downloads, hide ads and more …

fukuoka_kt_1

6cdb33045501f0d30733e9cdfb739f7e?s=47 gupuru
July 05, 2017
Technology
0
57

 fukuoka_kt_1

https://cdg.connpass.com/event/60570/

6cdb33045501f0d30733e9cdfb739f7e?s=128

gupuru

July 05, 2017
Tweet

More Decks by gupuru

See All by gupuru
ng-fukuoka-meetup-1
6cdb33045501f0d30733e9cdfb739f7e?s=48 gupuru
0
260
AngularとAzureのCustom Vision Serviceを使って 画像認識サイトを作ってみた
6cdb33045501f0d30733e9cdfb739f7e?s=48 gupuru
0
460
紙について少し詳しくなる10分間
6cdb33045501f0d30733e9cdfb739f7e?s=48 gupuru
0
260
make bot, fun bot
6cdb33045501f0d30733e9cdfb739f7e?s=48 gupuru
0
240
firebase勉強会資料
6cdb33045501f0d30733e9cdfb739f7e?s=48 gupuru
3
710
iOS and Android SVG
6cdb33045501f0d30733e9cdfb739f7e?s=48 gupuru
0
280
Firebaseについて
6cdb33045501f0d30733e9cdfb739f7e?s=48 gupuru
1
160
BLEを使って、すれ違い通信をやってみるよー
6cdb33045501f0d30733e9cdfb739f7e?s=48 gupuru
0
1.7k
HiyokoDeveloperMeeting
6cdb33045501f0d30733e9cdfb739f7e?s=48 gupuru
1
110

Other Decks in Technology

See All in Technology
Azure DevOps Online Vol.6 - 業務で必要なCIをみんなで考えよう
10be5c6d7c18735c1169520e55e15214?s=48 kkamegawa
0
290
DevRel組織についての考察
57c9c4b846c73c911cbf795d211904f3?s=48 taijihagino
PRO
0
150
ログ集約基盤をCloudWatchからOpenSearchに変えてみた
098ad475722e3697ec2fba28c8654f9f?s=48 yuhta28
0
140
ECS on EC2 で Auto Scaling やってみる！
5a6e159c3f74fb7bd85e62efe5f34e2b?s=48 sayjoy
1
290
セキュアなTerraformの使い方 ～ 機密情報をコードに含めず環境構築するにはどうしたらいいの？
5f0f8883d90b46e581fe41ba9ae4cfe9?s=48 harukasakihara
9
1.6k
Step-by-Step MLOps and Microsoft Products
0fa6038e477031fcca028bab0efe07e3?s=48 shisyu_gaku
2
610
第22回 MLOps 勉強会：みてねのMLOps事情
25aaaf4419caea6083d18c4116e8faef?s=48 tonouchi510
1
1.1k
開発環境のセキュリティおよびCI/CDパイプラインのセキュア化
Dc03bf56cb3157b6036f9818593d7e40?s=48 rung
PRO
12
5.2k
psql, my favorite tool!
18749909c147a9ee98f6b112911943cc?s=48 nuko_yokohama
1
180
質の良い”カイゼン”の為の質の良い「振り返り」
Bf7fe621f4fe1615c228ef8a79b87282?s=48 shirayanagiryuji
0
130
Continuous Architecture Design for Modernization
9b63847a4c413a2604e1d64e5d595dab?s=48 humank
3
550
eBPFで実現するコンテナランタイムセキュリティ / Container Runtime Security with eBPF
2f73f93f91c4401b0baf12029226a681?s=48 tobachi
PRO
5
1.9k

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
351
21k
Build your cross-platform service in a week with App Engine
5f83ef806155b403c3393160ce51f955?s=48 jlugia
219
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
Docker and Python
Ecdea9b9714877b86cee08458f085481?s=48 trallard
27
1.6k
GraphQLの誤解/rethinking-graphql
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
31
6.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
29
4.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
212
20k
Stop Working from a Prison Cell
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
262
17k
Design by the Numbers
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
271
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
7
1.1k
Building Flexible Design Systems
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
310
34k
Building an army of robots
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
299
40k

Transcript

  1. WebͰKotlinʂ Kotlin to JavaScript

  2. About me ৽ݟ ߊฏ ϑϩϯτΤϯυͱػցֶशͷΤϯδχΞʹͳΖ͏ͱؤு͍ͬͯ ·͢(ʆɾωɾ´) • Twitter: @gupuru •

    GitHub: gupuru
  3. None

  4. Kotlin 1.1ͰɺJavaScriptαϙʔτ͞Ε·ͨ͠ʂ JavaScript͕kotlinͰॻ͚·͢(ʆɾТɾ´) https://blog.jetbrains.com/jp/2017/03/01/739

  5. ͪͳΈʹɺ͜Εࢼͨ͜͠ͱ͕͋Δਓɺ ڍखϊʢসʣ

  6. ͸͡ΊʹಋೖͩΑ(ʆɾТɾ´)

  7. ͜ͷ4ͭͷํ๏͕͋ΔΑ(ʆɾТɾ´) • Gradle • Maven • IntelliJ IDEA • Command

    Line

  8. IntelliJ IDEA

  9. ࠷ॳ͸ɺ͜Μͳײ͡ͷϓϩδΣΫτߏ੒͓ͩ(ʆɾТɾ´)

  10. Build͢Δͱɺout͕Ͱ͖Δ͓(ʆɾТɾ´)

  11. Buildͯ͠ɺͰ͖ͨϑΝΠϧΛHTMLଆͰݺΜͰ͋͛Δͱ࢖͑Δ͓(ʆɾТɾ´) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ΘΜ͜</title> </head>

    <body> <script type="text/javascript" src="out/production/wanko/lib/kotlin.js"></script> <script type="text/javascript" src="out/production/wanko/wanko.js"></script> </body> </html>

  12. ࢒Γͷํ๏͸ɺ͜͜ݟͯ(ʆɾТɾ´) https://kotlinlang.org/docs/tutorials/javascript/kotlin-to-javascript/kotlin-to-javascript.html

  13. ࣮ࡍʹॻ͍ͯΈΔΑ(ʆɾТɾ´)

  14. ͜Μͳײ͡ʹॻ͘Α(ʆɾТɾ´) fun main(args: Array<String>) { val message = "͍͵ɺ͔Θ͍͍" println(message)

    }

  15. HTML͸͜Μͳײ͡(ʆɾТɾ´) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>wanko</title> </head>

    <body> <script type="text/javascript" src="out/production/inukawaii/lib/kotlin.js"></script> <script type="text/javascript" src="out/production/inukawaii/inukawaii.js"></script> </body> </html>

  16. ͜Μͳײ͡ʹม׵͞Ε͍ͯΔΑ(ʆɾТɾ´) if (typeof kotlin === 'undefined') { throw new Error("Error

    loading module 'kotlinJS'. Its dependency 'kotlin' was not found. Please, check whether 'kotlin' is loaded prior to 'kotlinJS'."); } var kotlinJS = function (_, Kotlin) { 'use strict'; var println = Kotlin.kotlin.io.println_s8jyv4$; function main(args) { var message = '\u3044\u306C\u3001\u304B\u308F\u3044\u3044'; println(message); } _.main_kand9s$ = main; Kotlin.defineModule('kotlinJS', _); main([]); return _; }(typeof kotlinJS === 'undefined' ? {} : kotlinJS, kotlin);

  17. গ͚ͩ͠ಈ͖͚ͭͯΈΔ͓(ʆɾТɾ´)

  18. kotlin͓ͩ(ʆɾТɾ´) fun main(args: Array<String>) { val inputText: HTMLInputElement = document.getElementById("inputText")

    as HTMLInputElement val button: HTMLButtonElement = document.getElementById("button") as HTMLButtonElement button.onclick = { window.alert(inputText.value) } }

  19. HTML͓ͩ(ʆɾТɾ´) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ΘΜΘΜ</title> </head>

    <body> <input id="inputText" type="text" value="" title="ͳʹ͔͍Εͨ·͑"> <button id="button">͋Βʔͱͩ͢Α</button> <script type="text/javascript" src="out/production/kotlinJS/lib/kotlin.js"></script> <script type="text/javascript" src="out/production/kotlinJS/kotlinJS.js"></script> </body> </html>

  20. ͜Μͳײ͡ม׵͞Ε͍ͯΔΑ(ʆɾТɾ´) if (typeof kotlin === 'undefined') { throw new Error("Error

    loading module 'kotlinJS'. Its dependency 'kotlin' was not found. Please, check whether 'kotlin' is loaded prior to 'kotlinJS'."); } var kotlinJS = function (_, Kotlin) { 'use strict'; function main$lambda(closure$inputText) { return function (it) { window.alert(closure$inputText.value); }; } function main(args) { var tmp$, tmp$_0; var inputText = Kotlin.isType(tmp$ = document.getElementById('inputText'), HTMLInputElement) ? tmp$ : Kotlin.throwCCE(); var button = Kotlin.isType(tmp$_0 = document.getElementById('button'), HTMLButtonElement) ? tmp$_0 : Kotlin.throwCCE(); button.onclick = main$lambda(inputText); } _.main_kand9s$ = main; main([]); Kotlin.defineModule('kotlinJS', _); return _; }(typeof kotlinJS === 'undefined' ? {} : kotlinJS, kotlin);

  21. ͞Βʹಈ͖͚ͭͯΈΔΑ(ʆɾТɾ´)

  22. NodeͷαʔόΛͨͯͯΈΔ͓(ʆɾТɾ´)

  23. package.json͓ͩ(ʆɾТɾ´) { "name": "wankoserver", "version": "1.0.0", "description": "", "main": "index.js",

    "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "gupuru", "license": "MIT", "dependencies": { "express": "^4.15.3", "kotlin": "^1.1.0" } }

  24. gradle͓ͩ(ʆɾТɾ´) group 'wanko-express' version '1.0' buildscript { ext.kotlin_version = '1.1.1'

    repositories { mavenCentral() } dependencies { classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" } } apply plugin: 'kotlin2js' repositories { mavenCentral() } dependencies { compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version" } compileKotlin2Js.kotlinOptions { moduleKind = "commonjs" outputFile = "node/index.js" }

  25. kotlin͓ͩ(ʆɾТɾ´) external fun require(module:String):dynamic fun main(args: Array<String>) { println("wanwan start")

    val express = require("express") val app = express() app.get("/", { req, res -> res.type("text/plain") res.send("wanko kawaii") }) app.listen(3000, { println("port: 3000") }) }

  26. ͜Μͳײ͡ม׵͞Ε͍ͯΔ͓(ʆɾТɾ´) (function (_, Kotlin) { 'use strict'; var println =

    Kotlin.kotlin.io.println_s8jyv4$; function main$lambda(req, res) { res.type('text/plain'); return res.send('wanko kawaii'); } function main$lambda_0() { println('port: 3000'); } function main(args) { println('wanwan start'); var express = require('express'); var app = express(); app.get('/', main$lambda); app.listen(3000, main$lambda_0); } _.main_kand9s$ = main; Kotlin.defineModule('index', _); main([]); return _; }(module.exports, require('kotlin')));

  27. ৄ͘͠͸ɺ͜͜Έͯ(ʆɾТɾ´) • https://github.com/miquelbeltran/kotlin-node.js

  28. ·ͱΊ

  29. Kotlinָ͍͠(ʆŋТŋ´)

  30. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ