Glitchの使い方

Glitchは無料で利用できるオンライン（ブラウザ上で編集や保存ができる）エディタです
入力を開始した瞬間からサイトは公開されます
＊Glitch Pro（有料）は非公開にできます

Glitchは、学習、プロトタイプの開発、テスト、フルスタックのアプリケーションの開発、デモのホスティングなど、さまざまな目的に利用することができます

6種類のテンプレートが準備されています
＊作成されたアプリをリミックス（複製）して利用することもできます

「Facebook」「Google」「GitHub」「Email」を使ってログインします

ログインしていないユーザーは120時間のプロジェクト時間（作業時間）
＊5日後に自動的に期限切れになります

ドキュメント

目次

テンプレートと無料枠の制限
エディタ
Settingsとステータスバー他
埋め込み
その他便利な機能
応用編
1. Viteでthree.jsの開発環境

テンプレートと無料枠の制限

テンプレート

Glitch In Bio
「Link in bio」として使用するページ
ちなみに、「Link in bio」とは外部のWebサイトに誘導するためのリンクページ
Classic Website
静的サイト
＊「package.json・ requirements.txt・glitch.json」が含まれていない場合
Node.js
フルスタックJavaScriptアプリケーションの構築
一般的なExpressを使用したフロントエンドコードとバックエンドコードの両方が含まれる
React Static Site Generator
Reactを使用した静的サイトジェネレーター
Eleventy Static Site Generator
Eleventy使用した静的サイトジェネレーター
SQlite Database
SQLiteデータベースを使用するNode.jsサーバースクリプトが含まれる

無料枠の制限

ログインユーザーは毎月1,000プロジェクト時間を無料で利用できます
＊プロジェクト時間は毎月1日の00:00 UTCに補充されます
ディスク容量はアプリごとに200MB
「/tmp」ディレクトリ（ファイルはアプリの再起動時に削除）はカウントされません
nodeモジュールはカウントされません
＊nodeモジュールには個別に1GBの制限があります
アセットのストレージは別で512MBあります
メモリはアプリごとに512MBの制限があります
アップロードファイルのサイズは最大256MB
1時間あたり4000リクエスト
5分間何も操作しないと「スリープ」

GlitchPro（有料）に登録すると最大 5 つのプロジェクトを「ブースト（常にオン・メモリとディスク容量の追加）」できます

＊ダッシュボードで現在のプロジェクト時間数を確認できます

エディタ

エディタを開く方法

「New Project」ボタンをクリックしスターターテンプレートを選択
ダッシュボードに保存されているプロジェクトをクリック
「Remix」ボタンをクリックして既存のプロジェクトのコピーを作成
「View Source」ボタンをクリックしてプロジェクトのコードを表示
ブラウザに直接プロジェクトのURLを入力
＊https://glitch.com/edit/#!/プロジェクト名

エディターが開くと3つのパートが表示されます

左（ファイルビュー）
- 「+」をクリックして新しいファイルを作成
- ファイル名をホバーして3点ドットをクリックして既存のファイルを削除・名前変更・複製
- Assetsをクリックして画像などのメディアファイルを保存
- .envファイルはトークンや APIキーなどの情報を保存
- 「Settings」をクリック「Edit Project Details」からプロジェクトに付けられたランダムな名前と説明を変更します
中央（エディタ）
- Markdownファイル（.md）を使用している場合、編集ペインの上部にある「EDIT MARKDOWN 」ボタンをクリックコードとコンテンツを切り替えでる
- 「PRETTIER」ボタンを使用して既存のコード整列ができます
  ＊「PRETTIER」ボタンはPrettierが利用可能なファイルに表示されます
- package.jsonファイルを選択して編集、または「ADD PACKAGE」ボタンを使用してnpmモジュールのインストールや更新ができる
右（プレビュー）
＊下部にある「PREVIEW」をクリックして右側に表示するか別タブで開くか選択
- プレビューを表示したくない場合はウィンドウの右上隅にある3点ドットから「Close Preview」を選択します。
- デフォルトのプレビューはindex.htmlです
  別のページを表示する場合はプレビューウィンドウの上部にある/URLボックスに表示するページの名前を入力
  ＊index.htmlのないアプリで作業している場合はプロジェクトのプレビューに読み込み画面が表示されます

アセットファイルについて

アセットにファイルをアップロードするとCDN に追加されます
ファイル名ではなく固有のURLにアクセス
URLの形式は https://cdn.glitch.com/<トークン>%2F<ファイル名> です
＊.glitch-assetsという名前の隠しファイルにも追加されます
＊assetsまたは.glitch-assetsからファイルを削除するとプロジェクトから削除されますが、CDN からは削除されません

アセットファイルをクリックするしてモーダルからURLをコピー
モーダルの外側をクリックして閉じる

Settingsとステータスバー他

「Settings」のメニューから実行できる操作

New project：新しいプロジェクトを作成
Switch project：プロジェクトを切り替える
＊既存のプロジェクトのリストが表示されます
Remix this project：作業中のプロジェクトのコピーを作成
Embed this project：プロジェクトの埋め込みコードをコピーできます（別のサイトで表示する用）
Toggle auto refresh：既定ではコードを編集するとアプリを更新します
無効にする場合はチェックを外す
Toggle text wrap：完全なコード行を表示するために右端までスクロールしたくない場合はチェツクをつける
Toggle light/dark theme：エディターを「ライトモード」から「ダークモード」に切り替える
Archive this project：「削除」機能
＊アーカイブされたプロジェクトをダッシュボードからアクティブ化できる
Leave project：プロジェクトの所有者ではない場合のプロジェクトのメンバーに表示される
「Leave Project」をクリックするとプロジェクトから削除されアプリを編集できなくる

ステータスバー他

