Riot.js 4 + Bootstrap 4のモーダルダイアログをriot.tagで定義

jQueryでボタンクリックを取得し、riot.tagにデータを設定してみました。
Riot.js 4 + jQuery ボタンクリックをjQueryで取得し、Riotタグに値を渡す

jQuery同様、Bootstrapもよく使用されるライブラリだと思います。
Bootstrapのダイアログをriot.tagで定義。
表示するデータをjQueryから設定できるか試してみます。


jQuery + Bootstrapでのサンプル



まず、jQuery + Bootstrapのみのサンプルです。
モーダル画面で値を更新させる際、初期値を与えた後表示させたいようなパターンはよくあるかと思います。

・index.html


  1. <html lang="ja">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>jquery sample</title>
  5.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  6. </head>
  7. <body>
  8.     <div><input type="button" value="ダイアログ表示" id="show"></div>
  9.     <!-- ダイアログ -->
  10.     <div class="modal" id="example" tabindex="-1" role="dialog">
  11.         <div class="modal-dialog" role="document">
  12.             <div class="modal-content">
  13.             <div class="modal-header">
  14.                 <h5 class="modal-title" id="title">(タイトル)</h5>
  15.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  16.                 <span aria-hidden="true">×</span>
  17.                 </button>
  18.             </div>
  19.             <div class="modal-body">
  20.                 <p id="message">(メッセージ)</p>
  21.             </div>
  22.             <div class="modal-footer">
  23.                 <button type="button" class="btn btn-primary">Save changes</button>
  24.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  25.             </div>
  26.             </div>
  27.         </div>
  28.     </div>
  29. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  30. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  31. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  32. <script>
  33. $(function() {
  34.     // jQueryでボタンクリックを取得
  35.     $('#show').on('click', function() {
  36.         // 表示する前にタイトルとメッセージを設定
  37.         $('#title').html('ダイアログタイトル')
  38.         $('#message').html('メッセージ')
  39.         $('#example').modal('show')
  40.     })
  41. })
  42. </script>
  43. </body>




動作は単純にボタンを押したらモーダルダイアログが表示されるだけです。

989_01.png

989_02.png

表示前に書き換える箇所が増えると面倒なので、ダイアログの定義部分を
まるごとriot.tagに変更したい。



Riot.js



ダイアログ部分をRiot.jsのタグで宣言します。

・index.html


  1. <html lang="ja">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>riot sample</title>
  5.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  6. </head>
  7. <body>
  8.     <div><input type="button" value="ダイアログ表示" id="show"></div>
  9.     <!-- タグの表示位置 -->
  10.     <my-dialog />
  11.     <!-- タグの定義ファイルを指定 -->
  12.     <script src="my-dialog.riot" type="riot"></script>
  13. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  14. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  15. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  16. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/4.1.1/riot+compiler.min.js"></script>
  17. <script>
  18. (async function main() {
  19.     await riot.compile()
  20.     const mydialog = riot.mount('my-dialog')
  21.     // jQueryでボタンクリックを取得
  22.     $('#show').on('click', function() {
  23.         // 表示する前にタイトルとメッセージを設定
  24.         mydialog[0].update({title:'Riotダイアログタイトル', message:'Riotメッセージ'})
  25.         $('#example').modal('show')
  26.     })
  27. }())
  28. </script>
  29. </body>




・my-dialog.riot


  1. <my-dialog>
  2.     <!-- ダイアログ -->
  3.     <div class="modal" id="example" tabindex="-1" role="dialog">
  4.         <div class="modal-dialog" role="document">
  5.             <div class="modal-content">
  6.             <div class="modal-header">
  7.                 <h5 class="modal-title">{ state.title }</h5>
  8.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  9.                 <span aria-hidden="true">×</span>
  10.                 </button>
  11.             </div>
  12.             <div class="modal-body">
  13.                 <p>{ state.message }</p>
  14.             </div>
  15.             <div class="modal-footer">
  16.                 <button type="button" class="btn btn-primary">Save changes</button>
  17.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  18.             </div>
  19.             </div>
  20.         </div>
  21.     </div>
  22. </my-dialog>




動作はjQuery版と変わりません。

989_03.png

989_04.png

