JavaScriptのUIライブラリはどうあるべきかという話とOnsen UIのアーキテクチャ - id:anatooのブログ
Onsen UI Advent Calendar の12/9の記事です。 Onsen UIは、モバイルアプリのネイティブライクなUIをHTML + CSS + JavaScriptで簡単に構築することを目的としたUIライブラリです(UIフレームワークともたまに呼ばれます)。 ↓みたいなネイティブなモバイルアプリっぽい画面をサクッと作ることができます。 私は数年前から開発メンバーとしてOnsen UIの設計開発を行っています。この記事では、Onsen UIに求められるUIライブラリとしての要件とそれを解決するためにどのようなアーキテクチャを取っているのかについて解説します。 特定のフレームワークに依存しない jQuery UIやReactの上に乗っかっているUIライブラリなどのように特定のフレームワークの仕組みを使って実装されたUIライブラリというのはたくさんありますが、ある特定のフレームワ
モバイルUIフレームワークのド本命、Onsen UI 2正式リリース！──React, Angular 2両対応！
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css"> <link rel="stylesh
Onsen UI ボタンと画面遷移 〜ハイブリッド編〜 – いろはにスマホ
今回は「Onsen UI ボタンと画面遷移」を行うアプリを作ってみます。 といっても、Monaca にはテンプレートがいくつも用意されています。Onsen UI を使う最小限のテンプレートは、既にボタンで画面遷移が行えるアプリとして作られています。 今回はこのテンプレートを使って、どういった動きをしているのか中を追いかけてみたいと思います。 1. Onsen UI テンプレートを使ってみる プロジェクトを作る 「Onsen UI 最小限のテンプレート」を選択してプロジェクトを作成します。 作られたプロジェクトのファイル構成は下図のようになっています。 動かしてみる Monaca アプリを使って動かしてみます。 最初に「page1.html」が表示されてます。「Push Page 2」ボタンをタップすると「page2.html」に画面遷移します。 「page2.html」にある「Ba
onsen - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Onsen UI 2.0の紹介と始め方
ハイブリッドによるスマートフォンアプリ開発を手軽なものにしてくれるUIフレームワークとして開発しているのがOnsen UIです。現在も開発が継続されており、間もなく2.0が正式リリースとなります（執筆時点でβ）。 特に大きな転換ポイントと言えるのが、AngularJSとの切り離しになります。そこで今回はOnsen UI 2.0の使い方を紹介します。 インストール方法は4つ Onsen UIのインストール方法は主に4つ用意しています。いずれか使いやすいものを選んでください。 Node.js/npmを使う方法 Node.js/npmを使ってインストールする場合、次のようにコマンドを打ちます。 npm install onsenui@2.0.0-beta.7 --save // β版の現在の場合。 npm install onsenui --save // 2.0の正式版リリース後。現在は1.3
「マテリアルデザイン」に対応 Onsen UI 2.0 !!
Android向けのハイブリッドアプリを開発されている皆さんに嬉しいニュースがあります。なんとOnsenUI2.0では、マテリアルデザインを追加中です！ OnsenUIはiOSとAndroid両方のアプリ開発に使われるため、それらのプラットフォームに向けたネイティブ様のUIコンポーネントを提供することは理にかなっています。そのため現在のiOSベースのコンポーネントに加えて、マテリアルデザインを開発中というわけです。 これまでたくさんのユーザー様がマテリアルデザインをサポートするようリクエストされてきました。私たちはそういった声に耳を傾け、なるべく早くそれを利用できるように開発にいそしんできました。マテリアルデザインはOnsenUI2.0と並行して開発されており、次の大きなバージョンアップの時にネイティブ様のAndroidコンポーネントが利用できる様になります。 この度、α版は完成しました。
ANGULAR UにてMonaca/Onsen UIの発表を行いました
なぜハイブリッドアプリを選択するかと言うと、 クロスプラットフォームサポート 既に覚えているWeb開発のスキルを活かしてアプリ開発ができる JavaScriptを使ってネイティブアプリのAPIにアクセスできる といった特徴があるからです。 次にハイブリッドとネイティブアプリの違いについてです。FacebookのCEOであるザッカーバーグ氏は実行速度を理由にHTML5からネイティブに開発の軸を変更しました。しかしそれから数年経ち、Ruby on Railsの開発者で知られるDHH氏は昨年、パフォーマンスは大幅に改善していると書いています。 ではここからMonacaを使ったCordovaアプリ開発について説明します。まずワークフローです。 コーディングはローカルのエディタ、またはCloud IDEを使ってブラウザ上での開発が選択できます。テストはMonacaデバッガーを使って行います。コードを
monaca開発メモ1 - アラフィフSEの日々
まずは、プロジェクト作成。 今回は「Onsen UI Tabbar」を選びました。 index.htmlに <ons-tabbar var="tabbar"> の記載があり、タブバーになっています。 <ons-tabbar-item> でそれぞれのタブが指定がされています。 「Home」にはnavigator.htmlが指定されており、 <ons-navigator title="Navigator" var="myNavigator" page="page1.html"> でナビゲーション（ページが親子関係を持つ）になっており、 親ページにpage1.htmlが呼び出されています。 「Onsen UI」の仕組みですが、まあ、ここまでは何となく分かります。 画面はマニュアルhttp://ja.onsen.io/guide/overview.html とか見ながら、何とかなりそう。 で、問題
ZendEngine勉強会で「拡張ライブラリでなるべく簡単に構文を追加する方法」というタイトルで喋ってきました
ご無沙汰しております、アシアル笹亀です。 ブログを書くのは、大変久しぶりになります。実はアシアルでは最近、noteもはじめております。アシアルの仕事の取り組み方、考え方、様々なメンバーについて知ることができます！是非、ご興味があるかたはこちらも一読いただけますと嬉しいです。 https://note.asial.co.jp/ 久しぶりにiPhoneアプリをアップデート申請をするときありますよね？ iPhoneのアプリを継続的に保守管理をしていると、申請作業をクライアント様におまかせして、あまりエンジニア自身で長い間、アップデート申請をしてこなかった方々は何気に多いのではないかとおもい（自分もその１人）、ブログにも残しておこうとおもいました。 こまめに改修などを加えており、その度にアップデートの申請をされている場合には、あまり実感はないかもですが、１年振りとかにアップデートの申請をしたりする
Web Componentsでお気に入りボタンを作ってみましょう！
はじめに 最近、Onsen UIでWeb Components（ウェブ・コンポーネント）を使い始めました。このAPIで、ウェブ開発者は新しいHTMLのタグを楽に作れるようになります。Web Componentsを学びながら、下のようなシンプルな「お気に入りボタン」を作ってみましょう。 今回作成する「お気に入りボタン」は、カスタムエレメントなので作成後は簡単に利用できます。 クリックしたらはアニメーションでになります。 Onsen UIを作り始めた当時は、Web Componentsというものがないため、Onsen UIのカスタムエレメントはAngularのディレクティブで実装していましたが、今後はOnsen UIのコンポーネントをAngularJSだけではなく、どんなフレームワークでも利用可能にし、jQueryやReact.jsの開発者でも、Onsen UIでハイブリッドアプリを楽しく作れ
AngularJSとOnsen UI で作るGoogle Mapsのサンプルアプリ
今回の記事は、Onsen UI blogで2月に公開した”Creating Google Maps Sample App with AngularJS and Onsen UI“の翻訳記事です。 以下のツールを使用して、このサンプルを構築します。 Onsen UI ( HTML5 を使用したハイブリッドアプリを作成するためのフレームワーク ) AngularJS ( Google 社が開発した JavaScript のフレームワーク ) Google Maps JavaScript API v3 ここでは、Monacaを使用して、アプリを開発します。Monaca は、クロウド型のアプリ開発環境です。このツールを使用すれば、マルチプラットフォーム ( iOS/Android/Windows8 ) に対応するハイブリッドアプリを開発できます。Monaca には、Onsen UI のフルサポート
Onsen UIをWebサイトで使ってみよう
これでインストールは完了です。 作業用ディレクトリの作成 続いて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
Onsen UI version 1.2.2リリースのお知らせ
HTML5モバイルアプリを開発するのに最適なUIフレームワーク、Onsen UIの最新バージョン1.2.2がリリースしました。今回は大きな機能追加が二つあります。 ・Pull to Refresh ・Infinite List こちらの機能について解説します。 Pull to Refresh Pull to Refreshは表示領域を下に引っ張ってイベントを起こす機能です。ネイティブアプリではよく知られた機能で、通常は情報更新する際に利用されます。こちらはまずデモで動作をご覧ください。実際に動かせるようになっていますので、その操作感を確かめてください。 <ons-page ng-controller="MyController"> <ons-pull-hook var="loaded" ng-action="load($done)"> <span ng-switch="loader.get
Onsen CSS Components - Onsen UIを活かしたスマートフォン最適化サイト、ハイブリッドアプリを作ろう！ MOONGIFT
スマートフォンのWebサイトを作ったり、HTMLと合わせたネイティブアプリ、いわゆるハイブリッドアプリを作る上でネイティブに似たUIのWebコンポーネントは欠かせません。デザインフレームワークもたくさん出ています。 その差別化になるのは、とにかく様々なコンポーネントが存在することで多彩なニーズに応えられるか否かになります。そこで今回はスマートフォン向けのUIフレームワークOnsen UI向けのCSSコンポーネント、Onsen CSS Componentsを紹介します。 Onsen CSS Componentsの使い方 Onsen CSS Componentsを使うとどのようなスマートフォンサイト、ハイブリッドアプリができるのか。それはやはりデモを見るのが一番です。 ログイン/グリッドメニュー/タイムライン。 プロフィール/ニュースフィード/イメージビュー。 登録、検索系も用意されています。
モバイルアプリ用UIコンポーネントのHTML/CSSソースコードを生成してくれる「Onsen CSS Components」、アシアルが公開
モバイルアプリ用UIコンポーネントのHTML/CSSソースコードを生成してくれる「Onsen CSS Components」、アシアルが公開 モバイルアプリケーションの開発でもっとも手間がかかるのが、ユーザーインターフェイスの構築です。例えばHTML5でモバイルアプリケーションを開発する場合、適切なUIコンポーネントを美しい外観と美しいレイアウトで実現するために、HTMLとCSSを駆使し、何度も試行錯誤しつつ開発を進めていくことになるでしょう。 そうした手間を軽減できるサービスが公開されました。アシアルの「Onsen CSS Components」です。あらかじめ一般的なモバイルアプリケーションのUIパターンやUIコンポーネントが用意されており、HTMLとCSSのソースコードをダウンロードできるようになっています。 上記は一般的なUIのさまざまなパターンが用意された画面で、このパターンに対
アシアル、HTML5ハイブリッド型モバイルアプリに特化したUIフレームワーク「Onsen UI」の正式版を公開
「Onsen UI」は、JavaScriptを使わずにアニメーション表現が可能で、CSSフレームワーク「Topcoat」に、さまざまな独自のアニメーションを加え、ネイティブ開発に遜色ない動作スピードや滑らかなアニメーションを実現している。 今回公開した正式版は、2013年9月に公開したプレビュー版へのフィードバックを受けて、アプリ開発者から要望の多かった機能を盛り込んだ。 「Onsen UI」を構成するCSSとJavaScriptは、すべてWeb Componentsと呼ばれる最先端のHTML5の流れをくむ形で実装されており、「Onsen UI」で定義されたタグを利用するだけで、タブバーやボタン、リストといった標準的なインターフェースをウィジェットとして使える。 また、オープンソースの「AngularJS」と「Topcoat」が付属し、開発者はHTMLやCSSを数行修正するだけで、動作や表
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://frankdiox.github.io/OnsenUI-Todo-App/
http://blog.asial.co.jp/1249
http://blog.asial.co.jp/1241