Text-Snippet-Sharing-Service

🌱概要

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

🏠URL

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

✨デモ

スニペット作成

📝説明

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

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

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

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

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

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

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

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

補足

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

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

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

🚀使用方法

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

🙋使用例

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

1. URLにアクセスする
2. エディタにdef main(): print("Hello world")と記述する(※1)
3. Optional Snippet Settings から下記のように設定する
   • Syntax Highlighting : Python
   • Snippet Expiration : 10min
   • Snippet Name / Title : py_test
4. 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()	プリペアドステートメントを実行します。

エラーハンドリング

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

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

📮今後の実装したいもの

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

📑参考文献

公式ドキュメント

• Monaco Editor
• Bootstrap
• PHPマニュアル
• MySQL

参考にしたサイト

• Pastebin