今回は、もう少し掘り下げて Spryの魅力を紹介していこう。
シンプルなファイル構成
JavaScript ライブラリは、Webページに組み込んで利用するため、その分だけWebページのサイズが大きくなってしまう。そのため、不必要な機能は組み込まなくて済むようにしたり、自分に必要な機能だけを選んでファイルを作れるようになっているものもある。しかし、ダウンロードするファイルが数十MBに及んでいることがあったり、機能を付け足す度にライブラリをダウンロードし直す必要があったりする。
Spryの場合、ダウンロードして解凍した状態では8MB弱。実際のライブラリファイル等は1MB程度でアップロードすることができる(図1)。また、「SpryEffects.js」「SpryHTMLDataSet.js」など、わかりやすい機能名でファイル名がつけられているため、必要な機能のファイルだけを的確に参照することができる。一つ一つのファイルは、100KB程度なので、参照してもほとんど気にならないサイズなのが魅力だ。

簡単な記述
Spryは、「デザイナのための」と銘打つだけあって、非常に簡単な記述でスクリプトを作ることができる。JavaScriptはほとんど使わずに、できるだけHTMLの拡張属性や独自の記述でまかなおうという努力が見える。
例えば、
フェードアウトのサンプル
クリックすると、このエリアがフェードインします
これで、領域のフェードアウトの処理を作ることができた(図2)。上記の一文を見るだけで、スクリプトに慣れた人なら何をやっているかわかるはずだ。上記は「ID属性が"areaTarget"の

また、「XMLを読み込んで、ページ内に表示する」という一見複雑そうなスクリプトについても、以下のようなスクリプトで実現することができる。
XMLを読み込む
名前
1ラウンド
2ラウンド
3ラウンド
4ラウンド
5ラウンド
{name}
{round1}
{round2}
{round3}
{round4}
{round5}
これだけで、XMLファイルを読み込んでテーブルに表示させることができる(図3)。驚くことに、JavaScriptのスクリプトは1行だけで済んでいる。スクリプトの代わりに利用しているのが、「spry:」から始まる拡張属性をHTMLタグに記述することだ。こうして、デザイナやマークアップエンジニア(HTMLコーダー)でも簡単にJavaScriptを使ったスクリプトを作ることができるというわけだ。

とはいえ、この辺りは賛否両論があり、デザインとスクリプトの分離という考えやスクリプトの応用性を考えると、必ずしも好ましい作り方とはいえない。このあたりは、好みの分かれるところといえるだろう。
ZDNet Japan 記事を毎朝メールでまとめ読み(登録無料)
関連ホワイトペーパー
- ローコードによる「デジタルファクトリー」でDXを実現する旅に出る
- DXの鍵を握るフレームワーク「デジタルファクトリー」、ローコード開発チーム拡大の手引き
- ローコードによるDX実現へ欠かせないデジタルファクトリー、その人材基盤の作り方
- なぜ、コンテナー技術を使うことで、ビジネスチャンスを逃さないアプリ開発が可能になるのか?
- 進化する「ものづくりの現場」-仮想空間を用いて三次元CADや演算結果を現場でリアルタイム確認
- 著名企業9社から学ぶデータからアクション可能なインサイトを生み出すためのポイント
- 人気カテゴリ
- 経営
- セキュリティ
- クラウドコンピューティング
- 仮想化
- ビジネスアプリケーション
- モバイル
特集
CIO
- ウィズコロナ時代の人材戦略
- 「働く」を変える、HRテックの今
- 量子コンピューターを知る--現状と今後
- デジタルで変わるスポーツの未来
- CxOメッセージ
- DXのヒント--CxOが知っておくべきこと
- ビジネスとテクノロジーのコンポーザビリティー
- DXマネジメントオフィス入門
- 顧客志向で切り拓くCOVID-19時代の変革ジャーニー
- ビジネス視点で分かるサイバーのリスクとセキュリティ
- 2025年に向けてDXを推進するIT部門の役割とガバナンス
- 教育IT“本格始動”
- ITアナリストが知る日本企業の「ITの盲点」
- デジタル“失敗学”
- エリック松永のデジタルIQ道場
- 研究現場から見たAI
- Larry Dignanの独り言
- 大木豊成「仕事で使うアップルのトリセツ」
- 山本雅史「ハードから読み解くITトレンド放談」
- 田中克己「デジタル岡目八目」
- 松岡功「一言もの申す」
- 松岡功「今週の明言」
- 内山悟志「デジタルジャーニーの歩き方」
- 林雅之「デジタル未来からの手紙」
- 谷川耕一「エンプラITならこれは知っとけ」
- 「プロジェクトマネジメント」の解き方
モバイル
セキュリティ
スペシャル
- 調査で読み解くマルチクラウド化の現状と課題
- マルチクラウド時代のデジタル衛生管理術
- あなたの知らないMDMの世界
- リテールテック最前線
- オブザーバビリティーが変えるCX
- ゼロトラストの基礎知識
- マネージャーを目指すエンジニアのためのビジネスナレッジ
- ローコード技術の衝撃
- デジタル時代を支える顧客接点改革
- エンタープライズAIの隆盛
- 顧客は勝手に育たない--MAツール導入の心得
- 「ひとり情シス」の本当のところ
- ざっくり解決!SNS担当者お悩み相談室
- 生産性向上に効くビジネスITツール最前線
- 庭山一郎「戦略なきIT投資の行く末」
- 課題解決のためのUI/UX
- 10の事情
- 座談会@ZDNet
- 吉田行男「より賢く活用するためのOSS最新動向」
- 古賀政純「Dockerがもたらすビジネス変革」
- 中国ビジネス四方山話
- 企業決算
- ピックアップソリューション : Identityマスターへの道
ホワイトペーパー
新着
-
クラウドコンピューティング
Google Cloud でクラウドネイティブへ再構築、開発者の生産性が大幅向上する革新的アプローチ
-
経営
経営層、利用者、管理者の三方よしの業務環境を実現する「仮想デスクトップサービス」の決定版とは?
-
ビジネスアプリケーション
知っていました?実は3D CADのトップベンダー大塚商会を数字で表す
-
仮想化
VDIプラスαのサービスで働き方を改善
-
セキュリティ
ガートナーが示すセキュリティリーダーの戦略的優先課題、リーダーとチームは何をするべきか
ランキング
NEWSLETTERS
エンタープライズ・コンピューティングの最前線を配信
ZDNet Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET
Japanをご覧ください。