これで随分便利になりました。



show_modal



データの設定とダイアログ表示部分をriot.tag部分に移動することで、もう少しスッキリできそうです。

my-dialog.riot側にデータ設定&モーダル表示を行うメソッドを定義。
jQueryからは作成したメソッドを呼び出して、データの設定とモーダル表示を行ってみます。

・index.html


  1. <html lang="ja">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>riot sample</title>
  5.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  6. </head>
  7. <body>
  8.     <div><input type="button" value="ダイアログ表示" id="show"></div>
  9.     <!-- タグの表示位置 -->
  10.     <my-dialog />
  11.     <!-- タグの定義ファイルを指定 -->
  12.     <script src="my-dialog.riot" type="riot"></script>
  13. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  14. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  15. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  16. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/4.1.1/riot+compiler.min.js"></script>
  17. <script>
  18. (async function main() {
  19.     await riot.compile()
  20.     const mydialog = riot.mount('my-dialog')
  21.     // jQueryでボタンクリックを取得
  22.     $('#show').on('click', function() {
  23.         // 表示する前にタイトルとメッセージを設定
  24.         //mydialog[0].update({title:'Riotダイアログタイトル', message:'Riotメッセージ'})
  25.         //$('#example').modal('show')
  26.         mydialog[0].show_modal({title:'ダイアログタイトル', message:'メッセージ'})
  27.     })
  28. }())
  29. </script>
  30. </body>




・my-dialog.riot


  1. <my-dialog>
  2.     <!-- ダイアログ -->
  3.     <div class="modal" id="example" tabindex="-1" role="dialog">
  4.         <div class="modal-dialog" role="document">
  5.             <div class="modal-content">
  6.             <div class="modal-header">
  7.                 <h5 class="modal-title">{ state.title }</h5>
  8.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  9.                 <span aria-hidden="true">×</span>
  10.                 </button>
  11.             </div>
  12.             <div class="modal-body">
  13.                 <p>{ state.message }</p>
  14.             </div>
  15.             <div class="modal-footer">
  16.                 <button type="button" class="btn btn-primary">Save changes</button>
  17.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  18.             </div>
  19.             </div>
  20.         </div>
  21.     </div>
  22.     <script>
  23.     export default {
  24.         show_modal(data) {
  25.             this.update(data)
  26.             $('#example').modal('show')
  27.         }
  28.     }
  29.     </script>
  30. </my-dialog>




これでupdateとshowを別々に呼ばなくて良くなりました。

Riot.js 4 + jQuery ボタンクリックをjQueryで取得し、Riotタグに値を渡す

既存のjQueryを利用したアプリケーション。
ajaxでデータを取得し、テーブルに表示する処理を書くのが面倒なので、
表示部分だけRiotの機能を利用したい。

サンプル



ポイントは
・riot.mountした戻り値のコンポーネントを大切にとっておく
・updateメソッドで変更後のデータを渡す
・riot tagではstateオブジェクトを介してデータを取得する


・index.html


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4.     <title>riot sample</title>
  5. </head>
  6. <body>
  7.     <div><input type="button" value="データ表示" id="show"></div>
  8.     <!-- タグの表示位置 -->
  9.     <my-tag></my-tag>
  10.     <!-- タグの定義ファイルを指定 -->
  11.     <script src="my-tag.riot" type="riot"></script>
  12. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  13. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/4.1.1/riot+compiler.min.js"></script>
  14. <script>
  15. (async function main() {
  16.     await riot.compile()
  17.     // mountした戻り値のコンポーネントを保持
  18.     // コンポーネントは配列であることに注意
  19.     const mytag = riot.mount('my-tag')
  20.     // jQueryでボタンクリックを取得
  21.     $('#show').on('click', function() {
  22.         // テーブルに表示するデータ
  23.         const items = [
  24.             {id:1, name:'初めての'},
  25.             {id:2, name:'Riot'}
  26.         ];
  27.         // コンポーネントは配列
  28.         // 先頭のupdateメソッドにデータを渡す
  29.         mytag[0].update({items:items})
  30.         
  31.     })
  32. }())
  33. </script>
  34. </body>




