R4

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