【Kotlin】【Android】RxJavaとUniRxの対応表を作ってみたい 1
はじめに
この記事はRxJava Advent Calendar 2016の2日目に勢いのみでつっこもうとしている記事です。
それはさておき。
先月参加したKansai.kt #2でReactiveProgrammingとRxJavaの話を聞いて以降、本を読みつつコードを書いてみたりしています。
その中で、(お仕事ではUnityを使うことが多く、UniRxも導入しているため)UniRxと同じような処理から書いてみるととっつきやすいんじゃね?と思い立ったため、思いつく順番でそれぞれのコードを書いてみたいと思います。
なおRxJavaの方はAndroid環境で実行しており、言語はKotlinを使います。
環境
- Unity 5.5
IntelliJ IDEA 2016.3
UniRx 5.5
- Kotlin v1.0.5-release-IJ2016.3-2
準備
UniRx
UniRxをインポートしたUnityプロジェクトを作成します。
RxJava
後述しますが、RxJava、RxAndroid、RxBindingを使います(ついでにDataBindingも有効にしています)。
build.gradle
apply plugin: 'com.android.application' apply plugin: 'kotlin-android' android { compileSdkVersion 25 buildToolsVersion "25.0.0" defaultConfig { applicationId "jp.masanori.kandroidtest" minSdkVersion 19 targetSdkVersion 25 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } sourceSets { main.java.srcDirs += 'src/main/kotlin' } dataBinding { enabled = true } packagingOptions { exclude 'META-INF/rxjava.properties' } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) compile 'com.android.support:appcompat-v7:25.0.1' compile 'io.reactivex.rxjava2:rxandroid:2.0.1' compile 'com.jakewharton.rxbinding:rxbinding-appcompat-v7-kotlin:1.0.0' compile 'io.reactivex.rxjava2:rxjava:2.0.1' testCompile 'junit:junit:4.12' compile "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version" kapt 'com.android.databinding:compiler:1.0-rc5' } repositories { mavenCentral() } kapt { generateStubs = true }
ボタンクリックのイベント
なんとなくGUIから始めます。
ボタンをクリックしたときのイベントを取得してみます。
UniRx
using UnityEngine; using UnityEngine.UI; using UniRx; public class MainCtrl: MonoBehaviour{ public Button startButton; private void Start(){ // ボタンにクリックイベントを追加する. startButton.onClick.AsObservable() .Subscribe(_ => Debug.Log("クリックされました")); } }
RxJava
RxJavaでは上記のようにボタンクリックを取得することはできないようです。
まぁAndroid用に作られたものではないため、当然といえば当然なのですが。。。
ではどうするかといいますと、RxBindingを使用します。
準備のところで書いたように、「compile 'com.jakewharton.rxbinding:rxbinding-appcompat-v7-kotlin:1.0.0'」を追加します。
なおJavaで書く場合は「-kotlin」の部分を削除してください。
ここでRxJava2を使っていて、「compile ~」だけを追加した場合に「com.android.builder.packaging.DuplicateFileException」が発生します。
どうもRxJava1系と2系が競合してしまうらしく、下記を追加する必要があります。
~省略~ android{ ~省略~ packagingOptions { exclude 'META-INF/rxjava.properties' } } ~省略~
あとは下記のようにボタンのクリックイベントを取得できるようになります。
import android.databinding.DataBindingUtil import android.support.v7.app.AppCompatActivity import android.os.Bundle import android.util.Log import com.jakewharton.rxbinding.view.RxView import io.reactivex.disposables.CompositeDisposable import jp.masanori.kandroidtest.databinding.ActivityMainBinding class MainActivity : AppCompatActivity() { lateinit private var binding: ActivityMainBinding override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) binding = DataBindingUtil.setContentView(this, R.layout.activity_main) // ボタンにクリックイベントを追加する. RxView.clicks(binding.startButton).subscribe { Log.d("RxTest", "クリックされました") } } }
一定時間ごとに処理を行う
次は一定時間ごとに処理を行ってみます。
UniRx
private void Start () { // 500ミリ秒ごとにログ出力. var intervalObservable = Observable.Interval(System.TimeSpan.FromMilliseconds(500d)) .Subscribe(time => Debug.Log("経過: " + time)); // 画面遷移などのタイミングでDisposeを実行して接続を解除する. // intervalObservable.Dispose(); }
RxJava
import android.support.v7.app.AppCompatActivity import android.os.Bundle import android.util.Log import com.jakewharton.rxbinding.view.RxView import rx.Observable import rx.schedulers.Schedulers import java.util.concurrent.TimeUnit class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) // 500ミリ秒ごとにログ出力. val intervalObservable = Observable.interval(500, TimeUnit.MILLISECONDS, Schedulers.io()) .subscribe { Log.d("RxTest", "経過:" + it) } // 画面遷移などのタイミングで接続を解除する. // intervalObservable.unsubscribe() } }
RxJavaの方ではIDisposableが継承されていないようで、DisposeはできずUnsubscribeするのみとなっています。
処理の書き方自体はかなり近い感じですね。
一定時間後に処理を行う
一定時間が経過したら処理を行います。
UniRx
private void Start () { var timerObservable = Observable.Timer(System.TimeSpan.FromSeconds(3d)) .Subscribe(time => Debug.Log("3秒経過しました")); //timerObservable.Dispose(); }
RxJava
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val timerObservable = Observable.timer(3, TimeUnit.SECONDS) .subscribe { Log.d("RxTest", "3秒経過しました") } // timerObservable.unsubscribe() }
おわりに
細かい違いはともかく、同じものを元にしているだけに大部分の書き方や考え方は共通化されていて助かります。
とりあえずしばらくはこんな感じでバラバラと挙げていって、量が溜まってきたら別途整理、といったところでしょうか。
参考
RxJava
UniRx
RxAndroid
RxBinding
Kansai.kt #2で発表してきました
はじめに
11/26に行われたKansai.kt #2で、ラムダ式について発表してきました。
資料
テーマについて
このテーマにした理由は、そもそも私がKotlinに触るきっかけになったことが、 Androidで使うことができること、前回のテーマとしたNull安全、そしてラムダ式がAndroidでも使えるということでした。
Null安全の発表については(一応)挑戦したため、もう一つのラムダ式に挑戦した、ということです。
内容について
これまでなんとなくコードを書いたことはあったものの、どういう関数がラムダ式として書けるのか、 そもそもラムダ式ってなんぞやといったところはわかっていなかったため、そこに少しでも触れられたことは良かったと思います。
ただ、20~30分の発表時間を結構余らせてしまったため、もっと色々なところに突っ込んだり、 もしくはせっかく以前Scala Kansai Summitに参加させてもらったので、関数型プログラミング的なアプローチをしてみる、といったところに挑戦しても良かったのかもしれません。
これは発表する・しないはともかく今後挑戦してみたいですね。
他の方の発表について
次期バージョンであるKotlin1.1のお話、Android開発におけるJavaからKotlinにコンバートした後にやるべき処理、IntelliJ IDEAのPostfixコード補完のお話と、どれも興味深く自分も取り入れていきたいな、と思いながら聞いていました。
そして結果的に今回のメインになったと言っても過言ではないReactiveProgrammingとRxJavaのお話。 AndroidでRxJavaに触れたり、UnityでUniRxを利用していたりと、Rx自体には普段から触れているものの、概念・考え方というところではなんとなくのところが多すぎる気はしていたので、基礎的な部分からガッツリお話していただけたのはありがたかったです。
CyberMondayでセール中だったこともあり本も購入してしまいましたので、こちらも進めていきたいです。
Reactive Programming with RxJava - O'Reilly Media
おわりに
Kotlinに限ったことではありませんが、Androidなどのアプリケーションを作る手法だけでなく、言語自体に対して学ぶ、というのもとても楽しく、また有意義だと思います。
次回は内容が変わるらしいというお話もあるので?どうなるかは分かりませんが、 発表の機会があればより内部の突っ込んだところまでいけるように頑張ります。
スポンサーとなっていただいたはてな様、主催者の皆様、そして参加者の皆様、本当にありがとうございましたm( )m
Kotlin Koansやってみたメモ Conventions編
- はじめに
- Conventions - In range
- Conventions - Range to
- Conventions - For loop
- Conventions - Operators overloading
- Conventions - Invoke
はじめに
前回の続きです。
今回はConventionsにトライしたときのメモです。
ここではまずComparisonで下記のようなDataクラスを作り、これをベースに問題を解いていきます。
data class MyDate(val year: Int, val month: Int, val dayOfMonth: Int) : Comparable{ override fun compareTo(other: MyDate) = when { year != other.year -> year - other.year month != other.month -> month - other.month else -> dayOfMonth - other.dayOfMonth } }
このクラスではComparableを継承し、compareToで日付の比較ができるようにしています。
Conventions - In range
KotlinではOperatorを オーバーロードすることができます。
例えば下記のTestDataクラス同士は、「+」または「plus」で足し合わせることができます。
data class TestData(var num: Int, var text: String){ operator fun plus(addData: TestData): TestData = TestData(this.num + addData.num, this.text + addData.text) } @Throws(IOException::class) override fun start(primaryStage: Stage) { var originaldata = TestData(0, "test") var adddata = TestData(1, "2") // どちらもOK originaldata = originaldata.plus(adddata) originaldata = originaldata + adddata }
で、ここではある日付(MyDate)が指定の期間内に含まれるかをチェックするため、containsを持つDataRangeクラスを作成します。
class DateRange(val start: MyDate, val endInclusive: MyDate){ operator fun contains(item: MyDate) = item >= start && item <= endInclusive }
Kotlin Koansではこのクラスを「in」を使って利用しています。
@Throws(IOException::class) override fun start(primaryStage: Stage) { val dateTarget = MyDate(2016, 10, 9) val dateFirst = MyDate(2016, 9, 30) val dateLast = MyDate(2017, 11, 1) // Trueが返る val result = checkInRange(dateTarget, dateFirst, dateLast) } fun checkInRange(date: MyDate, first: MyDate, last: MyDate): Boolean { return date in DateRange(first, last) }
他にも下記のように呼び出すことも可能です。
@Throws(IOException::class) override fun start(primaryStage: Stage) { val dateTarget = MyDate(2016, 10, 9) val dateFirst = MyDate(2016, 9, 30) val dateLast = MyDate(2017, 11, 1) val dataRange = DateRange(dateFirst, dateLast) // Trueが返る var result = dataRange.contains(dateTarget) }
なお、containsで日付を比較するところでは、先に実装しているcompareToが呼ばれます。
Conventions - Range to
MyDateクラスに日付の範囲を返すrangeToを追加します。
operator fun MyDate.rangeTo(other: MyDate) = DateRange(this, other) class DateRange(override var start: MyDate, override val endInclusive: MyDate): ClosedRangefun checkInRange(date: MyDate, first: MyDate, last: MyDate): Boolean { return date in first..last }
ある日付(date)が日付の範囲(firstからlast)に含まれるかを確認している「date in first..last」は、下記のように書くことも可能です。
val dateTarget = MyDate(2016, 10, 9) val dateFirst = MyDate(2016, 9, 30) val dateLast = MyDate(2017, 11, 1) // 日付の範囲(DataRange)を作る val dateRange = dateFirst.rangeTo(dateLast) // Trueが返る val res = dateRange.contains(dateTarget)
ここで気になったのがDateRangeクラス。
引数がOverrideされていて、Kotlinてこんなこともできるのかぁ(こなみかん)という感じだったのですが、これはClosedRangeクラスを継承しているためのようです。
サブクラスで引数の値を変更するにはOverrideが必要、という。
Conventions - For loop
For-loop rangeについて。
ここではDateUtil.ktも使って解いていくのですが、面倒なので一つのクラスにまとめて書いていたらちょっとハマりましたorz
data class MyDate(val year: Int, val month: Int, val dayOfMonth: Int) : Comparable{ override fun compareTo(otherItem: MyDate) = when { year != otherItem.year -> year - otherItem.year month != otherItem.month -> month - otherItem.month else -> dayOfMonth - otherItem.dayOfMonth } } operator fun MyDate.rangeTo(other: MyDate) = DateRange(this, other) inner class DateRange(val start: MyDate, val end: MyDate): Iterable { override fun iterator(): Iterator = DateIterator(this) } fun MyDate.nextDay() = addTimeIntervals(TimeInterval.DAY, 1) enum class TimeInterval { DAY, WEEK, YEAR } fun MyDate.addTimeIntervals(timeInterval: TimeInterval, number: Int): MyDate { val c = Calendar.getInstance() c.set(year + if (timeInterval == TimeInterval.YEAR) number else 0, month, dayOfMonth) var timeInMillis = c.getTimeInMillis() val millisecondsInADay = 24 * 60 * 60 * 1000L timeInMillis += number * when (timeInterval) { TimeInterval.DAY -> millisecondsInADay TimeInterval.WEEK -> 7 * millisecondsInADay TimeInterval.YEAR -> 0L } val result = Calendar.getInstance() result.setTimeInMillis(timeInMillis) return MyDate(result.get(Calendar.YEAR), result.get(Calendar.MONTH), result.get(Calendar.DATE)) } inner class DateIterator(val dateRange:DateRange) : Iterator { var current: MyDate = dateRange.start override fun next(): MyDate { val result = current current = current.nextDay() return result } override fun hasNext(): Boolean = current <= dateRange.end } fun iterateOverDateRange(firstDate: MyDate, secondDate: MyDate, handler: (MyDate) -> Unit) { for (date in firstDate..secondDate) { handler(date) } }
- DateRange、DateIteratorクラスは「inner」をつけて内部クラスにする必要があり、ただネストしただけでは外側にある「MyDate.nextDay()」などにアクセスできません。
Iterable、Iterator
この問題では、for文である期間(firstDate)からある期間(SecondDate)までの日をhandlerに渡す、という処理を作ります。
で、まず「date in firstDate..secondDate」を実現するために「Iterable
Iteratorでは渡された日付が「secondDate」より前かを確認する「hasNext」と、次の日を返す「next」を実装しています。
Conventions - Operators overloading
日付の足し算と、それを繰り返して処理するためのクラスを作ります。
で、そうそうにギブアップしましてorz、答えを見てみました。
data class MyDate(val year: Int, val month: Int, val dayOfMonth: Int) enum class TimeInterval { DAY, WEEK, YEAR } operator fun MyDate.plus(timeInterval: TimeInterval): MyDate = addTimeIntervals(timeInterval, 1) fun task1(today: MyDate): MyDate { return today + TimeInterval.YEAR + TimeInterval.WEEK } class RepeatedTimeInterval(val timeInterval: TimeInterval, val number: Int) operator fun TimeInterval.times(number: Int) = RepeatedTimeInterval(this, number) operator fun MyDate.plus(timeIntervals: RepeatedTimeInterval) = addTimeIntervals(timeIntervals.timeInterval, timeIntervals.number) fun task2(today: MyDate): MyDate { return today + TimeInterval.YEAR * 2 + TimeInterval.WEEK * 3 + TimeInterval.DAY * 5 } fun MyDate.addTimeIntervals(timeInterval: TimeInterval, number: Int): MyDate { val c = Calendar.getInstance() c.set(year + if (timeInterval == TimeInterval.YEAR) number else 0, month, dayOfMonth) var timeInMillis = c.getTimeInMillis() val millisecondsInADay = 24 * 60 * 60 * 1000L timeInMillis += number * when (timeInterval) { TimeInterval.DAY -> millisecondsInADay TimeInterval.WEEK -> 7 * millisecondsInADay TimeInterval.YEAR -> 0L } val result = Calendar.getInstance() result.setTimeInMillis(timeInMillis) return MyDate(result.get(Calendar.YEAR), result.get(Calendar.MONTH), result.get(Calendar.DATE)) }
とりあえずtask1の方は問題なさそうですね。MyDateに対して「+」を使ったときに、関数オブジェクト「addTimeIntervals」が呼ばれるようにする、と。
ちなみに、関数オブジェクトの書き方が以前は「operator fun MyDate.plus(timeInterval: TimeInterval): MyDate = ::addTimeIntervals」のようになっていましたが、仕様変更があったのですね(今更感)。
問題はtask2の方。
MyDateに対して「* 数値」が行われた場合に、「+」をその数値文繰り返す、という内容となります。
で、この繰り返しを担う関数が「times」です。
「TimeInterval.times(number: Int)」で「RepeatedTimeInterval」というクラスが返されるようにしています。
で、このままだと「+」の型が違う(´;ω;`)とエラーになるので、「MyDate.plus(timeIntervals: RepeatedTimeInterval)」で対応、という流れです。
これ、今もなお答え見ないと回答できる気がしない...orz
Conventions - Destructuring declarations
Data クラスは分割して個別に扱うことができます、という内容でした。
data class MyDate(val year: Int, val month: Int, val dayOfMonth: Int) @Throws(IOException::class) override fun start(primaryStage: Stage) { val date = MyDate1(2016, 11, 12) val (year, month, dayOfMonth) = date println(year.toString()) println(month.toString()) println(dayOfMonth.toString()) }
こんな感じ。
Conventions - Invoke
最後はInvokeの問題。
class Invokable { public var numberOfInvocations: Int = 0 private set operator public fun invoke(): Invokable { numberOfInvocations++ return this } } fun invokeTwice(invokable: Invokable) = invokable()()
例えば下記のようにすると「invoke()」が2回呼ばれるので「numberOfInvocations」の値は2になります。
@Throws(IOException::class) override fun start(primaryStage: Stage) { // 初期化時はnumberOfInvocations = 0 var invokable = Invokable() // invoke()が二回呼ばれるのでnumberOfInvocations = 2 invokable()() }
このInvokeですが、ググってみるとカリー化と呼ばれる複数の引数を持つ一つの関数を、一つの引数を持つ複数の関数に置き換える際に登場しているようです。
これについてはこの辺りが参考になりそうです。
おわりに
ConventionsではKotlin特有のテクニック、というよりはKotlinを使って「+」などのオペレーターを自分で作ることで言語仕様に触れる、という内容だった気がします。
正直まだ回答を見ながらふむふむそういう風に書くのか、と思っているだけの状態ではあるので、時間を置いてもう少し理解できるようになったら追記するか別に訂正記事を書こうかと思います。
本当は11/26のKansai.ktまでに、次のCollectionsまで行きたかったところですが、このペースだと資料作る時間もなくなりそうなので一旦ストップしてそちらの準備を進めたいと思います。
参考
- Kotlin Koans - Try Kotlin
- Reference - Kotlin Programming Language
- Kotlinスタートブック──新しいAndroidプログラミング──
- WEB+DB PRESS Vol.94
Operator overloading
- Operator overloading - Kotlin Programming Language
- 【Kotlin】 OperatorとInfixでCustom operatorを作る - Qiita
ClosedRange
Iterator
分解宣言
カリー化
Kotlin Koansやってみたメモ Introduction編
- はじめに
- Introduction - Extension functions
- Introduction - Object expressions
- Introduction - SAM conversions
- Introduction - Extension functions on collections
- 参考
はじめに
今月11月26日に2回目のKansai.ktが行われます。
ワーパチパチ
ということで、今更ながらKotlin Koansにトライしてみました。
すると結構答えまで見ても内容がよくわからず、あれこれ調べてみたりしたのでそのあたりをまとめていきます。
いつも以上にあやふやな内容になるかと思いますので、正しくは公式ドキュメントや赤べこ本など参照ということで。 (内容へのツッコミはお受けしますのでぜひどうぞm( )m)
Introduction - Extension functions
拡張関数について。
Int、Pairに対して有理数(RationalNumber)を返す「r」という関数を追加しています。
回答は下記です。
fun Int.r(): RationalNumber = RationalNumber(this, 1) fun Pair.r(): RationalNumber = RationalNumber(first, second) data class RationalNumber(val numerator: Int, val denominator: Int)
まず気になったのは、Int.r()にRationalNumberを渡すときの第二引数が1であること。
これは有理数の特徴である「分数であらわすことのできる数」を「第一引数/1」として元の値(第一引数)を変化させずに表現するため、ということのようです。
Pairは任意の2つの値を一纏めにするので、それぞれの値を第一、第二引数としています。
実際の利用には第二引数が0でないか、無理数でないかなどのチェックは必要そうです。
Introduction - Object expressions
オブジェクト式を使う問題。
回答はコチラ。
val arrayList = arrayListOf(1, 5, 2) Collections.sort(arrayList, object : Comparator{ override fun compare(x: Int, y: Int) = y - x })
Comparator の compare を使って要素をソートしており、「y - x」の結果がマイナスの場合はyをxより前方に配置する、といった感じで並び替えを行います。
Introduction - SAM conversions
先程オブジェクト式を使ったコード、実は無名関数を使って以下のように書くこともできます。
val arrayList = arrayListOf(1, 2, 3) Collections.sort(arrayList, { x, y -> y - x })
Comparator の compareのように、オーバーライドする関数が一つだけ(Single Abstract Method: SAM)の場合はそれを省略して記述することができます。
なお、引数の型を明示することも可能です。
val arrayList = arrayListOf(1, 2, 3) Collections.sort(arrayList, { x: Int, y: Int -> y - x })
ただ、無名関数を使うと呼び出しのたびにインスタンスが作成されることになるため、一度しか実行されない場合を除き、オブジェクト式を使う方が良いようです。
別件ですが、無名関数の引数をカッコ「()」でくくる((x: Int, y: Int) -> のようにする)とエラーになります(下記コメントも参照)。
Introduction - Extension functions on collections
readonlyとmutableについて。
Listはreadonlyのため、下記のように後から要素を追加しようとするとエラーになります。
val arrayList: List= arrayListOf(1, 2, 3) arrayList.add(0)
ただしImmutableではないので、ソートするなど値を変更することは可能です。というお話。
参考
- Kotlin Koans - Try Kotlin
- Reference - Kotlin Programming Language
- Kotlinスタートブック──新しいAndroidプログラミング──
- WEB+DB PRESS Vol.94
有理数
Pair
オブジェクト式
Comparator
抽象メソッド
関モバ #19で発表してきました
はじめに
10/26に行われた関モバ #19で発表してきました。
今回のネタは前回のWebVR。
https://masanori840816.github.io/KanMoba19/slidepage.html
緊張もしたし、時間も少しオーバーしたしで反省点も多いですが、まぁやりたいことはやれたかなと。
何より冒頭の ハロウィン -> 仮装 -> 仮想 -> 仮想現実 のネタがカブらなくて良かったww
準備
10月に入って多少は軽減されたものの、なんだか微妙に忙しく、資料の準備の時間が取れていなかったこともあり、思い切って一日休んで準備に当てることにしました。
で、作業する場所が必要ってことでコワーキングスペースに行くことにしました。
場所的に烏丸御池に近く、なかなか良かったと思います。
何より利用するのに何も聞かれなかったのが良かったw (以前利用した、住所など聞いてきたところが特殊だったのかもですが)
スライドについて
発表で使用するスライドは、いつもLibreOffice Impressで作ったものをPDFに変換してSlideShareにアップロードしていました。
ただ正直結構面倒で、内容がコード主体になるのだから、もっとシンプルで良いのでは?と思ったので、今回はGitHub PagesとRemark.jsを使って作成してみました。
GitHub Pages
GitHub PagesはGitHubを使って静的なWebページを表示できるサービスです。
GitHubで ユーザー名.github.io というリポジトリを作成し、「index.html」というファイルを直下に置いてやると、ユーザー名.github.ioというページにアクセスできるようになります。
https://masanori840816.github.io/
※空のindex.htmlを置いているので、アクセスしても真っ白なページが表示されるだけですが。
で、それは一旦置いておいて、もう一つ別にリポジトリを作成します。
そのリポジトリをcloneし、「git checkout gh-pages」でブランチを切り(オプション--orphanはつけている場合とつけていない場合がありました)、そこに後述するWebページの素材を置くことで、下記のようなページにアクセスできるようになります。
https://masanori840816.github.io/KanMoba19/slidepage.html
Remark.js
Remark.jsは、Markdown形式のファイルを読み込んでスライドっぽく表示してくれる、Javascriptのライブラリです。
使い方としては、Remark.jsを読み込んで、コンストラクタ生成時に読み込むファイルを指定するだけです。
slidepage.html
< !DOCTYPE html > < html lang="jp" > < head > < meta charset="UTF-8" / > < title >Mobile + Web + VR< /title > < style type="text/css" > @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz); @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic); @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic); < /style > < /head > < body style="color: #000000;"> < script src="js/remark-latest.min.js" type="text/javascript" >< /script > < script type="text/javascript" src="js/slidepage.js" >< /script > < /body > < /html >
slidepage.js
(function () { var slideshow = remark.create({sourceUrl: "md/mobilewebvr.md"}); }).call(this);
とってもシンプルですね。
で、あとはMarkdownで内容を書いていくだけです。
mobilewebvr.md
< div style='font-size: 80px; position:absolute; top:30%; left: 10%;' > Mobile + Web + VR < /div > < div style='font-size:40px; position: absolute; bottom: 5%; left: 5%;' > 2016.10.26 @関モバ < /div > < img id='top_image' src='img/pumpkin.png' style='width: 256px; height: 256px; position:absolute; bottom:2%; right:4%;' >< /img > --- # Who? ### Name: Masui Masanori ### Twitter: [@masanori_msl](https://twitter.com/masanori_msl) ### Blog: [vaguely](http://mslgt.hatenablog.com/) ### GitHub: https://github.com/masanori840816 ### App: [SearchWakayamaToilet](https://play.google.com/store/apps/details?id=jp.searchwakayamatoilet) --- ~省略~
- ページとページを区切るには、「---」を追加します。
- 縦幅から勝手にページを分けてくれるわけではないため、実際に表示させながら確認が必要となります。
1ページ目はあれこれ場所指定したり、画像を読み込んでいるためあんまりMarkdownっぽくはないですね…。
まぁでも、要素部分だけを書けば良いのは結構楽でもあります。
なお、コードを書く部分は`(バッククォテーションを使用します)
` ` ` xml body { width: 100%; height: 100%; background-color: #000; color: #fff; margin: 0px; padding: 0; overflow: hidden; } ` ` `
※各'の間のスペースは取り除いてください
この書き方が最初わからず、あれこれ試行錯誤してしまいまいした。
あと、作成中はWebVRと同じくSpringBootの雛形プロジェクトを使って動かしていました。
ローカルで動かすとWebブラウザのセキュリティで引っかからないようにする必要があったことと、GitHubPagesにアップしながら調整するのも不便なので。
とりあえず各ページの内容をザザッと書いてしまって、細かい見た目の調整はWebブラウザの開発ツールを使うと便利かと思います。
読み込んだ時点で表示しているページのソースしかいじれないとはいえ、リアルタイムで調整していけるのはすごいですね。
しかし、このシンプルさで問題ない場合はかなり便利に資料が作れてしまうのではないでしょうか。
いやぁ、Javascriptってスゴイですねぇ(小並感)
おわりに
会場提供及びスポンサーとなっていただいたはてな様、主催者の皆様、そして温かく発表を見守っていただいた皆様、ありがとうございましたm( )m
次回は(間に合えば)epubの読み込みとかやってみたいかも…?
参考
Remark.js
GitHubPages
three.js + WebVR BoilerplateでモバイルVR
はじめに
前回Spring Bootを使ってHTMLを表示するところまでやりました。
そのままAngularJSで何かサイトを作ろうと思っていたのですが、ちょっと予定を変更して、Webページ上でお手軽?なVRを試してみることにしました。
今回、下記のページを参考にthree.jsとwebvr-boilerplateを使って試してみました。
なおGitHubに上げてみました。
準備
まずthree.jsとwebvr-boilerplate、webvr-polyfill(webvr-boilerplateが依存)から、以下のファイルを取得してSpringBootのプロジェクト/src/main/resources/static/js に追加します。
three.js
- three.js-master/build/three.min.js
- three.js-master/examples/js/controls/VRControls.js
- three.js-master/examples/js/effects/VREffect.js
- three.js-master/examples/js/loaders/MTLLoader.js
- three.js-master/examples/js/loaders/OBJLoader.js
webvr-polyfill
- webvr-polyfill-master/build/webvr-polyfill.js
webvr-boilerplate
- webvr-boilerplate-master/build/webvr-manager.js
VRに限らず、three.jsはHTMLのcanvas上で動き、HTML自体に記述する処理は画面サイズの指定やJavascriptの読み込みくらいです。
mainpage.html
< !DOCTYPE html > < html lang="jp" > < head > < meta charset="UTF-8" / > < title>MainPage< /title > < meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"/ > < meta name="apple-mobile-web-app-capable" content="yes" / > < meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" / > < link rel='stylesheet' type="text/css" href="css/mainpage.css" / > < /head > < body > < script src='js/three.min.js' >< /script > < script src='js/VRControls.js' >< /script > < script src="js/VREffect.js" >< /script > < script src="js/webvr-polyfill.js" >< /script > < script src="js/webvr-manager.js" >< /script > < script src="js/MTLLoader.js" >< /script > < script src="js/OBJLoader.js" >< /script > < script src="js/mainpage.js" >< /script > < /body > < /html >
mainpage.css
body { width: 100%; height: 100%; background-color: #000; color: #fff; margin: 0px; padding: 0; overflow: hidden; }
3Dモデルを作る
画面に表示したい3Dモデルを作ります。
私はBlenderを使って作成してみました。Booleanを覚えるだけでも簡単なものならそれっぽく作成できて良いですね:)
ここで注意が必要なのは、モデルを三角形ポリゴンで構成することで、これを忘れて多角形ポリゴンが含まれた状態で読み込んでしまうと、面の一部が描画されなかったりします。
なおBlenderでの三角形化は Edit Modeで Mesh -> Faces -> Triangulate Faces でできます。
blender上では問題なく表示できるだけに、見逃しやすいポイントかと思います。
また今回は、obj形式でExportしておきます(pumpkin.obj、pumpkin.mtlのようなファイルが作成されます)。
作成したファイルはプロジェクトの /src/main/resources/static/models に置きます。
Sceneを作る
いよいよJavascriptのお話です。
まずはUnityと同じように、3Dモデルを表示するためのSceneを作ります。
mainpage.js
(function () { var renderer; var camera; var controls; var effect; var scene; var manager; var objectModel; var obj; this.initialize = function(){ renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // Sceneを作る scene = new THREE.Scene(); // カメラを生成 camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000); camera.position.set(0, 0, 0); // VR用コントローラを生成 controls = new THREE.VRControls(camera); // VR用エフェクトを生成(2分割の画面を構築する) effect = new THREE.VREffect(renderer); effect.setSize(window.innerWidth, window.innerHeight); // VRマネージャの生成 manager = new WebVRManager(renderer, effect); // 補助線を2000px表示する var axis = new THREE.AxisHelper(2000); // 中央に合わせるため 補助線の幅/2 分ずらす axis.position.set(0, -1, 0); scene.add(axis); ~省略~ }; this.animate = function(timestamp) { // VRコントローラを更新 controls.update(); // VRマネージャからシーンを描画 manager.render(scene, camera, timestamp); // ループして実行 requestAnimationFrame(animate); }; initialize(); // アニメーションの開始 animate(performance ? performance.now() : Date.now()); }).call(this);
上記を実行すると、3Dモデルがないので真っ黒ではありますが、もうCardboardのようなVR環境が整ってしまいます。
3Dモデルの読み込み
次は3Dモデルの読み込みです。
this.initializeに以下を追加します。
// まずMaterialの読み込み var mtlLoader = new THREE.MTLLoader(); mtlLoader.load("models/pumpkin.mtl", function(targetMaterial) { targetMaterial.preload(); // 読み込みが完了したらObjectを読み込む. var objLoader = new THREE.OBJLoader(); // 読み込んだMaterialをセット. objLoader.setMaterials(targetMaterial); objLoader.load("models/pumpkin.obj", function (targetObject) { // 読み込んだObjectのスケール値などをセット. objectModel = targetObject.clone(); objectModel.scale.set(1, 1, 1); objectModel.rotation.set(0, 3, 0); objectModel.position.set(0, 0, 0); // 読み込んだObjectをObject3Dに追加. obj = new THREE.Object3D(); obj.add(objectModel); // sceneに追加 scene.add(obj); }); });
- 情報によってはMaterialとObjectをTHREE.OBJMTLLoaderというクラスを使って一度に読み込んでいるものもありましたが、少なくとも私の環境ではエラーになってしまうため、別々に読み込んでいます。
- Objectを読み込んでいる最中に処理を行ったり、エラー発生時に何か処理を実行したい場合はObjLoader.loadの第三、第四引数にそれぞれメソッドを指定できます。
ライティング
先程追加した3Dモデルを照らすライトを追加します。こちらもthis.initializeに追加します。
// DirectionalLight - 指向性を持った光. var light = new THREE.DirectionalLight(0xffffff, 0.5); light.position.set(0, 0, 0); light.rotation.set(1, 1, 0); light.castShadow = true; scene.add(light); // AmbientLight - 光が当たる・当たらないにかかわらず各3Dモデルの色に影響を与える. var ambient = new THREE.AmbientLight(0xffffff, 0.5); ambient.castShadow = true; ambient.position.set(0,0,0); scene.add(ambient); // PointLight - 全方向に向けた豆電球のような?光. var pointlight = new THREE.PointLight(0xffffff, 0.8); pointlight.position.set(0.3, 0.4, -3); pointlight.scale.set(1, 1, 1); scene.add(pointlight);
- DirectionalLight、AmbientLightは場所による影響を受けないため、原点においています。
- PointLightは影を持たないため、castShadowは特に指定していません。
結果
このような結果になります。
画像はPCで表示しているため右下は最大化ボタンだけが表示されていますが、スマートフォンで表示させるとCardboardのボタンも表示され、押すと画面が二分割されます。
Javascriptのコードをまとめて載せておきます。
mainpage.js
(function () { var renderer; var camera; var controls; var effect; var scene; var manager; var objectModel; var obj; this.initialize = function(){ renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // Sceneを作る scene = new THREE.Scene(); // カメラを生成 camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000); camera.position.set(0, 0, 0); // VR用コントローラを生成 controls = new THREE.VRControls(camera); // VR用エフェクトを生成(2分割の画面を構築する) effect = new THREE.VREffect(renderer); effect.setSize(window.innerWidth, window.innerHeight); // VRマネージャの生成 manager = new WebVRManager(renderer, effect); // 補助線を2000px表示する var axis = new THREE.AxisHelper(2000); // 中央に合わせるため 補助線の幅/2 分ずらす axis.position.set(0, -1, 0); scene.add(axis); // まずMaterialの読み込み var mtlLoader = new THREE.MTLLoader(); mtlLoader.load("models/pumpkin.mtl", function(targetMaterial) { targetMaterial.preload(); // 読み込みが完了したらObjectを読み込む. var objLoader = new THREE.OBJLoader(); // 読み込んだMaterialをセット. objLoader.setMaterials(targetMaterial); objLoader.load("models/pumpkin.obj", function (targetObject) { // 読み込んだObjectのスケール値などをセット. objectModel = targetObject.clone(); objectModel.scale.set(1, 1, 1); objectModel.rotation.set(0, 3, 0); objectModel.position.set(0, 0, 0); // 読み込んだObjectをObject3Dに追加. obj = new THREE.Object3D(); obj.add(objectModel); // sceneに追加 scene.add(obj); }); }); // DirectionalLight - 指向性を持った光. var light = new THREE.DirectionalLight(0xffffff, 0.5); light.position.set(0, 0, 0); light.rotation.set(1, 1, 0); light.castShadow = true; scene.add(light); // AmbientLight - 光が当たる・当たらないにかかわらず各3Dモデルの色に影響を与える. var ambient = new THREE.AmbientLight(0xffffff, 0.5); ambient.castShadow = true; ambient.position.set(0,0,0); scene.add(ambient); // PointLight - 全方向に向けた豆電球のような?光. var pointlight = new THREE.PointLight(0xffffff, 0.8); pointlight.position.set(0.3, 0.4, -3); pointlight.scale.set(1, 1, 1); scene.add(pointlight); }; this.animate = function(timestamp) { // VRコントローラを更新 controls.update(); // VRマネージャからシーンを描画 manager.render(scene, camera, timestamp); // ループして実行 requestAnimationFrame(animate); }; initialize(); // アニメーションの開始 animate(performance ? performance.now() : Date.now()); }).call(this);
おわりに
割と簡単にそれっぽいものが表示できてしまうわけですが、いくつか問題点があります。
- ポートレートモードでCardboardボタンを押して、そのあとランドスケープモードに表示切り替えすると、カメラが90度回転してしまう
- Rotationの値が角度ではない
- 描画速度がモバイルVRの要求に満たない
1,は画面の向きによってカメラを回転させれば対応できそうですし、2.もまぁなんとか。
問題は3.で、モバイルVRでは60FPSを実現させる必要があると言われますが、(計測はしていないものの)現状でもそんな速度はでていないのではないかと思われます。
画面を回転させていると引っかかりがあるのも気になるところです。
まぁブラウザアプリ上で動かしているだけに困難ではあります。
が、Webで実現できる最大のメリットは、ただURLにアクセスするだけで見られる、ということだと思いますので、VIVEやRiftなどの専用端末やアプリだけでなく、Web上で表示するVRの技術も進歩していくと面白そうだな、と思っています。
参考
SpringBoot + IntelliJ+ Gradle(とりあえずHTML表示するところまで)
はじめに
IntelliJ IDEA Ultimate Editionのパーソナルアカウント購入しました。
これは先日行われたScala関西 Summit 2016に参加した影響もあったりなかったりします。
それは良いとして。
ここ最近のJava(特にver.8以降)の仕様に触れてみたい、ということもあってSpringBootに入門してみることにしました。
SpringではSpring Tool Suite(STS)というEclipseベースの開発ツールが用意されています。
素直にそれを使えば良いのですが、できればAndroid Studioと操作感を揃えたいと思ったため、IntelliJ(当時はCommunity Edition)を使ってみたらハマったためここに書き残して置くことにします。
Projectを作る
SpringBootのプロジェクトの雛形は、Spring Initializrで作ることができます。
IntelliJのUltimate Editionだと File/New/Project からも同じ機能が利用できるため、そちらから作成してもOKです。
ここでは「Gradle Project」を選択し、SpringBootのバージョンは「1.4.1」としました。
またDependenciesとして「Web」を指定しています。
上記Webサイトで作成した場合はZipファイルのダウンロードが始まるので、適当なところに展開します。
Gradleの編集
プロジェクト直下にあるbuild.gradleを以下のように変更します(SpringLoadedとThymeleafについては後述)。
build.gradle
buildscript { ext { springBootVersion = '1.4.1.RELEASE' } repositories { mavenCentral() } dependencies { classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}") classpath("org.springframework:springloaded:1.2.5.RELEASE") } } apply plugin: 'java' apply plugin: 'spring-boot' jar { baseName = 'springboottest' version = '0.0.1-SNAPSHOT' } sourceCompatibility = 1.8 targetCompatibility = 1.8 repositories { mavenCentral() } dependencies { compile('org.springframework.boot:spring-boot-starter-thymeleaf') compile('org.springframework.boot:spring-boot-starter-web') testCompile('org.springframework.boot:spring-boot-starter-test') }
ビルドの設定
次はGradleとSpringBootのビルド設定です。
右上のメニュー -> EditConfigrations -> Run/Debug Configrationsを開きます。
Gradle
左上の+ボタンをクリックしてGradleを選択します。
以下のように入力します。
SpringBoot
左上の+ボタンをクリックしてSpringBootを選択します。
以下のように入力します。
VM optionsで「-Dserver.port=8099」と指定することで、実行時に「localhost:8080」ではなく「localhost:8099」に変更できます。
他のサーバーが8080ポートを使っている場合などに便利です。
Controllerの追加
特定のURLにアクセスされた場合に指定のページを表示する、ルーティングを行うControllerクラスを追加します。
MainController.java
package jp.masanori; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class MainController { @RequestMapping("/home") public String mainpage(Model model){ return "mainpage"; } }
- 「@Controller」を付けることでControllerクラスとして振る舞うことができるようになります。
- 「@RequestMapping("/home")」によって、「localhost:8099/home」にアクセスしたときにmainpage.htmlが表示されるようになります。
ページを追加する
Thymeleafを使ってHTMLを表示してみます。
build.gradle
~省略~ dependencies { compile('org.springframework.boot:spring-boot-starter-thymeleaf') compile('org.springframework.boot:spring-boot-starter-web') testCompile('org.springframework.boot:spring-boot-starter-test') }
templates
Controllerで指定したmainpage.htmlを、src/main/resources/templates に追加します。
mainpage.html
< !DOCTYPE html > < html lang="jp" > < head > < meta charset="UTF-8" / > < title >MainPage< / title > < / head > < body > < div >世界さん、チーッス< / div > < / body > < / html >
- File -> New -> HTML からHTMLファイルを作成するとmetaタグが閉じていない状態で作成されますが、実行時にエラーになるので忘れずに閉じておきます。
- 今回は特に何もしていませんが、Controllerクラスから値を渡してページ上に反映させる、ということも可能です。
static
ルーティングやControllerからデータを渡す必要がない場合は、src/main/resources/static に置きます。
staticディレクトリ直下が「localhost:8099」として扱われるため、subpage.htmlを置いた場合、「localhost:8099/subpage.html」にアクセスするとページが表示されます。
また、JavascriptやCSSもここに置くようです。
SpringLoaded
SpringBootのPlayボタンを押すとWebブラウザからアクセスできるようになるわけですが、何かコードを変更するたびに再起動するのは面倒なもの。
ということで、SplingLoadedを使ってみることにしました。
build.gradle
buildscript { ext { springBootVersion = '1.4.1.RELEASE' } repositories { mavenCentral() } dependencies { classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}") classpath("org.springframework:springloaded:1.2.5.RELEASE") } } ~省略~
が、実際に動かしてみても変更が反映されないorz
どうやらIntelliJ上で動作させると、SplingLoadedが効かないようです。
Typescript
AngularJS2.0を使ってみたい、ということでまずはTypescriptを使ってみます。
Node.jsをインストールしておきます。
そのあとFile -> Settings -> Languages & Frameworks -> Typescript -> Common -> Node interpreter にnode.exeをセットします。
src/main/resources/static/js にmainpage.tsを追加します。
で、コードを書いていきます。
は良いのですが、TypescriptはそのままHTMLから呼び出せるわけではなく、Javascriptへのトランスパイルが必要となります。
その方法を調べようとしたところ...
おや?
ということで、特に何もしなくてもトランスパイルは自動で実行されました。
HTMLから呼び出すには、「js/mainpage.js」を指定すればOKです。
おわりに
とりあえずページを表示することはできました。
IntelliJ IDEAのUltimate Editionではちょっと戸惑ってしまうくらい機能があるため、引き続きその力を借りつつあれこれやってみようかと思います。
参考
- Change Port on a Spring Boot Application when using intelliJ - Coding. Development. Solutions. Other Stuff.
- IntelliJ IDEA 2016.2 Help :: Run/Debug Configuration: Spring Boot
- Spring Boot 使い方メモ - Qiita
- Spring Boot + Gradle + IntelliJ IDEAの環境に + Spring Loaded - Qiita
- Intellij IDEA + gradleでspring loadedが動かない問題 - 文系プログラマによるTIPSブログ