Update app.py

app.py

@@ -6,9 +6,8 @@ import os
 import re
 import io
 import time
-from PIL import Image, ImageChops
+from PIL import Image
 
-# --- 初期設定 ---
 GEMINI_KEY = os.environ.get("GEMINI_API_KEY")
 CMS_SERVICE_ID = os.environ.get("MICROCMS_SERVICE_ID")
 CMS_API_KEY = os.environ.get("MICROCMS_API_KEY")
@@ -19,33 +18,32 @@ ARTICLES_PER_PAGE = 10
 
 TEMPLATES = {
     "テンプレートなし": "",
-    "📅 イベントレポート": """<h2>イベント概要</h2>
-<p>イベント名：<br>日時：<br>場所：</p>
-<h2>内容</h2>
-<p>ここに内容を書いてください。</p>
-<h2>感想</h2>
-<p>ここに感想を書いてください。</p>""",
-    "📝 日常記事": """<h2>はじめに</h2>
-<p>ここに導入を書いてください。</p>
-<h2>本文</h2>
-<p>ここに本文を書いてください。</p>
-<h2>おわりに</h2>
-<p>ここにまとめを書いてください。</p>""",
-    "🎵 ライブ・コンサートレポート": """<h2>公演情報</h2>
-<p>公演名：<br>日時：<br>会場：<br>出演：</p>
-<h2>セットリスト</h2>
-<p>1. <br>2. <br>3. </p>
-<h2>見どころ・感想</h2>
-<p>ここに感想を書いてください。</p>""",
-    "📣 お知らせ": """<h2>お知らせ</h2>
-<p>ここにお知らせ内容を書いてください。</p>
-<h2>詳細</h2>
-<p>日時：<br>場所：<br>参加方法：</p>""",
+    "📅 イベントレポート": "<h2>イベント概要</h2><p>イベント名：<br>日時：<br>場所：</p><h2>内容</h2><p>ここに内容を書いてください。</p><h2>感想</h2><p>ここに感想を書いてください。</p>",
+    "📝 日常記事": "<h2>はじめに</h2><p>ここに導入を書いてください。</p><h2>本文</h2><p>ここに本文を書いてください。</p><h2>おわりに</h2><p>ここにまとめを書いてください。</p>",
+    "🎵 ライブ・コンサートレポート": "<h2>公演情報</h2><p>公演名：<br>日時：<br>会場：<br>出演：</p><h2>セットリスト</h2><p>1. <br>2. <br>3. </p><h2>見どころ・感想</h2><p>ここに感想を書いてください。</p>",
+    "📣 お知らせ": "<h2>お知らせ</h2><p>ここにお知らせ内容を書いてください。</p><h2>詳細</h2><p>日時：<br>場所：<br>参加方法：</p>",
 }
 
 if GEMINI_KEY:
     genai.configure(api_key=GEMINI_KEY)
 
+# --- Quillツールバー固定＆スマホ拡大抑制CSS ---
+st.markdown("""
+<style>
+/* Quillツールバーを固定 */
+.ql-toolbar {
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 999 !important;
+    background: white !important;
+}
+/* スマホでの自動拡大を抑制 */
+input, textarea, select {
+    font-size: 16px !important;
+}
+</style>
+""", unsafe_allow_html=True)
+
 def clean_ai_html(text):
     text = re.sub(r'```html?', '', text, flags=re.IGNORECASE)
     text = text.replace('```', '')
@@ -57,19 +55,17 @@ def clean_quill_html(html):
     html = re.sub(r'</figure>', '</div>', html)
     return html.strip()
 
+# --- HTMLタグを除去してプレーンテキストに ---
+def strip_html(html):
+    return re.sub(r'<[^>]*?>', '', html)
+
 def render_html(html, height=600):
     wrapped = f"""
     <html><head><style>
-        body {{
-            margin: 0; padding: 0;
-            font-family: sans-serif;
-            font-size: 16px;
-            color: #111;
-            word-break: break-word;
-        }}
-        img {{ max-width: 100%; height: auto; display: block; }}
-        p {{ margin: 0.5em 0; }}
-        h1,h2,h3 {{ margin: 0.8em 0 0.4em; }}
+        body {{ margin:0; padding:0; font-family:sans-serif; font-size:16px; color:#111; word-break:break-word; }}
+        img {{ max-width:100%; height:auto; display:block; }}
+        p {{ margin:0.5em 0; }}
+        h1,h2,h3 {{ margin:0.8em 0 0.4em; }}
     </style></head>
     <body>{html}</body></html>
     """
