iPhone/iPad/Android/PC対応、Webアプリの画面をドラッグ&ドロップで開発する「Maqetta」、オープンソースで開発中

2011年5月13日

Webアプリケーションの開発において、タブやボタンやスライダーなど、さまざまなコントロールを画面上にレイアウトしていくためには、これまでHTMLとJavaScriptを組み合わせた面倒なコーディングが必要でした。

それを、ビジュアル開発ツールの画面上でドラッグ&ドロップで開発できるツール「Maqetta」がオープンソースとして開発されています。PCの画面だけではなく、iPadやiPhone、Androidなどの画面にも対応しています。

fig

Dreamweaverのライバルになるか?

fig

Maqettaはもともと米IBMが開発していたツールで、4月に非営利団体のDojo Foundationにオープンソースプロジェクトとして寄贈されました。

Maqetta自身もHTML5のWebアプリケーションとなっており、Webブラウザで実行します。

画面左側には、Dojo、HTML、jQuery UI、Yahoo! UI Libraryなどのコントロールが選択でき、ここから部品を中央の画面にドラッグ&ドロップすることでレイアウトを行えます。div、span、table、label、iframeなどHTMLの標準的要素のほか、DojoのTabコンテナ、Toolbar、Menubar、またjQuery UIのボタン、アコーディオン、スライダー、タブ、Yahoo! UIのCalendarなどが並んでいます。その下にはファイル選択画面。

中央の画面下半分には、現在レイアウトしている画面のソースコードを表示することもできます。

画面右には、選択しているコントロールのプロパティを設定できます。テキストやボタンなどの色や大きさ、右寄せ左寄せなどさまざまなプロパティを変更可能。

デフォルトではPCのWebブラウザを想定した自由な大きさのデザインが可能ですが、画面中央上のデバイス選択ボタンを押すと、iPhoneやiPad、Androidなどのモバイルデバイスを想定した小さな画面を想定したデザインを行うモードに変わります。

画面のプレビューを見ながらデザインするツールとしてはアドビシステムズのDreamweaverがありますが、Maqettaはそれに近い機能を目指しているようです。

Maqettaはオープンソースとして開発中で、ダウンロードして試せるだけでなく、ホスティングされているものをその場で試すこともできます。

このエントリーをはてなブックマークに追加
follow us in feedly


関連タグ HTML/CSS / Web技術 / Web標準 / オープンソース / モバイル



タグクラウド(β版)

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準

アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本