Pancake Stack › Pancake Stack マニュアル

Pancake の中でサイトのファイルを表示・編集し、スマートフォン、タブレット、デスクトップの幅でプレビューし、アシスタントとページをデザインします。

5.1ファイルウインドウ

サイトのカードでファイルをクリックします。ウインドウは 3 つに分かれています。左がフォルダツリー、中央がエディタ、右がプレビューです。

• ツリー。フォルダはその場で開きます。Finder からファイルを一覧にドラッグすると追加できます。ファイルを右クリックすると、名前を変更…、複製、Finder に表示、ゴミ箱に入れるを選べます。隠しファイルとバックアップは薄く表示されます。
• 機密ファイル（.env ファイル、.sql のダンプ、鍵、.htpasswd）には鍵のマークが付きます。ブラウザには一切配信されず、Pancake はここでは編集しません。
• 新規は、ファイル（名前を付けなければ page.html）かフォルダを作ります。

5.2エディタ

エディタには行番号が表示され、HTML、CSS、JavaScript、PHP、Python は色分けされます。⌘F で検索、⌥⌘F で検索と置換、⌘S で保存します。スマート引用符と自動修正はオフなので、コードが書き換わることはありません。

• 画像、PDF などテキスト以外のファイルは Quick Look で開きます。
• 2 MB を超えるファイルは読み出し専用で開き、末尾を表示します（ログに便利です）。
• 自分のエディタで開くは、ファイルを自分のエディタに渡します。

5.3ライブプレビュー

ツールバーでプレビューをオンにし、幅をスマートフォン、タブレット、デスクトップから選びます。保存するたびにプレビューを再読み込みします。編集中のファイルがサイト内の HTML や PHP のページならそのページを、それ以外ならホームページを表示します。

プレビューにはサーバが必要です。サーバが止まっているときは、ファイルウインドウにあるすべて開始ボタンで起動できます。

5.4HTML の整形

HTML ファイルでは、HTML を整形が HTML Tidy でページをインデントし、タグを閉じ、入れ子を修正します。自動では保存しないので、結果を確認してから ⌘S を押してください。

5.5アシスタントに頼む

1. 変更したいコードを選択します。ファイル全体が対象なら、何も選択しません。
2. アシスタントに頼むをクリックし、変更内容（「ヘッダを固定表示にして」など）を書いて質問をクリックします。
3. 現在と提案を並べて比べます。よければ変更を適用をクリックし、保存します。

適用して保存するまで何も変わりません。アシスタントは、クラウドの AI プロバイダをオンにしていればそれを、そうでなければ Private Cloud Compute かこの Mac の Apple Intelligence を使います（アシスタントと MCPをご覧ください）。コードをクラウドのプロバイダに送るときは、先にパスワードとキーを取り除きます。

5.6アシスタントとデザイン

作りたいサイトを説明すると、Pancake がホームページをデザインします。サイトのフォルダに完成したレスポンシブなページができ、そのまま編集、テスト、デプロイできます。

1. 新規サイト ▸ アシスタントとデザインを選び、サイトに名前を付けます（既存のサイトでは、その「ファイル」を開いてデザイン…をクリックします）。
2. 雰囲気を選びます：ブラック＆ビジネス、ポップ、エレガント、ミニマル、あたたかく親しみやすく、またはおまかせ。
3. サイトを説明します。例：「京都のパン屋。パンの紹介、営業時間、アクセス、問い合わせフォーム」。
4. 必要ならほかの選択肢を開き、レイアウト（ランディングページ、ポートフォリオ、レストラン・お店、ドキュメント）と色を選びます。
5. デザインするをクリックし、スマートフォン、タブレット、デスクトップの幅でプレビューを確認します。
6. 気に入るまで変更を頼むで修正を頼むか（「ヘッダを暗く」「料金のセクションを追加」など）、やり直すを選びます。
7. このデザインを使うをクリックします。Pancake は先に保存ポイントを作り、それまでのページを .pancake-bak として残します。

ページの作り方は、使える AI によって異なります：

• Private Cloud Compute または自分の AI キー：アシスタントがページ全体を書きます。Claude のキーでは、Pancake がリクエストごとに Anthropic の frontend-design の指針を送ります。ほかのモデルには Pancake 独自のデザインの指針を送ります。
• この Mac の Apple Intelligence：ページの構成を考え、Pancake のテンプレートで描きます。無料、プライベート、オフラインです。
• AI が使えない場合：選んだ雰囲気をもとにページを作り、説明の最初の行をタイトルにします。

ページは単体で完結します。訪問者のデバイスにあるフォントを使い、外部のファイルやスクリプトは必要ありません。