Kotlin Playground WordPress Plugin

2023年10月11日

概要

Kotin Playground に、プログラムコードを記載するとオンラインで実行できます。

WordPress で記載する際に、Kotlin Playground での実行を埋め込むことができるプラグインが公開されています。

最近の WordPress のブロックエディタになったあとにどうやって動かすかについて、日本語の情報もほとんど見つからなかったので、試してみた結果を記載しておきます。

Kotlin Playground WordPress Plugin

Kotlin Playground WordPress Plugin は、以下で公開されています。

https://github.com/Kotlin/kotlin-playground-wp-plugin

紹介されている jetbrains 社のブログは以下です。

https://blog.jetbrains.com/kotlin/2018/04/embedding-kotlin-playground/

Kotlin Playground WordPress Plugin 追加方法

WordPress のプラグインから検索しても出てきませんので、手動でプラグインを追加する必要があります。

1. 配布サイトからダウンロードします。

https://github.com/Kotlin/kotlin-playground-wp-plugin

ページ中ほど、[Download latest release.] のリンクからダウンロードします。

2. ダウンロードした kotlin-playground-wp-plugin.zip を WordPress に追加します。

[WordPress 管理画面] – [プラグイン] – [新規追加] – [プラグインのアップロード] をクリック、さらに [ファイルを選択] をクリックし、kotlin-playground-wp-plugin.zip を選択しアップロードします。

3. 追加出来たら、[有効化] をクリックします。

利用方法

配布サイトに記載されている通り、Playground で実行したコードを [kotlin] と [/kotlin] で囲むだけです。

ただし、Kotlin Playground WordPress Plugin は、WordPress5.0 より前にリリースされており、いわゆるクラシックエディアでの利用が想定されていたようで、最近のブロックエディタで利用する場合は、少し工夫が必要です。

ブロックエディタ (Gutenberg) での利用方法

ブロックエディタでの文章を編集に、単に [kotlin] と [/kotlin] で Kotlin のコードを囲んでもうまく動作しませんでした。これは 段落替えや改行のための HTML タグが自動的挿入されてしまうためでした。
そこで、ブロックエディタで使う場合は [カスタム HTML] のブロックを利用します。

編集画面の左上の [+] をクリックし、[カスタム HTML] のブロックをクリックします。

その中で、kotlin のコードを記載し、以下のように [kotlin] と [/kotlin] で囲みます。

実際に記載した例

以下が実際に記載した例です。
右上の▶をクリックすると Playground で実行され、結果がその下に表示されることが確認できると思います。

例1)

fun main(){
    println("Hello, world!")
}

例2) そこそこ長いのも動くのでありがたいです。

interface Person {
    val personName : String
    val personAge : Int
}

interface thingsTodo {
    fun greeting()
    fun commuting()
}

class Employee (name: String, age : Int, val empid : Int = 0) : Person, thingsTodo{
    override val personName = name
    override val personAge = age
    override fun greeting() {
        println("私は ${personName} です。年齢は ${personAge} 才です。社員番号は ${empid} です。")
    }
    override fun commuting() {
        println("会社に通います。")
    }
}

class Student (name: String, age : Int, val studenid : Int = 0) : Person,thingsTodo{
    override val personName = name
    override val personAge = age
    override fun greeting() {
        println("私は ${personName} です。年齢は ${personAge} 才です。学籍番号は ${studenid} です。")
    }
    override fun commuting() {
        println("学校に通います。")
    }
}

fun main(){
    val myEmployeeObj : Employee = Employee("HogeHoge", 24, 20210001)
    val myStudentObj : Student = Student("foobar", 16, studenid = 20221234)

    myEmployeeObj.greeting()
    myEmployeeObj.commuting()

    myStudentObj.greeting()
    myStudentObj.commuting()

}

補足

auto-indent はうまく機能しないようなので、手動でインデントしてから カスタムHTML のブロックに記載する必要があります。
(これは、コードブロックを使う場合などと同様だと思います。)

一度 Intellij IDEA などに、Kotlin のプログラムコードを記述 (あるいはほかで書いてコピー & ペースト) して、整形してからカスタムHTMLに張り付けるのがよいかと思います。

追加参考情報

WordPress に限らず、HTML ブロック要素からコードを実行できる Kotlin 対応エディターを作成するコンポーネントの作成方法は以下に記載があります。

https://jetbrains.github.io/kotlin-playground/