新技術導入のお知らせ

お知らせ
2026/02/12 09:00
ニュース画像

はっすーずツールをご利用いただきありがとうございます。

この度、はっすーずツールを管理するスタジオアステルは静的ウェブサイト向け軽量フレームワークを開発したためお知らせいたします。

これまでのフレームワークは特別なサーバーを用いたり、コマンドプロンプトを用いてインストールや起動をする必要がありましたが、今回開発いたしました「Simptic.js」は、JavaScriptを介し、疑似的なフレームワークを構築したものとなります。

今後、はっすーずツール及び関連するサービスは「Simptic.js」に作り替えて提供を予定しております。


■ JSベースフレームワークの違い

Simptic.jsは静的ホスティングとHTML構文を壊さないフレームワークの良さをJavaScriptに落とし込んだ技術です。そのためVS CodeのLive Serverによるローカルサーバ起動でも表示することができます。

標準のフレームワークは共通ページの上にそれぞれのページをリンクに合わせて呼び出す形式が標準ですがSimptic.jsは個々のページを記述した後に共通ページを読み込ませるため、HTMLが最終的に出力されればPHPでもJavaScriptでもCGIでも問題なく使用できることが強みです。

ただし、JavaScriptを組み込む場合、Simptic.jsによる構成データの読み込み完了前にコードが走る場合があるため遅延処理や合致するまでの処理継続を設定する必要があります。

また、ReactやNext.jsのようなAPIを内包したりSDKをインストールすることはできません。基本的にlayout.htmlを含めすべてパブリックとなります。


■ Simptic.js OSSデフォルト仕様

Simptic.jsには最適化されたポップアップを初期実装しております。

NAVタグ内のFLAGタグにはデフォルトでアクセスしたページを検知しアクティブ値を付与します。

また、Simptic.jsは各ページに独自のデザインやスクリプトを設定してもページを遷移すると自動で解除されるようになっているため、ページ汚染を引き起こしません。

もちろんアナリティクスのページごとの検知も可能です。


■ 使い方

各ページに「module/simptic.js」をHEADタグに設定することで呼び出します。

読み込んだ場合、上記のScriptタグの直上に「style/style.css」を設定してください。(このCSSは変えないでください。ここはリロード中の表示崩れを表示しないようにするスタイルが設定されています)

また、BODYタグ内に必ず「COMMONタグ」を設定してください。

これでSimptic.jsを使用できます。


■ 独自タグ

  • FLAGタグ:Aタグに変わる、ページをリロードしない独自タグです。ブラウザで読み込むと自動でAタグに変換されます。Next.jsのLINKタグと類似しています。
  • COMMONタグ:COMMONタグはlayout.htmlの呼び出しに使用されます。一つのHTMLあたり、一つまでしか使用できません。

上記以外はそのままご利用いただけます。


■ 注意点

Simptic.jsはlayout.htmlをほぼそのまま各ページに伝えます。そのためlayout.htmlに文法エラーや悪意あるコードが含まれると読み込むすべてのページが汚染されます。

また、APIやSDKの内包は推奨しておりません。簡素な静的なウェブページの制作に限り使用してください。

※動的サーバをご利用の場合はPHPを介すか、PHPとHTMLを結合した形でAPIを読み込まれますと一定の安全性は確保されます。

※その他のフレームワークとの共用は競合するためできません。


■ 展開時期

Simptic.jsを実装した新サービスは2月28日よりサービス開始予定のツールにて採用予定です。その後、使用感の検査と開発最適化を繰り返したのち、オープンソースソフトウェアとしてGitHubに公開予定です。

GitHub展開開始までは、Simptic.js特設サイトを開設し、ダウンロードできる環境を構築いたします。


© Simptic.js / びじゅママ [MIT License]
© Bijumama / Studioaster

Simptic.jsは最適化のため多くの提案を受け付けております。くわしくはこちらから
※こちらのフォームは2月15日から受け付けを開始予定です。

一覧に戻る