AI MEDIA

カテゴリー: 制作・開発日誌

  • WebサイトをSSL化する方法｜HTTPS設定から表示確認まで

    WebサイトをSSL化する方法｜HTTPS設定から表示確認まで

    SSL化を始める前に、対象ドメインが正しいサーバーを向いているか確認します。そのため、DNSが別の環境を参照していると、証明書を発行できない場合があります。

    次に、サーバー管理画面でSSLを有効にします。なお、設定直後は処理中になる場合があります。完了後にHTTPSへアクセスしてください。

    HTTPSでページが開いたら、画像やスクリプトも安全なURLから読み込まれているか確認します。その場合は、ページ内にHTTPのまま残った参照がないか調べます。

    最後に、HTTPからHTTPSへの転送を確認します。主要ページとスマートフォン表示も見ます。さらに、URLを統一すると重複防止に役立ちます。

    WebサイトのSSL化は通信を暗号化する設定です。つまり、HTTPSで安全に表示するために行います。本記事では設定から表示確認まで解説します。

    WebサイトのSSL化でわかること

    • SSL化する前に確認する項目
    • HTTPS設定とリダイレクト
    • 公開後の警告と表示確認

    HTTPSの仕組みと推奨事項は、MDNのHTTPS解説も参考にできます。ただし、実際の設定手順は利用中のサーバー公式案内を優先してください。

    WebサイトをSSL化する最初の作業は、サーバー側で対象ドメインのSSLを有効にし、最後にhttps://でページが開くことを確認することです。その結果、ブラウザとサーバー間の通信が暗号化されます。この記事では、ムームーサーバーで行った実際の操作記録を例に、初心者が迷いにくい順番で全体像を整理します。

    先に結論：独自ドメインをサーバーへ登録し、無料独自SSLを選択して設定を保存します。その後、管理画面の状態表示だけで終わらせず、実際のサイトをHTTPSで開いて確認します。

    SSLでできること

    SSLは、Webサイトを閲覧するブラウザとWebサーバーの間で送受信される情報を暗号化する仕組みです。そのため、SSLが有効なページはURLがhttp://ではなくhttps://で始まります。

    初心者が最初に覚えておきたいのは、「SSLの設定ボタンを押すこと」と「HTTPSで正しく表示できること」は別の確認だという点です。ただし、管理画面で処理中や有効と表示されても、反映には時間がかかる場合があります。最後にブラウザでページを開き、URLと表示内容を確認して完了です。

    ただし、SSL化だけですべての対策は完了しません。WordPressやプラグインも更新します。また、バックアップも必要です。

    始める前の準備

    事前に独自ドメインを取得します。次に、利用するサーバーへ登録します。今回も登録後に無料SSLへ進みました。

    独自ドメインと公開フォルダを入力した明るい管理画面
    独自ドメインと公開フォルダを確認する画面。暗転のない加工済み画像です。

    独自ドメインとレンタルサーバーを用意します。両方の管理画面へログインしてください。また、公開フォルダはサイトごとに分けます。

    録画では最初の自動ログインに失敗しました。管理画面から入り直すと再開できました。なお、認証情報を含むURLは公開しません。

    基本手順

    サーバー管理画面で対象の独自ドメインを開き、SSLに関する設定項目を探します。サービスによって名称は異なりますが、今回の画面では「無料独自SSLを設定する」を選択しました。

    無料独自SSLを設定する明るい管理画面
    対象ドメインの無料独自SSLにチェックを入れ、「変更する」を実行する画面。暗転のない加工済み画像です。
    1. SSL化する独自ドメインと公開フォルダが正しいか確認する
    2. 無料独自SSLの設定項目を有効にする
    3. 変更内容を保存する
    4. 確認ダイアログで対象ドメインをもう一度確認する
    5. 一覧へ戻り、SSLの状態表示を確認する

    対象ドメインのスペルを間違えると、意図しないサイトを設定する原因になります。保存前と確認ダイアログの2回に分けて見直すと安心です。より具体的なムームーサーバーの画面手順は、独自ドメインのSSL設定方法｜有効化とHTTPS表示を確認するで確認できます。

    最初の確認

    保存直後は処理中になる場合があります。今回も対象ドメインは「設定中」になりました。完了表示は後で確認します。

    ムームーサーバーで独自ドメインの公開フォルダと無料独自SSLの設定中表示を確認する画面
    独自ドメインと公開フォルダを登録した後、無料独自SSLが設定中になっていることを確認します。

    設定中は同じボタンを何度も押しません。まず、反映を待ちます。HTTPS表示は公開前に人が確認してください。

    • 管理画面のSSL状態が完了を示している
    • https://から始まるURLでトップページが開く
    • ブラウザに証明書の警告が表示されない
    • 画像やCSSが欠けず、ページが普段どおり表示される

    HTTPSで開けない場合は、独自ドメインが正しいサーバーを向いているか、設定対象のドメインに間違いがないかを確認します。DNSの前段から見直す場合は、独自ドメインをサーバーへ設定する方法｜DNS反映の確認までも参考になります。

    次に進むこと

    HTTPSで正常に表示できたら、サイト内のURLをHTTPSへそろえます。WordPressを使う場合は、サイトアドレス、画像、テーマ、プラグインがHTTPSで読み込まれているか確認します。SSL設定より前にWordPressをまだ導入していない場合は、ムームーサーバーでWordPressをインストールする方法へ進めます。

    最後に設定日と対象ドメインを記録します。利用したサーバーも残します。また、HTTPSの確認結果も記録します。

    よくある質問

    SSLとHTTPSは同じものですか？

    SSLは通信を暗号化する仕組みを指し、HTTPSはその仕組みを使ってWebページへ接続する方法です。実際の確認ではURLがhttps://で始まるかを見ます。

    SSLを有効にした直後からHTTPSで開けますか？

    反映まで時間がかかる場合があります。管理画面が「設定中」なら処理を待ち、完了後にHTTPSで開き直します。

    HTTPSで開けないときは何を確認しますか？

    対象ドメイン、DNSの向き先、サーバー側のSSL状態を確認します。認証情報を含む管理画面URLは他人へ送らないでください。

    SSL化すればほかのセキュリティ対策は不要ですか？

    不要にはなりません。ソフトウェア更新、パスワード管理、バックアップなども別に行います。

    まとめ

    SSL化はドメイン登録から始めます。次に、SSLを有効化します。最後にHTTPS表示を人の目で確認してください。

  • ChatGPTとCodexだけでMacアプリを作ってみた

    ChatGPTとCodexだけでMacアプリを作ってみた

    AI Macアプリ開発の最終確認

    まず、AI Macアプリ開発の目的を確認します。次に、AI Macアプリ開発の条件をそろえます。

    また、AI Macアプリ開発の結果を見直します。最後に、AI Macアプリ開発の公開状態を確かめます。

    ここでは、順番が重要です。まず、準備を確認します。

    次に、一つずつ進めます。また、結果を記録します。

    不明点は、その場で調べます。ただし、推測では進めません。

    そのため、公式情報も確認します。さらに、別の画面でも試します。

    最後に、全体を見直します。以上で、確認は完了です。

    AI Macアプリ開発を理解するためのポイント

    まず、目的を決めます。次に、条件を確認します。

    その後、必要な情報を集めます。また、作業順も整理します。

    はじめに、現在の状態を記録します。続いて、一つずつ設定します。

    ただし、一度に変更し過ぎないでください。そのため、各操作の結果を確かめます。

    問題があれば、直前の変更を見直します。そして、原因を切り分けます。

    さらに、別の端末でも確認します。一方、推測だけでは判断しません。

    また、重要な条件は公式情報で調べます。特に、料金や仕様は再確認します。

    最後に、公開状態を確認します。あわせて、個人情報も見直します。

    • 準備内容を確認する
    • 変更点を記録する
    • 実際の動作を確かめる

    以上を順番に進めます。これで、作業の抜けを減らせます。

    AI Macアプリ開発では、要件整理、実装、ビルド、動作確認を小さく繰り返します。この記事ではAI Macアプリ開発でChatGPTとCodexを使った実例を紹介します。

    AI Macアプリ開発の進め方

    まず、AI Macアプリ開発でも、生成コードはビルドと実機操作で検証する必要があります。また、AI Macアプリ開発の技術要件は、Apple Developer Documentationも確認してください。

    ChatGPTとCodexを使ったMacアプリ開発では、要件整理、実装、検証を小さく繰り返すことが重要です。この記事では、AIと協力してアプリを完成させた実際の制作手順と、途中で分かった注意点を紹介します。

    この記事でわかること

    • ChatGPTとCodexの役割分担
    • Macアプリを形にする制作手順
    • 動作確認で見つかった改善点

    ChatGPTに相談し、Codexにコードを書かせれば、Macアプリはすぐ完成する。始める前は、どこかでそう思っていました。

    確かに、コードを書く速度は大きく上がりました。しかし、実際に使える形へ仕上げるまでに必要だったのは、AIとの長い往復と、実機で小さな違和感を拾い続ける作業でした。この記事では、AI Media Studioを作る過程で分かった「AIとアプリを作る」という仕事の実像を振り返ります。

    最初の構想は「動画を入れれば記事ができる」

    AI Media StudioのInbox実画面
    動画素材を受け取り、記事化する案件を一覧するInbox。ここが制作フローの入口になります。

    出発点は単純でした。動画を入れるとAIが内容を読み取り、記事の下書きを作ってくれるアプリです。

    RELATED ARTICLE  |  AI / VIDEO 動画を放り込んだら、AI編集部はどこまで記事を作れるのか。 動画の投入から画像抽出、記事候補、レビューまでの実際の流れを追います。 AI MEDIA◷ 5 min2026.07.18

    ところが、文章が返ってくるだけでは制作は終わりません。元の素材を確認し、使う画像を選び、文章を直し、公開してよいかを判断する場所が必要です。そこで、単なる文章生成ツールではなく、素材の受け取りから確認・承認までを一つにつなぐmacOSアプリをSwiftUIで作り始めました。

    RELATED ARTICLE  |  AI / WORKFLOW AIに記事を書かせる前に、AIが記事を書く環境を作った。 文章生成だけでは終わらない、AI編集環境の設計と制作基盤を振り返ります。 AI MEDIA◷ 8 min2026.07.18

    ChatGPTは、曖昧な構想を設計に変える相手だった

    必要な画面や処理を日本語で整理し、要件の抜けを見つける場面では、ChatGPTがよい壁打ち相手になりました。「動画を記事にしたい」という曖昧な希望を、Inbox、Project Detail、Review Queueといった具体的な機能へ分解していけます。

    ただし、言葉として自然な設計が、そのまま気持ちよく使えるUIになるとは限りません。会話の中では筋が通っていても、実際の画面では情報が詰まりすぎたり、操作の流れが分かりにくかったりします。設計を言葉にするところまではAIが助けてくれても、使い心地の判断は実機を触って初めてできます。

    Codexは、実装からテストまでを一続きで進めた

    実装では、CodexにSwiftUIの画面、Pythonバックエンド、テスト、ビルドまで任せました。コードの修正後にpytest、ruff、mypy、Swift testを実行し、結果を見て次の修正へ進む。この一連の流れを会話の延長で回せるのは強力です。

    それでも、「ビルドに成功した」と「実際に使える」は同じではありません。テストが通っていても、画面が狭い、情報の優先順位が伝わらない、操作したときの反応が不自然、といった問題は残ります。AIが正しさを積み上げても、最後に必要なのは人間が感じる使いやすさでした。

    Homebrewとffmpegを組み込み、動画から画像を切り出す

    動画から抽出された画像が並ぶProject Detail実画面
    Project Detailの実画面。画面上部に動画から抽出された複数のスクリーンショットが並び、その下で生成された記事本文を確認できます。

    Homebrewでffmpegを導入し、動画から代表的なフレームを自動生成する処理も加えました。これにより、動画を最初から最後まで見直さなくても、記事に使えそうな場面を一覧で確認できます。

    Homebrewとは？Mac初心者でも5分でわかるインストールから使い方までRELATED ARTICLE  |  開発環境Homebrewとは？Mac初心者でも5分でわかるインストールから使い方までMacで開発ツールを入れようとすると、かなりの確率で「Homebrewを使ってください」と書かれています。ところがMacを使い始めたばかりだと、Homebrewが何なのか、その時点ではよく分かりません。僕も今日開発環境◷ 4 min

    ここで、macOSアプリ特有の問題にぶつかりました。ターミナルではffmpegを認識しているのに、GUIアプリのDoctor画面では「not found」と表示されます。原因は、GUIアプリがターミナルと同じPATHを引き継がないことでした。AIにコードを書かせても、OSや実行環境の都合まで消えるわけではありません。

    ffmpegとは？Macでインストールして動画を扱う方法RELATED ARTICLE  |  開発環境ffmpegとは？Macでインストールして動画を扱う方法ffmpegは、動画や音声を変換・解析・切り出しできる定番のコマンドラインツールです。名前だけを見ると専門家向けに感じますが、MacではHomebrewを使えば数分で導入できます。この記事では、インストールから開発環境◷ 4 min
    ffmpegとffprobeを正常検出したDoctor実画面
    修正後のDoctor実画面。ffmpegとffprobeを正常に検出し、Homebrewの絶対パスとバージョンまで表示されています。

    機能を足すたびに、画面は何度も崩れた

    タブ追加後に描画が崩れた実画面
    Article、Images、Sourceのタブを追加した直後、内容が表示されなくなった状態。構造を変えるたびに、実機での確認が必要でした。

    サムネイルを右ペインへ追加すると、今度は本文の表示領域が押しつぶされました。そこで情報をタブに分けると、画面が真っ白になる不具合が発生しました。必要に見える機能を足すほど、既存のレイアウトとの衝突が増えていきます。

    最終的には、プロジェクト詳細を独立した画面にし、Article、Images、Sourceを切り替える構成へ落ち着きました。最初から正解を設計できたのではありません。壊れた画面を見て、どこに無理があるのかを考え、構造そのものを変えた結果です。

    人間の役割は、「気持ち悪い」を仕様に変えること

    修正後のProject Detail実画面
    修正後のProject Detail。独立した画面でArticleタブを開き、記事本文を十分な幅で読めるようになりました。

    AIはコードを書き、原因を調べ、修正案を出せます。一方で、「余白が窮屈」「画像が足りない」「右へ伸ばし続ける構造には無理がある」と感じたのは人間でした。

    RELATED ARTICLE  |  AI / DESIGN AIに記事を書かせたら、最後に残ったのは人間の違和感だった。 AIの実装力と、人間が画面を見て判断する役割について掘り下げます。 AI MEDIA◷ 7 min2026.07.18

    こうした違和感は、最初の仕様書には書かれていません。しかし、実際に使って感じた違和感を言葉にすると、それが次の仕様になります。AIとの開発では、人間が細かくコードを書く時間は減らせます。その代わり、何が不自然なのかを見つけ、修正の方向を決める仕事の重要性はむしろ増しました。

    完成したのは、「AIが勝手に作ったアプリ」ではない

    AI Media Studioは、ChatGPTやCodexが一度に出力したアプリではありません。人間が不満を伝え、AIが直し、実機で確かめ、また新しい違和感を返す。その往復が少しずつ形になったものです。

    AI開発で大きく減ったのは、コードを一文字ずつ入力する作業でした。しかし、何を作るのか、どこを直すのか、いつ完成と判断するのかは、人間の側に残ります。AIが仕事を奪ったというより、人間の仕事が「書くこと」から「見つけて決めること」へ移った、と表現するほうが近いと思います。

    AI Media Studioを作り始めた背景は、最初の記事でも詳しく振り返っています。