aki158 / text-snippet-sharing-service Goto Github PK

View Code? Open in Web Editor NEW

2.0 1.0 0.0 166 KB

📑オンラインでプレーンテキストやコードスニペットを共有できるサービス

Home Page: https://text-snippet-sharing-service.aki158-website.blog

CSS 1.77% JavaScript 10.02% PHP 85.45% Hack 2.77%

text-snippet-sharing-service's Introduction

Text-Snippet-Sharing-Service

🌱概要

オンラインでプレーンテキストやコードスニペットを共有できるサービス

🏠URL

https://text-snippet-sharing-service.aki158-website.blog

✨デモ

スニペット作成

📝説明

このサービスは、ユーザーアカウント不要でスニペットを共有できるサービスです。

下記のような場合に役立つサービスです!

ちょっとしたメモを一時的にオンラインで保存して後で使いたい...
チームメンバーとコードを共有したい!

プログラミングでは様々なプログラムで似たようなコードを記述することがあります。

よく使うコードをスニペットとして切り貼りし「使いまわす」ことで開発効率を向上させることができます。

基本的な機能としてスニペットの作成/閲覧/一覧表示ができます。

スニペットの作成時には、オプション(シンタックスハイライト/有効期限/スニペットの名前)を設定することができます。

有効期限が切れたスニペットは自動的に削除され閲覧できなくなります。

補足

説明で登場する用語について補足します。

用語の意味がわからない時は、下記表を確認してください。

用語	意味
スニペット	短い文章や特定の機能を実現したコードのまとまりのことです。
シンタックスハイライト	プログラミングやマークアップ言語のソースコードを編集または表示する際に使用される機能です。コード内の異なる要素(キーワード、変数、文字列、コメントなど)に対して色分けして、視覚的に区別しやすくします。
エディタ	テキストやコードなどを作成、編集、表示するためのソフトウェアのことです。このサービスでは、「+New Snippet」と記載してある下の大きな入力欄のことです。

🚀使用方法

URLにアクセスする
スニペットの内容をエディタに記述する
Optional Snippet Settings を設定する
Create New Snippet ボタンをクリックする

🙋使用例

スニペットを作成する際のイメージはデモを参考にしてください。

URLにアクセスする
エディタにdef main(): print("Hello world")と記述する(※1)
Optional Snippet Settings から下記のように設定する
- Syntax Highlighting : Python
- Snippet Expiration : 10min
- Snippet Name / Title : py_test
Create New Snippet ボタンをクリックする

※1. 使用例では、コードを記述していますが、短い文章なども記述できます。

💾使用技術

カテゴリ	技術スタック
フロントエンド	HTML
	CSS
	JavaScript
	フレームワーク : Bootstrap
	ライブラリ(コードエディタ) : Monaco Editor
バックエンド	PHP
インフラ	Amazon EC2
	Nginx
	Ubuntu
	VirtualBox
データベース	MySQL
デザイン	Figma
デザイン	Draw.io(vscode)
その他	Git
	Github
	SSL/TLS証明書取得、更新、暗号化 : Certbot

🗄️ER図

👀機能一覧

ヘッダー

機能	内容
New Snippet	ボタンをクリックすると、スニペット作成ページに遷移します。
Public Snippets	ボタンをクリックすると、スニペット一覧ページに遷移します。

スニペット作成ページ

機能		内容
エラーメッセージ		エディタが下記入力の場合は、Create New Snippet ボタンをクリックすると、スニペットの作成に失敗しエラーメッセージを表示します。・65,535バイトを超えている・空白・UTF-8以外のエンコーディング
エディタ		共有したいスニペットを記述できます。
Optional Snippet Settings	Syntax Highlighting :	plaintextと10の主要な言語から選択できます。
	Snippet Expiration :	10min、1h、1day、Never のいづれかから選択できます。
	Snippet Name / Title :	シンタックスの名前を入力できます。入力しない場合は、デフォルトで Untitled という名前になります。入力時は、サポートしていない文字がありますので、注意してください。サポートしていない文字が入力欄にある場合は、Create New Snippet ボタンをクリックすることができません。
	Create New Snippet	ボタンをクリックすると、スニペットを作成できます。

スニペットの一覧ページ

機能	内容
スニペットの一覧表示	共有されたスニペットの一覧が表示されます。スニペットが作成されてから新しい順番で表示されます。また、スニペット一覧ページがロードされた時に有効期限を確認しているため、有効期限が切れているスニペットは表示されません。
スニペット閲覧ページへの遷移	一覧からユーザーが見たいスニペットをクリックして閲覧することができます。
クリックしたスニペットが有効期限切れの場合の処理	ロードされてからしばらく時間をおくと、その間にスニペットの有効期限が切れることがあります。その場合は、スニペットの有効期限切れページに遷移します。

