Web

Glitch で PHP を使う方法

投稿日:2019年9月18日 更新日:

1. はじめに

Glitch は正式にPHPをサポートしていませんが、ほんの少しの設定変更により、PHPが使えるようになります。

2. 手順

(1) プロジェクトを作成します。

実際はどの雛型を使ってもよいのですが、ここでは「hello-webpage」を選択してプロジェクトを作成します。

(2) glitch.json ファイルを作成します。

[New File] ボタンを押して、glitch.json ファイルを新規に作成します。ファイルの中身としては、以下を入力します。

{
  "install": "composer install",
  "start": "php -S 0.0.0.0:8080",
  "watch": {
    "ignore": [
      "logs"
    ]
  }
}
  • php コマンドの -S オプションで、PHPのビルトインWebサーバーを起動しています。本来このWebサーバーは本番用として使うものではないので、あまりよいやり方ではありません。
  • PHPのビルトインWebサーバーは、index.php ファイルがあれば自動的に読み込んでくれます。

(3) composer.json ファイルを作成します。

[New File] ボタンを押して、composer.json ファイルを新規に作成します。ファイルの中身としては、以下を入力します。

{
    "require": {}
}

このファイルの存在は必須ではありませんが、ないと Logs 内に以下のメッセージが出力されます。

Composer could not find a composer.json file in /app
To initialize a project, please create a composer.json file as described in the https://getcomposer.org/ "Getting Started" section
[Tools] – [Logs] を開いたところ

(4) index.php ファイルを作成します。

[New File] ボタンを押して、index.php ファイルを新規に作成します。ファイルの中身としては、以下を入力します。

<?php
echo 'Hello!';

この時点で、プレビュー画面には index.php の出力内容が表示されます。

もちろん、Live App のURLにアクセスしても、PHPが出力した内容が表示されるはずです。

※ このとき、編集画面上に見えている index.html, script.js, style.ccs は 使っていません。

3. おわりに

ポイントは、

glitch.json ファイルの start プロパティで、お好みのWebサーバーを起動させることができる

という部分です。今回の方法で PHP を使うのは、正式にサポートされているわけではありませんが、この柔軟性の高さは Glitch の魅力の1つです。

※ 今回紹介した方法はあくまでテスト用途が目的であり、本番用では使用しないでください(参照:PHP: Built-in web server – Manual)。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

<pre><code>タグが引き起こす モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」

<pre><code>タグが、モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」を引き起こしていました。

Web Components

Web Components でスタイルシートを再利用する

Constructable Stylesheet Objects の使い方を説明します。

Web

WordPressの記事ページ (それ以外でも多分OK) に、Google Charts を使って生成したグラフを表示する方法

目次1. はじめに2. やりたいこと3. やり方(1) Google Charts の JavaScript ファイルを読み込ませる(2) グラフを表示させたい箇所に div タグを記述する(3) グ …

Web

Notification API のポイント解説

目次1. はじめにNotification API が行うこと補足2. Notification API の使い方(1) デスクトップ通知が許可されているかどうかを取得する。(2) ユーザーにデスクト …

Firefox

Firefox の 強化型トラッキング防止機能

目次1. Firefox の強化型トラッキング防止機能2. 用語トラッカー (Trackers)ソーシャルメディアトラッカートラッキングコンテンツサードパーティのクッキー クロスサイトのトラッキングク …