見出し画像

【YouWare】初心者でもできちゃった!プログラミング知識ゼロで『note予約投稿カレンダーアプリ』を作った軌跡|YouWare体験レポ|AI体験談|AI活用

いらっしゃい(*´ω`)✨

今回はなんと、「YouWare」というAIツールで、日本語入力チャットで、

note予約投稿カレンダーアプリ(PC用)

なるものを作ってもらいました╰(*°▽°*)╯✨

完成版スクリーンショット

予約した記事の早見表って感じだね(*´ω`)✨

わたくし、プログラムとかコードとか、全く存じ上げません!苦手です!💦
だから、便利そうだってやろうにも抵抗感があるの、すっごく分かる!
なんか「コーディング」という単語とか、難しい言葉が出てくると遠慮しがちになるよね!

この記事では難しい専門用語は少なめに、一体どうやってAIが作成してくれたのかなど、赤裸々に「スクリーンショット」多めに公開していきます!

じゃぁ、順番に行ってみよう!!(*´Д`)✨

※本記事はYouWareさんよりご依頼いただき作成したPR記事です(*´ω`)


👾「YouWare」って何?


YouWareは、プログラミングの知識がなくても、自分だけのウェブアプリが作れるツールだよ!

普通のアプリ開発だと...

  • プログラミング言語を勉強する必要がある

  • コードを書いて、エラーと格闘

  • 完成まで数週間〜数ヶ月かかることもある

これが、
YouWareだと...

  • 「こんなアプリが欲しい」と日本語で伝えるだけ

  • AIが自動でコードを書いてくれる

  • 数分〜数時間で動くアプリができる

これだけで、わたくし本当に作れたの(*´ω`)✨
このアプリが数分~数時間アプリができるのにかかる時間に差があるのは、作成したいアプリの内容と、「こだわり」なんだよ(*´ω`)

わたくしはちなみに1時間半でした🌟

具体的にYouWareはどう使うの?(簡潔に)

  1. やりたいことをAIに説明する

    • 例:「noteの記事を予約投稿できるカレンダーが欲しい」

  2. AIが自動で作ってくれる

    • 画面のデザインも、動く仕組みも全部

  3. その場で使える

    • すぐに試せて、修正も日本語で依頼できる

どんなアプリが作れるの?

  • スケジュール管理ツール

  • 計算機や変換ツール

  • データ整理ツール

  • ゲームやクイズ

アイディアによってはもっといろんなものが作れるよ!!

【YouWareクレジット制】


🌟クレジットの仕組み
(↑このリンクに詳細が書いてあります)

  • 新規登録時:300クレジット付与

  • 毎日ログイン:50クレジット付与
    ※ただし、その日のうちに使わなかった「ログイン分の50クレジット」は翌日にリセットされるよ(*´ω`)

デイリーログインボーナスは50クレジット。
今回で言うと、普通機能の実装(50~)、大きな機能の「実装」だと100~のクレジットで、普通の質問や会話は1桁のクレジット、「実装できるかどうか」という調査をすると数10クレジットだったよ(*´ω`)✨

まぁ言わずもがなだけど、「こだわる」分だけクレジット(素敵な機能)を消費します。


これらを踏まえ、わたくしはスケジュール管理ツールを作ったよ。

そしてね、わたくしAIについては画像・動画・音楽生成を触ってきたけど、このYouWareには画期的機能があるのをまずは知って欲しい。

🌞素晴らしい機能「巻き戻し」

これね、すっごいユーザーのことを考えられた設計だと思う。

「あ、イメージと違うな」「あ、さっきの方がいいな」って、生成後の「やり直し」が可能ってことなの。


しかも、消費したクレジットが返ってくる。
折角なので、気になったことを担当者さんに質問したんだ。

Q1.この「巻き戻し」に回数制限はあるのか?

これ、気になるでしょ?
だって、やり直せるんだよ?絶対回数制限あるよ!
こんなうまい話…

A.特に回数制限のようなものは設けておらず、納得いくまで試していただけます。

また、アイデアが一時的に浮かばない場合は、

入力欄下部の「Boost」機能を使って、AIにアイデア出しを手伝わせることもできます。

「失敗しながら試せる」ことを大切にした設計ですので、ぜひ安心して触ってみてください。

