Asial Blog

Recruit! Asialで一緒に働きませんか?

「Onsen CSS Components」をリリースいたしました!

カテゴリ :
フロントエンド(HTML5)
タグ :
HTML5
iPhone
Android
JavaScript
Monaca
この度、Onsen UIプロジェクトの新しいWebサービスとして「Onsen CSS Components」をリリースさせていただきました。





Onsen CSS Componentsとは?




Onsen CSS Components」は「Onsen UI」で作成されたモバイルアプリのUIに対してテーマローラー機能を提供するサービスです。「Onsen CSS Components」にアクセスすると、左側にモバイルアプリのUIがあるのを確認することができると思います。




Onsen CSS Components」を使うことで、HTMLとCSSで作成されたアプリのUIのテーマを簡単にカスタマイズして自分のHTML5アプリに組み込むことができます。「Onsen CSS Components」の右側から好きなカラーを選択することでモバイルアプリのUIのカラーを変更することができます。





「Onsen CSS Components」の使い方



テーマローラー機能






右側のカラーパレットで色を選択すると、左側にあるモバイルアプリのUIのカラーが変更されます。カラーを変更したUIは画面上部からダウンロードでき、作成したテーマを共有することもできます。





UIパターン




左側の「Overview」パネルでは、UIパターンを総覧することができます。このUIパターンをクリックすることで、実際のソースコードを閲覧、コピーすることができます。使用できるUIパターンは今は少なめですが、今後はモバイルのUIパターンの数を増やしていく予定です。


もし、希望のモバイルアプリUIのパターンがあれば、「Onsen CSS Components」ページ内の「request」ボタンを押してご連絡いただけると嬉しいです。


Onsen CSS Components」で、皆様のモバイルアプリUIの作成がより一層、手軽になることを願っております。

今後とも、「Onsen UI」および「Onsen CSS Components」をよろしくお願い申し上げます。

コメント

  • t

    下記ページでは、
    Onsen CSS Components の「Patterns」ごとに
    「Show Source」で HTML を確認できるのですが、

     Onsen CSS Components
     http://components.onsenui.io/


    Onsen UI のページに列挙されている「Onsen UI Components」で
    どう記述すればその HTML を得られるのか知りたいので、

     Onsen UI Components
     http://onsenui.io/guide/components.html


    「Show Source」だけでなく、
    Onsen UI Components を使った記述も添付してもらえますか?

  • 大塔

    t様

    コメントいただき、ありがとうございます。

    HTMLはOnsen CSS Componentsの上部「Download」からダウンロードすることができます。

  • t

    いや、そうではなく、
    「Onsen UI」で記述した html はないのですか?

    それとも、
    "Made by Onsen UI Team" と書かれていたり、
    名前に "Onsen" と付いているけど、
    Onsen UI を使わないということでしょうか?



    各 Patterns に付いている「Show Source」で得られる html は、

     Onsen UI を使った html を
     angularjs が展開した結果得られたもの

    と思っていたのですが、違うのでしょうか?

    onsen ui を全く使わず、
    ベタで html (components) を書かなきゃならないのですか?

  • 大塔

    >「Onsen UI」で記述した html はないのですか?

    恐れ入ります。
    t様が仰る「html」とはOnsen UIの提供するカスタムディレクティブを指すのでしょうか? (例えば、ons-pageやons-navigatorなど)

    >Onsen UI を使った html を
    >angularjs が展開した結果得られたもの
    >と思っていたのですが、違うのでしょうか?

    上記のような意味 (Onsen UIのカスタムディレクティブ) ですと、それは違います。Onsen CSS Componentsは現状のOnsen UIで表現できるカスタムディレクティブとOnsen UIが内部に組み込んでいるTopcoatのCSSを利用して書いたHTMLであり、Onsen UIが提供するカスタムディレクティブをAngularJSがパースした結果、生成されるHTMLとは異なります。
    Onsen CSS Componentsで記述してあるHTMLは全てがOnsen UIの提供するカスタムディレクティブで記述したものではありません。

    >onsen ui を全く使わず、
    ベタで html (components) を書かなきゃならないのですか?

    t様の仰る通りOnsen UIの用意しているカスタムディレクティブでカバーできない部分はTopcoatのCSSを使ってベタのHTMLで書く方法しか今のところありません。全部カスタムディレクティブにしてしまうと現状、細かなカスタマイズがしにくくなることが1つの理由でございます。


    申し訳ございませんが
    何卒よろしくお願いいたします。

  • t

    > t様が仰る「html」とは
    > Onsen UIの提供するカスタムディレクティブを指すのでしょうか?
    > (例えば、ons-pageやons-navigatorなど)

    そうです。

    実際 onsen ui を試しに使っていますが、
    標準の html と onsen ui の directive は混在させることになります。

    onsen ui の directive を使いつつ、
    Onsen CSS Components のようなサンプルを作るには、
    どう記述したらよいのか、参考に見てみたいと思っていたのです。

    Onsen CSS Components の「List with Mini Pictures」は、
    Onsen UI の「ons-list」を使って作られているのかな?と思って
    「Show Source」を見たのですが、そうではありませんでした。

     ons-list
     http://onsenui.io/guide/components.html#list




    > Onsen CSS Componentsで記述してあるHTMLは
    > 全てがOnsen UIの提供するカスタムディレクティブで記述したものではありません

    そうなんですね。

    そうなると、
    onsen ui の directive を活用できる場面は少ないのでしょうか?

    実際使う場合は、
    onsen css components のような見栄えを望むのですが、
    それは onsen ui の directive では表現できないのですから。

  • 大塔

    t様

    返信ありがとうございます。

    >onsen ui の directive を活用できる場面は少ないのでしょうか?

    今回はOnsen UIのCSSをメインに据えていて、アプリのUIをOnsen UIのCSSで作成することを主な目的としていますので、ディレクティブで表現することの難しい箇所や調整が必要になる箇所はHTML + Onsen UIのCSSで表現しています。現状はディレクティブを使うと中のカスタマイズが難しくなるというデメリットもありますので、今後こういったカスタマイズに関する問題はある程度解消していきたいと思います。

    そういう意味では、今回のリリースではdirectiveの活用場面は期待されているよりは少ないかもしれません。

  • t

    分かりました。
    ご回答有り難うございました。

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事