アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

Onsen UIをWebサイトで使ってみよう

HTML5のUIフレームワークであるOnsen UIはMonacaとの相性を考えて開発されていますが、必ずしもハイブリッドアプリ専用という訳ではありません。Webサイト開発にも利用が可能です。



GoogleがWebサイトのモバイル対応が行われているかどうかを検索順位に反映することを発表していたり、HTML5によってWebもどんどん多機能になっている中、Onsen UIを使うことで高速な描画で使いやすいWebサイトが構築できるはずです。



そこで今回はOnsen UIをWebサイト開発に利用する方法について紹介したいと思います。



準備



Onsen UI自体はJavaScript/スタイルシートで出来ていますのでダウンロードして配置するだけですが、今回はbowerを使って行いたいと思います。Onsen UIはbowerからコマンド一つでインストール可能です。bowerはnode.jsのパッケージ管理、npmを使ってインストールします。




  1. node.jsのインストール(npmもインストールされます)
  2. Gitのインストール
  3. bowerのインストール



node.jsはNode.js Downloadからダウンロード/インストールができます。GitはMac OSXであればHomebrewやMacPortsから、WindowsであればGit for Windowsをダウンロード/インストールしてください。終わったら続いてbowerをインストールします。





$ npm install -g bower


これでインストールは完了です。



作業用ディレクトリの作成



続いてWebサイトを作るディレクトリ(フォルダ)を作成します。今回は onsenui_for_website としています。そのディレクトリの中でbowerコマンドを実行します。





$ bower install onsenui
bower cached        git://github.com/OnsenUI/OnsenUI.git#1.2.2
bower validate      1.2.2 against git://github.com/OnsenUI/OnsenUI.git#*
bower cached        git://github.com/angular/bower-angular.git#1.3.15
bower validate      1.3.15 against git://github.com/angular/bower-angular.git#~1.3.0
bower install       onsenui#1.2.2
bower install       angular#1.3.15

onsenui#1.2.2 bower_components/onsenui
└── angular#1.3.15

angular#1.3.15 bower_components/angular


Onsen UIがダウンロードされて、 bower_components 以下に展開されます。





Onsen UIのファイル一覧



Onsen UIを使う上で関連付いているAngularJSも一緒に展開されます。これでほぼ準備は完了です。



Gulpの準備



そのまま使っても良いのですが、 bower_components というフォルダに入ってしまっていたり、実際の運用時には不要なファイルも多いので Gulp を使ってまとめることにします。既にnpmは入っていますので、インストールは簡単です。まず最初にnpmで必要なパッケージを管理するようにします。





$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (onsenui_for_website) 
version: (1.0.0) 0.0.1
description: Web site that use the Onsen UI
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: Atsushi Nakatsugawa
license: (ISC) MIT
About to write to /Users/nakatsugawa/Dropbox/DevRel/Monaca/onsenui_for_website/package.json:

{
  "name": "onsenui_for_website",
  "version": "0.0.1",
  "description": "Web site that use the Onsen UI",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\"  &amp; &amp; exit 1"
  },
  "author": "Atsushi Nakatsugawa",
  "license": "MIT"
}


Is this ok? (yes) yes


そうすると package.json というファイルが作成されて、ライブラリを管理できるようになります。後はGulpと必要なライブラリをインストールしていきます。





$ npm install --save-dev -g gulp
$ npm install --save-dev gulp-changed # ここから下はGulpのプラグインです。
$ npm install --save-dev gulp-concat
$ npm install --save-dev gulp-coffee
$ npm install --save-dev gulp-uglify
$ npm install --save-dev gulp-sourcemaps
$ npm install --save-dev gulp-webserver
$ npm install --save-dev del


後はGulp用の設定ファイル、gulpfile.js を作成します。





// gulpfile.js
var gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var webserver = require('gulp-webserver');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');

var paths = {
  scripts: ['app/js/**/*.coffee', '!app/external/**/*.coffee']
};

// Webサーバの機能です
gulp.task('webserver', function() {
  gulp.src("./")
    .pipe(webserver({
      livereload: true,
    }));
});

// スクリプトの結合と配置を行っています
gulp.task('scripts', function() {
  return gulp.src([
      './bower_components/onsenui/build/js/angular/angular.min.js',
      './bower_components/onsenui/build/js/onsenui_all.min.js'
  ])
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./javascripts/'));
});