スニペットの閲覧ページ

機能	内容
スニペットのURL生成	スニペット作成ページのCreate New Snippet ボタンをクリックすると、スニペット用の一意のURLが生成されます。
スニペットの閲覧	共有されたスニペットを閲覧することができます。エディタに記述されているスニペットは、スニペット作成ページで設定したシンタックスハイライトが適用されています。また、閲覧のみを想定しているため、編集はできません。
スニペットの有効期限の確認	ページがロードされた際にスニペットの有効期限を確認しています。もしも有効期限が切れていた場合は、スニペットの有効期限切れページへ遷移します。
スニペットのコピー	Copy code　ボタンをクリックすると、スニペットを丸ごとコピーできます。

スニペットの有効期限切れページ

機能	内容
有効期限切れページの表示	スニペット有効期限が切れた場合は、このページに遷移します。

📜作成の経緯

下記項目の理解を深めるために作成しました。

3 層アーキテクチャ
データベースのセットアップ
envのセットアップ
バックエンド言語を用いたデータベースの操作
クエリのセキュリティ
URLルーティング
サーバサイドレンダリング

⭐️こだわった点

マイグレーションベースのスキーマ管理

項目	内容
概要	マイグレーションベースのスキーマ管理は、バージョン管理された小規模な変更を段階的に適用してデータベーススキーマを時間とともに管理・進化させる方法です。この方法によりシステムに小さな変更を加え、それを実行またはロールバックする手段を提供できます。
スクリプトの生成	CLIで下記コマンドを実行すると、スクリプトを生成することができます。 `php console code-gen migration --name {FILENAME}` スクリプトはマイグレーションインターフェースに準拠しており、up関数とdown関数で構成されています。下記フォーマットのスクリプトが `Database\Migrations` の配下に生成されます。 `{YYYY-MM-DD}_{UNIX_TIMESTAMP}_{FILENAME}.php`
実行	スクリプトを実行する際は、スキーママイグレーションを行うためのマイグレーションコマンドが用意されていてアップグレード(up)またはロールバック(down)を行うことができます。また、CLIで下記コマンドを実行すると、テーブルが初期化されます。 `php console migrate --init`

データの投入

項目	内容
スクリプトの生成	CLIで下記コマンドを実行すると、スクリプトを生成することができます。 `php console code-gen seeder --name {FILENAME}` スクリプトは、シーダーシステムに準拠しており、tableName、tableColumns、createRowData()で構成されています。下記フォーマットのスクリプトが `Database\Seeds` の配下に生成されます。
実行	シードコマンドを実行すると、スクリプトで定義した通りにデータベースにデータが挿入されます。ユーザーが使用方法を実施すると、実行されるような処理にしています。

MVCモデル

HTMLRendererは、MVCモデルのアプローチを採用しています。

モデル、ビュー、コントローラが分離され、 Routing\routes.php 内の匿名関数型のコントローラが Renderer クラスのインスタンスを作成して返す役割を果たします。

コントローラは、OOP クラスやデータベーススキーマにマッピングされたデータなどのモデルを使ってデータを準備し、このデータをビューに渡してコンテンツを作成します。

スニペットのアップロード

ユーザーが使用方法を実施すると、スニペット用の一意のURL(※2)が生成されるような処理にしています。

unique-stringの部分にはhash関数を活用しランダムな文字列を生成しました。

URLのパースには、parse_url関数を活用し{path}/{unique-string}のみを取得しています。

※2. フォーマット : https://{domain}/{path}/{unique-string}

入力値のチェック

入力値は厳格に検証とサニタイズを行っています。

ここでの入力値とは、使用方法に従いユーザーが設定したものです。

不適切な入力値があればエラーメッセージを出力するようにしています。

SQLインジェクションの対策

インジェクションを防ぐ方法として、プリペアドステートメントを利用してデータを取得しています。

具体的には、PHPのmysqliクラスが提供している下記3つの関数を使用しています。

関数	内容
prepare()	実行するためのSQL文を準備します。ここでは、実際のデータの代わりにプレースホルダを使用しています。
bind_param()	プリペアドステートメントのパラメータに変数をバインドします。
execute()	プリペアドステートメントを実行します。

エラーハンドリング

不適切な入力(大量のテキストやコード、またはサポートされていない文字)が送信された場合に、エラーメッセージを表示します。

具体的な不適切な入力の条件は、スニペット作成ページの「機能 : エラーメッセージ」に記載していますので確認ください。

