アシアルブログ

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

AndroidでカードUIの実装に便利なプラグイン

こんにちは、細井です。

Androidから少し離れている内に、GoogleMaterial DesignとかAndroid Studioを使え、とか言っていて取り残されています。。
この記事では、Material Designの概念のうち、カードUIをAndroidで実装する際に便利なプラグインを紹介します。

ListViewAnimations
https://github.com/nhaarman/ListViewAnimations
カードのスクロールにアニメーションを付けたり、カードのドラッグアンドドロップやスワイプでの削除を簡単に行えるようになります。
カードUIでは、スクロールで読み込む前のカードにはアニメーションを付けて、読み込んだ後のカードにはアニメーションを付けないことで、何処まで読み込んだか感覚的に分かるようにすることが推奨されているようです。
今回は、それも実現できるアニメーション付与の機能を試してみます。

StaggeredGridView
https://github.com/etsy/AndroidStaggeredGrid
カードをGridViewで複数列並べた時に、カードの高さが均一になってしまうのを解消してくれるGridViewです。

使ってみた
実際に使って、カードUIの一覧画面っぽいものを作ってみました。
アニメーションは、スクロール時に下からどんどん現れてくるような動きをします。



実装
どちらもGradleでモジュールをダウンロードできます。
build.gradleに以下のdependenciesを追加します。



dependencies {
    // ListViewAnimations
    compile 'com.nhaarman.listviewanimations:lib-core:3.1.0@aar'
    compile 'com.nhaarman.listviewanimations:lib-manipulation:3.1.0@aar'
    compile 'com.nhaarman.listviewanimations:lib-core-slh:3.1.0@aar'
    // Githubでは指定無しですが、無いと動かなかったです
    compile 'com.nineoldandroids:library:2.4.0'
    
    // StaggeredGridView
    compile 'com.etsy.android.grid:library:1.0.5'
    
    // Lollipopで追加されたCardViewも使ってみます
    // support-v7で用意されているので、下位バージョンでも使用できます
    compile "com.android.support:cardview-v7:+"
}


LayoutのxmlはMainActivityのものと、GirdViewに表示するカードのものを用意しました。

【activity_main.xml


<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp">

    <com.etsy.android.grid.StaggeredGridView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/grid_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:item_margin="5dp"
        app:column_count="2"/> <!-- GridViewの列数を指定 -->

</RelativeLayout>


【view_card.xml


<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="3dp"> <!-- カードの角丸を指定 -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp">

        <ImageView
            android:id="@+id/card_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:src="@drawable/card1" />

        <TextView
            android:id="@+id/card_message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/card_message_1"
            android:paddingTop="10dp"/>

    </LinearLayout>

</android.support.v7.widget.CardView>


次は、Activity側のソースになります。
基本的にはGridViewやAdapterのオブジェクトを置き換えるだけです。簡単。

【MainActivity.java


public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // GridViewの代わりに、StaggeredGridViewを使用
        StaggeredGridView gridView = (StaggeredGridView) findViewById(R.id.grid_view);

        // 適当なAdapterを作成
        MyAdapter myAdapter = new MyAdapter();

        // 作成したAdapterをListViewAnimationsのクラスに渡して、AnimationAdapterに
        SwingBottomInAnimationAdapter animationAdapter = new SwingBottomInAnimationAdapter(myAdapter);
        animationAdapter.setAbsListView(gridView);

        // StaggeredGridViewにAnimationAdapterをセット
        gridView.setAdapter(animationAdapter);
    }
    
    // BaseAdapterを継承した適当なAdapter
    private class MyAdapter extends BaseAdapter {
       ・・・
    }
}


ListViewAnimationsには、SwingBottomInAnimationAdapterクラス以外にも以下のクラスが用意されています。

・ AlphaAnimationAdapter
・ ScaleInAnimationAdapter
・ SwingLeftInAnimationAdapter
・ SwingRightInAnimationAdapter

クラス毎にアニメーションが異なります。
アニメーションの動作は、ListViewAnimationsのデモアプリで確認できます。

まとめ
既存のコードにも組み込みやすいプラグインなので、
あまり時間はかけられないけど、それっぽい画面を作りたい時には役立つと思います!

Easily create Master/Detail pages in Onsen UI

Most mobile apps need a way to transition from one page to another and have the data shared between those pages. Onsen UI makes it easy to do so using AngularJS Service and Controller.



Without further ado, will we create an app that looks like this:





1. Create a project using Onsen UI Minimum Template


1. Log in to monaca.mobi


2. Create a new project


3. Choose Onsen UI Minimum Template


You can have a look at this tutorial for detail instruction on how to do this.


Now your project should look like this:


2. Create a service to hold our data


Create a file named data.js with the following content:






var myApp = angular.module('myApp');
myApp.factory('Data', function(){
    var data = {};

    data.items = [
        { 
            title: 'Item 1',
            description: 'Item 1 Description'
        },
        { 
            title: 'Item 2',
            description: 'Item 2 Description'
        },
        { 
            title: 'Item 3',
            description: 'Item 3 Description'
        }
    ]; 

    return data;
});




