3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

 しかし……命令ではありません。
 だって、じゃばすくりぷとがいっこも分かんないからね!
 なにしろ、アルファベットの並んだ呪文を眺めていると、具合わるくなっちゃうんだからねw
 そのせいで、ぜんぜん大したことはしていないのに、なかなかの艱難辛苦でした。

作りたい物

 折角日本語でプログラムを書くのだから、伝統的な和の色名で色指定したい! という希望があります。
 なでしこでは標準で、「赤色」「青色」などと日本語で色指定をすることが出来るのですが、これらは最低限の原色です。日本の伝統色には、もっと繊細で目にも心にも優しい色合いで、しかも色名も美しく趣があって素敵なのが多いのです。
 「撫子色」とか「浅葱色」とかとかで色指定がしたい!
 これは、なでしこv1では簡単なことでした。

日本の伝統色.nako
!藍色=$165E83  //あいいろ
!藍媚茶=$555647  //あいこびちゃ
!藍白=$EBF6F7  //あいじろ
 ...
!撫子色=$EEBBCB  //なでしこいろ
 ...

 こんな感じで単にずらっと定数を指定したnakoファイルを作って、libフォルダに放り込み、プログラムの先頭で取り込めばOK。

!『日本の伝統色.nako』を取り込む。
母艦を撫子色で画面クリア。

 これで母艦が撫子色に~♪
 これを、なでしこv3でもやりたいわけなんですが、v3では外部から別のなでしこを取り込んで使うって出来ないんですよね。

※現在は「.nako3」ファイルの取り込みにも対応されており、v3.3.3からはHTML埋め込みでも別のなでしこをプラグインとして取り込めるようになりました!🎉 やったね☆ (2022/06/11追記)
NAKO3プラグインの作り方

プラグインで出来そう

 そこで、ユーザープラグインです。
 わたしの場合は、なでしこ3では主にHTML埋め込みでwebプログラム的な物を作って遊んでいるので、定数を指定するだけのユーザープラグインを作ってタートルグラフィックスのプラグインのようにスクリプトタグで読み込ませれば良さそう。
 と、ゆうわけで、マニュアルからプラグインの作り方を見てみます。
 うっ、いっこもわかんない(@_@)
 ……いや、まてまて。落ち着いて、ちゃんと読むんだ。今わたしに必要なことは、そう多くはないぞよ。

プラグインの実体は、Object。

{
  '定数名': { 定義 },
  '命令名': { 定義 },
 ...
}

 なるほど……

定義:定数

{ type: 'const', value: 100 } // @ヨミガナ

 ふむふむ。
 定数部分に関して言えば、じぇいそんさん的なアレで、タイプと価を指定するだけ。

 つまり……なんかこんな感じってコトだよね?

'撫子色': {type: 'const', value: '#EEBBCB'}, // @なでしこいろ

 v1用の定義ファイルから、置換命令だけでまるっと作っちゃえそう。

色リスト=「!藍色=$165E83  //あいいろ
!藍媚茶=$555647  //あいこびちゃ
!藍白=$EBF6F7  //あいじろ
 ......」
色リストは色リストの「 」を空に置換。
色リストは色リストの「!」を「'」に置換。
色リストは色リストの「=$」を「': {波カッコ}type: 'const', value: '#」に置換。
色リストは色リストの「//」を「'{波カッコ閉じ}, // @」に置換。
色リストを言う。

 簡単ですよ! よきよき~♪
 ……と、ここまでは順調でした。

#プラグインが分からない……
 プラグインのテンプレートの通りにすると、こんな感じだと思う。プラグインの自動登録をする呪文も付けました。

Plugin_TraditionalColor.js
const TraditionalColor = {
  // @色定数
  '藍色': {type: 'const', value: '#165E83'}, // @あいいろ
  '藍媚茶': {type: 'const', value: '#555647'}, // @あいこびちゃ
  '藍白': {type: 'const', value: '#EBF6F7'}, // @あいじろ
  ......
  '勿忘草色': {type: 'const', value: '#89C3EB'}, // @わすれなぐさいろ
}
// モジュールのエクスポート(必ず必要)
  module.exports = TraditionalColor