// ファイルの変更を監視しています(今回は使っていません)
gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
});

gulp.task('default', ['webserver', 'scripts', 'watch']);


これで $ gulp scripts と実行すると、AngularJSとOnsen UIのJavaScriptファイルがくっついた状態で javascripts/all.js として生成されます。なおスタイルシートについても同様の操作が可能ですが、今回は bower_components/onsenui/build/css/ を プロジェクトルート直下に stylesheets という名称でコピーしています。



その結果、次のようなファイル構成になっていればOKです。





Onsen UIのファイル構成



index.htmlの編集



では実際に表示を行うindex.htmlを作成しましょう。まず最初に次のようにHTMLファイルを作成します。





<!DOCTYPE html>
<html class="">
  <head>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex">
    <link rel="stylesheet prefetch" href="stylesheets/onsenui.css">
    <link rel="stylesheet prefetch" href="stylesheets/onsen-css-components.css">
  </head>
  <body>
	<script src="javascripts/all.js"></script>
	<script>
      ons.bootstrap();
      //@ sourceURL=pen.js
    </script>
  </body>
</html>


この形が Onsen UIの基本形になります。後はこの <body>〜</body>の間にコンテンツを書くだけです。JavaScript | Onsen UIには多くのコンポーネントを用意しています。例えばチェックボックスを表示します。内容はPattern: Checkbox List | Onsen UIにもありますが、bodyタグの中に次のように記述します。





<ons-page>
  <ons-toolbar>
    <div class="center">Checkboxes</div>
  </ons-toolbar>
  <ons-list>
    <ons-list-header>Favorite Sports</ons-list-header>

    <ons-list-item modifier="tappable">
      <label class="checkbox checkbox--list-item">
        <input type="checkbox">
        <div class="checkbox__checkmark checkbox--list-item__checkmark"></div>
        Baseball
      </label>
    </ons-list-item>

    <ons-list-item modifier="tappable">
      <label class="checkbox checkbox--list-item">
        <input type="checkbox">
        <div class="checkbox__checkmark checkbox--list-item__checkmark"></div>
        Soccer
      </label>
    </ons-list-item>

    <ons-list-item modifier="tappable">
      <label class="checkbox checkbox--list-item">
        <input type="checkbox" checked="checked">
        <div class="checkbox__checkmark checkbox--list-item__checkmark"></div>
        Basketball
      </label>
    </ons-list-item>

    <ons-list-item modifier="tappable">
      <label class="checkbox checkbox--list-item">
        <input type="checkbox" checked="checked">
        <div class="checkbox__checkmark checkbox--list-item__checkmark"></div>
        Golf
      </label>
    </ons-list-item>

    <ons-list-header>Favorite Food</ons-list-header>

    <ons-list-item modifier="tappable">
      <label class="checkbox checkbox--noborder checkbox--list-item">
        <input type="checkbox" checked="checked">
        <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark"></div>
        Hamburger
      </label>
    </ons-list-item>

    <ons-list-item modifier="tappable">
      <label class="checkbox checkbox--noborder checkbox--list-item">
        <input type="checkbox">
        <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark"></div>
        Beefsteak
      </label>
    </ons-list-item>

    <ons-list-item modifier="tappable">
      <label class="checkbox checkbox--noborder checkbox--list-item">
        <input type="checkbox" checked="checked">
        <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark"></div>
        Spaghetti
      </label>
    </ons-list-item>

    <ons-list-item modifier="tappable">
      <label class="checkbox checkbox--noborder checkbox--list-item">
        <input type="checkbox">
        <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark"></div>
        Natto
      </label>
    </ons-list-item>
  </ons-list>
</ons-page>


この内容を書いたら、 gulp コマンドを実行します。そうすると8000番ポートでWebサーバが立ち上がるので、 http://localhost:8000/ にアクセスします。





チェックボックス一覧



プロフィール風画面を作る



同じようにbodyタグの内容を次のように変更します。