👉本当に「安心設計」。
わたくしの性格は「石橋を叩いて渡る」レベルなのね。
本当になんかこう「開発」とか、したことないし「怖い」「不安」だらけだったのね(´;ω;`)💦

でも、AIに触れるのが大好きだから、「やってみたーい✨」気持ちの方が勝っていたから、挑戦してみたよ(‾◡◝)✨

そして、考えた作りたいアプリが「note予約投稿カレンダー」です✨

💻note予約投稿カレンダーって?

えっと、記事の予約投稿はnoteでサブスクしてできる機能の1つなんだけど、それ使って

記事をストックしていく

人は多いと思う。
毎日投稿していく人は特にね🌟
わたくしもまとめてバッと作ったり、アイディアが思いついたらすぐ記事を作成して「予約投稿」をしていくのね。

すると、noteって「自分の記事」を見ると、

画像は実際のnoteの予約投稿画面です(記事執筆当時)


予約する時だけ見せてくれるカレンダー

こんな風に日付と時間の羅列…だけだよね(*´ω`)
こうやってカレンダー出してくれるけど、「その時だけ」。
全体像を把握したいのだ。
これはまだ少ない方だけど、10件とかストックがあると何が何だか分からなくなるの、配分が💦
曜日も欲しい💦
うっかり「ダブり」投稿なんてこともあった。

わたくしずっと思っていて、こうやって予約投稿した記事が

人目で分かるようにカレンダー化してくれないかな

って思ってるの(*´ω`)note運営さ~ん笑🤣

じゃぁ今回折角だし、

わたくしが自分でYouWareを使って作ってみよう!!

となったわけです(*´ω`)✨

💻実践:アプリができるまでの軌跡

さぁ、早速YouWareで作成してみよう!(*´ω`)ドキドキ💖

HP

あれ…?(*´Д`)
HP…想像してたのと全然違った!
アプリ開発って聞いてたから、もっとこう分かるかなごちゃごちゃしてるデザインイメージだったの(*´ω`)

こんなシンプルで見やすいデザインで、色味も目に優しいね(*´ω`)
こういう見方は文系だからかしら?💦

それで、いきなりこの中にプロンプトを入れるのもできるんだけど、色々無知なるわたくしは1つのアプリを「共同して」作ってもらいたいから、

チャット

したかったのね、だから今回は「チャット」で作成したんだ。

勿論「コード」(プロンプト)も選べるよ!

そして、アプリ生成をしてくれるAIを選べる。

わたくしは「クロード」君推しなので、クロードにしました。
ここで選んだAIによってきっとチャット内容もアプリデザインも変わってくるかもしれないと思うと、楽しいよね(*´ω`)✨

👉チャット入力(大まかに)
・noteの予約投稿の不便さについて
・早見、一覧で観たい(月間・週間も)
・メモや付箋機能も欲しい
・デザインはシンプル

こういったことをお願いしてみました。
すると、↓の画像を見てもらえるかな?

左の枠ですっごい、クロード君が「思考」してくれてます!!👀✨

思考が終わったら、クロード君の方から「質問」があるんだ。

カレンダーにする「デザイン」選んでちょって言われました。
ここでスクリーンショットを取り忘れてたみたいで申し訳ないんだけど、このクロード君とのチャットは画面「左枠」でやって、サンプルみたいな画像は右側で表示されたのね。

そこでシンプル系(4種類)の中で、4種でもずらっと複数の「デザイン」が並べて表示されたんだ。

そこで、1番カレンダーの枠が大きくて見やすい、「モダンブルー」のデザインがよかったから、それを選びました。

上のスクショのように「質問」と「選択肢」を提示されるけども、

思ったこと、わたくしが考えたことをチャットに入れる

っていうのも、自分の理想生成の1つだなって思った。
この「1番カレンダーの枠が大きくて見やすい、「モダンブルー」のデザインがよかった」というのを伝えたら、またクロード君は実装してくれました。

こうやってね、「実装されたよ」って、こういう風になったよって報告がある。
それでたまに「選択肢」に意味が分からない言葉が出てくる(笑)🤣

「投稿追加モーダル」ってなんぞ??(*´Д`)

こういうのもクロード君に聞くと、ちゃんと教えてくれます。

聞いたところ、「カレンダーの※UIデザイン」で、
※ユーザーインターフェースデザイン
Webサイトやアプリなどのデジタル製品において、ユーザーが直接目にする・触れる「操作の場」を、使いやすく魅力的に設計すること

投稿追加モーダルの実装 = 投稿を追加するためのポップアップ画面

つまり、

  • カレンダーが表示されている(メイン画面)

  • 「投稿を追加」みたいなボタンを押すと...ポップアップで小さな入力フォームが出てくる(これがモーダル!)

  • そこに記事タイトルや日時を入力する

  • 「保存」を押すとモーダルが閉じて、カレンダーに反映される

なぜモーダルを使うの?

  • ページ全体を切り替えなくていいので、スムーズ

  • 「今やってる作業」に集中できる

  • 簡単にキャンセルして元の画面に戻れる


(*´Д`)ほ~!!
わたくし初めて名前知ったよ!!
当たり前に使ってるから、ポンって出てくる「ウィンドウ」のことを「モーダル」って言うのね!

それをお願いしました(`・ω・´)ゞ✨