・my-tag.riot


  1. <my-tag>
  2.     <table>
  3.         <thead>
  4.             <tr>
  5.                 <th>id</th>
  6.                 <th>name</th>
  7.             </tr>
  8.         </thead>
  9.         <tbody>
  10.             <!-- updateで設定された値はstateオブジェクトに配置される -->
  11.             <tr each={ item in state.items }>
  12.                 <td>{item.id}</td>
  13.                 <td>{item.name}</td>
  14.             </tr>
  15.         </tbody>
  16.     </table>
  17. </my-tag>




初期表示

988_01.png

ボタンを押すと、狙い通りテーブルにデータが設定できました。

988_02.png


【参考URL】

コンポーネントオブジェクト

Riot.js 4.1で「riot+compiler.min.js:2 Uncaught (in promise) SyntaxError: Unexpected token (14:8)」

Riot.js 4.0.2では動作するコード。

・index.html


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4.     <title>riot sample</title>
  5. </head>
  6. <body>
  7.     <!-- タグの表示位置 -->
  8.     <my-tag></my-tag>
  9.     <!-- タグの定義ファイルを指定 -->
  10.     <script src="my-tag.riot" type="riot"></script>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/4.0.2/riot+compiler.min.js"></script>
  12. <script>
  13. (async function main() {
  14. await riot.compile()
  15. riot.mount('my-tag')
  16. }())
  17. </script>
  18. </body>




・my-tag.riot


  1. <my-tag>
  2.     <h3>ボタンクリックで項目追加</h3>
  3.     <slot each={ item in items }>
  4.         <div>項目:<span>{ item.text }</span></div>
  5.     </slot>
  6.     <div><input type="button" value="追加" onclick={ add }></div>
  7.     <script>
  8.     export default {
  9.         
  10.         onBeforeMount(props, state) {
  11.             this.items = []
  12.         }
  13.         add(event) {
  14.             this.items.push({text : 'テキスト追加'})
  15.             this.update()
  16.         }
  17.     }
  18.     </script>
  19. </my-tag>




Riot.js 4.1.1に上げると、エラーになります。


riot+compiler.min.js:2 Uncaught (in promise) SyntaxError: Unexpected token (14:8)






export default



原因は、my-tag.riotのexport defaultに記載したコード


  1. <my-tag>
  2.     <h3>ボタンクリックで項目追加</h3>
  3.     <slot each={ item in items }>
  4.         <div>項目:<span>{ item.text }</span></div>
  5.     </slot>
  6.     <div><input type="button" value="追加" onclick={ add }></div>
  7.     <script>
  8.     export default {
  9.         
  10.         onBeforeMount(props, state) {
  11.             this.items = []
  12.         },
  13.         add(event) {
  14.             this.items.push({text : 'テキスト追加'})
  15.             this.update()
  16.         }
  17.     }
  18.     </script>
  19. </my-tag>



わずかな変化ですが、onBeforeMountとaddの間に「,」が必要です。
4.0系では許容してくれていたのですが、4.1から必須のようですね。

ずいぶんハマったのでメモしておきます。

GraalVM native-imageでJavaのコードを実行可能なバイトコードに変換

GraalVMをUbuntu 18.04にインストールしてみました。
GraalVM Community Edition 19 をUbuntu Server 18.04にインストールする

ドキュメントを見ていると、「native-image」という項目が。
Native Images

動作を確認してみます。


Javaプログラム



native-imageコマンドを利用するため、gu installでnative-imageをインストールします。


$ gu install native-image



サンプルに従い、Javaのプログラムを作成。

・HelloWorld.java


  1. public class HelloWorld {
  2.     public static void main(String[] args) {
  3.         System.out.println("Hello, World!");
  4.     }
  5. }



Javaとしてコンパイルして実行してみます。


$ javac HelloWorld.java
$ java HelloWorld
Hello, World!






Native Images



作成したHelloWorldをnative imageに変換してみます。


