jQuery Mobileベースのサイトを直感的に制作できるサービス「Codiqa」
2012年7月11日 Tag:webサイト制作 Text by 上瀧
HTML、CSSの記述をせずに、スマートフォンサイト制作を行えるWebサービス「Codiqa」のご紹介です。
現在、登録後30日間は無料で利用できます。
使い方を説明します。
サイトにアクセスし、トップページの「Create a Free Account」からユーザー登録を行います。
必要項目の記入が終わったら、利用規約等の確認後「Get Started」を押します。
メールアドレスの認証などは行われずに、ダッシュボードにアクセスできます。
今回は、はじめからサイトを作るので、「Projects」の右の「+New」ボタンをクリックし、ダイアログにプロジェクト名を入力します。
すると、編集画面が表示されます。
画面右上のバーには「Design」「Preview」「Inspector」の3つのビューモードがあります。
「Design」モードでは、要素の配置など制作全般を行います。
「Preview」モードでは、エフェクト、画面遷移をその場で確認でき、「Inspector」モードでは、HTMLが表示されます。
ビューモード選択エリアの左の「Device Size」では、デバイスや解像度を選択できます。
その右の「Rotate Device」では画面を回転(縦方向から横方向へ)できます。
画面左下の「COMPONENTS」では、構成要素を選択できます。
見出し、テキスト、画像をはじめ、モバイル端末によく使われるUI要素や、地図(Googleマップ)もあります。
操作は直感的で、配置したい構成要素を中央のデバイスの上にドラッグすればOKです。
要素の配置後に詳細な設定が可能です。
テキスト、テキストサイズ、遷移トランジションなどが選択できます。
リンク先のページも作り終えたら、「Preview」モードで確認後、ダッシュボードに戻ります。
制作したプロジェクト名の下に「DOWNLOAD HTML」のボタンがあるのでクリックします。
ダウンロードしたzipには、HTML、CSS、JSファイル、画像フォルダが格納されているので、そのままサーバーにアップもできます。
基本的な使い方は以上になります。
もう少し作業を効率化させたい方や、チームでの作業を行う際に便利なのが、テーマ機能です。
jQuery Mobile Theme Rollerのサイトから作ったテーマのCSSをCodiqaのダッシュボードの「Themes」にペーストすると、編集画面でそのテーマが使用可能になるので、色の細かい設定などを後から修整する必要が少なくなりそうです。
登録後30日間は無料で利用できますが、その後はプロジェクトの参加メンバー、ストレージの容量などによって料金体系が変わってきます。
jQuery Mobileを一度触ってみたいという個人の方から、複数人でプロジェクトを行う方々まで、一度お試しいただきたいサービスです。
Webサイト:Codiqa