We named our service Data which will be referenced later.


3. Display the data in page1.html


1. page1.js


Create a file named page1.js with the following content:





function Page1Controller($scope, Data){ // 1
    $scope.items = Data.items;  // 2

    $scope.showDetail = function(index){ // 3
        var selectedItem = Data.items[index];
        Data.selectedItem = selectedItem;
        $scope.ons.navigator.pushPage('page2.html', selectedItem.title);
    }
}


1 We reference the Data service by asking angular to inject it into Page1Controller
2 We assign Data.items to $scope.items so that we can bind it to our html
3 showDetail() function will be called when user click an item. We get the selected item using index, and assigned the selected item to Data server so that we can later reference it from Page2Controller


2. page1.html


Replace page1.html with the following content:





<div class="page center" ng-controller="Page1Controller"> <!-- 1 -->
    <ons-list>
        <ons-list-item ng-repeat="item in items" ng-click="showDetail($index)">  <!-- 2 -->
            {{item.title}}  <!-- 3 -->
        </ons-list-item>
    </ons-list>
</div>


1 We tell angular to use Page1Controller we defined in page1.js using ng-controller
2 We list all item in $scope.items using ng-repeat
3 When the user click an item, we want angular to call showDetail() function. Since we are using ng-repeat, we can use $index to get the index of the item



Insert these two lines into index.html





<script src="data.js"></script>
<script src="page1.js"></script>


Make sure it looks like this:





<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="plugins/plugin-loader.css">     
  <script type="text/javascript" src="plugins/plugin-loader.js"></script>

  <script>
    angular.module('myApp', ['onsen.directives']);   
 </script>    

  <script src="data.js"></script>
  <script src="page1.js"></script>

</head>
<body>    

  <ons-screen page="home_navigator.html"></ons-screen>

</body>
</html>


Now let's see if the items are displayed. Run the app and make sure you see something like this:





4. Show item's detail in page2.html


When an item on the list is clicked, we want to show its detail on page2.html


Remember we have defined showDetail function in page1.js that assigned the selected item to Data service (Data.selectedItem). So let's use it to display the detail.


1. Create page2.js with the following content:





function Page2Controller($scope, Data){
    $scope.item = Data.selectedItem;   
}


Here we assign Data.selectedItem to $scope.item so that we can use in in page2.html



Insert this line into index.html





<script src="page2.js"></script>


Make sure your file look something like this:





<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="plugins/plugin-loader.css">     
  <script type="text/javascript" src="plugins/plugin-loader.js"></script>

  <script>
    angular.module('myApp', ['onsen.directives']);   
 </script>    

  <script src="data.js"></script>
  <script src="page1.js"></script>
  <script src="page2.js"></script>

</head>
<body>    

  <ons-screen page="home_navigator.html"></ons-screen>

</body>
</html>



3. page2.html


Replace page2.html with the following content:





<div class="page center" ng-controller="Page2Controller">
    <h2>{{item.title}}</h2>
    <p>{{item.description}}</p>
</div>


Here we link page2.html to page2.js with ng-controller.


Now let's test our awesome app.


Click on Item 1 and make sure it transition to page2.html and you see something like this:





5. Conclusion


Onsen UI makes it easy to transition from pages to page as well as link data between them with just a few lines of code.


5. Complete Source Code


index.html




<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="plugins/plugin-loader.css">     
  <script type="text/javascript" src="plugins/plugin-loader.js"></script>

  <script>
    angular.module('myApp', ['onsen.directives']);   
 </script>    

  <script src="data.js"></script>
  <script src="page1.js"></script>
  <script src="page2.js"></script>

</head>
<body>    

  <ons-screen page="home_navigator.html"></ons-screen>

</body>
</html>



data.js




var myApp = angular.module('myApp');
myApp.factory('Data', function(){
    var data = {};

    data.items = [
        { 
            title: 'Item 1',
            description: 'Item 1 Description'
        },
        { 
            title: 'Item 2',
            description: 'Item 2 Description'
        },
        { 
            title: 'Item 3',
            description: 'Item 3 Description'
        }
    ]; 

    return data;
});



page1.js




function Page1Controller($scope, Data){
    $scope.items = Data.items;

    $scope.showDetail = function(index){
        var selectedItem = Data.items[index];
        Data.selectedItem = selectedItem;
        $scope.ons.navigator.pushPage('page2.html', selectedItem.title);
    }
}



page1.html




<div class="page center" ng-controller="Page1Controller">
    <ons-list>
        <ons-list-item ng-repeat="item in items" ng-click="showDetail($index)">
            {{item.title}} 
        </ons-list-item>
    </ons-list>
</div>



page2.js




function Page2Controller($scope, Data){
    $scope.item = Data.selectedItem;   
}



page2.html


>>HTML

{{item.title}}


{{item.description}}



「データバインディングによるインタラクティブなUIの効率的な表現」Build Insider OFFLINEで登壇しました



久保田です。

「データバインディングによるインタラクティブなUIの効率的な表現」というタイトルで、Build Insider OFFLINEに登壇しました。この記事ではその発表時に利用したスライドを共有します。