$ native-image HelloWorld
Build on Server(pid: 15418, port: 38627)*
[helloworld:15418]    classlist: 1,479.07 ms
[helloworld:15418]        (cap):     689.59 ms
[helloworld:15418]        setup:     923.48 ms
Error: Error compiling query code (in /tmp/SVM-7230892489949457802/PosixDirectives.c).
Compiler command
gcc /tmp/SVM-7230892489949457802/PosixDirectives.c -o /tmp/SVM-7230892489949457802/PosixDirectives
output included error: /tmp/SVM-7230892489949457802/PosixDirectives.c:77:10:
fatal error: zlib.h: そのようなファイルやディレクトリはありません
    C file contents around line 77:
    /tmp/SVM-7230892489949457802/PosixDirectives.c:76: #include <unistd.h>
    /tmp/SVM-7230892489949457802/PosixDirectives.c:77: #include <zlib.h>
    /tmp/SVM-7230892489949457802/PosixDirectives.c:78: #include <arpa/inet.h>
Error: Use -H:+ReportExceptionStackTraces to print stacktrace of underlying exception
Error: Image build request failed with exit status 1



zlibが必要とのこと。
インストールします。


$ sudo apt-get install zlib1g-dev



改めてnative-imageを実行。


$ native-image HelloWorld
Build on Server(pid: 15418, port: 38627)
[helloworld:15418]    classlist:     125.65 ms
[helloworld:15418]        (cap):     754.78 ms
[helloworld:15418]        setup: 1,691.07 ms
[helloworld:15418] (typeflow): 3,383.24 ms
[helloworld:15418]    (objects):     794.57 ms
[helloworld:15418] (features):     137.75 ms
[helloworld:15418]     analysis: 4,373.45 ms
[helloworld:15418]     (clinit):     81.05 ms
[helloworld:15418]     universe:     294.43 ms
[helloworld:15418]     (parse):     757.81 ms
[helloworld:15418]     (inline): 1,192.29 ms
[helloworld:15418]    (compile): 5,584.71 ms
[helloworld:15418]     compile: 7,750.21 ms
[helloworld:15418]        image:     277.84 ms
[helloworld:15418]        write:     83.24 ms
[helloworld:15418]     [total]: 14,700.19 ms




生成されたhelloworldバイナリを実行してみます。


$ ./helloworld
Hello, World!




サンプルのような簡単なプログラムでも、helloworldのファイルサイズは
2.5MBになりました。
もちろん、他のUbuntuにコピーしても動作します。

これはいいですね。
サーバーのログ収集や死活監視クライアントがJava製だと
「このためだけにjreインストールするのはちょっと...」
と思うことがあったので、バイナリ単体で動いてくれると便利です。




native-imageの生成条件



native-imageを生成するときはコンパイルされたclassファイルが存在していれば良く、ソースファイルは不要です。
ということは、他のJVMでコンパイルしたclassファイルでもnative-imageにできるのでは?

別の端末にインストールしているOpenJDKでビルドして試してみます。
ソースファイルを微調整。

・HelloWorld.java


  1. public class HelloWorld {
  2.     public static void main(String[] args) {
  3.         System.out.println("Hello, Symfoware!");
  4.     }
  5. }



classファイル生成


$ javac HelloWorld.java



HelloWorld.classをGraalVMをインストールしている端末にコピー。
native-imageに変換してみます。


$ native-image HelloWorld
Build on Server(pid: 15418, port: 38627)
[helloworld:15418]    classlist:     201.97 ms
Fatal error: java.lang.UnsupportedClassVersionError:
HelloWorld has been compiled by a more recent version of the Java Runtime (class file version 55.0),
this version of the Java Runtime only recognizes class file versions up to 52.0
    at java.lang.ClassLoader.defineClass1(Native Method)
    at java.lang.ClassLoader.defineClass(ClassLoader.java:763)
    at java.security.SecureClassLoader.defineClass(SecureClassLoader.java:142)
    at java.net.URLClassLoader.defineClass(URLClassLoader.java:468)
    at java.net.URLClassLoader.access$100(URLClassLoader.java:74)
    at java.net.URLClassLoader$1.run(URLClassLoader.java:369)
    at java.net.URLClassLoader$1.run(URLClassLoader.java:363)
    at java.security.AccessController.doPrivileged(Native Method)
    at java.net.URLClassLoader.findClass(URLClassLoader.java:362)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:424)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:357)
    at java.lang.Class.forName0(Native Method)
    at java.lang.Class.forName(Class.java:348)
    at com.oracle.svm.hosted.NativeImageGeneratorRunner.buildImage(NativeImageGeneratorRunner.java:239)
    at com.oracle.svm.hosted.NativeImageGeneratorRunner.build(NativeImageGeneratorRunner.java:427)
    at com.oracle.svm.hosted.server.NativeImageBuildServer.executeCompilation(NativeImageBuildServer.java:390)
    at com.oracle.svm.hosted.server.NativeImageBuildServer.lambda$processCommand$8(NativeImageBuildServer.java:327)
    at com.oracle.svm.hosted.server.NativeImageBuildServer.withJVMContext(NativeImageBuildServer.java:408)
    at com.oracle.svm.hosted.server.NativeImageBuildServer.processCommand(NativeImageBuildServer.java:324)
    at com.oracle.svm.hosted.server.NativeImageBuildServer.processRequest(NativeImageBuildServer.java:268)
    at com.oracle.svm.hosted.server.NativeImageBuildServer.lambda$serve$7(NativeImageBuildServer.java:228)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
    at java.lang.Thread.run(Thread.java:748)