📮今後の実装したいもの

ログイン機能
ログインしたユーザーが作成したスニペットを一覧で見れる機能
シンタックスハイライトの選択肢を増やす
有効期限の選択肢を増やす
レスポンシブデザイン

📑参考文献

公式ドキュメント

参考にしたサイト

Pastebin

text-snippet-sharing-service's People

Contributors

Stargazers

Watchers

text-snippet-sharing-service's Issues

【実装】ページ作成

画面設計を参考に以下ページのデザインを仮で作成する。
バックエンドを実装する際の足がかりを作るのが目的です。

New Snipeet
Public Snippets
Snippet

要件 : 期限切れになったスニペットは自動的に削除され、「Expired Snippet」というメッセージを表示します。
例.
Public Snippetsの一覧には基本的には、有効期限が切れていないもののみ表示する。
ただし、Public Snippetsを表示してから操作しないで一定時間放置された場合、その間に有効期限が切れることがある。
この時、有効期限が切れてないか確認し切れていたら、以下の処理を行う。

Snippet ページのmonacoエディタに「Expired Snippet」と表示する
Snippetテーブルから対象のデータを削除する

【本番環境】日時が9時間ずれて表示される

概要

以下3つの日時変更が必要

Webサーバー
Nginxに紐づくphp.ini
MySQL

環境は以下の通り

Webサーバー : AWS EC2 (Ubuntu)、Nginx
言語 : PHP
DB : MySQL

1. Webサーバー

AWS EC2インスタンス（Ubuntuを使用）のタイムゾーンを日本時刻（JST, UTC+9）に設定する必要がある。

タイムゾーンの確認
以下コマンドを実行し現在のタイムゾーン設定を確認する。
どちらで確認してもOK。

timedatectl

date

タイムゾーンの変更
以下コマンドを実行しタイムゾーンを日本時刻（東京）に変更する。

sudo timedatectl set-timezone Asia/Tokyo

変更の確認
「1. タイムゾーンの確認」と同じ方法で確認する。
Nginxの再起動
Nginxを再起動する

sudo systemctl restart nginx

2. Nginxに紐づくphp.ini

php.iniファイルがある場所へ移動
NginxとPHP-FPMを使用している場合は、以下の場所にある。

/etc/php/[バージョン]/fpm/php.ini

php.iniを変更する
php.iniを開き「date.timezone」を変更し保存する。

変更前

;date.timezone =

変更後

date.timezone = "Asia/Tokyo"

Webサーバーの再起動
Nginxを再起動する

sudo systemctl restart nginx

3. MySQL

「1. Webサーバー」を対応した後に、MySQLを再起動させる必要がある。

MySQLのタイムゾーンの確認
MySQLにログインし以下コマンドを実行する。
system_time_zoneがUTCであったため、以降の手順を実施する。
(JSTであれば、日本時間になっているので手順2と3は実施不要)

SHOW GLOBAL VARIABLES LIKE '%time_zone';

MySQLの再起動
以下コマンドを実行し、MySQLを再起動する

sudo systemctl restart mysql

変更の確認
「1. MySQLのタイムゾーンの確認」と同じ方法で確認する。
system_time_zoneがJSTに変更されていたためOK。

【設計】ER図の作成

vscodeのDraw.ioを使用してみる
作成するテーブルは snippet テーブルのみ

PHP Startup: Unable to load dynamic library 'mysqli'

内容

php.iniのmysqliモジュールを使用したかったので、コメントアウトをはずしてみました。
するとエラーが発生しました。。。
「Unable to load dynamic library 'mysqli'」で検索するといくつか解決方法がヒットしますが、うまくいきませんでした。

;extension=mysqli

エラー

PHP Warning:  PHP Startup: Unable to load dynamic library 'mysqli' (tried: /usr/lib/php/20230831/mysqli (/usr/lib/php/20230831/mysqli: cannot open shared object file: No such file or directory), /usr/lib/php/20230831/mysqli.so (/usr/lib/php/20230831/mysqli.so: undefined symbol: mysqlnd_global_stats)) in Unknown on line 0

解決方法

mysqliモジュールのインストールがうまくできていなかったのが原因でした。
(調べた感じだと、パッケージ依存関係があやしそう)
再インストールしてみると、うまくいきました！
実行したコマンドは以下。

sudo apt-get remove php8.3-mysql
sudo apt update
sudo apt-get install -y php8.3-mysql

有効期限がNeverなのに、スニペットが消える