<ons-page>
  <ons-toolbar>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
    <div class="center">Profile</div>
    <div class="right">
      <ons-toolbar-button><ons-icon icon="ion-gear-a" style="vertical-align: -4px; font-size: 28px;"></ons-icon></ons-toolbar-button>
    </div>
  </ons-toolbar>

  <div class="profile-card">
    <a href="https://www.asial.co.jpimages/profile-image-01.png &mode=1" class="popupimg"><img src="https://www.asial.co.jpimages/profile-image-01.png"></a>
    <div class="profile-name">Dave Graham</div>
    <div class="profile-id">@davegraham</div>
    <div class="profile-desc">Freelance designer, software engineer and cyclist</div>
  </div>

  <ons-list>
    <ons-list-item>
      <ons-row>
        <ons-col class="info-col">
          <div class="info-num">87</div>
          <div class="info-unit">Comments</div>
        </ons-col>
        <ons-col class="info-col">
          <div class="info-num">40</div>
          <div class="info-unit">Following</div>
        </ons-col>
        <ons-col class="info-col">
          <div class="info-num">38</div>
          <div class="info-unit">Followers</div>
        </ons-col>
      </ons-row>
    </ons-list-item>
  </ons-list>

  <ons-list modifier="inset" style="margin-top: 10px">
    <ons-list-item modifier="chevron">
      Write a comment
    </ons-list-item>
    <ons-list-item modifier="chevron">
      See details
    </ons-list-item>
    <ons-list-item modifier="chevron">
      Save to the list
    </ons-list-item>
  </ons-list>
  <br>
</ons-page>



この場合は、別途スタイルシートが必要です。stylesheets/profile.cssなどとして次の内容でファイルを作成してください。また、HTML側でlinkタグを使って読み込み指定してください。





.profile-card {
  width: 100%;
  text-align: center;
  color: white;
  padding: 30px 0;
  line-height: 1.4;
  background-color: #33393c;
  text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
}

.profile-image {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  background-color: black;
  border 1px solid white;
  box-shadow:rgba(0, 0, 0, 0.2) 0px 2px 0px 0px;
  -webkit-box-shadow:rgba(0, 0, 0, 0.2) 0px 2px 0px 0px;
}

.profile-name {
  margin: 20px 0 0 0;
  font-weight: 600;
  font-size: 17px;
}

.profile-id {
  margin: 0 0 5px 0;
  font-size: 14px;
  opacity: 0.6;
}

.profile-desc {
  font-size: 15px;
  opacity: 0.6;
  width: 90%;
  text-align: center;
  margin: 0 auto;
}

.info-col {
  height: 60px;
  line-height: 1;
  padding: 12px 0 12px 4px;
}

.info-num {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.8;
}

.info-unit {
  margin-top: 6px;
  font-size: 14px;
  opacity: 0.4;
}


後、こちらの画像をダウンロードして、 images/profile-image–01.png として保存してください。作業が完了すると、次のように表示されるはずです。





Onsen UIを使ったプロフィールページ



他にもサムネイル付きリストページのテンプレートパターンもあります。こういったデザインはブログやメディアサイトの記事一覧でも利用できるのではないでしょうか。





サムネイル付きリストページ






Onsen UIのアイコンはFont AwesomeやIoniconsを使えるようになっていますので、フラットUIなWebサイトを構築する際にも便利に使えます。よりスタイリッシュで高パフォーマンスなモバイルWebサイトを実現するためにOnsen UIをぜひご利用ください!



Onsen UI - A Custom Elements-Based HTML5 UI Framework | Onsen UI

prettyFormsで、フォーム画面をちょっとおしゃれに。

こんにちは。
新型MacBookのデザインの可愛さに惹かれつつも、いまいち購入に踏み切れないないでいる橋本です。
あと500グラム軽ければ、迷うこと無く購入に踏み切るのですが…。

さて、今日は「prettyForms」というツールを紹介します。
このブログを読んでくださっている方の中には、普段業務システムの開発に携わっておられる方もいらっしゃると思います。
業務システムを作成する際には、以下のようなシンプルなフォーム画面を目にすることも多いのではないでしょうか。



