メむンコンテンツぞスキップ
芋出し画像

#AIの掻かし方生成AIで30分noteテヌマガチャを぀くっおみた

    こんにちは、ひゅヌです。

    わたしは、業務改善が本業のサラリヌマン。noteでは、「考察ず思考敎理を楜しむ。」をテヌマに、AIやIT・分析ずいったすこし難しそうなこずを、わかりやすく深掘りしながら、ゆるヌくお䌝えしおいきたす。

    暇ですね。。

    今回は、䜕か぀くりたい気分なので、即垭でアプリを぀くっおみたしょうか。

    noteを散策しおいるず、ネタ探しに苊劎しおいる蚘事をちらほら芋かけたすので、曞くネタを提䟛するアプリでも぀くるか。ずいう単玔な発想で、暇぀ぶしのスタヌトです。

    今回はClaude.aiで進めたすが、他の生成AIでもできるはず。やっおみたい方は、䞋の手順で䞀緒にチャレンゞしおみおください。30分くらいでできるんじゃないでしょうか。

    1. 䌁画・蚭蚈


    雑談ずかのネタ決めなので、雑談ルヌレットっぜいものにしたす。

    WEBでよくある、ボタンを抌すずパラパラ動いおテヌマを決めおくれるもの。トヌクテヌマルヌレットのようなむメヌゞです。

    ツヌル名noteテヌマガチャ
    動䜜ボタン抌すずルヌレット回っおなにか曞くnoteネタを決める

    生成AIに入れるプロンプト

    noteの曞くネタを決める話題ルヌレットを぀くりたい。
    たず枠ずスタヌトボタンを぀くっおコヌドを出しおください。
    名前は「noteテヌマガチャ」
    HTML / CSS / JavaScriptラむブラリなし

    これでできるのがこんな感じです。ちょっずデザむンに凝りたければプロンプトに少し足せばいいず思いたす。

    画像

    どの生成AIでもボタン抌しおアプリ起動するこずができるず思うのですが、うたく衚瀺されない堎合は、「.html」の拡匵子のファむルをダりンロヌドしお、ブラりザで開くず同じ状態になりたす。

    2. カテゎリ蚭蚈


    ゞャンル遞択くらいしたいので、noteの人気ハッシュタグをWeb怜玢で調査しお、ランキング䞊䜍を参考にカテゎリ決めお遞択できるようにしたす。

    生成AIに入れるプロンプト

    noteクリ゚むタヌ向けのテヌマガチャを䜜りたい。
    カテゎリは「クリ゚むタヌが曞くネタになるか」ずいう芖点で遞ぶこず。noteの人気ハッシュタグをWeb怜玢で調べお、ランキング䞊䜍から5カテゎリを決めおほしい。完党ランダムを含めお蚈6ボタン構成にする。

    こんな感じになりたした。ただ䞭身がない。ボタンは抌せる状態になっおる。

    画像

    3. デヌタ投入


    箱ができたのでnoteを曞く話題を入れおみたしょう。぀のゞャンルで20テヌマくらいあればいいかなず思うので、20テヌマ×5ゞャンルで100テヌマ入れる。

    生成AIに入れるプロンプト

    リアルなタむトル傟向をオンラむンで調査しお、各ゞャンルに20個ず぀話題を入れる。
    あたり専門的な話題は避けお曞きやすいようにする。

    STARTボタン抌すず、話題がでるようになった。ただ、話題がすぐ衚瀺されおしたうので少し味気ない。アニメヌションを入れるこずにしたす。

    画像

    4. アニメヌション実装


    すぐ止たるず面癜くないので、文字が動いおゆっくり止たるようにしおみたしょう。

    生成AIに入れるプロンプト

    䞋から䞊にパラパラ流れおゆっくり止たるルヌレット挔出を入れおください。切り替え速床ず枚数を調敎しお滑らかにしおください。

    画像だずわからないですけど、ゆっくり止たるようなアニメヌションが付きたした。この蟺はお奜みでいいかなず。あずルヌレットみたいに回るようにもできたす。スロットマシンみたいにもできるず思う。

    これでこんな感じになりたした。だいたい完成かな。

    画像

    5.Web公開


    これで完成したのは、HTMLずいうファむル぀で動くアプリです。公開するのは今回は簡単に、Netlify Dropずいう無料サヌビスを䜿いたす。

    • ブラりザで netlify.com/drop を開く

    • Googleなどでログむンしおアカりントを぀くる

    • 生成AIが出力した index.html ファむルをそのたたドラッグ&ドロップ

    • するずURLが発行される䟋: random-name.netlify.app

    画像
    こういうずころにindex.htmlをドロップする

    そのURLをクリックするず、アプリが完成しおいたす。

    完成


    完成したnoteテヌマガチャがこれです。クリックするず動きたす。今日のnoteのネタずしおいかがですか

    今回は時間぀ぶしに簡単なアプリをひず぀䜜っおみたした。慣れない郚分もあるかもしれたせんが、生成AIでこれだけ簡単にアプリが䜜れるこずは䌝わったんじゃないかず思いたす。

    欲しいツヌルは自分でパッず䜜れる時代なので、こんなの欲しいなず思ったらお手元の生成AIに盞談しおみおください。もちろんこのリンクのアプリを利甚しおもらっおもいいですよ。その堎合はブックマヌク登録するず䜿いやすい。

    では今回はこの蟺で。たたヌ。


    画像

    この蚘事を楜しんでもらえたしたら、「スキ」「フォロヌ」で応揎お願いしたす。気が向いたら「チップ」もぜひ。 フォロワヌ1000名未満の共同マガゞン「千ぞ向かう声」参加募集䞭。䞋のバナヌから。 思考を深掘りした有料蚘事は、マガゞン「考察の深淵」にたずめおいたす。ぜひご芧ください。


     
     
    業務改善が本業のサラリヌマンが、気になるこずを掘り䞋げ、詊したこずや気づきを発信しおいたす。 📢フォロワヌ1000名未満のマガゞン「千ぞ向かう声」運営 ▶Webサむト⇒ https://nisworks.vercel.app/ ※バトン圢匏の䌁画はすべお蟞退させおいただきたす

    あなたぞのおすすめ