現状のプログラムは
$expiration = "Never"の場合の処理がないため、スニペットが消える可能性がある。
PHP_INT_MAXがintの最大値だから超えないかもしれないが、処理を追加する。

   public static function isExpired(string $expiration, string $pre): bool{
        $now = date("Y-m-d H:i:s");
        $expirationValue = PHP_INT_MAX;

        if($expiration === "10min"){
            $expirationValue = 10;
        }
        else if($expiration === "1h"){
            $expirationValue = 60;
        }
        else if($expiration === "1day"){
            $expirationValue = 1440;
        }

        $preTime = new DateTime($pre);
        $currentTime = new DateTime($now);
        $interval = $preTime->diff($currentTime);

        $minutes = $interval->days * 24 * 60;
        $minutes += $interval->h * 60;
        $minutes += $interval->i;

        return $expirationValue - $minutes < 0;
    }

【実装】スニペット表示機能

Snippet ページ
機能：公開されたSnippetを表示する

Snippet表示欄
表示にはmonacoエディタを使用し実装する
monacoエディタは編集できないようにしたいため、readOnlyのオプションを使う。
実装する際は、以下を参考にする
microsoft/monaco-editor#54
readOnly: true
コピー機能
クリックすると表示されているSnippetをコピーさせる

json_encodeで文字列が勝手に変換される

内容

スニペット投稿機能
monaco-editorに記述したプログラムをPHPで取得しMySQLのデータベースに追加した。
スニペット表示機能
PHPを使用しデータベースからデータを取得した。
その後、取得したデータをPHPからJavaScriptに渡した。
Javascriptではmonaco-editorの初期値を定義しておりvalueに取得したデータを代入した。
スニペットを表示するページを確認するとmonaco-editor上に文字列が表示されていたが
期待した文字列と少し異なっていた。

プログラム

<?php

// composerの依存関係のオートロード
require_once '../vendor/autoload.php';

use Exception;
use Database\MySQLWrapper;

$path = $_GET['path']??null;

if(!$path) {
    die("No path specified.");
}

// データベース接続の初期化
$db = new MySQLWrapper();

try {
    // pathでスニペットを取得するステートメントを準備します。
    $stmt = $db->prepare("SELECT * FROM snippet WHERE path = ?");
    $stmt->bind_param('s', $path);
    $stmt->execute();

    $result = $stmt->get_result();
    $snippet = $result->fetch_assoc();
} catch (Exception $e) {
    die("Error fetching snippet by path: " . $e->getMessage());
}

if (!$snippet) {
    print("No snippet found with path: $path");
    exit;
}

print($snippet["code"]."<br>");
print(json_encode($snippet["code"])."<br>");

?>

<script type="text/javascript">
    var snippet = <?php echo json_encode($snippet); ?>;
</script>

■出力1
print($snippet["code"]."<br>");
def main():\n print(\"hello\")

■出力2
print(json_encode($snippet["code"])."<br>");
"def main():\\n print(\\\"hello\\\")"

結果

原因を調査した結果、背景の2(取得したデータをPHPからJavaScriptに渡した)で

json_encode()を使用していたのだが、そこで文字列が勝手に変換されていた。

解決策

JavaScriptでmonaco-editorの初期値を定義する際に、適切な文字列になるようにJSON.parse()を使用した。

require.config({ paths: { "vs": "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs" }});
require(["vs/editor/editor.main"], function() {
    const editor = monaco.editor.create(document.getElementById("editor"), {
        value: JSON.parse('"' + snippet["code"] + '"'),
        language: snippet["syntax"],
        readOnly: true
    });
});

【設計】画面設計(デザインを決める)

Figmaを使用してデザインのイメージを固める

Snippet Name / Title の入力欄が空白の場合、送信できるが500エラーが返ってくる

【実装】エラーハンドリング

機能要件

大量のテキストやコード、またはサポートされていない文字が送信された場合でも、
適切に処理し、エラーメッセージを表示します。

実装項目

機能要件をもとに以下の場合はエラーメッセージを表示します。
また、エラーメッセージは、「Create New Snippet」をクリックされてから
スニペット作成ページを再度エラーメッセージ付きで表示することとします。

大量のテキスト : MySQLのテキスト型の最大長「65,535バイト」を超えた場合
エラーメッセージ : You cannot create a snippet of text larger than 65,535 bytes.
サポートされていない文字
- 空白の場合(エディタに文字が入力されていない)
  エラーメッセージ : You cannot create an empty snippet.
- UTF-8以外のエンコーディング（例：Shift-JIS、ISO-8859-1、Windows-1252など)
  Monaco Editor自体はUTF-8エンコーディングを前提としています。
  これは、ウェブブラウザが一般的にUTF-8エンコーディングを使用しているためです。
  PHPで実装する際は、UTF-8エンコーディングのチェックに mb_check_encoding 関数を使用してください。
  エラーメッセージ : You cannot create snippets that contain non-UTF-8 characters.