ソース


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>入力フォーム</title> 
</head> 
<body>
  <form id="form-sample" name="form-sample" method="post" action="">
  <p>
    <label for="name">お名前</label>
  </p>
  <p>
    <input type="text"name="name" id="name" >
    <br class="clearAll">
  </p>
  <p>
    <label>性別</label>
  </p>
  <p>
    <input type="radio" name="sex" id="man" value="man" checked="checked">
    <label for="man">男</label>
    <input type="radio" name="sex" id="woman" value="woman">
    <label for="woman">女</label>
    <br class="clearAll">
  </p>
  <p>
    <label for="from">出身地</label>
  </p>
  <p>
    <select name="from" id="from">
      <option>----</option>
      <option value="1">東京</option>
      <option value="2">千葉</option>
      <option value="3">埼玉</option>
      <option value="4">沖縄</option>
    </select>
    <br class="clearAll">
  </p>
  <p>
    <label>趣味</label>
  </p>
  <p>
    <input type="checkbox" name="hobby1" id="walking" value="1" />
    <label for="hobby1">ウォーキング</label>
    <input type="checkbox" name="hobby2" id="cooking" value="2" />
    <label for="hobby2">料理</label>
    <input type="checkbox" name="hobby3" id="programming" value="3" />
    <label for="hobby3">プログラミング</label>
    <br class="clearAll">
  </p> 
  <p>
	<label for="message">コメント記入欄</label>
    <textarea name="message" id="message" rows="4" cols="40">一言コメントをどうぞ</textarea>
    <br class="clearAll">
  </p>
  <p>
    <input type="submit" name="submit" value="登録">
  </p>
  </form>
</body>
</html>


このようなシンプルなフォーム画面、
機能的には問題ないのですが、シンプルすぎてなんだか見た目がちょっと寂しいとは思いませんか。
ただ、そう思ったとしても、実際業務を行う中でこのようなシンプルなフォーム画面のデザインに、多くの時間を費やすことは中々難しいのではないかと思います。

今回紹介するツールは、そういったお悩みを解決するツールです。

使い方は非常に簡単。
1.まずは「prettyForms」を以下のサイトからDLし、中身をフォームのhtmlと同じフォルダに展開します。
Agave Group >> Blog Archive >> (Functional) Pretty Forms

2.フォームのhtmlに以下の記述を加えます。

ヘッダ


<head>
 <script type="text/javascript" src="prettyForms.js"></script>
 <link rel="stylesheet" href="prettyForms.css" type="text/css" />
</head>

ボディ


<body onload="prettyForms()">
</body>



3.改めてフォームを表示します。


先ほどのシンプルなフォームがちょっとおしゃれなフォームに変わりましたね。

いやー、すばらしい!!

…と、手放しに喜びたいところなのですが、
このツールを使用するには、いくつか注意点があります。

もう皆さんお気づきかと思いますが、ソースコード中にlabel要素が多用してあります。
実は、このツールはlabel要素を基準としてレイアウトを行います。
そのため、表示する全ての要素に対してlabel要素を追加する必要があります。

また、ソースコード中に<br class="clearAll" />というタグが多数あるのですが、この「clearAll」というクラス名は元々定義されているクラス名で、自動で行われるレイアウト(labelの右側にフォーム部品が回り込むようなレイアウト)を解除するために使用します。
回り込みのレイアウトを解除するためには、いちいちこのタグを挿入する必要があり、この点が少し面倒です。

label要素の記述が必須だったり、clearAllクラスを使って回り込みレイアウトを解除したりしなければいけなかったりと、使用するには不便なことも多いのですが、デザインに時間をかけられない案件などで手軽に見栄えのするフォームを作りたい際には重宝するのではないかと思います。

是非一度使ってみてはいかがでしょうか。

デザインの見積もりをお願いするときに気をつけること

こんにちは、デザインはさっぱりな高橋です。

さて、皆さんはウェブサイトのデザインの見積もりを社外へお願いしたことはありますか?
私は、これまで社内にデザイナーさんがいたり、他の人が担当されていたりで、実際に自分で行うことはありませんでした。最近初めてそういった機会があり、見積もりをお願いしたところ、最初からお伝えしておけば良いことが漏れていたりで、何度かやり取りをすることになり、担当の方のお手を煩わせてしまいました。

その反省から、次回はもっとスムーズに行えるよう、備忘録としてまとめておくことにします。

とはいっても、どれもこれも当たり前のことで特筆すべきことは何もなく、相手もプロですから足りない情報は引き出してくださるのですが、最低限ここに書いたことをメールに初めから記載しておくことで、スムーズに話が進み、お互いに時間を無駄にすることなくハッピーになれるかと思われます。

