ノーコードツールというものをつくってみた

おはようございます。Takaです。

 先日、機会があってノーコードプログラミングというものを勉強することがありました。そこでどういうものか調べたところ、私が利用している「ホームページビルダー」もノーコードプログラミングを用いたノーコードツールの一種だそうで、なんとなくイメージができました。

 ホームページビルダーは確かに便利です。しかし、まだ慣れていないのもあるせいか、自分でコーディングする方がまだ良いかなと思ってます。しかし、html、css、javascriptを用いてウェブサイトを作るときに、「これって、どのタグを使えばよかったんだっけ?」と思うときがあります。
 そこで、過去の自分に助けてもらうという意味で、作りたい種類の言葉(見出し、文章、図の挿入など)のボタンを押すと、そのタグがポップアップとして出てくるというウェブアプリを作りました。
 現在販売されているフルカスタムでサイト転送までできるソフトウェアはさすがに今の自分のスキルでは無理なので、度忘れしたときのちょっとした解決ツールとして使ってもらうことを目的としています。
 イメージとしては、もともとウェブサイト制作の経験がある方がこのサイトからタグを拾ってきてそれに中身をはめ込んで、さらに全体にはめ込むというパズルのピースを提供する感じです。
 名前は、「HTML_index」とします。本当は「Auto_HTML」も候補に挙がっていたのですが、これだと配置から転送まですべて自動でやってくれそうなイメージを持たれそうだったので、「索引」的な役割という意味で「index」にしました。

以下に、この機能を担うjavascriptのコードを一部示します。

let tag_want={'head': `<head></head>`}
let btn = document.getElementById("create");
console.log(tag_want["head"]);
btn.addEventListener('click',function(){
  if (document.getElementById("head").checked) {
    alert(tag_want["head"]);
  else {
  }
});

目的のボタンを押したら、あらかじめ宣言していた連想配列のキーと照らし合わせて値をポップアップとして表示するというコードです。

最後に、サイトのURLを貼ります。もっと、機能を拡充していきます。
ご一読ありがとうございました。

https://html-index.com/





この記事が気に入ったらサポートをしてみませんか?