Error: Image build request failed with exit status 1



やっぱりダメかと思ったのですが、UnsupportedClassVersionErrorですね。
OpenJDKのバージョンを確認すると11でした。


$ java --version
openjdk 11.0.3 2019-04-16
OpenJDK Runtime Environment (build 11.0.3+7-Ubuntu-1ubuntu218.04.1)
OpenJDK 64-Bit Server VM (build 11.0.3+7-Ubuntu-1ubuntu218.04.1, mixed mode, sharing)



OpenJDK 8で改めてビルド。
これでclass file versionsは52になるはずです。


$ /usr/lib/jvm/java-8-openjdk-amd64/bin/javac HelloWorld.java



再度classファイルをコピーして、native-imageを実行。


$ native-image HelloWorld
Build on Server(pid: 15418, port: 38627)
[helloworld:15418]    classlist:     112.44 ms
[helloworld:15418]        (cap):     699.61 ms
[helloworld:15418]        setup:     968.52 ms
[helloworld:15418] (typeflow): 2,372.49 ms
[helloworld:15418]    (objects):     421.86 ms
[helloworld:15418] (features):     77.86 ms
[helloworld:15418]     analysis: 2,913.51 ms
[helloworld:15418]     (clinit):     41.64 ms
[helloworld:15418]     universe:     136.86 ms
[helloworld:15418]     (parse):     414.27 ms
[helloworld:15418]     (inline):     952.17 ms
[helloworld:15418]    (compile): 2,771.61 ms
[helloworld:15418]     compile: 4,336.30 ms
[helloworld:15418]        image:     204.96 ms
[helloworld:15418]        write:     43.26 ms
[helloworld:15418]     [total]: 8,762.90 ms




動いてくれました。


$ ./helloworld
Hello, Symfoware!


GraalVM Community Edition 19 をUbuntu Server 18.04にインストールする

GraalVM
https://www.graalvm.org/

以前Ubuntu 16.04にインストールしてみました。
GraalVMをUbuntu Server 16.04にインストールする

しばらく触っていなかったので、改めてUbuntu 18.04にインストールしてみます。



Install GraalVM



こちらを参考にインストールしていきます。
install-graalvm

ダウンロードサイトからCommunity Edition (CE)の「DOWNLOAD FROM GITHUB」をクリック。
https://www.graalvm.org/downloads/

986_01.png

githubのリリースページが表示されます。

986_02.png

Ubuntuにインストールするので「graalvm-ce-linux-amd64-19.0.0.tar.gz」をダウンロード。
解凍して適当なパスに移動します。
今回は「/opt/graalvm」に配置しました。


$ wget https://github.com/oracle/graal/releases/download/vm-19.0.0/graalvm-ce-linux-amd64-19.0.0.tar.gz
$ tar zxf graalvm-ce-linux-amd64-19.0.0.tar.gz
$ sudo mv ./graalvm-ce-19.0.0 /opt/graalvm



.bash_profileを作成し、パスを通します。


$ vi ~/.bash_profile



内容は以下の通り。


export PATH=/opt/graalvm/bin:$PATH



sourceで設定を反映。


$ source ~/.bash_profile