@@ -92,8 +88,7 @@ def upload_image_to_microcms(image_file, max_width=1200):
 
         if img.width > max_width:
             ratio = max_width / img.width
-            new_size = (max_width, int(img.height * ratio))
-            img = img.resize(new_size, Image.LANCZOS)
+            img = img.resize((max_width, int(img.height * ratio)), Image.LANCZOS)
 
         buf = io.BytesIO()
         if img.mode in ("RGBA", "P"):
@@ -109,7 +104,6 @@ def upload_image_to_microcms(image_file, max_width=1200):
         if res.status_code not in [200, 201]:
             st.error(f"アップロードエラー詳細: {res.status_code} / {res.text}")
             return None
-
         return res.json().get("url")
     except Exception as e:
         st.error(f"画像アップロードエラー: {e}")
@@ -120,9 +114,8 @@ def get_articles(limit=ARTICLES_PER_PAGE, offset=0):
         return [], 0
     url = f"https://{CMS_SERVICE_ID}.microcms.io/api/v1/blog"
     headers = {"X-MICROCMS-API-KEY": CMS_API_KEY}
-    params = {"limit": limit, "offset": offset}
     try:
-        response = requests.get(url, headers=headers, params=params)
+        response = requests.get(url, headers=headers, params={"limit": limit, "offset": offset})
         response.raise_for_status()
         data = response.json()
         return data.get("contents", []), data.get("totalCount", 0)
@@ -134,15 +127,13 @@ def get_all_articles():
         return []
     url = f"https://{CMS_SERVICE_ID}.microcms.io/api/v1/blog"
     headers = {"X-MICROCMS-API-KEY": CMS_API_KEY}
-    params = {"limit": 100}
     try:
-        response = requests.get(url, headers=headers, params=params)
+        response = requests.get(url, headers=headers, params={"limit": 100})
         response.raise_for_status()
         return response.json().get("contents", [])
     except:
         return []
 
-# --- 画面制御 ---
 params = st.query_params
 
 if "id" in params:
@@ -178,11 +169,7 @@ if "id" in params:
 else:
     with st.sidebar:
         st.title("⚙️ 設定")
-        model_choice = st.selectbox(
-            "使用するAIモデル",
-            ["gemini-2.5-flash", "gemini-2.5-pro"],
-            index=0
-        )
+        model_choice = st.selectbox("使用するAIモデル", ["gemini-2.5-flash", "gemini-2.5-pro"], index=0)
         show_drafts_in_view = st.checkbox("閲覧画面で下書きも表示する", value=False)
 
     tab_view, tab_manage = st.tabs(["📖 ブログを読む", "🛠️ 記事の管理・投稿"])
@@ -193,13 +180,10 @@ else:
         with search_col1:
             search_query = st.text_input("🔍 本文・タイトル検索", "", key="search_text")
         with search_col2:
-            search_author_list = ["全員"] + AUTHOR_LIST
-            author_filter = st.selectbox("👤 著者で絞り込み", search_author_list, key="search_author")
+            author_filter = st.selectbox("👤 著者で絞り込み", ["全員"] + AUTHOR_LIST, key="search_author")
 
-        if "view_page" not in st.session_state:
-            st.session_state.view_page = 0
-        if "last_search" not in st.session_state:
-            st.session_state.last_search = ""
+        if "view_page" not in st.session_state: st.session_state.view_page = 0
+        if "last_search" not in st.session_state: st.session_state.last_search = ""
         if search_query != st.session_state.last_search:
             st.session_state.view_page = 0
             st.session_state.last_search = search_query
@@ -219,11 +203,11 @@ else:
             pub_date = a.get("publishedAt", "-----")[:10]
             eyecatch = a.get("eyecatch")
 
-            is_draft = title.startswith("【下書き】")
-            if is_draft and not show_drafts_in_view:
+            if title.startswith("【下書き】") and not show_drafts_in_view:
                 continue
 
-            clean_text = re.sub(r'<[^>]*?>', '', content_html)
+            # ✅ HTMLタグを除去したプレーンテキスト
+            clean_text = strip_html(content_html)
 
             if ((author_filter == "全員") or (author_filter == author)) and \
                (search_query.lower() in title.lower() or search_query.lower() in clean_text.lower()):
@@ -232,33 +216,33 @@ else:
                         st.image(eyecatch.get("url", ""), use_container_width=True)
                     st.subheader(title)
                     st.caption(f"👤 {author} | 📅 {pub_date}")
+                    # ✅ st.captionに変更してHTMLが描画されないように
                     snippet = clean_text[:100] + "..."
