「jQuery Mobile」を活用したスマートフォンサイト作成（後編）
はじめに 簡単にスマートフォン向けサイトを作成するために活用できるjQuery Mobileを紹介します。前回に引き続き、今回もjQuery Mobile 1.3.0で登場した新機能を紹介します。 対象読者 jQuery mobile、スマートフォンに興味があり、使ってみたい方 必要な環境と準備 執筆時点のjQueryの最新版は、2.0.0ですが、現時点でのjQuery MobileはjQuery 1.7～1.9対応を前提としているため、今回のサンプルでは1.9.1を用いています。第1回を参考に、ダウンロードしてください。また、jQueryプラグインの基本的な使い方は、第3回を参照してください。 また、執筆時点でのjQuery Mobileの最新版は、1.3.1です。1.3.0での不具合修正が主で新機能の追加はほぼありません。こちらからzipファイルでダウンロードできます。サンプルでは、h
『スマートフォン向けJavaScriptライブラリchikuwa.js』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは！スマートフォン版Ameba（通称：デカグラフ）でフロントエンドの開発をしている2012年度新卒入社のオオシモと申します。 デカグラフでは、主にSNS機能（サークル・掲示板・メッセージ・写真など）のNode.jsからフロントエンドのJavaScriptを担当しています。ちなみにエディタはSublime Text 2を使用しています。とっても軽くて高機能でオススメです。jQueryを使用しているのではないでしょうか。 デカグラフでは、chikuwa.jsと呼ばれるスマートフォンに特化した軽量ライブラリを使用しています。このライブラリは弊社の首
スマホサイトに入れると使いやすくなる！おすすめjQuery4選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
スマホ最適化サイトで使いたい。jQuery Mobile用アイコンパック·jQuery Mobile Icon Pack MOONGIFT
jQuery Mobile Icon PackはjQuery Mobileで使えるアイコン集です。 jQuery Mobileを使ってスマートフォン最適化サイトを構築する際に使ってみたいのがjQuery Mobile Icon Packです。スマートフォンにマッチしたシンプルなアイコン集となっています。 アイコンの一覧です。 実際に使っている例。data-iconで指定するだけで使えます。 多数のアイコンが揃っています。 シンプルで使い勝手が良さそうです。 アイコン画像は全て一つの画像となっており、CSS Spriteで切り出すようになっています。このアイコン群を使う限り読み込みは一度なので高速に表示が可能です。 jQuery Mobile Icon PackはCSS製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る 3Gを
CSS＋jQueryでクロスデバイスサイトを作ろう (1/4)
WebサイトをiPhone/Androidに最適化するには、PCサイトとは別にスマートフォン専用サイトを用意するのがベストですが、コストや時間などの理由で難しい場合があります。そこで今回は、PC向けのWebサイト（HTML）はそのまま利用し、CSSとJavaScriptだけでレイアウトやデザインを変更する｢クロスデバイスサイト」の作り方を説明します。題材は、筆者が制作した「iPhone/Android Webサイト制作出張セミナー」のWebサイトです。 このサイトは1ページ完結の告知サイトで、左右2段組みで構成されています。左カラムにはナビゲーションメニューを、右カラムにはメインコンテンツを配置し、ナビゲーションメニューをクリックするとページ内リンクで表示する部分を変えられます。iPhone/Androidからアクセスしたとき、このページを以下のように表示するようにします。 PCサイトのマ
モバイルに最適化した5kBのJavaScriptフレームワーク「jqMobi」が正式版公開
モバイルデバイスのレンダリングエンジンとして事実上の標準になっているWebkitに特化し、iOSやAndroidに最適化したJavaScriptフレームワークの「jqMobi」が、正規版となる1.0を公開しました。 jqMobiは、jQuery Mobileと同様にHTML5をベースにモバイルアプリケーションを開発できるJavaScriptフレームワークのコアモジュール。jQueryと同様の文法を備えたセレクタエンジンです。 ユーザーインターフェイスを構築するモジュールである「jqUi」と合わせて使うことで、HTML5のタグを記述することによりモバイル向けユーザーインターフェイスを備えたアプリケーションの開発が可能になります。 小さくて早いのが特徴 jqMobiとjqUIの特徴は、Webkit上でのモバイル向けアプリケーションに特化したことでサイズを小さくできたこと、環境に最適化できたこと
ブラウザベースのjQuery Mobileアプリ開発環境「codiqa」と「Application Craft」
jQuery MobileなどのすぐれたJavaScriptフレームワークの登場で、HTML5とJavaScriptを組み合わせたWeb標準によるモバイルアプリケーション開発が普及し始めています。 この記事では、Web標準によるアプリケーション開発をさらに簡単にしてくれる、WebブラウザベースのjQuery Mobile対応モバイルアプリケーション開発環境「codiqa」と「Application Craft」の2つを紹介しましょう。 Codiqa～jQuery Mobileアプリのモックアップがすぐ作れる モバイルデバイス対応のアプリケーションを開発するときに手間がかかるのが、小さい画面でも使いやすいユーザーインターフェイスの構築です。モックアップを作り、使い勝手を試す必要があります。 先月公開が始まった「codiqa」は、そのモックアップを手軽に、Webブラウザ上でドラッグ＆ドロップす
jQuery Mobileを使った国内スマホサイトまとめ (1/3)
jQuery Mobileの採用が国内でも進んでいる。jQuery Mobileは、iPhone/Android、WindowsPhoneやBlackBerryなど、主要なスマートフォンに対応したUIフレームワーク。HTMLに簡単な記述を追加するだけで、スマートフォンに最適化したサイトやWebアプリケーションを制作できる、注目のフレームワークだ。 昨年11月には、待望の「jQuery Mobile 1.0」正式版がリリースされ、実務でも本格的に利用しやすくなった。今後、ますます増えそうなjQuery Mobileを使ったスマートフォンサイトの事例をチェックしておこう。 ※商品紹介／キャンペーンサイトに、「太鼓の達人学園（太鼓の達人×AKB48キャンペーンサイト）」を追加しました。（2012年3月1日16時更新） ※ネットサービスに、「一休.com」「recbike」を追加しました。（201
jQuery Mobile初めての方にお勧めの記事
jQuery Mobile初めての方にお勧めの記事 「jQuery Mobile スマートフォンサイト デザイン入門」のプロモーションとしてASCII.jpでjQuery Mobileの紹介記事がいくつかアップされています。jQuery Mobileがどういったものかというのがわかりますので興味がある方はご覧になってみてください。 jQuery Mobileでどんなサイトができるの？ jQuery MobileのサイトギャラリとしてはjQuery Mobile Galleryが有名ですが海外のサイトがほとんどです。 そこで「jQuery Mobileを使った国内スマホサイトまとめ」ではjQuery Mobileで作成された国内サイトの事例が21サイト紹介されています。 jQuery Mobileでどうやってサイトをつくるの？ 10分でわかる！ jQuery MobileのキホンではjQue
jQuery Mobile向けBootstrapテーマ集·Twitter Bootstrap jQuery Mobile Theme MOONGIFT
Twitter Bootstrap jQuery Mobile ThemeはTwitterのBootstrapとjQuery Mobileを組み合わせて使えるテーマ集です。 TwitterのBootstrapは最新版でスマートフォンにも対応しています。そしてスマートフォン向けのJavaScriptライブラリと言えばjQuery Mobileです。この二つを組み合わせて使えるのがTwitter Bootstrap jQuery Mobile Themeになります。 Aデザイン。 Bデザイン。全体として青。 Cデザインは赤。 Dデザインは緑。 Eデザインは水色。 Fデザインはオレンジ。 Twitter Bootstrap jQuery Mobile ThemeはjQueryとBootstrapを組み合わせ使えるテーマ集です。面白いのはA〜Fまでカラーが用意されており、data-themeを変更
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速 jQuery Mobileと同様に、HTML5のマークアップでモバイルアプリケーション開発を実現するオープンソースのJavaScriptフレームワーク「jqMobi」のβ版が公開されています。 jqMobiのコンセプトは、jQueryとjQuery Mobileの機能のサブセットを、iOSとAndroid向けに最適化したものといえるでしょう。 すでにjQueryやjQuery Mobile、あるいはSencha Touchなど、さまざまなモバイル向けHTML5/JavaScriptフレームワークが登場する中で、jqMobiの特徴はどこにあるのか、ブログで次のように説明しています。 jQuery - still focuses on the desktop.
jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説
jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。 ThemeRoller こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します（2012/01/11頃まで）。 このエントリーで紹介する情報は2011年12月のものです。 １．ThemeRollerへのアクセス方法と全体レイアウト jQuery Mobileのトップページにある「Themes」をクリック。 ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。 冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べるこ
サーバサイドがなくともここまで出来る！jQuery Mobileを使ったTwitterクライアント·Twitter-Mobile MOONGIFT
Twitter-MobileはjQuery Mobileを使ってHTML/JavaScriptだけで作られたTwitterクライアントです。 Twitterクライアントは何を使っていますか？それぞれのOSに対してネイティブなもの、Webアプリケーション、他のソフトウェアのアドオンとして組み込まれるものなどたくさんあります。今回紹介するのはHTML/JavaScriptだけで作られたスマートフォン向けのTwitterクライアント、Twitter-Mobileです。 まずTwitter認証を行います。 戻ってきました。タイムラインが読めています。 リプライもできます。 Retweetの時には確認ダイアログが表示されます。 リプライではない通常のツイートもできます。 メッセージを入力して送信します。 エラーが表示されましたが実際にはツイートされていました。ちなみにこれは検索機能です。 DMも送信
知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト
このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、今回の制作にあたり役に立ったサイトをまとめました。 このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、 今回の制作にあたり役に立ったサイトをまとめました。 jQuery Mobile | jQuery Mobile 本家本元。 敢えて紹介するまでもないのですが一応。 現在のバージョンは1.0RC2（2011.11.01現在）です。そろそろ正式版がでる予定です。 jQuery Mobile 1.0b1 日本語リファレンス jQuery Mobile 1.0b1 日本語リファレンス バージョン1までの内容ですがjQuery
jQuery Mobileでのアプリケーション開発にBackbone.jsを導入しよう | Lab by engineering@dwango.jp
こんにちは、2011年度新卒エンジニアの夏目です！突然ですがみなさんJavaScript書いてますか？ 最近はjQuery Mobileなどを利用したスマートフォン向けアプリ開発において、クライアントサイドでもヘビーなJavaScriptのコーディングをする機会があると思います。そのようなときコードのいたるところにHTMLが混入したり、どこでどのデータを扱っているのか分からなくなるということになりがちです。 今回はそんな悪夢のようなコーディング生活に一筋の希望の光を照らすBackbone.jsを紹介したいと思います。 対象読者 JavaScriptでの開発経験がある方 Backbone.jsとは Backbone.jsはDocumentCloudが開発をしている、クライアントサイドのJavaScriptコードをModel、View、Controllerで構築するためのフレームワークです。b
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
つまづきがちなiPhoneコーディングのTips（JS多め） | バシャログ。
来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ているminamiです。 来月にはまた大きな発表がいろいろありそうなiPhone界隈ですが、iPhoneサイトのコーディングをする際につまづいてきたポイントを挙げてみました。 [HTML] input type="file"は使えない 画像をアップするコンテンツだからフォームに input type="file" を・・・と考えがちですが、iPhone版のSafariでは使用不可です。 [HTML] <meta name="viewport" content="user-scalable=no">が効かない 最近ハマったポイントです。ユーザーに画面の拡大をさせなくすることができるviewportのuser-scalableプロパティですが、本体のアクセシビリティ設定で「ズーム機能」をオンにしているとバッチリ拡大できてしまいま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
rummelonp.com