割りと話題が飛び飛びになってる部分もあるのですが、これからのウェブアプリのUIを開発するのに、データバインディングは重要な考え方の一つであるということが伝わればと思います。

イベントに参加された皆様お疲れ様でした。

Webデザイン 配色をイメージで学ぶ【基本11色】

こんにちは、高橋です。

近頃、ユーザが製品を経験してどれだけ満足を得れるのかといった仕組みが注目を浴びています。UXですね。配色もUXの範疇とすれば、理解を深めておいて損はないと思います。今回は基本的は色と使われるWebサイトのタイプも併せてザックリと紹介していきます。


・色紹介




◯赤(Red)



情熱や活気といった気持ちを高ぶらせる色です。
インパクトを与えたいイベント・キャンペーンサイトで使われています。またサイトカラーだけでなく、強調したいコンテンツ・危険を促す削除ボタン等にも使えます。艶のある赤は上品さを感じさせますが、使い過ぎると落ち着きのない雰囲気になってしまいまいます。反対に暗い赤は気持ちを落ち着かせる効果があります。


◯緑(Green)



健康や自然といった癒しを連想させる気持ちを落ち着かせる色です。
自然やエコをモチーフとしたサイトで使われています。また安心のカラーとも呼ばれ、保険に関するサイトでも使われています。また2009年の話ですが、緑のボタンはコンバーション率が高いなんて統計(http://blog.mozilla.org/metrics/2009/06/19/firefox-is-green/)もあるようです。


◯青(Blue)



信頼や知性といった誠実な印象を与える色です。
信用のカラーとして多くの法人サイトでよく使用されており、コンセプトカラーとしては最も使用されている有彩色だと思います。ITとも相性が良いですね。ただ寒色は食欲を抑えますので、料理系のサイトとは相性が良くないです。ということは逆にダイエット系には向いているかもしれません。


◯黃(Yellow)



希望や快活といったとても元気なカラーです。
黄色は有彩色の中で最も明るく子供向けコンテンツに向いています!少し彩度を落とした黄色なら黒との相性が良く冒険や刺激といった雰囲気を連想させます。しかし、お金を扱うコンテンツではそういうつもりがなくても怪しい雰囲気になるかもしれませんので気をつけましょう。それから黄金色はビールを象徴する色であることは忘れてはいけないでしょう。


◯橙(Orange)



陽気や好奇心といった活発にさせる印象を与える色です。
最もバランス良く購買欲を高める色です。スーパーのチラシでは赤と黃の組み合わせが多いですが、これでは激安という印象が先行してチープな印象を与えてしまいます。その両方をうまい具合に表現してくれるオレンジはショッピングサイトでよく使われています。また明るい青とは南国をイメージさせるため夏のイベントサイトなど抜群の相性でしょう。


◯ピンク(Pink)



可愛らしさや幸せといった甘いイメージを与えるカラーです。
ふんわりとした明るいピンクは女性向けのサイトでよく使われてます。ただ、ピンクは開放感のある色ですので真面目なコンテンツでバシッとキメるのは難しかったりします。色からそれますが、その際は角のあるレイアウトで緊張感を出すと良いかもしれません。


◯茶(Brown)



木や土といったズッシリとしながらもぬくもりを感じさせるカラーです。
木の素材感を出したいサイトでよく使われています。また自然を連想させる緑との相性が良く、生命を表現しやすいと思います。また伝統的といった渋いイメージに最適です。


◯紫(Purple)



神秘や魅力といったムードを感じさせるカラーです。
Webデザインではあまり使う機会がないかもしれません。これはよく言われることですが、青と赤の二面性を持つカラーなので印象がその時の気持ちで変わったりして不安定です。それが逆に不思議と感じられるのが紫の魅力だと思います。占い系のコンテンツでは定番のように使用されます。また渋めの紫は和のイメージを持つため例えば京都に関連するコンテンツには使えると思います。


◯白(White)



純粋や平和といった神聖なイメージさせる色です。
潔癖なイメージから病院や医療機関を思い浮かべる人は多いと思います。また白は膨張色でありベースにするとそこに広い空間があるようにも感じられます。不動産関連のサイトもそうですが、間取り図が白塗りなのはそのためのように感じられます。


◯黒(Black)



恐怖や絶望といった不安をイメージさせる色です。
謎やホラーを題材としたコンテンツで使われます。ネガティブな印象の反面、デザインでは有彩色とのバランスを保つとても重要な色となります。また黒という性質上どんな色とも相性が良いです。ですが、カラーバランスが自然でもメインカラーが黒に近づいた時の雰囲気は思い描いているイメージと離れているかもしれません。黒をたくさん使うと途端に難しくなります。


◯灰(Gray)



無機質や調和といった控えめな印象の色です。
バランスが良くシンプルなサイトに仕上げたい時に便利で、多くのサイトで使用されています。また質感を硬くして艶を出せば途端に高級感が出ます。さらにWebサイトの『一工夫欲しいな』という場面にサッと馴染みます。表の偶数行のみ薄いグレーにする。無効なボタンなら濃いグレーにする。といった感じです。


・配色について



配色の選定は、例えばメインカラーを1つ選び類似色3つにアクセントカラー1つを探すといったルールはどうでしょうか。中々バランスのよい配色に仕上がると思います。



まずメインカラーを1つ選び(上品な赤)、それから類似色3つ(渋い赤、くすんだ赤、暗いオレンジ)にアクセントカラー1つ(深く暗い緑)を探す。


Web上に便利なジェネレータや参考になる配色が公開されているので積極的に活用しましょう。

◯ウェブ配色ツール Ver2.0


リアルタイムでプレビューが確認できていい感じ

http://www.color-fortuna.com/color_scheme_genelator2/


◯kuler


レートで並べたりするとイケてる配色がチェックできていい感じ

https://kuler.adobe.com/

・まとめ



とりあえず11色紹介してみましたが、どうでしょうか?面白かったなら良かったです。

色の性格をある程度把握していれば「ここのヘッダは青ベースだな〜」とか「ここの背景は#fdfcfcにノイズつけたぐらいが自然かなぁ」というのがパッと思い浮かびます。組み合わせによっては全く新しい印象を与えることもあるので色は奥が深いし面白いですね。

ウェブ制作に重要なワイヤフレームを書けるツール&ウェブサービス6選


wireframe-zoning.jpg by luc legay, on Flickr

こんにちは、久保田です。

ウェブサイトのデザインやコーディングを始める前にワイヤフレームは作っていますか?ワイヤフレームは、以下の様な内容を設計するのに利用されます。

・ページ間の遷移
・ページの内容
・ページの大まかなレイアウト

これらの項目についてチームやクライアントと予め合意しておくと、後に続くビジュアルデザインやコーディング時の前提を共有でき、作業をスムーズに進めることが出来ます。これからどのようなウェブサイトを作るのか?ということをきちんと共有することでデザイナーやコーダーや関係者と意思統一することができるわけです。

この記事では、このワイヤフレームを書けるツールやウェブサイトを紹介します。

OmniGraffle







古くからある使いやすいMacOSX用のアプリケーションです。ワイヤフレームだけではなく様々な図を書けます。Standard版が$99ドル、Professional版が$199ドルしますが、筆者はワイヤフレーム作りにはこれを使っています。

Cacoo





こちらもワイヤフレームだけではなく図全般を書けるウェブサービスです。こちらはフリーで利用できます。

Balsamiq





ウェブからもローカルからも利用できるワイヤフレーム作成用のツールです。インストール版は$79ドルします。myBalsamiqを利用することで、ブラウザ上でチームでワイヤフレームを作れて便利です。

wireframe.cc





ウェブサイトにアクセスするだけですぐに使える手軽なサービスです。ウェブサイトやツールの雰囲気がポップで魅力的です。フリーで利用できます。

Google Drawing





Google Docsから利用できる図の描画ツールです。こちらもフリーでかつGoogle Docsと同様にチームで共有しながら作業できます。

HotGloo





ワイヤフレーム作成に特化したウェブサービスです。ワイヤフレーム作成だけに特化しているだけあって、チーム作業はもちろんのこと、ワイヤフレームに様々な状態を定義したりインタラクションを付け足したり刷ることが出来ます。SMALLプランだと月$14ドルで利用できます。

終わりに



ワイヤフレームを予め作っておくと後の作業を助けてくれます。チームでも個人でも使いやすいツールを使いたいですね。以上ワイヤフレームを作成できるツールやサービスを紹介しました。

Monaca Transitions

Hi, Katsuya here.

Anyway in this article I'd like to continue telling you about our new development environment Monaca, while at the same time hopefully giving it a bit of a plug! I hope you enjoyed my previous article about Monaca native components. In this article I'm going to tell you about transition functionality which was released at the same time.

If you're wondering what Monaca is please have a look here.

Since its difficult to show you everything with screenshots for real-time information please check the debugger.



* We want to make a multiple screen application


If you use an iPhone or Android application you've probably noticed an option like "go to next screen". These include things like



・From a list screen to a detail screen
・From an application administration screen to a settings screen
・From the main screen to the settings screen


..and so on, there are lots of examples where content that can't be displayed on one screen has to be moved to another.

Unfortunately in an HTML-based application you can't configure interfaces to use multiple screens. This is because the standard doesn't support it, and also because the screen display (WebView) is different from screens that draw HTML.

We address this problem as follows



・substitute 'a' tag
・using a library such as jQuery to represent screen transition animations


..and so on,
Of course, its possible to create something reliable using this method

...however, if that's the case the screen with the 'a' tag will change abruptly, eventually jQuery will become aware that the page has changed and complete the HTML... some people would find this interruption unsettling... 。 。

Therefore we have introduced a feature called 'transition'

* Transition


This term refers to a native application supports screen transitions.
By using this feature it becomes possible to perform transitions.



・It becomes possible to develop applications with multiple screens
・You can use native screen transition animations



Well sorry for spending so long on the explanation, let's jump in and see how we do this in Monaca!


* A practical example





As before we start by creating a project

Next, open the IDE for this project, as well as index.html we'll create another html file.
As I explained at the start we need a detail screen, for example an application settings screen
so here is detail.html



As you can see there are several entries

index.html


<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Plain Project Skeleton</title>
        <script type="text/javascript" src="plugins/plugin-loader.js"></script>
        <script type="text/javascript">
            // Set virtual screen width size to 640 pixels
            monaca.viewport({width: 320});
        </script>
    </head>
    <body>
        <h1>First screen</h1>
    </body>
</html>


detail.html


<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <!-- Please do not remote the following line -->
        <script type="text/javascript" src="plugins/plugin-loader.js"></script>
        <script type="text/javascript">
            // Set virtual screen width size to 320 pixels 
            monaca.viewport({width: 320});
        </script>
    </head>
    <body>
        <h1>following screen</h1>
        <a href="index.html">Back</a>
    </body>
</html>


Important:to use the transition this tag is important...


<script type="text/javascript" src="plugins/plugin-loader.js"></script>

Please don't modify it!

Within the application we are going to transition from index.html to detail.html
To do that please add the following tag to index.html



<a href="javascript:void" onClick="monaca.pushPage('detail.html');">transition to detail screen</a>




If possible, try tapping the link in the debugger
....so how did it go?
Did the screen slide across and get replaced?
That was a transition! Pretty cool don't you think?

Just as a test let's try doing the screen refresh the conventional way.



<a href="detail.html">Detail page with no transition



Don't you feel much more connection with the application when you use a transition?
Of course, it's quite acceptable to use both methods but you'll find most users strongly prefer transitions.

For more information on this method...



monaca.pushPage('detail.html');


...for more information please check out the documentation here.


and one more thing...
So you're on the detail page and now you want to get back to the first screen? No problem! Just add this tag to your detail.html file.



<a href="javascript:void(0);" onClick="monaca.popPage();">Go back with transition</a>




Practice by tapping this link...
You should find an animation takes you back to index.html

or how about this?



monaca.popPage();


...for more information please check out the documentation here.

Using the method above you can transition back and forth between multiple screens.



* Conclusion


Using transition functionality it's possible to move between multiple screens.
In practice by using the "onTap" descriptors in the .ui file it's possible to use transitions when you press the native component button
By using native screen transitons,

..and thats about it for now!

* Link


Monaca smartphone application development
transitioning document

Monaca Native Components

Hello, this is Katsuya,

In this blog I'm going to tell you about Monaca and at the same time give it a bit of a plug! Specifically I'd like to tell you about the native components feature that we added recently.


・What are native components? 
・Native component number one, displaying the tool bar


※Since this article is intended for those with some experience of Monaca, if you haven't used it before I recommend starting here.



* About native components



As those of you who have used Monaca before will know, Monaca is a WebView-based application development environment.
For that reason its not possible to use proprietary iPhone and Android UI components.



As anyone who has used the iPhone will know, the UI is extremely rich.
Which is great of course but how can we bring that to our applications?
Well that's where native components come into it.

At Asial, we decided to create a development environment that addressed this problem. After a lot of trials and tribulations we finally managed it... enter Monaca!
So let me tell you how to use it.
OK, lets have a look at using it in practice!



* Native component number one, displaying the tool bar



In this case, we are just going to use one native component, the tool bar.
First of all, we need to create a Monaca project.
For testing purposes we'll start with these settings.



When you open the project, please create a file called index.ui.
This .ui file is essential for displaying the native components.
Index.html needs index.ui, and whenever you need to use native components in an .html file, you will need a corresponding .ui file.



The index.ui file will take the following form. Each definition is created in JSON format


{
    "top": {
        "container": "toolbar",
        "style": {
            "title": "Demo"
        },
        "right": [{
            "component": "button",
            "style": {
                "text": "tap me!"
            },
            "event": {
                "onTap": "onTapButton()"
            }
        }]
    }
}



For more detailed information about this please check out the Monaca documentation. Here is the index.ui file


・The top of the screen uses the toolbar
・Demo is displayed in the title
・A button is displayed on the right hand side when the button is pressed this JavaScript will run

..and so on.

By the way, the index.html file will look like this.


<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Plain Project Skeleton</title>
        <script type="text/javascript" src="plugins/plugin-loader.js"></script>
        <script type="text/javascript">
            // Set virtual screen width size to 640 pixels
            monaca.viewport({width: 320});
        </script>
    </head>
    <body>
        native component demo
    </body>
</html>


Right, lets stop there and check our code in the debugger.
What do you think?





The native components are correctly displayed.
In the upper screen there's a native component, at the bottom there isn't.
If you compare the two screenshots its pretty clear which one looks better, and it was much quicker and easier to create the native OS interface than having to build a custom CSS.

Next, we'll define the onTapButton behaviour.
In index.html we'll call the onTapButton behaviour JavaScript function we defined in the .ui file earlier.



<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Plain Project Skeleton</title>
        <script type="text/javascript" src="plugins/plugin-loader.js"></script>
        <script type="text/javascript">
            // Set virtual screen width size to 640 pixels
            monaca.viewport({width: 320});
            function onTapButton(){
                alert("native component run in JavaScript!");
            }
        </script>
    </head>
    <body>
        native component demo
    </body>
</html>



Lets check in the debugger.
If you tap the top right hand button, the JavaScript from index.html runs! As you can see you've just developed a rich UI application in WebView with native components but done with JavaScript.





* Conclusion



Please have a go for yourself and see how you get on, remember because its html based your application is not just rich but cross-platform.
Well I hope you've enjoyed this article and that you have great fun with the new Monaca development environment.

My next article introduces the transition function which was released at the same time as native components, please check it out when you have a moment!



* links


Monaca Web Site
About Native Component

Monacaトランジション

夏真っ盛りですね!
こんにちは、斉藤です。

今回も、アシアルのサービスであるMonacaの宣伝兼講座です!
前回の記事「Monacaネイティブコンポーネント」はいかがでしたか?
この記事では、そのネイティブコンポーネントと同時にリリースした"トランジション"と呼ばれる機能についてお伝えします。

Monacaって何?な方は、まずこちらから。
また、今回の記事はスクリーンショットで全てをお伝えすることが難しいため、実際にデバッガ上で動きをご確認ください。




* 複数画面のアプリが作りたい


iPhone, Androidのアプリケーションを触っていると、"最初の画面から、次の画面へ移る"といったことはよくありますよね?



・一覧画面から、詳細画面へ
・アプリケーション管理画面から、アプリケーションの設定画面へ
・メイン画面から、設定画面へ

などなど、一つの画面では表示しきれない情報を扱うシーンはたくさんあります。

ところが、HTMLベースのアプリケーションでは、複数の画面を使うインターフェースを構成をすることができません。これは、HTMLを描画している画面(WebView)が違う画面に移る、といったことを標準でサポートしている訳ではないからです。

これを解決する方法として、


・aタグで代用する
・jQueryなどのライブラリを使い、画面遷移アニメーションを表現する

などなどと挙げられます。
もちろん、この方法でも、しっかりとしたものを作ることは可能です!

・・・ですが、aタグだと画面がぱっと変わるし、jQueryは結局複数のページのことを意識したHTMLが出来上がっちゃうし・・・
と、気になる人には気になりますよね。。。

そこで、僕たちからの提案として、"トランジション"という機能を提供します!

* トランジション


この言葉は、ネイティブのアプリケーションが持つ画面遷移のことを指しています。
このトランジションを使うことで、こんなことが可能です。


・複数の画面を使ったアプリケーションを開発することが出来る
・ネイティブの持つ画面遷移アニメーションを利用することが出来る


それでは、前置きが長くなりましたが、これをMonacaで扱う方法を今回ご紹介します!



* 使ってみる


では、前回と同じように、お試し用のプロジェクトを用意します。

次に、このプロジェクトのIDEを開き、index.htmlの他に適当にhtmlファイルを作ります。
冒頭で述べた、"詳細画面"や"アプリケーション設定画面"といった二枚目の画面のためのhtmlとして作ります。
ここでは、名前をdetail.htmlとしました。

それぞれは、このように編集しています。

index.html


<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Plain Project Skeleton</title>
        <script type="text/javascript" src="plugins/plugin-loader.js"></script>
        <script type="text/javascript">
            // Set virtual screen width size to 640 pixels (横幅640pxに設定)
            monaca.viewport({width: 320});
        </script>
    </head>
    <body>
        <h1>最初の画面</h1>
    </body>
</html>


detail.html


<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <!-- Please do not remote the following line -->
        <script type="text/javascript" src="plugins/plugin-loader.js"></script>
        <script type="text/javascript">
            // Set virtual screen width size to 320 pixels 
            monaca.viewport({width: 320});
        </script>
    </head>
    <body>
        <h1>次の画面</h1>
        <a href="index.html">戻る</a>
    </body>
</html>


注意点:トランジションを使う中で、


<script type="text/javascript" src="plugins/plugin-loader.js"></script>

というタグが重要になります。ここは編集しないでください!


アプリケーションを作っていく中で、index.htmlから、detail.htmlに移りたくなったとします。
そんなときは、以下のタグをindex.htmlに書いてみてください。


<a href="javascript:void(0);" onClick="monaca.pushPage('detail.html');">トランジションを使って詳細画面へ</a>


出来たら、デバッガで実行して、このリンクをタップしてみます。
・・・どうですか?
画面がスライドして、切り替わったことが確認できましたか?
これがトランジションです!かっこいいですよね?

試しに、従来の方法である以下のタグでもやってみてください。


<a href="detail.html">トランジションを使わず詳細画面へ</a>

トランジション使っている方が、アプリを触っている気になりませんか?
もちろん、どちらの方法も適材適所で使っていただければ、と思いますが、トランジションの方もなかなかオススメです!

この、


monaca.pushPage('detail.html');

というメソッドによって、実現しています。
このドキュメントはこちら

さらに。
次の画面を表示したら、元の画面に戻りたい時だってありますよね?
それもできます!
このタグをdetail.htmlに書いてみてください。


<a href="javascript:void" onClick="monaca.popPage();">トランジションを使って戻る</a>


デバッガで実行して、このリンクをタップすると・・・
アニメーションをして、index.htmlに戻ったことが確認できました!

これは、


monaca.popPage();

というメソッドによって、実現しています。
このドキュメントはこちら

以上のことで、複数の画面をトランジションを使って、行き来することが出来ます。



* まとめ


トランジションという機能を使って、複数画面を行ったり来たりしてみました。
応用例として、.uiファイルの"onTap"に記述することで、ネイティブコンポーネントのボタンを押したときに、トランジションの機能を使うことも可能です。
ネイティブの持つUIと画面遷移を持つことで、より、ネイティブのアプリに近づきますね!
トランジションとネイティブコンポーネント、興味のある方はやってみてください!

それではまた!

* リンク


スマートフォンアプリケーション開発環境 Monaca
トランジションについてのドキュメント

Monacaネイティブコンポーネント

こんにちは、斉藤です。

今回は、自社サービスのMonacaについての宣伝と講座です!
先日リリースしたネイティブコンポーネントという機能の使い方についてご説明します。
今回はこんなことをお伝えしようと思います。


・ネイティブコンポーネントとは
・ネイティブコンポーネントの一つ、ツールバーを表示させる方法


※この記事はMonacaを使ったことがある方向けになりますので、Monacaを使ったことが無い方は、まずはこちらから。


* ネイティブコンポーネントって?


Monacaを使ったことのある方なら、ご存知だと思うのですが、MonacaはWebViewベースのアプリケーション開発環境です。
そのため、iPhoneAndroidが独自で持っているUIコンポーネントを使うことが出来ませんでした。



iPhoneを使ったことのある方なら分かると思いますが、あのUIって結構リッチですよね!
あれがあるだけでも、アプリって見栄えが良くなりますよね?
僕たちは、あのUIをネイティブコンポーネントと呼んでいます。

社内では、それを使ったアプリケーション開発環境を整えるべく、いろいろと画策をし、Monaca製アプリでも可能にしました!
というわけで、その使い方について語ります。
実際にどのように使うのかを、Monacaを使って見てみましょう!



* ネイティブコンポーネントの一つ、ツールバーを表示させる


ここでは、ネイティブコンポーネントの一つである、ツールバーを使います。
まずは、Monacaでプロジェクトを作ります。
お試しということで、こんな感じで作りました。



プロジェクトを開いたら、index.uiというファイルを作ります。
この.uiというファイルが、ネイティブコンポーネントを表示するための重要なファイルです。
index.htmlには、index.uiというように、htmlでネイティブコンポーネントを使いたい時は、その対の.uiファイルを作る必要があります。



index.uiには、以下の形で編集を行いました。JSON形式によって、それぞれの定義を書いています。


{
    "top": {
        "container": "toolbar",
        "style": {
            "title": "Demo"
        },
        "right": [{
            "component": "button",
            "style": {
                "text": "tap me!"
            },
            "event": {
                "onTap": "onTapButton()"
            }
        }]
    }
}


この辺りの詳しい書き方は、Monacaドキュメントをご覧ください。index.uiファイルには、


・画面上部(top)にはツールバー(toolbar)を使う
・タイトル(title)には、"Demo"と表示させる
・右側(right)にボタン(button)を置く
・ボタンを押したとき(onTap)にJavaScript(onTapButton())を走らせる

といったことを書いています。

ちなみに、index.htmlには、以下の形で編集を行っています。


<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Plain Project Skeleton</title>
        <script type="text/javascript" src="plugins/plugin-loader.js"></script>
        <script type="text/javascript">
            // Set virtual screen width size to 640 pixels (横幅640pxに設定)
            monaca.viewport({width: 320});
        </script>
    </head>
    <body>
        native component demo
    </body>
</html>


ここまでの作業を行った後、デバッガで確認してみます。
どうでしょうか?




ネイティブコンポーネントが表示されました。
上側の画面がネイティブコンポーネントを使っているもの、下側が使っていないものです。
見比べれば分かりますが、わざわざCSSを書いて、ヘッダを作らなくても、これを使ってOSが持つUIを表示した方が、より早く見栄えを整えられますね!

次に、ボタンを押した時の挙動も作ってみます。
index.htmlに、先ほど.uiファイルに記述したJavaScriptの関数(onTapButton)の定義を書きます。



<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Plain Project Skeleton</title>
        <script type="text/javascript" src="plugins/plugin-loader.js"></script>
        <script type="text/javascript">
            // Set virtual screen width size to 640 pixels (横幅640pxに設定)
            monaca.viewport({width: 320});
            function onTapButton(){
                alert("ネイティブコンポーネントからでも、JavaScriptが走ります!");
            }
        </script>
    </head>
    <body>
        native component demo
    </body>
</html>


ここもデバッガで確認しましょう。
右上のボタンをタップすると、index.htmlに書いたJavaScriptが走ります!
このように、ネイティブコンポーネントを使うと、OSの持つリッチなUIを置きつつも、JavaScriptを利用したWebViewベースのアプリケーションを開発することができます。




* まとめ


これを使ってみると分かっていただけると思うのですが、htmlベースだからクロスプラットフォーム、さらにネイティブコンポーネントによるリッチさ。
Monacaでは、そんな新しいアプリケーション作成環境を用意しています!
読んでくれた方々に、使っていただけることを期待しつつ、この辺りで。

この次は、ネイティブコンポーネントと同時にリリースした機能"トランジション"についてご紹介しますね!
それではまた!

8/4追記:Monacaトランジションについての記事を書きました。

* リンク


MonacaWebサイト
ネイティブコンポーネントについて

イコライザーをFireworksで描いてみました

こんにちは。和田です。

最近、会社の中で音楽を趣味にしていたり音響に詳しい人たちが増えて来たように思えます(今まで知らなかっただけかもしれませんが…)。
ということで、今回は音楽ネタを描こうと思います。

じゃあ、何を描こうかな…と思った時に、ふとイコライザーが頭に浮かんだので、今回はイコライザーFireworksで描いてみようと思います。
今回も例によって簡単に出来るので皆様も是非描いてみて下さい。

それでは作成したいと思います。
まず始めに640×500pxの新規ファイルを作成します。

そして、

1.背景を作成します。
1-1.背景の矩形を作成します
 ・サイズ:640×500px
 ・塗り:線形グラデーション
     #404040 → #202020
 ・フィルタ(ノイズを追加):適用量 = 2




↓背景はこんな感じになります。



1-1.背景にハイライトを追加します。
質感をつけるためハイライトを加えます。
□上段の楕円 
・サイズ:505×162px程度
 ・塗り:ベタ塗り(#FFFFFF)
・ エッジ:エッジをぼかす(100程度)
ブレンドモード:オーバーレイ
・ 不透明度:50%

□下段の楕円 
・サイズ:373×184px程度
 ・塗り:ベタ塗り(#FFFFFF)
 ・エッジ:エッジをぼかす(94程度)←100でかまいません。
ブレンドモード:オーバーレイ
・ 不透明度:30%





↓こんな感じになります。



2.インターフェース部分の作成。
2-1.溝の矩形を作成します
 ・サイズ:9×214px程度
 ・塗り:ベタ塗り(#999999)



これに、

 ・ブレンドモード:ソフトライト
 ・丸み:2px



 ・フィルタ:Photoshopライブエフェクト
  →ドロップシャドウ
   ・不透明度:40%
   ・距離:1px
   ・角度:180度
   ・サイズ:0
   ・スプレッド:0
  →シャドウ(内側)
   ・不透明度:90%
   ・距離:4px
   ・角度:180度
   ・サイズ:80px
   ・スプレッド:10
  →カラーオーバーレイ
   ・不透明度:40%
   ・カラー:#000000





↓そうすると、こんな感じになります。



そして、横方向に等間隔にコピーします。
一番右端の溝はLevelのコントロール部分にしようと思うので、右に少しずらしました。




2-2. 目盛の線を作成します
等間隔にそれらしいラインを下記の画像のように作成してみて下さい。
 ・線:1 or 3px
 ・カラー(#FFFFFF)
 ※ 今回は目盛の間隔を15pxにしました。



そして、溝の間にも目盛を描き、全部の目盛に対してブレンドモード(ソフトライト)をかけます。
こうすることで、目盛が背景になじみます。




2-3.ツマミの矩形を作成します
ツマミは下記の画像のように6種類の矩形を作成します。
形はそれっぽく作ってみて下さい。

❶ 塗り:ベタ塗り(#2E2E2E)
❷ 塗り:ベタ塗り(#202020)
❸ 塗り:ベタ塗り(#171717)
❹ 塗り:ベタ塗り(#111111)
❺ 塗り:ベタ塗り(#3C3C3C)
❻ 塗り:ベタ塗り(#4D4D4D)




※ 上記6種類の矩形にフィルタ(ノイズを追加:適用量 = 1)をかけます。
こうすることで、ザラッ(?)とした質感を出します。



次に❸の矩形にハイライトをつけるため下記のフィルタをかけます。
・フィルタ:Photoshopライブエフェクト
 →ベベルとエンボス
  ・スタイル:ベベル(内側)
  ・テクニック:ズーム
  ・方向:アップ
  ・深さ:140
  ・サイズ:0
  ・ソフト:0
  ・角度:90度
  ・ハイライト:20(#FFFFFF)
  ・シャドウ:0(#000000)



そうすると、下記のイメージになります。
大分それらしくなったかと思います。




そして、❶〜❻のオブジェクトをグループ化してドロップシャドウを付けてみて下さい。




あとは、ツマミをコピーして全ての溝の上に配置して下さい





最後に文字、タイトルを入れて出来上がりです。





いかがでしょうか?

それなりにそれっぽく描けたかと思います。
難しくないと思いますので、皆様も是非描いてみていただけたらと思います。