monoのメモ帳

HTMLとCSSを勉強しながらはてなブログをカスタマイズ中です。

AI Programmer(日本語で指示を出すだけでコードを自動生成)がすごい

Twitterで話題になっていた日本語で指示を出すだけでコードを自動生成してくれる『AI Programmer』。

AI Programmer  

現在プロトタイプが無料で公開されていて、言語を選択してAI Programmerに書かせたいコードの処理内容を入力するだけで、コードを自動生成してくれます。

対応している言語は

  • SQL
  • Python
  • JavaScript
  • HTML & CSS
  • Solidity
  • C++
  • PHP
  • Go
  • R
  • Perl
  • Ruby
  • 正規表現
  • Haskell
  • Lisp
  • C#
  • Lisp

HTML & CSS を試してみた

面白そうなので早速試してみましょう。

AI Programmerでトップへ戻るボタンを作ってみた

「HTML & CSS」を選択して『HTMLとCSSだけでトップへ戻るのボタンを作って』と入力してみた結果がこちら。

AI Programmerでトップへ戻るのボタンを作った結果

表示されたHTMLとCSS

<a href="#" class="back-to-top">Back to Top</a>

.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}

.back-to-top:hover {
background-color: #777;
}

AI Programmerで作った「トップへ戻るボタン」のコードを実際にHTMLに書き出してみたのがこちら。

AI Programmerで作ったトップへ戻るのボタン

少しゆっくり戻るようにtransition: all 0.3s ease-in-outのアニメーションがつけられていて、問題なく動きます。

AI Programmerでグローバルナビを作ってみた結果

グローバルナビもできるかどうか試してみました。

AI Programmerでグローバルナビを作ってみた結果

<!DOCTYPE html>
<html>
<head>
<style>
#globalnav {
width: 100%;
height: 50px;
background-color: #333;
}
#globalnav ul {
list-style: none;
margin: 0;
padding: 0;
}
#globalnav li {
float: left;
}
#globalnav a {
display: block;
padding: 0 20px;
line-height: 50px;
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>

<div id="globalnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

</body>
</html>

AI Programmerでグローバルナビを作ってみた結果

ちゃんとできてますね。

AI Programmerを使ってみた感想

使い方が難しくて、同じ日本語の文言を入れても毎回表示されるコードは違うコードが表示されます。

グローバルナビを作るときには、結果がHTMLだけの時もあり、本当は子カテゴリも表示させるグローバルナビを作りたかったのですが、子カテゴリを表示させるグローバルナビのCSSはどんな日本語で指示したらいいのか、うまくいきませんでした。

また、ハンバーガーメニューも作りたかったのですが、ハンバーガーメニューの指示も日本語で指示するのが難しくてうまくいきませんでした。

けれども、日本語の指示がうまくいけば簡単に「トップへ戻る」のボタンも「グローバルナビ」も作成できるので、これはとても便利ではないでしょうか。

わたしが数十分かけて書いた「トップへ戻る」のボタンのCSSが数十秒でできてしまいます。

サイトの部品を作る時間が短縮できますし、コードがわからない人でも簡単にコードが生成できるので、わたしのようのHTMLもCSSもJavaScriptもわからないけれど、自作テーマが作りたいという人の手助けになる予感がします。

わたしの苦手なflexboxやgridレイアウトも試してみましたが、コードが簡単に生成できるのですごくいいです。

お試しあれ ♪

掲載しているコードについて

当ブログでは、カスタマイズを行なっていく上で、HTMLやCSSなどのコードを掲載しています。 自由にコピペしてご利用いただいても構わないのですが、利用しているテーマなどによってはうまくいかない場合もございます。 また、コードを利用して不具合が生じた場合でも一切の責任は負いかねますので、その点はご理解、ご了承いただきますようよろしくお願いいたします。