それでは、例としまして、ケータイサービスのデザインの見積もりをお願いする場合を想定してみます。デザインをお願いするものは、次の三つです。

・サイトロゴ
・PC向けページデザイン(1ページ)
・携帯向けページデザイン(50ページ/3キャリア対応)

以下、そのときに伝えておいたほうがいい/気をつけたほうがいいと思われることです。


■全般

1. 期日

いつまでに見積もりが必要かの提出期日。急ぎの場合は、概算で構わない旨も。
また、サイトの公開予定日から割り出されるデザインの納期も一緒にお伝えてしておくといいと思います。

2. 依頼内容

当然ですが、デザインを依頼したいものが何か(ロゴ、PCトップページ、携帯ページなど)を伝えます。
また、システム開発も請け負っているデザイン会社にお願いする場合は、デザインのみなのか、システムも含むのかも伝えます。

他、次のようなこともお伝えしておくといいと思います。

・アイコンやボタンなどのパーツも含むのか
・フラッシュの有無
・イラストの有無
・文章などの素材はこちらから提供するのか、考えてもらうのか
・コピーライターの文章は必要か

3. サイトの情報

どういったサイトなのかの概略を、伝えて構わない範囲で説明します。対象としているユーザーの世代・性別・嗜好などもあわせて伝えます。

4. 予算

予算がガチガチに決まっているとか、それほど多くの金額を割けない場合などは、正直にお伝えしたほうがいいと思います。そうすれば、限られた予算内でできる最善の提案をしていただけるかと思われます。

5. 優先順位

作業の優先順位も伝えます。

 例: ロゴ > モバイルTOP > モバイル他ページ用パーツ > PCページ

あと、納期・品質・コストの優先順位も伝えておくと、金額の配分を柔軟に変えて対応していただけるかと思われます。


■ロゴについて

納品してもらう際の画像形式を伝えます。AIなどのドロー画像がいいのか、JPEGPNGなどのビットマップ画像でいいのか。

また、1案毎に別費用となる場合もあるので、複数案から採用したい場合は「2案提案・1案採用」などのように、その旨伝えたほうがいいです。

他にも、ロゴの使用用途によっては金額が変わるところもあるようですので、サイト・広告・バナー・印刷媒体など、使用用途もあわせてお伝えしておくといいと思います。


■PC向けページデザインについて

納品物はパーツの切り出しおよびコーディングまで行うのか、それとも一枚絵(PSDなど)で構わないのかといったことを伝えます。
また、コーディングまでお願いする場合は、レイアウトはCSSかテーブルか、対応ブラウザは何になるのかといったこともお伝えします。


■携帯向けページデザインについて

1. 分量

全てのページをデザインおよびコーディングするのか、トップページのみコーディングをお願いし、他ページはパーツのみで良いのかなど、実際の作業量をお伝えします。

2. キャリアと対応機種

・対応するキャリアはどこか
・複数キャリアの場合、キャリア別にページを作成するのか、共通なのか
・どこまでの世代の機種対応か
・絵文字や画像はどうするのか
スタイルシートは使用できるのか
・動作確認はどこまで必要か、社員の所持端末とPC上のエミュレータのみで構わないのか

3. 参考サイト

どの程度のものを期待しているのか、参考となるモバイルサイトやサンプルがあればお伝えします。


■その他

1. 費用

デザイン会社にお願いする場合、構成やディレクション費など、実際の納品物以外の費用が必要になることが多いので、予算を組む場合はそういった費用も含める必要があります。

ちなみに、私は今回初めて知りました。(^^;

2. 実績

これまで携わったサイトのURLを教えていただけるようお願いしてみるといいです。サイトに載っていないものや、今回依頼するものに近いものを教えていただけたりすることもあるかと思います。
そうすれば、どういったデザインやコーディングをするところなのか判断ができます。


以上、見積もりをお願いするときは、もっとこんなことも先に言ってもらえると助かるよーっといったことがありましたら、ぜひぜひお教えくださいませ。

そして最後に、今回お見積もりをお願いいたしました際、快く対応してくださいましたデザイン会社のご担当さま、そして知人の○○ご夫妻に、この場を借りまして御礼申し上げます。m(_ _)m