CodePenやJSFiddleなどWeb上でHTML/CSS/JavaScriptを試せるプレイグラウンドサービスが多様に存在します。これらはコードをサーバ側に保存するので、自前で同じような環境を用意するのが面倒です。 今回紹介するurlpagesは静的サイトでも使えるのが魅力です。もちろん作成したコードを他の人に見せることだってできます。

urlpagesの使い方

よくあるHTML/CSS/JavaScriptの入力画面です。

入力すると、下にあるプレビューに反映されます。

記述した内容は専用のURLが生成されます。実態はHTML/CSS/JavaScriptがパックされた文字列です。

urlpagesは記述したコンテンツをパックしてURL中に埋め込みます。そのため、それを別な人が開けば同じ内容が展開されます。コードを少しでも変更すれば、URLも変わります。使いどころを選びますが、ちょっとしたコードであれば簡単に共有できるので便利そうです。

urlpagesはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

jstrieb/urlpages: Create and view web pages stored entirely in the URL