投稿者「sasakima-nao」のアーカイブ

GraalVM Community Edition

JavaでJavaScriptを実行する「Nashorn」が非推奨に、ECMAScriptの速い進化に追いつけないと。代替案はGraalVM ? Publickey

今頃知った、覚書ページはどうしよう？
てか色々検索したけど GraalVM って何なのかよくワカラン。
とりあえず公式サイトのインストールページでも。

Getting started with GraalVM

js や node コマンドが含まれているみたい。
GNOME だと mozjs と被るヤン、モノホン node.js 入れていたら被るヤン！
使う時だけ先にパスが通るようにする必要があるな。

ダウンロードした tar.gz を展開、とりあえずホームに置く。
~/bin に以下を jjjs という仮の名前で置いて +x パーミッション。

#!/bin/sh

export PATH=~/graalvm-ce-1.0.0-rc6/bin:$PATH
[[ $# -eq 0 ]] && js --jvm || js --jvm $1

これで振り分けできる、print, console.log 両方使えてワロタ！
インポートは Nashorn と同じみたい、ES6 はどうなった？

const System  = Java.type("java.lang.System");
 
class GraalvmTest {
    constructor() {
        System.out.println("May I ask your name？");
        let console = System.console();
        let s = console.readLine();
        print(`Hello ${s} !`);
    }
}
new GraalvmTest();

カオス！

ES6 も完全に使えるようです。
Nashorn のもどかしさもないし結構面白いかも。
OpenJDK ベースだし次の Fedora には入っているのかな？

JXA: doShellScript Line feed code

macOS の JXA で
doShellScript(“ls -l”);
とやっても最終行しか得られない、と思っていました。

#!/usr/bin/osascript
 
let app = Application.currentApplication();
app.includeStandardAdditions = true;
let res = app.doShellScript("pwd");
console.log(res);

res = app.doShellScript("ls -l");
//console.log(res);
let output = res.split("\r").join("\n");
console.log(output);

これなら全部表示できる。
doShellScript が戻す文字列の改行コードは CR だったようだ。
古い mac のままな部分が色々あって面倒臭いや。
とにかくコレさえ解れば色々応用できそう。

追記
続き CRLF | Paepoi Blog

ところで iPhone XS 買いました、iPhone 7 からの機種変更。
13インチの廉価版MacBookが9月にやってくる!?
これを期待していたのに出ないんでヤケクソで。

au shop から家に帰って初期化して iCloud から復元を選択。
「他の iCloud デバイスに確認コードを送信しました」
と出たので慌てて Macbook Air を引っ張り出す。
コレって Mac や iPad を持っていない人だとどうなるんだろう？

flex-box vender prefix

本日やっと HTML5 Test Page の書き換えが終わりました。
やっと古いページの一掃が終わったぞい。
どう書き換えするか散々迷ったけど ES6 で全部動的作成することに。

CSS3 TestPage – L’Isola di Niente

思い付きでヘッダは上部にマウスカーソルを動かすとヒョッコリ出すように。
もちろん comipoli Web 版で使うため、linux 版はフルスクリーンで出しているもん。
やはり同じにしたいじゃないの。

こうやって色々作ってみると本当に今の Web はスタンドアロンなアプリと変わらない。
普通のアプリみたいに作れるのは楽しい、去年までこんなこと考えられなかったのに。
ES6 様々です。

ところで実際に書き換えてみて解ったんだけど。

.flex {
    /*display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;*/
    display: flex;
    flex-wrap: wrap;
    /*-webkit-flex-wrap: wrap;*/
    text-align: left;
    margin: 5px 0px;
}

2018.08 の現在 flex-box は vender prefix はもういらないのね。
根暗用 OS は持っていないので -ms-* は知らないけど、どうでもいいよね！

JavaScript MessageBox

ガンガンONLINE 等で漫画を読み進めると最後に HTML なダイアログが出る。
これと同じようなダイアログを作りたい。

サイズは alert や GtkMessageDialog のように文字列の流さに合わせたい。
閉じるボタンも当然付いている状態で出したい。

CSS で縦横センタリング! 要素を画面中央に『ドン!!』と表示する方法 | phiary

検索で一番上にでてくる有名な手段だけど width, height 指定必須。

console.log(div.style.width);

は空文字だ。

不定な流さの文字列タグの横幅を得る手段が見つからない、困った。
別の手段に頭を切り換える必要がありそうだ。

position:absolute で中央に配置するやり方 | YouKnow.jp
CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ

transform:translate というのがいいみたいだ。
両方 vender prefix が付いているけど 2018.08 な現在はどうなのかな。
早速試してみよう。

messageBox(id) {
    let div = document.createElement("div");
    div.style.backgroundColor = "#EEE";
    div.style.position = "absolute";
    div.style.display = "block";
    div.style.zIndex = "101";
    // Centering
    div.style.left = "50%";
    div.style.top = "50%";
    div.style.transform = "translate(-50%,-50%)";
    // Border
    div.style.border = "1px solid #7c93b2";
    div.style.borderRadius = "3pt";
    div.style.boxShadow = "5px 5px";
    //
    let paragraph = document.createElement("p");
    paragraph.textContent = document.getElementById(id).value;
    paragraph.style.textAlign = "center";
    //
    let close = document.createElement("p");
    close.textContent = "Close";
    close.style.textAlign = "center";
    close.style.backgroundColor = "#CCC";
    close.style.border = "1px solid #7c93b2";
    close.style.borderRadius = "5pt";
    close.addEventListener("click", ()=> {
        div.removeChild(paragraph);
        div.removeChild(close);
        document.body.removeChild(div);
    });
    div.appendChild(paragraph);
    div.appendChild(close);
    document.body.appendChild(div);
}

で

vender prefix 無しで safari, firefox, google-chrome イケる！
何も問題ない、お試しは以下に。
ES6 Web TestPage – L’Isola di Niente

ところで google-chrome のデベロッパーツールをよく見ると。。。。。

box-shadow なんて style があるのをポップアップのおかげで知った。
いやいやツールは使ってみるものだ、早速利用しました。

comico

comico アプリを iPhone に入れた。
たしか「ももくり」アニメが始まった直後だったから約２年ぶり。
当事は iPhone 5s だったので「画面ちいさすぎでアカン！」だった。

iPhone 7 の今はド近視＋老眼ぎみな筆者でも悪くないと思えるように。
画面はデカくなる一方なのでスマホで漫画はもう全然問題無いのかも。
てか、縦スクロールで読む漫画ってスマホでは本当に最適かも。

いや実は「マンガUP!」等は随分前から入れていたりするんだけーが。
横フリックでページめくりは縦長画面の恩恵が無いって感じ。

そんなこんなで。
Comipoli Web 版はスマホでは自動で comico 型になるようにしたいなと。
特許は無いよな？

とりあえず、スマホやタブレットを見分ける方法を捜さないと。
[JavaScript] ユーザーエージェントを判定し、にクラスを付与する
こんなにアッサリ、Web JavaScript 楽すぎる。

ES6 なら includes が使えるし PC ならプラットホームも得てみたいし。
ということで。

getUserAgent(id) {
    let ua = navigator.userAgent;
    let res = "";
    if (ua.includes("iPhone"))
        res = "iPhone";
    else if (ua.includes("iPad"))
        res = "iPad";
    else if (ua.includes("Android"))
        if (ua.includes("Mobile"))
            res = "Android Smartphone";
        else
            res = "Android Tablet";
    else
        res = navigator.platform; // pc
    document.getElementById(id).innerHTML = `This is a ${res}`;
}

こんな感じに。

ちなみに iPhone, iPad 用 Google Chrome でも iPhone になる。
PC の場合ブラウザ毎に違うので「Linux x86_64」等を表示するオマケ。
window.navigator.platform – Web API インターフェイス | MDN

どうでもいいけどついでに。
navigator のプロパティ一覧なんかは以下で得ることができる。

let ss = "";
for (let s in navigator) ss += `${s}: ${navigator[s]}\n`;
document.getElementById(id).innerHTML = ss;

常識かも。

コレ書いていて JavaScript でも内包表記できればなぁと思ったけど。
配列内包表記 – JavaScript | MDN
SpiderMonkey 限定で以前はできていたのか、知らなかった。
ちなみに Gjs では今でも使えるようです。

ただし for in はできないようだ、結局意味ネェ！