IBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant technologies such as generative AI, data science, AI, and open source.
前回 はBackbone.jsを使ったWebアプリを作ってみました。 ただ、見た目に関することを何もしていなかったのでいまいち(?)見た目が美しくありませんでした。 というわけで、今回はBackbone.jsで作成したWebアプリにjQuery Mobileを組み合わせることでネイティブっぽい見た目にしていきたいと思います。 はじめに Webページの見た目を簡単にモバイル対応させるためにはCSSフレームワークであるbootstrapや JavaScirptフレームワークであるjQuery MobileやSencha Touchなどを使うことが多いと思います。 本稿では、ネイティブっぽいWebアプリを作成することを目標にしているため、 ネイティブに近いUIツールを使えるjQuery Mobileを用いて画面の見た目を変更していきたいと思います。 アーキテクチャ Backbone.jsと
前回 は、Ruby on Railsを使ってサーバー側にRESTful APIを実装しました。 今回はBackbone.jsを使ったクライアント側の実装をみていきます。 はじめに 前回 に引き続き、Backbone.jsを使ってクライアント側の実装をしてみます。 Backbone.jsは最近流行りのJavaScriptフレームワークの1つで、サーバとデータのやりとりを行う「Model」やDOMの構築やイベントを監視する「View」、複数のモデルをまとめてリストとして扱うことができる「Collection」、ルーティング機能を提供する「Router」などの機能からなります。 また、Backbone.jsはJavaScriptフレームワークの中では比較的軽量であることや、必要なライブラリがUnderscore.jsのみであり、依存するライブラリが少ないことも特徴の1つです。 今回はBac
HTML5の普及によりWebアプリは急速に進化しています。しかし、Webアプリを作成する際のデファクトスタンダードは存在していないのが現状です。そこで、比較的導入実績の多いJavaScriptフレームワークである「Backbone.js」と「jQuery Mobile」を用いてネイティブに近いWebアプリを作成してみました。今回から4回に分けて上記手法を用いたWebアプリの作成方法についてご紹介します。 本連載ではサーバの実装からクライアントの実装までWebアプリを作成するために必要なことをひととおり解説します。 まず、初回である今回は環境構築とサーバ側の実装を見ていきたいと思います。 はじめに 「スマートフォンやタブレット用のWebアプリを作りたい!!...でも、なにで作ればいいのかわからない。。」 こんなこと思ったことありませんか? 最近は、HTML5 + JavaScript +
スマホ向けサイト制作の実装&使えるTips10選:jQuery Mobileでスマホ向け企業サイト構築(3)(1/4 ページ) まだjQuery Mobileを触ったことのないWeb制作者向けに、基本的な利用方法を学びながら、jQuery Mobileを使った簡単な企業サイトの構築の仕方を解説していきます。今回は、画面遷移の制御、アイコン表示、ナビゲーションバー、検索フィルタ、基本的なHTMLスタイル、固定ポジションモードなどを紹介します jQuery Mobileでスマホ向けサイト制作は、こんなに簡単にできる 前回の第2回「触りながら覚えるスマホ向け企業サイト設計の基礎知識」では、サイトの基本構造についての説明と、トップページのコーディングに合わせてヘッダ、フッタなどのツールバー、リストビューコンポーネントを紹介しました。 新年1発目となる本連載の第3回はお知らせページの作成を進めつつ、
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
モバイル向けウェブサイト、モバイル向け Web アプリケーションを開発するために、jQuery Mobile があります。 jQuery Mobile を利用すると、現代的なスマートフォンのネイティブアプリケーションが備えているルックアンドフィールを簡単に実装できます。 jQuery Mobile の基本的な使い方 ここでは jQuery Mobile を使ってモバイル・スマートフォン向けのウェブサイトを作るために大変便利な jQuery Mobile の紹介、 およびその簡単な利用方法を示します。基本的な事柄だけですが、これだけでもモバイル対応がグッと進むことに驚かれることでしょう。 jQuery Mobile でのページへのリンク jQuery Mobile でページをリンクすると、自動的にモバイルのネイティブアプリらしい画面遷移効果が利用できます。 navbar ウィジェット ~ j
Publickeyのコンテンツをモバイル向けに最適化した「Publickey Smart Edition」をバージョンアップしました。今回はjQuery Mobile 1.1を使い、モバイル対応の機能を以前よりも活用したものになりました。 jQuery Mobile自身、以前のバージョンより動きがスムーズになったことに加え、今回からjQuery Mobileの標準機能をそのまま使うことでページのロード時間も短くなりました。 画面遷移ではアニメーションを使い、画面をスワイプすると前記事、次記事へ移動するようにしたので、よりモバイルらしいWebアプリケーションになったと思います。 画面サイズや機種などに依存しないように作ったつもりなので、iPhone/iPod touch/Android/Windows Phoneなど主要なスマートフォンで参照できるはずです(手許にあるiPod Touch/i
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
jQuery Mobileでは、ページ遷移の際に自動的にajaxが利用されています。特に何もしなくても遷移先のページをajaxで取得してアニメーションをつけて遷移するというのがjQuery Mobileの大きな特徴のひとつになっています。 しかしながら、巷では、何か問題があるとすぐにこのajaxを無効にするという対処方法が蔓延しているようです。ちなみにajaxを無効にする方法というのは、以下のようなものを指します。 a要素やform要素に data-ajax="false" を指定する。 グローバル設定で $.mobile.ajaxEnabled = false; を設定する。 もちろん、このajaxの挙動を理解した上で、ajaxを無効にするという方法を取ることは何ら問題ないのですが、とにかく困ったらajaxを無効にするということが多いようです。 具体的には以下のようなケースが挙げられるで
jQuery MobileなどのすぐれたJavaScriptフレームワークの登場で、HTML5とJavaScriptを組み合わせたWeb標準によるモバイルアプリケーション開発が普及し始めています。 この記事では、Web標準によるアプリケーション開発をさらに簡単にしてくれる、WebブラウザベースのjQuery Mobile対応モバイルアプリケーション開発環境「codiqa」と「Application Craft」の2つを紹介しましょう。 Codiqa~jQuery Mobileアプリのモックアップがすぐ作れる モバイルデバイス対応のアプリケーションを開発するときに手間がかかるのが、小さい画面でも使いやすいユーザーインターフェイスの構築です。モックアップを作り、使い勝手を試す必要があります。 先月公開が始まった「codiqa」は、そのモックアップを手軽に、Webブラウザ上でドラッグ&ドロップす
スマートフォンサイトの制作でいま注目を浴びているのが「jQuery Mobile」です。jQuery Mobileを利用すると、CSSやJavaScriptの知識がない人でも簡単に本格的なスマートフォンサイトを作成できます。そんな“jQuery Mobileのキホン”が10分でわかるように、要点をギュッと絞って解説しましょう。 ※本記事は、jQuery Mobile 1.0をもとに執筆しています。 0分目: jQuery Mobileのダウンロードと利用方法 jQuery Mobileは、HTMLのhead要素で、(1)jQueryのスクリプトファイル、(2)jQuery Mobileのスクリプトファイル、(3)jQuery MobileのCSSファイルを読み込むだけで利用できます。 それぞれのファイルはjQueryのサーバーから呼び出せるようになっているので、わざわざ手元にダウンロードし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く