タイトル: 「ユウタのブログ冒険」
ユウタは小学生の頃から、コンピュータが大好きでした。毎日放課後、彼の夢は自分だけの特別なブログサイトを運営することでした。ユウタのブログには、彼が描いた絵や、お気に入りのゲームのレビュー、さらには学校のイベントについての面白い話など、彼の世界が詰まっているのです。
ある日、ユウタはついにその夢を実現するための一歩を踏み出しました。彼はPythonのコードを書いて、ブログサイトを作り始めたのです。そのブログサイトには、記事を投稿するためのフォームと、投稿された記事が一覧で表示されるページがありました。
ユウタのブログサイトは、彼が思い描いた通りにカスタムできるものでした。彼は「記事を投稿する」ボタンをクリックするだけで、自分の考えや冒険を記事として追加できました。色とりどりの背景やカラフルなヘッダー、そして楽しいタイトルのデザインは、彼の個性を表現するのにぴったりでした。
ショートストーリー: ユウタの大冒険
ユウタがブログサイトを作成したある晴れた日、彼はとても興奮していました。今日、彼のブログに初めて記事を投稿するのです。ユウタは「今日、僕が見つけた魔法の場所」というタイトルのブログ記事を作成しました。記事には、彼が友達と一緒に遊びに行った公園で見つけた不思議な石についての話が書かれていました。
「よし、これで完璧だ！」ユウタはキーボードを叩きながら、自分のブログサイトの「記事を投稿する」ボタンをクリックしました。すると、彼が設定した緑色のカラーバーが輝き、記事が表示エリアに現れました。ユウタは記事が公開されると、満足そうに微笑みました。
彼のブログサイトでは、すぐに「いいね！」ボタンがクリックされるようになり、友達や家族からのコメントもたくさん届きました。ユウタはそのコメントを見ながら、嬉しそうに目を輝かせました。
「次は、僕の好きなゲームについて書こうかな」とユウタは考えました。彼のブログサイトには、どんどん新しい記事が追加され、ユウタの世界はどんどん広がっていきました。彼はブログのカスタマイズを続け、記事のデザインを変えたり、背景の色を変えたりして、自分だけの特別な空間を作り上げていきました。
ユウタのブログサイトは、彼の夢の実現だけでなく、自分だけの世界を作る楽しさも教えてくれました。彼はこれからもたくさんの冒険を記事にして、自分だけの物語を綴っていくことでしょう。そして、彼のブログには、ユウタの想像力と冒険心が詰まった素敵な記事がどんどん増えていくのです。
ユウタのブログサイトは、彼の小さな世界を広げる素晴らしいツールとなり、彼の成長と共に、その世界はどんどん大きくなっていくのでした。
実行結果。
シンプルで使いやすいブログサイトで、自分のブログを簡単に作成し運営できるコード。
!pip install gradio
import gradio as gr
from datetime import datetime
# グローバル変数の初期化
articles = []
# サンプルHTMLを表示する関数
def display_html():
html_content = """
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>オシャレなブログ</title>
<style>
body {{
font-family: 'Arial', sans-serif;
background-color: #e8f5e9; /* グリーン系の背景色 */
color: #333;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}}
.container {{
max-width: 800px;
margin: 0 auto;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding: 20px;
}}
header {{
background-color: #4CAF50; /* グリーンのカラーバー */
padding: 20px;
text-align: center;
border-radius: 8px;
}}
header h1 {{
margin: 0;
color: #fff;
}}
.post {{
margin-bottom: 40px;
}}
.post-title {{
font-size: 24px;
margin: 0 0 10px 0;
color: #4CAF50; /* グリーンのタイトルカラー */
}}
.post-date {{
font-size: 14px;
color: #999;
}}
.post-content {{
line-height: 1.6;
}}
</style>
</head>
<body>
<div class="container">
<header>
<h1>オシャレなブログ</h1>
</header>
{posts}
</div>
</body>
</html>
"""
post_elements = ""
for idx, (article, timestamp) in enumerate(articles):
post_elements += f"""
<div class="post">
<h2 class="post-title">サンプルブログ投稿</h2>
<p class="post-date">{timestamp}</p>
<p class="post-content">
{article}
</p>
</div>
"""
return html_content.format(posts=post_elements)
# 記事を投稿する関数
def post_article(article_content):
timestamp = datetime.now().strftime("%Y年%m月%d日 %H:%M:%S")
articles.append((article_content, timestamp))
return display_html()
# Gradioインターフェースの作成
with gr.Blocks() as demo:
with gr.Row():
with gr.Column():
gr.Markdown("### 記事の投稿")
article_input = gr.Textbox(label="記事の内容", lines=4)
output = gr.HTML()
gr.Button("記事を投稿する").click(post_article, [article_input], output)
with gr.Column():
html_output = gr.HTML(display_html()) # Display the articles on the right side
# アプリケーションの起動と共有リンクの作成
demo.launch(share=True)
ブログサイトの機能とプロセス
基本機能の設定:
ユーザーがブログ記事を投稿できるサイトを作成します。
投稿された記事には、投稿日時が自動的に追加されます。
記事の表示:
各記事にはタイトル、投稿日時、内容が含まれます。
ユーザーインターフェース:
記事の内容を入力するためのテキストボックスと、「記事を投稿する」ボタンがあります。
テキストボックスに入力した記事内容を「記事を投稿する」ボタンで投稿できます。
投稿ボタンをクリックすると、入力された記事がリストに追加され、表示されます。
デザイン:
サイト全体はシンプルで見やすいデザインになっており、記事の背景は白です。
ヘッダーはグリーン色で、タイトルが中央に配置されています。
動作の説明:
ユーザーがテキストボックスに記事を入力し、「記事を投稿する」ボタンをクリックすると、記事が追加され、即座に右側に表示されます。
表示された記事は、投稿された日時とともに更新されます。
このブログサイトは、シンプルで使いやすい設計で、自分のブログを簡単に作成し、運営できるように設計されています。