【実装】マイグレーション管理システム

以下機能要件に従い実装する

必要なすべてのデータベーススキーマをセットアップするためのマイグレーション管理システムを使用します。
データベースとのインタラクションには MySQLWrapper クラスを採用します。

【実装】ヘッダーのボタン機能

New Snippet ボタン
New Snippet ページに遷移する
Public Snippets ボタン
Public Snippets ページに遷移する

【実装】レスポンシブデザイン

スマホで見るとデザインが崩れているので修正してください。

【本番環境】Nginxが再起動できない

概要

Nginxを再起動すると下記エラーが出ました。

sudo systemctl restart nginx
Job for nginx.service failed because the control process exited with error code.
See "systemctl status nginx.service" and "journalctl -xeu nginx.service" for details.

Nginxのエラーログを確認すると、Nginxがポート80（HTTP）およびポート443（HTTPS）にバインドしようとしたときに失敗していました。
具体的には、bind() to 0.0.0.0:80 failed および bind() to [::]:443 failed などのメッセージが繰り返し出力されていました。

解決方法

指定されたポートが既に他のプロセスによって使用されていることによって引き起こされていました。

以下に競合しているプロセスがある場合の解放する手順を記載します。

ポートを使用しているプロセスの特定：
ss -tulnp コマンドを実行して、ポート 80 および 443 を使用しているプロセスを確認します。
これにより、nginx と競合しているプロセスが特定できます。

sudo ss -tulnp | grep ':80\|:443'

プロセスの強制終了：
systemctl stop コマンドが効果がない場合、直接プロセスを強制終了することができます。
例えば、プロセス ID が 248174 であれば、コマンドは sudo kill -9 248174 となります。
プロセスIDは手順1を実施するとわかります。

sudo kill -9 [プロセスID]

nginx の再起動：

sudo systemctl start nginx

【実装】投稿一覧機能

Public Snippets ページ
機能：投稿されたSnippetの一覧を表示する

一覧表を実装する
- 一覧表は PlanUML-Server を参考に実装する
- 各列の情報は snippetテーブルのデータから取得する
  - ID,NAME/TITLE,SYNTAX
    snippetテーブルからそのまま取得する
  - POSTED
    「現在時刻 - Snippetテーブルのcreated_at」で算出する
一覧の項目をクリックすると、Snippet ページに遷移させる

【実装】スニペットのアップロード

機能要件

ユーザーが内容を送信すると、スニペット用の一意の URL が生成されます。
URL は一意の文字列に基づいています。
フォーマットは、https://{domain}/{path}/{unique-string} のような形で、URL のパースには、例えば parse_url のようなライブラリを活用することが可能です。

実装について

機能要件をもとにhttps://{domain}/{path}/{unique-string} のような形のフォーマットで実装してください。
現状は、クエリを使用して実装されています。

【本番環境】PHPのfile_put_contents()が動かない

今回はmonaco-editorに変更が入るたびに、Temp/edit.txtを更新するようにしていた。
ファイルやディレクトリがWebサーバー（例：www-data）によって書き込み可能にする必要があるがパーミッションを変更していなかった。
所有者を変更するには、以下のようにする。

sudo chown -R www-data:www-data Temp

変更前

変更後

【実装】スニペット投稿機能

New Snippet ページ
機能:Snippetを新規で作成し投稿する

aki158 / text-snippet-sharing-service Goto Github PK

text-snippet-sharing-service's Introduction

Text-Snippet-Sharing-Service

🌱概要

🏠URL

✨デモ

スニペット作成

📝説明

補足

🚀使用方法

🙋使用例

💾使用技術

🗄️ER図

👀機能一覧

ヘッダー

スニペット作成ページ

スニペットの一覧ページ

スニペットの閲覧ページ

スニペットの有効期限切れページ

📜作成の経緯

⭐️こだわった点

マイグレーションベースのスキーマ管理

データの投入

MVCモデル

スニペットのアップロード

入力値のチェック

SQLインジェクションの対策

エラーハンドリング

📮今後の実装したいもの

📑参考文献

公式ドキュメント

参考にしたサイト

text-snippet-sharing-service's People

Contributors

Stargazers

Watchers

text-snippet-sharing-service's Issues

概要

1. Webサーバー

2. Nginxに紐づくphp.ini

3. MySQL

内容

エラー

解決方法

内容

プログラム

結果

解決策

機能要件

実装項目

概要

解決方法

機能要件

実装について

Recommend Projects

Recommend Topics

Recommend Org