//プラグインの自動登録
if (typeof (navigator) === 'object') {
  navigator.nako3.addPluginObject('TraditionalColor', TraditionalColor)
}

 これを、ふつーにscriptタグで読んでやれば良いのだろうと思うたのですよ。
 取りあえずhtmlと同じトコに置いて、こんなふうに。

<script type="text/javascript" src="Plugin_TraditionalColor.js"></script>

 がっ、うまく行きません。
 なんでだ。テンプレート通りにしたつもりなんだけど……
 ていうか……そもそも、テンプレートのプラグインも出来ないしね。
 今さら作る以前に使えてなかったとか、頭悪すぎるな、わたし……orz
 そもそもプラグインとゆうものが分かってない。

Windows版ではできました

 いやいや、まてまて、テンプレートはWindows版のnakopad.vbsではちゃんと出来たんだよね。ということに気が付いたので、作ったPlugin_TraditionalColor.jsをsrcに放り込んで、

!『Plugin_TraditionalColor.js』を取り込む。
撫子色を言う。

 としてみたら、ちゃんと「#EEBBCB」を言ってくれました。
 おー、プラグイン自体は間違ってなかった。むむむ。
 プラグインはPC版でしか動かない?
 いやいやいやいや! そんなワケはないですよね?!?!
 タートルグラフィックスもプラグインなわけだし、以前、他の方が作って下さったユーザープラグインをHTML埋め込みで使わせていただいていましたからね。

モジュールのエクスポート?

 よく分からないけど何だかんだしているうちにできました?!
 まさかの、(必ず必要)なはずの、モジュールのエクスポートの呪文を消したら動いたんですよ。うそーん。どうゆうことよΣ(゜д゜;
 でもというか当然というか、これではWindows版では動きません。
 必ず必要というのはPC版ではということなのかな?
 ……描画系の命令はブラウザ版しか出来ないから別にいいんですけどね。使うのはどうせ私だけなんだし、私が使いたいときに使えさえすればっっ(ヤケか;)

できました!

 結局、モジュールのエクスポートの所はこのようになりました。

if (typeof module !== 'undefined' && module.exports) {
  module.exports = TraditionalColor
}

 件の他の方が作られたプラグインではこのようになっていたので、同じようにしてみたってだけのこってす。
 なので呪文の意味はよく分かりませんが、ブラウザ版などで不要な時には、モジュールのエクスポートの下りをスルーするということなんだろうと思う。
 とにもかくにもこれで、Windows版でもHTML埋め込みでも、プラグインが使えるようになりました! やったね☆

動作確認

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>プラグインテスト</title>
</head>

<body>
<!-- なでしこ3のエンジンを取り込み -->
<script type="text/javascript" src="https://nadesi.com/v3/cdn.php?v=3.1.5&f=release/wnako3.js&run"></script>
<!-- プラグインを取り込み -->
<script type="text/javascript" src="Plugin_TraditionalColor.js"></script>

<!-- なでしこのプログラム -->
<script type="なでしこ">

body背景色に撫子色をDOMスタイル設定

</script>
</body></html>

動作確認

 無事背景が撫子色になりました~(≧▽≦)

おわります

 わたしが何だかんだとぼやきながら出来たの出来ないのと騒ぐだけの記事でした。
 Qiitaではもっと真面目に書こうと思っていたけど結局こうなる(汗)
 取りあえずユーザープラグイン作りの最初の一歩とゆうことで、一応ユーザープラグインのページに登録してみました。枯れ木も山の賑わいってヤツだね!

なでしこ3マニュアル > ユーザープラグイン

 わたし以外にはマッタク需要が無いものと思われますが、伝統的な和の色名480色と透明が使えます。
(いちおう『色見本』を作ってみました)

 みなさんも是非、もっと素敵なプラグインを作って、公開してみて下さいね☆

※この時はドシロウト的に、scriptタグで取り込めるようにするのがなかなかの艱難辛苦で大騒ぎでしたが、現在は「取り込む」文が充実したことによりこちらが推奨されていて、scriptタグでの取り込みはほんのり非推奨となっています(そしてちゃんとやり方書かれたw)(2022/06/11追記)
JSプラグインの作り方

やっぱりつづきます

続・なでしこ3のプラグインを作ってみたよ! ~今度は関数だ!~

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?