Glideは、デザインのカスタマイズ性が低いことに特徴があります。それが、使いやすさにつながっています。とはいえ、もうちょっと何かできないか、と思うこともありますよね。

実は、何とかやる方法があります。CSSをGlideのアプリ内に埋め込めるのです。それの実践例が、Glide Communityで紹介されていました。こちらです。アプリの作者は、Hisashi-Fujitaさんです。きっと日本人ですね！

こちらのアプリでは、モーダル（画面に重なるように表示される窓）が表示できます。このモーダルは、画面左からニョキっと出てきます😲。そんな動き、Glideの標準では存在しませんね。

コピー可で公開されていますので、皆さんも試すことができます。というか、、、私が試しましたので、まずは続きを見てみましょう！どんな動きになるのかな～😄♪

CSSを埋め込むには何のコンポーネントを使う？

では、CSSを埋め込んでモーダルを出してみましょう！

適当に何かのアプリをアプリビルダーで開いてみます。なんでもいいです。

さて、CSSってどうやって埋め込むのでしたっけ？このブログでもだいぶ前に紹介しました。。。Rich Textコンポーネントです！ということで追加しました。コンポーネントの配列は気にしなくて大丈夫です。

プロパティ内のTextでは、Customを選んでください。これで自由にテキストが入力できるようになります。

ソースコードをありがたく拝借

では、ソースをうめこみます。そのソースは、Fujitaさんが公開してくれていますので、ありがたくコピぺします。べたっとね！

表示されるテキストは、ロレム・イプサム（ダミーテキスト）のようですね。

で、どんな感じになるかというと、、、こうなります！

おお、画面左側からモーダルが出てきました。見慣れないな～。ちょっと驚きですね😲。

このように、CSSを使ってGlideのデザインを拡張することができるんですね。スゴイ！

ＣＳＳが使える方、ぜひお試しください！ああ、私もCSS使えるようになりたいぞ～😆！！

では、ビーダゼーン！

※私のやる気アップとブログの品質向上につながりますので、記事が気に入られた方は、「ポチっ」と好きボタンを押してくださったり、フォローいただけますと幸いです🙇。