日本語プログラミング言語なでしこの公式掲示板

なでしこ 交流

トップ 新規 検索

2024-02-01 19:50:38

Re①:htmlになでしこ3を埋め込むの、難しすぎる

ユメミノウツツ さん

オフラインで動かすのが面倒くさい話、JSに詳しい友人に適当に話を振ったらなんと解決しました!

まず最初に、オフラインのhtml上でなでしこを動かすために、「https://nadesi.com/v3/cdn.php?v=3.3.71&f=release/wnako3.js」をダウンロードします。(バージョンは適宜最新のものを)
このファイルをwnako3.jsという名前で保存します。
html上でscriptタグで読み込むのですが、このときに

①defer属性をつける(ページを一通り読み込み終えてから実行するため)
②src="wnako.js?run"と?runをつける!!!!!!
つまり「」と書く

と動きます!!②が重要です!

どうやら上記ソースファイルの中で、次のようなコードがあって↓
if(n.indexOf("wnako3.js?run")>=0||n.indexOf("wnako3.js&run")>=0)...
URLの後に?runか&runが付いているとスクリプトファイルが自動実行されるようです。実際にには&runが付いています。 ただ、ローカルファイルに保存してしまうと、&runについては「wnako.js&run」というファイル名と読み間違えるみたいで・・・?runじゃないとうまく動かないみたいでした。
(なお、ファイル名をwnako.js&runで保存すると動く模様・・・w)



またなでしこからjavascriptに変換したものを保存できるの?という件についても解決しました・・・が、うーん、おすすめできるものではないですねぇw
https://github.com/kujirahand/nadesiko3core
↑これがなでしこ3のNodeライブラリ?なんですけど、この「本ライブラリの使い方」にあるコードを少し改変することで一応取得はできたっぽいです。
3行目のrunをcompile(だったかな?)に変更するとコンソールに出力されるっぽい。
ただ、出力されたファイルがちゃんと動かなかったのでやっぱりおすすめできるものではないですね。一応備忘録として書き残しておきますが・・・。

以上、html埋め込みに関する解決法でした。友人に感謝・・・!

これといって質問内容が定まっていないので、交流タグで(半ば愚痴です~スミマセン)

なでしこ3がjsに変換されてブラウザ上で動いてるっていうのは知ってたんですが、じゃあhtml上で動かしてみようとふと思いまして。
数時間あれこれ試してみたんですが難しいですねぇこれ。

まずhtmlになでしこ3を埋め込む方法はすぐに見つかりました。
https://nadesi.com/doc3/index.php?HTML%E3%81%B8%E3%81%AE%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E6%96%B9%E6%B3%95
scriptタグで鯖上のwnako.jsを取ってきて、html上のtype="なでしこ"のscriptを実行する。
最もオーソドックスな形ですね。

ただhtml上になでしこのソースを直書きするのが凄くイヤで、src="hoge.nako3"で外部ファイルを取り込めないかなって思ったんですが・・・いろいろ試してもうまくいかず。
結局2年前の掲示板でセキュリティ上できないことがわかりました。
https://www.eznavi.net/site/bbs/index2.php?pagetop=1137
これ、どうにかできないんですかね?同じAltJS系のTypeScriptの使い方とかも調べましたが、あれはもう根本から使い方が別っぽいですね・・・ううむ。
JavaScriptの宿命、セキュリティ上ローカルのファイルを扱うのが難しいっていうの、なかなか不便ですね。

次にオフライン環境で使えないかな?と思いwnako.jsをローカルにダウンロード。src="wnako.js"と読み込んでも動かない。
こっちはJavaScriptなんだからちゃんと読み込めてると思われる。
これはなんだか解決策が見つかりました。scriptファイルをdefer付けて読み込んだ後に、window.addEventListenerで動かしてやると一応動きました。
https://nadesi.com/v3/doc/index.php?html&show
↑のJavaScriptでなでしこの関数を追加するのところを参考に・・・
まあバージョンアップできないのでネットが繋がるなら鯖から毎回持ってきた方がいいんでしょうけどね。

うーん、htmlに埋め込んで使うの、やや難ありですねぇ。
ローカルのWebアプリみたいに使いたかったらcnakoとか使った方が早い?でもhtmlとセットで使ってみたい場合は、どうするのが正解なんでしょうね・・・。
あと、
https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E3%81%AE%E5%8B%95%E4%BD%9C%E5%8E%9F%E7%90%86
の中に「一度、JavaScriptに変換したものを保存しておけば、変換の必要なく実行することもできます。」と書いてあるんですが、これってどうやってやるんでしょう?F12で軽く探ってみましたがようわからず。
こういうことしようとするとhtmlの知識やJavaScriptの知識も必要になってくるのでもう手が付けられません!知識不足です!


(編集パスワード送信)

子記事

親記事 (No.1714)
返信した記事(元) (No.1714)

この内容(No.1825)に返信

この内容(No.1825)の関連リンク

この内容(No.1825)をダウンロード

この内容(No.1825)のテキスト表示





www.eznavi.net