それでね、同じ日の同じ「時間」の「重複投稿」って防げないかなって思って…。(ついうっかりやってしまうこと、あるんです(´;ω;`))

※これはあくまで試作なので画像解析機能は不要としました

ここでね、チャットで盛り上がってしまいうっかりぴーまん、

「同じ」日の同じ「時間」の重複が何よりも「キャー(´;ω;`)」なので

夏目氏のチャット抜粋

この入力せいで、夏目氏、クロード君を困らせる失態に…(笑)🤣

こちらをご覧ください💖

え…?実装、されたの??(笑)🤣

慌ててジョークだよね?と聞きました(笑)🤣

まさかの「キャー(´;ω;`)」実装していたという事実(笑)🤣


すると、クロード君が一人悶々と思考!!✨

可愛いなー💖

おいおいおいおい💦
可愛すぎだーーーー!!!!

いや気を使わせて、ごめんね💦
もうすぐに謝りました!!(笑)🤣
す~ぐ比喩表現してしまう、本当にごめんね💦

とまぁ、チャットはこんな感じだよ(*´ω`)✨
改めてみると…にぎやかだねぇ(笑)🤣

👉つまずいたポイント

AIは本当に優秀なので、あれこれ素敵な機能案を出してきます。
でもね、それを全部いいよいいよ!ってやっていたら、クレジットがいつの間にかなくなっているし、時間も結構経過してたりする。

その機能は果たして必要なのかを自分で考え、またAIに聞く。

わたくしはクロード君にあれこれ提示されて、分からなくなって💦

「このカレンダーに必要最低限の機能にして欲しい」

って言ったの(*´ω`)
だって、アプリ公開しても「修正」「追加」が可能だもの!
実際に「触って分かる」ことの方が大きいかもしれない。
触ってるうちに「あ、これ要らない」「あ、こここういう風に欲しい」って思うもの✨

なので、「形」にするために、どこかで見切りを付けるかというのも必要🌟

それで紆余曲折を経て、できました!!

『公開をする』

ことで、デモンストレーションできるようになるよ!✨

一旦「形」にしたよ!

ここで「え!?もう公開(*´Д`)💦」ブルブル
となると思う(*´ω`)
ある程度できてくると、クロード君が「公開しますか?」って言ってくる。

「ここここ公開っ!?(*´Д`)まだ完成してないのにぃ!?」

でも安心して。
YouWareでは、

「公開=完成」じゃない。

一度「公開する」というのは、

「現時点の状態を保存する」という意味合いに近いものなんだ。

公開後も、

  • 修正

  • 追加

  • 作り直し

すべて可能だからね!

「とりあえず形になった状態を保存する」

というので、いつでも「デモンストレーション」だぜ✨
安心して「公開」してみよう!!

それで、画面右側にこういった「形」されたアプリが出てくる。

一旦「形」にすることで、今度は「実際に触った感じ」を試す。
一度入力してみたり、使用感を確かめます。

これは「ダーク」モード🌟
カレンダー色味、選べます(*´ω`)✨

早速入力!!

これが「モーダル」っちゅうんやな!!

こうやって「ポップアップ表示」されるよ!

よっぽど今は手入力なので、カレンダー枠に投稿があったらすぐに分かるんだけど、1日にいろんな事情で「2件」予約投稿とかあるんですよ(*´ω`)

「キャー(´;ω;`)」っていう表示、見て置けばよかったな(*´ω`)

1件入ってるとこんな感じ(*´ω`)

カレンダーの日付の欄をクリックすると上記画面になります。

「価格」というのは有料記事のことだね(*´ω`)

「ステータス」には「予約済み」「下書き」「投稿済み」がドロップダウンされるので、そこを選ぶ感じ。
ここは自動ではないけれど、「自動」にしたらnoteとリンクさせる必要があるので「それはできない」からね(*´ω`)

ここで「投稿済み」にしたら「色が変わる」にしてもいいなって思ってる。

そういう追加「修正」も「公開後」にできるよ!!(*´Д`)

他にも色々公開後に追加したよ!!

ここから「追加」で「メモ」があったら「カレンダー枠に表示させるよう」な指示と、「タグ」なんてものも追加してもらった!!

タグっていうのはそうだな、記事の「ジャンル」分けに使った。
みんなも自分のジャンルとかある人、いるんじゃないかな?
わたくしは「画像生成作品」と「動画生成」、そして「有料記事」もあるのでそれぞれの個別のタグを入れた方がいいなと思ったの。

わたくしは今「闇文学」っていうダークな世界の作品作りもしていて、全部がそうじゃない時もあるけれども、どれだけ作ったのかという把握もしたい。

でもその「タグ」を毎回入力するのは手間なので、「履歴」を残してもらうようお願いもしたんだ。

すると、

既に「使用した」タグが置いてある

あとこちら!

これはクロード君のおすすめ設定

タグを検索する項目まで作ってくれて、かつよく使用するタグをカレンダーメインページに置いてくれた✨

そして、カレンダー枠でもタグが表示される仕組みです(*´ω`)

こうやってパッと分かるのはありがたい

そうして、現在はこんな感じ✨

もう使ってるよ~(*´ω`)✨

・毎日投稿
・日付
・時間
・無料か有料か
・なんの記事か(タグ)

これで十分なの(*´ω`)✨
これは自分がnoteを頑張ってる軌跡でもあるよ✨(*´Д`)

自己満足でいいの!
自己を満足させるために、人は考えて行動するものね!!✨

👾最後に

いやぁどうだったかな?
あの~AIにさ色々やってもらってはいるけれども、やっぱり根底には「人間の案、創りたいイメージ」があると思う。
AIはあくまでツール、それを「勇気をもって」使えるか。
というのもこれからの時代、必要になってくるだなって思った。

今回、YouWareでアプリ、創ったけど、難しい言葉、使ってなかったよね?
モーダルくらいかな?
普段聞きなれない言葉を聞くと、やっぱりユーザーは一歩後ろに引いてしまうものだと思う、実際にわたくしがそうだったから(*´ω`)

でも、クロード君と和気あいあいとして「できた」よ🌟

note書くのが大好きだから、「もっと快適に書きたい」って思って作ったこのアプリ。
今ではなくてはならない相棒になってるよ(*´ω`)✨

AIって怖いとか難しいとか思われがちだけど、実は「あなたの『やりたい』を叶えてくれる仲間」なんだよね。

YouWare、最初は「難しそう…」って思ったけど、実際やってみたら「楽しい!」が勝ったよ(*´ω`)✨
プログラミングの知識ゼロのわたくしでも、こうやって自分専用のツールが作れた。

「あったらいいな」を形にできるって、めちゃくちゃワクワクする体験だったよ(*´ω`)

わたくしみたいに「コード?無理無理!」って人こそ、試してみる価値あり!
次はあなたが「できた!」って報告する番だよ(*´Д`)✨

みんなも自分だけの便利ツール、作ってみてね~!

以上、アプリ作成達成!レベルアップどらちゃんでした╰(*°▽°*)╯

📢どらちゃん「note予約投稿カレンダー」

初心者が本気で試作してみたこのアプリ✨
もしご興味があったら、参考・体験デモ用に使ってみてくださいね(*´ω`)

👉note予約投稿カレンダー(PC用)

※スマホでもできるけど、枠が縦長くておすすめできません💦
PC版として作成しているのでスマホには対応しておりません。

何もない枠をクリックすると、

こうやって出ます。
ここで一旦タイトル、予約時間とか設定して、「保存」するの。

そうすると、カレンダーの枠に予定が入るよ。

これをまた、クリックすると…

このように「メモ」「タグ」の追加されたモーダルになるよ!


おっと、ちなみにもし使用してくれる時に、

【ご利用の注意】

👉「追加」ってボタンあるよね!
なんでも入力したら「+追加」のボタンを押さないと反映されないので、ボタンを押してあげてね(*´ω`)✨

👉「タグ」に「色」を付けれるんだけど、「色を変えたら」、同じ言葉でも「別のタグ」の扱いになるから気をつけてね(*´ω`)✨

👉「画像から一括登録」というボタンがあるけれど、こちらのアプリは「参考・試作のため「画像分析」を搭載しておりません。

実は、記事一覧をスクショしてその画像を分析、解析して、そのままカレンダーにスケジューリング化ということを考えていたのだ!

さぁ、これがどうなっていくかは…(*´ω`)ね?



そして、忘れてはいけない!最後に「更新」ボタンを押してね!!



どう?是非、触ってみてね!!(*´ω`)✨

ここまで読んでくれてありがとう!!(*´ω`)🍀
どうか、あなたの創作の刺激となりますように✨🌈


🚀YouWare公式サイト:超初心者様向け

🚀YouWareノーコード用途向け説明ページ:知識がある人向け



#YouWare #ノーコード開発 #AI活用 #アプリ開発初心者 #note予約投稿 #プログラミング不要 #AI体験談 #Claude #初心者向けAI #note便利ツール #ノーコードツール #AIアプリ開発 #note活用術 #創作活動 #効率化ツール #AI初心者 #生成A I #カレンダーアプリ #文系でもできる #スケジュール管理


いいなと思ったら応援しよう!

夏目 龍頭|AI Creative Lab 応援をどうぞよろしくお願い致します🥰頂きましたチップは創作活動に使用させて頂きます🥰✨