-                    st.write(f'<p style="font-size:0.9em; color:#555;">{snippet}</p>', unsafe_allow_html=True)
+                    st.caption(snippet)
                     if st.button("続きを読む", key=f"read_{a['id']}"):
                         st.query_params.id = a["id"]
                         st.rerun()
                     st.divider()
 
-        if not search_query and author_filter == "全員":
+        if not search_query and author_filter == "全員" and total_count > ARTICLES_PER_PAGE:
             total_pages = -(-total_count // ARTICLES_PER_PAGE)
-            if total_pages > 1:
-                st.caption(f"{total_count}件中 {offset+1}〜{min(offset+ARTICLES_PER_PAGE, total_count)}件を表示")
-                col_prev, col_page, col_next = st.columns([1, 2, 1])
-                with col_prev:
-                    if st.session_state.view_page > 0:
-                        if st.button("← 前へ", use_container_width=True):
-                            st.session_state.view_page -= 1
-                            st.rerun()
-                with col_page:
-                    st.markdown(f"<p style='text-align:center;'>{st.session_state.view_page + 1} / {total_pages} ページ</p>", unsafe_allow_html=True)
-                with col_next:
-                    if st.session_state.view_page < total_pages - 1:
-                        if st.button("次へ →", use_container_width=True):
-                            st.session_state.view_page += 1
-                            st.rerun()
+            st.caption(f"{total_count}件中 {offset+1}〜{min(offset+ARTICLES_PER_PAGE, total_count)}件を表示")
+            col_prev, col_page, col_next = st.columns([1, 2, 1])
+            with col_prev:
+                if st.session_state.view_page > 0:
+                    if st.button("← 前へ", use_container_width=True):
+                        st.session_state.view_page -= 1
+                        st.rerun()
+            with col_page:
+                st.markdown(f"<p style='text-align:center;'>{st.session_state.view_page + 1} / {total_pages} ページ</p>", unsafe_allow_html=True)
+            with col_next:
+                if st.session_state.view_page < total_pages - 1:
+                    if st.button("次へ →", use_container_width=True):
+                        st.session_state.view_page += 1
+                        st.rerun()
 
     with tab_manage:
-        st.title("管理画面")
+        st.title("秘密の管理画面")
         password = st.text_input("合言葉", type="password")
 
         if password == ADMIN_PASSWORD:
@@ -271,34 +255,12 @@ else:
             if "eyecatch_url" not in st.session_state: st.session_state.eyecatch_url = ""
             if "inline_image_urls" not in st.session_state: st.session_state.inline_image_urls = []
             if "delete_confirm_id" not in st.session_state: st.session_state.delete_confirm_id = None
-            if "autosave_html" not in st.session_state: st.session_state.autosave_html = ""
-            if "autosave_title" not in st.session_state: st.session_state.autosave_title = ""
-            if "autosave_time" not in st.session_state: st.session_state.autosave_time = None
             if "quill_key" not in st.session_state: st.session_state.quill_key = 0
-            # ✅ コピー表示用フラグ
-            if "copied_index" not in st.session_state: st.session_state.copied_index = None
 
             st.divider()
             mode_label = f"📝 記事の編集 (ID: {st.session_state.edit_id})" if st.session_state.edit_id else "✍️ 新規記事の投稿"
             st.subheader(mode_label)
 
-            if st.session_state.autosave_html and not st.session_state.working_html:
-                saved_time = st.session_state.autosave_time or "不明"
-                st.info(f"💾 自動保存された下書きがあります（{saved_time}）")
-                col_r1, col_r2 = st.columns(2)
-                with col_r1:
-                    if st.button("📂 復元する"):
-                        st.session_state.working_html = st.session_state.autosave_html
-                        st.session_state.edit_data["title"] = st.session_state.autosave_title
-                        st.session_state.quill_key += 1
-                        st.rerun()
-                with col_r2:
-                    if st.button("🗑️ 破棄する"):
-                        st.session_state.autosave_html = ""
-                        st.session_state.autosave_title = ""
-                        st.session_state.autosave_time = None
-                        st.rerun()
-
             col_t, col_a = st.columns([2, 1])
             with col_t:
                 title_input = st.text_input("記事タイトル", value=st.session_state.edit_data["title"])
@@ -322,7 +284,6 @@ else:
                     st.warning("テンプレートなしが選択されています")
 
             st.divider()
-
             st.subheader("🖼️ キャッチ画像（サムネイル）")
             if st.session_state.eyecatch_url:
                 st.image(st.session_state.eyecatch_url, width=300)
@@ -330,19 +291,15 @@ else:
                     st.session_state.eyecatch_url = ""
                     st.rerun()
             else:
-                eyecatch_file = st.file_uploader(
-                    "キャッチ画像をアップロード（JPG/PNG）",
-                    type=["jpg", "jpeg", "png"],
-                    key="eyecatch_uploader"
-                )
+                eyecatch_file = st.file_uploader("キャッチ画像をアップロード（JPG/PNG）", type=["jpg", "jpeg", "png"], key="eyecatch_uploader")
                 if eyecatch_file:
-                    col_ec1, col_ec2 = st.columns([1, 1])
+                    col_ec1, col_ec2 = st.columns(2)
                     with col_ec1:
                         ec_max_w = st.number_input("最大横幅(px)", min_value=200, max_value=2000, value=1200, step=100, key="ec_maxw")
                     with col_ec2:
                         st.write("")
                         if st.button("☁️ アップロード", key="ec_upload_btn"):
-                            with st.spinner("キャッチ画像をアップロード中..."):
+                            with st.spinner("アップロード中..."):
                                 url = upload_image_to_microcms(eyecatch_file, max_width=int(ec_max_w))
                             if url:
                                 st.session_state.eyecatch_url = url
@@ -350,18 +307,12 @@ else:
                                 st.rerun()
 
             st.divider()
-
             st.subheader("📷 本文内差し込み画像")
             st.caption("アップロード後、ボタンでエディタに挿入またはHTMLタグをコピーしてください")
 
-            inline_files = st.file_uploader(
-                "差し込み画像（複数選択可）",
-                type=["jpg", "jpeg", "png"],
-                accept_multiple_files=True,
-                key="inline_uploader"
-            )
+            inline_files = st.file_uploader("差し込み画像（複数選択可）", type=["jpg", "jpeg", "png"], accept_multiple_files=True, key="inline_uploader")
 
-            col_in1, col_in2 = st.columns([1, 1])
+            col_in1, col_in2 = st.columns(2)
             with col_in1:
                 inline_max_w = st.number_input("最大横幅(px)", min_value=200, max_value=2000, value=900, step=100, key="inline_maxw")
             with col_in2:
@@ -386,15 +337,12 @@ else:
                 for i, img_info in enumerate(st.session_state.inline_image_urls):
                     max_w = img_info.get("max_w", 900)
                     img_tag = f'<img src="{img_info["url"]}" alt="{img_info["name"]}" style="width:{max_w}px;max-width:100%;height:auto;display:block;" />'
-
                     with st.container():
                         col_il1, col_il2 = st.columns([1, 2])
                         with col_il1:
                             st.caption(img_info["name"])
                             st.image(img_info["url"], width=100)
-
                         with col_il2:
-                            # ✅ st.codeでコピー可能な表示（Streamlit標準のコピーアイコン付き）
                             st.code(img_tag, language=None)
                             col_btn1, col_btn2 = st.columns(2)
                             with col_btn1:
@@ -410,7 +358,6 @@ else:
                     st.divider()
 
             st.divider()
-
             st.subheader("📝 本文エディタ")
             col_mode1, col_mode2 = st.columns(2)
             with col_mode1:
@@ -445,33 +392,25 @@ else:
                         st.session_state.working_html = rich_html
                 except ImportError:
                     st.error("streamlit-quill が未インストールです。")
-
             else:
-                edited_html = st.text_area(
-                    "HTMLコード（直接編集）",
-                    value=st.session_state.working_html,
-                    height=300,
-                    key="html_editor"
-                )
+                edited_html = st.text_area("HTMLコード（直接編集）", value=st.session_state.working_html, height=300, key="html_editor")
                 st.session_state.working_html = edited_html
 
                 st.markdown("---")
-                raw_content = st.text_area("✨ AI装飾用メモ（本文をAIに渡す）", height=120, key="ai_raw")
-                col_btn1, _ = st.columns(2)
-                with col_btn1:
-                    if st.button("✨ AIモードで装飾"):
-                        if raw_content:
-                            try:
-                                model = genai.GenerativeModel(model_name=model_choice)
-                                prompt = f"以下の文章をブログ記事用に装飾してください。本文の内容は全く変更をしないで装飾のみに務めること。装飾はモダンでオシャレに。HTMLのみ出力すること。本文: {raw_content}"
-                                with st.spinner('AIが執筆中...'):
-                                    ai_response = model.generate_content(prompt)
-                                    st.session_state.working_html = clean_ai_html(ai_response.text)
-                                    st.rerun()
-                            except Exception as e:
-                                st.error(f"AIエラー: {e}")
-                        else:
-                            st.warning("AI装飾用メモを入力してください")
+                raw_content = st.text_area("✨ AI装飾用メモ", height=120, key="ai_raw")
+                if st.button("✨ AIモードで装飾"):
+                    if raw_content:
+                        try:
+                            model = genai.GenerativeModel(model_name=model_choice)
+                            prompt = f"以下の文章をブログ記事用に装飾してください。本文の内容は全く変更をしないで装飾のみに務めること。装飾はモダンでオシャレに。HTMLのみ出力すること。本文: {raw_content}"
+                            with st.spinner("AIが執筆中..."):
+                                ai_response = model.generate_content(prompt)
+                                st.session_state.working_html = clean_ai_html(ai_response.text)
+                                st.rerun()
+                        except Exception as e:
+                            st.error(f"AIエラー: {e}")
+                    else:
+                        st.warning("AI装飾用メモを入力してください")
 
                 with st.expander("🪄 AIにデザインの修正を指示する"):
                     feedback_input = st.text_input("修正内容", key="ai_feedback")
@@ -479,33 +418,22 @@ else:
                         if feedback_input and st.session_state.working_html:
                             try:
                                 model = genai.GenerativeModel(model_name=model_choice)
-                                feedback_prompt = f"""
-                                現在のHTMLコードを、以下の指示に基づいて修正してください。
-                                本文の内容は絶対に変更せず、HTMLタグやスタイルのみを変更すること。
-                                出力は純粋なHTMLコードのみを返してください。
-                                【現在のHTML】
-                                {st.session_state.working_html}
-                                【修正指示】
-                                {feedback_input}
-                                """
-                                with st.spinner('再修正中...'):
+                                feedback_prompt = f"""現在のHTMLコードを、以下の指示に基づいて修正してください。
+本文の内容は絶対に変更せず、HTMLタグやスタイルのみを変更すること。
+出力は純粋なHTMLコードのみを返してください。
+【現在のHTML】{st.session_state.working_html}
+【修正指示】{feedback_input}"""
+                                with st.spinner("再修正中..."):
                                     ai_response = model.generate_content(feedback_prompt)
                                     st.session_state.working_html = clean_ai_html(ai_response.text)
                                     st.rerun()
                             except Exception as e:
                                 st.error(f"AIエラー: {e}")
 
-            if st.session_state.working_html and title_input:
-                st.session_state.autosave_html = st.session_state.working_html
-                st.session_state.autosave_title = title_input
-                st.session_state.autosave_time = time.strftime("%H:%M")
-                st.caption(f"💾 自動保存済み（{st.session_state.autosave_time}）")
-
             if st.session_state.working_html:
                 st.divider()
                 st.subheader("👀 プレビュー")
-                preview_html = clean_quill_html(st.session_state.working_html)
-                render_html(preview_html, height=400)
+                render_html(clean_quill_html(st.session_state.working_html), height=400)
 
             st.divider()
             col_save1, col_save2 = st.columns(2)
@@ -534,13 +462,8 @@ else:
                     headers = {"X-MICROCMS-API-KEY": CMS_API_KEY, "Content-Type": "application/json"}
                     clean_title = title_input.replace("【下書き】", "").strip()
                     save_title = f"【下書き】{clean_title}" if status_save == "下書き" else clean_title
-
                     cleaned_content = clean_quill_html(st.session_state.working_html)
-                    post_data = {
-                        "title": save_title,
-                        "content": cleaned_content,
-                        "author": author_select,
-                    }
+                    post_data = {"title": save_title, "content": cleaned_content, "author": author_select}
                     if st.session_state.eyecatch_url:
                         post_data["eyecatch"] = st.session_state.eyecatch_url
 
@@ -552,9 +475,6 @@ else:
 
                         if res.status_code in [200, 201]:
                             st.success("保存完了！")
-                            st.session_state.autosave_html = ""
-                            st.session_state.autosave_title = ""
-                            st.session_state.autosave_time = None
                             st.session_state.edit_id = None
                             st.session_state.edit_data = {"title": "", "author": AUTHOR_LIST[0], "content": ""}
                             st.session_state.working_html = ""
@@ -581,11 +501,7 @@ else:
                 with col_m2:
                     if st.button("📝 編集", key=f"edit_btn_{ma_id}"):
                         st.session_state.edit_id = ma_id
-                        st.session_state.edit_data = {
-                            "title": ma.get("title"),
-                            "author": ma.get("author"),
-                            "content": ma.get("content", "")
-                        }
+                        st.session_state.edit_data = {"title": ma.get("title"), "author": ma.get("author"), "content": ma.get("content", "")}
                         st.session_state.working_html = ma.get("content", "")
                         ec = ma.get("eyecatch")
                         st.session_state.eyecatch_url = ec.get("url", "") if isinstance(ec, dict) else (ec or "")