カスタムウィジェット

update: 2025-05-17

Solacepaceのカスタムウィジェットは、HTML・CSS・JavaScriptを自由に記述して、自分だけのミニアプリを作成・配置できる上級者向けのウィジェットです。

シンプルなデザインパーツから、ちょっとしたインタラクティブ機能まで、自分のアイデアをそのままウィジェットとして組み込むことができます。

機能概要

カスタムウィジェットは、以下の3つのコード入力欄から構成されています。

HTML欄：基本となる要素の記述（例：ボタン、リストなど）
CSS欄：スタイル指定（例：レイアウトや色）
JavaScript欄：動きやロジックの追加（例：クリックイベント処理）

記述内容は即座にウィジェット内に反映されるため、その場でプレビューしながら編集することができます。

記述スタイルの例

コードは以下のように、<html>, <style>, <script> タグを使って構成することを想定しています。

<html>
  <div class="hello">Hello!</div>
</html>

<style>
  .hello {
    background-color: red;
    color: white;
    padding: 10px;
  }
</style>

<script>
  console.log("Hello from custom widget!");
</script>

このように、HTML・CSS・JavaScriptを1つのウィジェットにまとめて書くことで、小さなWebコンポーネントを自由に設計できます。

こんなことができます

自作のカウントダウンタイマーや時計
色や配置を自由に指定したメモ表示
ボタンやフォームなどの簡易UIコンポーネント
JavaScriptによるちょっとした自動化や視覚効果

使い方はアイデア次第で無限大です。

外部サービスの埋め込みにも対応

カスタムウィジェットでは、iframeを使った外部コンテンツの埋め込みも可能です。たとえば以下のようなサービスと組み合わせることで、より便利に活用できます：

YouTube や Vimeo の動画プレイヤー
CodePen、JSFiddle などのコード共有サービス
Google Maps、外部のグラフツールなど

セキュリティ上の理由から、一部のJavaScript機能には制限があります。たとえば、ウィジェット内部のスクリプトは「外部との連携や特殊なブラウザ機能」に対して制限された状態で実行されます。そのため、すべてのコードが完全に動作するとは限りませんので、少しずつ確認しながら調整するのがおすすめです。

⚠ ご注意：上級者向けのウィジェットです

カスタムウィジェットは非常に自由度が高い反面、HTML・CSS・JavaScriptの基本的な理解が必要になります。エラーや意図しない動作を避けるため、少しずつ試してみることをおすすめします。

もし「こんなことができるのかな？」と思ったら、外部ツール（CodePenなど）で試しながら進めるのも良い方法です。

まとめ

Solacepaceのカスタムウィジェットは、空間を“自分の手でつくる”ための最強の拡張ツールです。自作アプリ・装飾・外部連携など、あなたのスキルと発想次第で、可能性はどこまでも広がります。ぜひ、実験感覚で楽しみながら、自分だけのワークスペースを組み上げてみてください。