「gu」を実行すると、こんなヘルプが表示されました。


$ gu
GraalVM Component Updater v2.0.0

Usage:
    gu info [-clLprstuvV] <param>        prints info about specific component (from file, URL or catalog)
    gu available [-alvV] <expr>         lists components available in catalog
    gu install [-0cfiLnorvyxY] <param> installs a component package
    gu list [-clv] <expression>         lists installed components, or components from catalog
    gu remove [-0fxv] <id>             uninstalls a component
    gu update [-x] [<ver>] [<param>]     upgrades to recent GraalVM
    gu rebuild-images                    rebuilds native images. Use -h for detailed usage

Common options:
    --auto-yes
    -A     say YES or ACCEPT to all questions
    --catalog
    -c     treat parameters as component IDs from catalog of GraalVM components. This is the default.
    --local-file
    -L     treat parameters as local filenames of packaged components.
    --debug
    -d     debugging. Prints stacktraces, ...
    --help
    -h     print help.
    --no-progress
    -n     do not display download progress.
    --non-interactive
    -N     noninteractive mode. Fail when input is required.
    --url
    -u     interpret parameters as URLs of packaged components.
    --verbose
    -v     be verbose. Prints versions and dependency info.

Use
    gu <command> -h
to get specific help.





最初から使える機能



graalvmを設置した時点で、いくつかのプログラム言語は利用可能です。

・javascript

$ js --version
GraalVM JavaScript (GraalVM CE Native 19.0.0)



・node.js

$ node -v
v10.15.2



npmも使用できます。

$ npm -v
6.4.1



・java

$ java -version
openjdk version "1.8.0_212"
OpenJDK Runtime Environment (build 1.8.0_212-20190420092731.buildslave.jdk8u-src-tar--b03)
OpenJDK GraalVM CE 19.0.0 (build 25.212-b03-jvmci-19-b01, mixed mode)



・LLVM

$ lli --version
LLVM (GraalVM CE Native 19.0.0)






Running Ruby



guコマンドでRubyの実行環境を追加することが出来ます。


gu install [インストールする実行環境]



rubyの実行環境を追加してみます。


$ gu install ruby
Downloading: Component catalog from www.graalvm.org
Processing component archive: TruffleRuby
Downloading: Component ruby: TruffleRuby from github.com
Installing new component: TruffleRuby (org.graalvm.ruby, version 19.0.0)
IMPORTANT NOTE:
---------------
The Ruby openssl C extension needs to be recompiled on your system to work with the installed libssl.
First, make sure TruffleRuby's dependencies are installed, which are described at:
https://github.com/oracle/truffleruby/blob/master/README.md#dependencies
Then run the following command:
        /opt/graalvm/jre/languages/ruby/lib/truffle/post_install_hook.sh


IMPORTANT NOTE:
---------------
Set of GraalVM components that provide language implementations have changed. The Polyglot native image and polyglot native C library may be out of sync:
- new languages may not be accessible
- removed languages may cause the native binary to fail on missing resources or libraries.
To rebuild and refresh the native binaries, use the following command:
        /opt/graalvm/bin/gu rebuild-images

You may need to install "native-image" component which provide the rebuild tools.




Ruby 2.6.2相当のtrufflerubyがインストール出来ました。


$ ruby -v
truffleruby 19.0.0, like ruby 2.6.2, GraalVM CE Native [x86_64-linux]





Running R



R言語を追加してみます。


$ gu install R
Downloading: Component catalog from www.graalvm.org
Processing component archive: FastR
Downloading: Component R: FastR from github.com
Installing new component: FastR (org.graalvm.R, version 19.0.0)
NOTES:
---------------
The user specific library directory was not created automatically. You can either create the directory manually or edit file /opt/graalvm/jre/languages/R/etc/Renviron to change it to any desired location. Without user specific library directory, users will need write permission for the GraalVM home directory in order to install R packages.

Some R packages need a system-dependent configuration before they can be installed. A generic configuration that works out of the box in most cases is provided by default. If you wish to fine-tune the configuration to your system or should you encounter any issues during R package installation, try running the following script that adjusts the configuration to your system:
    /opt/graalvm/jre/languages/R/bin/configure_fastr