「STATUS」：プロジェクトの統計を表示
＊プロジェクトが制限を超え始めると「Status」の横にアラートが表示される
「LOGS」：ログを表示
「TERMINAL」：ターミナルで行った変更は即時にプロジェクトに反映されないので、
ターミナルでrefreshコマンドを実行する必要があります
「TOOLS」
- Import and Export：コードをインポートまたはエクスポートするためのオプションを表示
  詳細：https://help.glitch.com/kb/section/20/
- Custom Domains：カスタムドメインを追加するオプションを表示
  詳細：https://help.glitch.com/kb/article/9-adding-a-custom-domain/
- Rewind：プロジェクトの編集履歴のタイムラインが開きます
  ＊元に戻すことができる
  詳細：https://help.glitch.com/kb/article/21-rewind/

「Share」ボタン（エディターの上部）
共同作業するために他のGlitchユーザーを招待
＊詳細：https://help.glitch.com/kb/article/49-inviting-members-to-your-project/
「サイトのリンク」と「ソースコードへの読み取り専用リンク」

埋め込み

アプリを別のサイトに埋め込む方法
公開に設定されているアプリのみを埋め込むことができます
＊ソースコードを表示するオプションを無効にはできません

「Settings」→「Embed this project」

カスタマイズ

Show app：プレビューを表示する
＊またはURLにパレメーターを追加previewSize=100
Show code：コードを表示する
＊またはURLにパレメーターを追加previewSize=0
Hide attribution
アバターが埋め込みのフッターに表示されますが、非表示にする場合にチェックする
＊またはURLにパレメーターを追加attributionHidden=true
表示する幅を増減するには
左右に→ をドラッグ
＊またはURLにパレメーターを追加previewSize=X （0 〜100未満の整数）
埋め込みの高さを変更
上下に↑をドラッグ
＊または埋め込みの高さを変更（ height: Xpx）
コードを表示する場合ファイルビューが表示されますが、ファイルビューを非表示にするには、プロジェクト名の横にある左矢印をクリック
＊またはURLにパレメーターを追加sidebarCollapsed=true
埋め込みに表示される特定のコードファイルを設定するにはファイルツリーでファイルを選択する
＊またはURLにパレメーターを追加path=ファイルパス
Highlight specific lines of code
コード行のハイライトはURLにパレメーターを追加: highlights=1,10
＊カンマ区切りで指定

その他便利な機能

GitHubとの連携
＊GitHubアカウントは1つのGlitchアカウントとのみ接続できます

GitHubからコードをインポートする
https://help.glitch.com/kb/article/20-importing-code-from-github/
プロジェクトをGitHub にエクスポートする
https://help.glitch.com/kb/article/27-exporting-projects-to-github/
＊エクスポートはリポジトリに少なくとも 1 つのファイルが必要（空のリポジトリにエクスポートはできない）

プレイリスト
＊Glitch アプリのリストをキュレートします

よく使うアプリへのリスト（ショートカットとして）を作ったり
リミックスしたいアプリのリスト（ブックマークとして）を作ったり
いろいろ利用できます
＊アプリをプレイリストに追加したら必要に応じてメモを追加できます

プレイリストを表示するには
glitch.comのページの右上のアバターをクリック⇨ポップアップメニューのアバターをクリック

サイト検索バー
「Glitchで作成されたアプリ・アプリのプレイリスト・ユーザー・チームページ」を探せます

検索結果

Top Results：上位のProjects、People、Playlists、Teams
Projects：すべての公開アプリ
People：Glitchコミュニティメンバー
Playlists ：Glitchコミュニティメンバーのプレイリスト
Teams ：チームページ

ボタンの生成

Glitchのプロジェクトで表示するボタンを生成できるウィジェット
スニペットの取得https://button.glitch.me/
リミックスするよう促したい場合のボタンジェネレーター
https://remix-button.glitch.me/

応用編

Viteでthree.jsの開発環境

今回は静的サイトのテンプレートを使って、Viteでthree.jsの開発環境を作成できたので、備忘録として残します

ちなみにViteは高速な開発サーバーと効率的なビルドシステムを提供します
プレビューだけを確認する場合はViteの必要はないかもしれませんが、本番環境で使用するコードを効率的にビルドし、最適化するためにはViteが役立ちます。

packsge.jsonファイルを追加
ポイントはnode.jsのバージョンが古かったので、enginesフィールドを追加し、その中にNode.jsのバージョンを指定します
プロジェクトを起動するstartコマンドは必須

{
  "name": "threejs-vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "engines": {
    "node": "16.x"
  },
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "vite": "^4.3.9"
  },
  "dependencies": {
    "lil-gui": "^0.18.1",
    "three": "^0.153.0"
  }
}

vite.config.jsファイルを追加
rootはデフォルトのファイル構造（ルートにhtml,css,jsがある）を利用する場合は不要
＊Glitchでは、通常、特定のホストとポートで自動的にプロジェクトをホストし、プレビューURLを生成します。しかし、Viteは独自の開発サーバーを提供し、これは通常ローカルホストで実行されます。
なので、Glitchの環境内でViteを使うには、Viteの設定でホストとポートを明示的に指定することでプロジェクトのプレビューを確認できます

export default {
    // root: '',  // ルートディレクトリをデフォルトに設定
    publicDir: './static',  // 静的ファイル用ディレクトリ
    base: './',
    server: {
      host: '0.0.0.0',  // すべてのネットワークインタフェースでサーバーを利用可能にします
      port: 3000  // ポート3000でサーバーを起動します
    },
    build: {
        outDir: './dist',  // 出力ディレクトリ
        emptyOutDir: true,
        sourcemap: true
    }
}

HTMLファイル内のscriptタグにtype=”module”を追加する

<script type="module" src="./script.js"></script>