Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

シンプルすぎるHTMLファイルの骨組みテンプレートがダウンロードできます!

 どうも!LSSです!!

 

ちょっと手軽にHTMLやCSSJavaScriptSVGなどのテストをしたい時。

 

はてなブログにログインできる環境なら、下書きで試すのも手ですが、そうじゃない環境下でただしPCはある、という時。(かなり限定的ですね^^;)

 

メモ帳などのテキストエディタを開き、最小限のHTML構成である、

 

<html>
<head>
</head>
<body>

</body>
</html>

 

…という内容をささっと手打ちで打ち込み、保存してから、拡張子を「.html」に変更する、なんて事をしたりします。

 

6つ打って拡張子を変更するだけなので、ささっと出来るのは出来るんですが、なんとなくボタン一つで作成できるものをJavaScriptで作ってみました。

 

 

f:id:little_strange:20210610234912p:plain

HTMLテンプレート

↑のボタンを押すと、 「test.html」という骨組みだけのHTMLファイルを入手できます。

 

 

このスクリプトのコード 

<p><input id="btn" type="button" value="HTMLファイルをダウンロードする" /></p>
<script>// <![CDATA[
btn.addEventListener('click',btnclk,false);
function btnclk(e){
txt='<html>\n<head>\n</head>\n<body>\n\n</body>\n</html>';
blob=new Blob([txt],{"type":"text/plain"});
a=document.createElement("a");
a.href=URL.createObjectURL(blob);
a.download='test.html';
a.target='_blank';
a.click();
}
// ]]></script>

 

 

あとがき

あまりにも何の飾りつけもないHTMLファイルですw

 

JavaScriptでファイルを疑似的に作成できる事を知った頃から温めていたネタでした。

が、実はこの記事を書く前に、一応確認のつもりで「HTMLテンプレート」でググってみたところ…色々としっかりしたHTMLテンプレートコードを公開されているサイトが多数ある事を知りましたw

 

色々展開も考えていたのがちょっと萎えかけましたが、「シンプルにはシンプルの良さがあるだろう」と、とりあえず公開しちゃいますw

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^