ウェブサイトを作成する場合、自分でコードを書くか、WordPressなどのCMSを利用することが一般的です。しかしこうした方法は非常にシンプルなウェブサイトを作成する場合でも複雑になってしまいがちで、知識がなければ「どこを編集したらどの部分の見た目が変更されるのか」を見つけるのが難しいものです。「editable-website」は普段見慣れているウェブサイトの画面のまま、編集したい場所にカーソルを持って行くだけで直接編集できるという「分かりやすさ」を突き詰めた仕様のサイト作成ツールとのことなので、実際に使って試してみました。
Make your website editable
https://editable.website/
michael/editable-website: A SvelteKit template for building CMS-free editable websites
https://github.com/michael/editable-website
editable-websiteを利用するためにはnode.jsのインストールが必要です。下記のURLから、手元の環境に合ったインストール方法を選択してください。
パッケージマネージャを利用した Node.js のインストール | Node.js
https://nodejs.org/ja/download/package-manager
さらに、PostgreSQLをインストールします。PostgreSQLのダウンロードページを開き、バージョン15.2の「Windows x86-64」版をダウンロード。
ダウンロードしたインストーラーをダブルクリックして実行します。
インストール場所を確認して「Next」をクリック。このインストール場所は後でPathを通す際に利用するのでメモしておきます。
スーパーユーザーのパスワードを決めて「Next」をクリック。こうした設定が多数続きますが、その他の設定に関しては全て変更せずに「Next」をクリックしていけばOK。
インストール後、Stack Builderを起動する設定のチェックを外して「Finish」をクリック。
続いてPostgreSQLのフォルダへPathを通します。「Winキー + R」で「ファイル名を指定して実行」を開き、「sysdm.cpl」と入力して「OK」をクリック。
「システムのプロパティ」が開くので、「詳細設定」タブから「環境変数」をクリックして開きます。
システム環境変数の「Path」をクリックして「編集」をクリック。
「新規」をクリックしてPostgreSQLのインストール時に選択したフォルダの下にある「bin」を指定し、「OK」をクリック。
その後、シェルを起動します。WindowsであればPowershellを利用すればOK。
PostgreSQLに接続する際に求められるパスワードの入力を省略するため、インストール時に指定したパスワードを環境変数「PGPASSWORD」にセットしておきます。Powershellの場合は下記のコマンドで指定できます。
$Env:PGPASSWORD = '[この部分をパスワードに書き換える]'
下記のコマンドを入力してPostgreSQLに接続します。
psql -h localhost -U postgres
「editable-website」という名前でデータベースを作成し、作成できたら「Ctrl + C」キーでPostgreSQLから切断します。
CREATE DATABASE "editable-website";
続いてeditable-websiteのコードを準備します。GitHubのページを開き、「Code」から「Download ZIP」をクリック。
ダウンロードしたZIPファイルを選択し、「すべて展開」をクリックして展開します。
展開後のフォルダをシェルで開くために、フォルダを右クリックして「パスのコピー」をクリック。
シェルに下記のコマンドを入力してeditable-websiteのフォルダに移動します。
cd [コピーしておいたパスをここに貼り付け]
下記のコマンドを入力してデータベースの初期化を行います。
psql -h localhost -U postgres -d editable-website -a -f sql/schema.sql
下記のように必要なテーブルが自動で作成されていきます。
つづいてストレージを用意します。S3互換のストレージであれば何を利用しても良いとのことですが、今回は本家のAWS S3を利用します。まずユーザーを開き、「ユーザーを追加」をクリック。
分かりやすいユーザー名を入力し、「次へ」をクリック。
「ポリシーを直接アタッチする」をクリックし、検索欄に「s3」と入力して「AmazonS3FullAccess」にチェックを入れます。
右下の「次へ」をクリック。
「ユーザーの作成」をクリック。
ユーザーページに戻るので、作成したユーザーをクリックして詳細画面を開きます。
「セキュリティ認証情報」をクリック。
「アクセスキーを作成」をクリック。
「AWSの外部で実行されるアプリケーション」をクリックし、「次へ」をクリックします。
アクセスキーの説明を分かりやすく入力し、「アクセスキーを作成」をクリック。
アクセスキーとシークレットアクセスキーをコピーし、保存しておきます。
続いてS3のバケットのページを開き、「バケットを作成」をクリックします。
分かりやすいバケット名を命名し、リージョンをアジアパシフィック(東京)にします。バケット名は他人のいかなるバケットともかぶってはいけないため、最後に乱数をくっつけるなどの工夫が必要です。
下にスクロールして「パブリックアクセスをすべてブロック」のチェックを外し、下の「現在の設定により～」のチェックを入れます。
一番下までスクロールして「バケットを作成」をクリック。
GitHubからダウンロードして展開したフォルダに「.env」という名前でファイルを作成し、テキストエディタで環境変数を設定していきます。
設定するべき環境変数は下記の通り。
DB_URL=postgresql://postgres:[postgreSQLインストール時に指定したパスワード]@localhost:5432/editable-website
S3_ACCESS_KEY=[作成したAWSユーザーのアクセスキー]
S3_SECRET_ACCESS_KEY=[作成したAWSユーザーのシークレットアクセスキー]
S3_ENDPOINT=https://s3.ap-northeast-1.amazonaws.com
S3_BUCKET=[S3のバケット名]
ADMIN_PASSWORD=[editable-websiteにログインする際のパスワード、適当に作成して入力]
PUBLIC_ASSET_PATH=https://s3.ap-northeast-1.amazonaws.com/[S3のバケット名]
続いて下記のコマンドで必要なライブラリをインストールします。
npm install
ライブラリがインストールできたら下記のコマンドで開発環境を起動します。
npm run dev
下記のような表示が出れば準備完了。URL部分をコピーします。
ブラウザを起動し、アドレスバーに先ほどコピーしたURLを入力すればページにアクセスできます。
URL末尾に「/login」と入力するとログインページが開くため、環境変数で設定したパスワードを入力して「Login」をクリック。
自動でトップページに戻ります。最上部に点3つのボタンが追加されているのでクリックし、「Edit page」をクリック。
すると表示中のページの一部がそのまま編集できるようになります。編集後は「Save」をクリックして保存します。
「npm run build」というコマンドを入力することで本番向けのビルドを行えますが、実際に試してみるとエラーが出て進めませんでした。
なお、レイアウトや「どの部分を編集可能にするのか」を変更するにはSvelteで記述されたテンプレートを編集する必要があるとのことです。
この記事のタイトルとURLをコピーする