The R component comes without native image by default. If you wish to build the native image, which provides faster startup, but slightly slower peak performance, then run the following:
/opt/graalvm/jre/languages/R/bin/install_r_native_image

The native image is then used by default. Pass '--jvm' flag to the R or Rscript launcher to use JVM instead of the native image. Note that the native image is not stable yet and is intended for evaluation purposes and experiments. Some features may not work in the native image mode, most notably some Rcpp based packages. The native image can be uninstalled using the installation script with 'uninstall' argument.

See http://www.graalvm.org/docs/reference-manual/languages/r for more.




実行してみます。


$ R
R version 3.5.1 (FastR)
Copyright (c) 2013-19, Oracle and/or its affiliates
Copyright (c) 1995-2018, The R Core Team
Copyright (c) 2018 The R Foundation for Statistical Computing
Copyright (c) 2012-4 Purdue University
Copyright (c) 1997-2002, Makoto Matsumoto and Takuji Nishimura
All rights reserved.

FastR is free software and comes with ABSOLUTELY NO WARRANTY.
You are welcome to redistribute it under certain conditions.
Type 'license()' or 'licence()' for distribution details.

R is a collaborative project with many contributors.
Type 'contributors()' for more information.

Type 'q()' to quit R.
FastR unexpected failure: error loading libR from: /opt/graalvm/jre/languages/R/lib/libR.so.
If running on the NFI backend, did you provide the location of libtrufflenfi.so as the value of the system property 'truffle.nfi.library'?
The current value is 'null'.
Is the OpenMP runtime library (libgomp.so) present on your system? This library is, e.g., typically part of the GCC package.
Details: libgomp.so.1: 共有オブジェクトファイルを開けません: そのようなファイルやディレクトリはありません



libgomp.soがないというエラーになりました。
不足しているライブラリを追加します。


$ sudo apt install libgomp1



これで実行できました。


$ R
R version 3.5.1 (FastR)
Copyright (c) 2013-19, Oracle and/or its affiliates
Copyright (c) 1995-2018, The R Core Team
Copyright (c) 2018 The R Foundation for Statistical Computing
Copyright (c) 2012-4 Purdue University
Copyright (c) 1997-2002, Makoto Matsumoto and Takuji Nishimura
All rights reserved.

FastR is free software and comes with ABSOLUTELY NO WARRANTY.
You are welcome to redistribute it under certain conditions.
Type 'license()' or 'licence()' for distribution details.

R is a collaborative project with many contributors.
Type 'contributors()' for more information.

Type 'q()' to quit R.
>






Running Python 3



Pythonを追加してみます。


$ gu install python
Downloading: Component catalog from www.graalvm.org
Processing component archive: Graal.Python
Downloading: Component python: Graal.Python from github.com
Installing new component: Graal.Python (org.graalvm.python, version 19.0.0)

IMPORTANT NOTE:
---------------
Set of GraalVM components that provide language implementations have changed. The Polyglot native image and polyglot native C library may be out of sync:
- new languages may not be accessible
- removed languages may cause the native binary to fail on missing resources or libraries.
To rebuild and refresh the native binaries, use the following command:
        /opt/graalvm/bin/gu rebuild-images

You may need to install "native-image" component which provide the rebuild tools.



コマンドは「graalpython」となります。


$ graalpython --version
Python 3.7.0 (GraalVM CE Native 19.0.0)





guコマンド



「gu list」でインストール済のコンポーネント一覧が表示されます。


$ gu list
ComponentId             Version             Component name     Origin
--------------------------------------------------------------------------------
graalvm                 19.0.0             GraalVM Core        
R                        19.0.0             FastR             github.com
python                 19.0.0             Graal.Python        github.com
ruby                     19.0.0             TruffleRuby         github.com




「gu -c list」で利用可能なコンポーネントの一覧が表示されます。


$ gu -c list
Downloading: Component catalog from www.graalvm.org
ComponentId             Version             Component name     Origin
--------------------------------------------------------------------------------
native-image             19.0.0             Native Image        github.com
python                 19.0.0             Graal.Python        github.com
R                        19.0.0             FastR             github.com
ruby                     19.0.0             TruffleRuby         github.com



プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