サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
pikotea.hatenadiary.org
先日ついにjQuery Mobile 1.3.0 Betaのリリースがありました! Announcing jQuery Mobile 1.3.0 Beta http://jquerymobile.com/blog/2013/01/14/announcing-jquery-mobile-1-3-0-beta/ ここでは、jQuery Mobile 1.3の変更点を簡単にまとめたいと思います。 画面のサンプルやAPIなどについては、本家のBlogポストもしくはDocsを参照してください。 jQuery Mobile 1.3では、従来の予告通りResponsive Web Designにフォーカスしたアップデートになりました。Widgetの大きさにwidth: 100%などの指定をするように変更されており、画面サイズやグリッドなどにフレキシブルになるように設計されています。 これまでは、jQue
HTML5 Advent Calendarの24日目です。 残すところあと1日となりました! 他の方々が有用な記事をたくさん書いて頂いているので、そちらも是非チェックしてみてください。 さて、私からはIndexedDBのMultiEntryという仕組みについて少しだけ解説したいと思います。 IndexedDBが題材ということで少しマニアックですが… IndexedDBの検索方法 IndexedDBの検索方法について簡単に触れておくと、その名前の通り、あらかじめ索引を作成して検索するというものです。つまり、検索に使う可能性があるプロパティやパターンをあらかじめ洗い出しておく必要があります。また、RDBMSのように複合検索というものがないため、複雑な検索を行うためには、データ検索用のプロパティを別途用意しなければなりません。 検索がちょっと便利になるMultiEntry 前述したように、Ind
Sublime Text 2 Advent Calendarの1日目です。 本当は12/1に書くはずが、風邪でダウンしていて公開が遅れてしまいました。。 気を取り直して、頑張って書きたいと思います。 最初にAdvent Calendarとは何か?という方は、技術評論社さんのこちらの記事が参考になります。 本日12月1日より,プログラマ有志による2012年の技術系Advent Calendarが各所ではじまる Sublime Text 2 Advent Calendarについては、こちらで他の方のブログポストやエントリーができます。まだ空きがあるようですので、興味のある方は是非! Sublime Text 2 Advent Calendar さて今回は、意外とあまり取り上げられないSublime Text 2のテーマについて触れてみたいと思います。デフォルトでも多くのテーマがあり、Soda
ずいぶん前から書いていたのですが、ようやく出版にこぎ着けました。 時間が掛かった分、それなりに良いものができたと思います。なんと全ページフルカラーです。 jQuery Mobileパーフェクトガイド 基本からデザインカスタマイズ、パフォーマンスアップまで 作者: 吉川徹,株式会社シーエー・モバイル出版社/メーカー: インプレス発売日: 2012/08/24メディア: 単行本(ソフトカバー)購入: 1人 クリック: 7回この商品を含むブログ (3件) を見る 以降は、なんとなく自分で解説。 本書は、jQuery Mobileの基本から解説し、次のステップとしてデザインのカスタマイズについてさらに詳細に解説しています。デフォルトのデザインのままのjQuery Mobileを使いたくないという方は、是非手にとって見てみてください。 どちらかというと、スマートフォンサイト制作寄りの内容になっていま
Webkit系ブラウザのlocation.hrefのバグに起因するXSSへの対応をjQuery Mobile 1.1.1に適用したバージョンです。このセキュリティフィックスは、jQuery Mobile 1.2では対応されています。そちらの安定版が出るまでのつなぎとして利用してください。 jquery-mobile-1.1.1-issue-4787-fixed https://github.com/pikotea/jquery-mobile-1.1.1-issue-4787-fixed 参考 githubのissue issue #4787 location.hrefのバグについては下記エントリを参照してください。 Masato Kinugawa Security Blog: location.hrefの盲点
本機能は、1.2では見送りになりました。(2012/8/10) jQuery Mobileの1.1の安定版もまだ出ていませんが、1.2で追加される予定の新機能「Fetch links」が凄く良かったので、紹介したいと思います。(ここで紹介するFetch linksは、jQuery Mobile本家の開発中のブランチを動くように修正したものです。実際にリリースされる際には内容が変わる場合もあります。) Fetch linksは、これまでのようにページ全体をajaxで取得してページ遷移するのではなく、一部のHTMLのみをajaxで取得して指定の要素に埋め込む機能です。この機能を利用すれば、タブやPull to Refresh(リストを引っ張ると更新されるようなUI)のようなものを簡単に作ることができます。 実際の動きは、デモを用意したので、見てもらったほうが早いでしょう。 例えば、あるページの
jQuery Mobileでは、ページ遷移の際に自動的にajaxが利用されています。特に何もしなくても遷移先のページをajaxで取得してアニメーションをつけて遷移するというのがjQuery Mobileの大きな特徴のひとつになっています。 しかしながら、巷では、何か問題があるとすぐにこのajaxを無効にするという対処方法が蔓延しているようです。ちなみにajaxを無効にする方法というのは、以下のようなものを指します。 a要素やform要素に data-ajax="false" を指定する。 グローバル設定で $.mobile.ajaxEnabled = false; を設定する。 もちろん、このajaxの挙動を理解した上で、ajaxを無効にするという方法を取ることは何ら問題ないのですが、とにかく困ったらajaxを無効にするということが多いようです。 具体的には以下のようなケースが挙げられるで
HTML5 Advent Calendarの1日目です。 本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系のAdvent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。ここでは、「HTML5」がテーマになります。他にも面白い記事が公開される予定ですので興味のある方は是非チェックしてみてください。 http://atnd.org/events/21987 私は、とりあえず1日目なので軽く、堅くPage Visibility APIというマイナーな仕様について解説したいと思います! Page Visibility APIとは Page Visibility APIは、ページの表示状態を取得するAPIです。document.h
ちょっと書くのが遅れてしまいましたが、GDD2011の直前に行われたGTUG BootCamp 2011 Japanにて「はじめてのChrome Extension」というお話をして来ました。 このBootCampは、どちらかというと初心者向けのイベントで、各技術の入門的なセッションやハンズオンが中心になっています。GDDが中級者以上の方を対象としたイベントなので、そこへステップアップするためのものという位置付けです。 私がお話させて頂いたのは「はじめてのChrome Extension」というChrome Extensionのセッションです。近年、Chromeブラウザのシェアは順調に伸びてきており、それに伴ってChrome Web AppsやChrome Extensionについても関心を持つ人が増えているのではないかと思います。 セッションでは、初心者向けということでChrome Ex
jQuery Mobile beta3がリリースされたので、例によって変更点を簡単に紹介するだけの手抜き記事です。 詳細は本家を参照してください。 http://jquerymobile.com/blog/2011/09/08/jquery-mobile-beta-3-released/ 変更点1. pjaxが実装されました。history.pushStateに対応したブラウザであれば、従来のhash based URLではなく、綺麗なURLになります。 例えば、前はこんなURLだったのが http://jquerymobile.com/demos/1.0b3/#/docs/api/events.html こういう感じにURLが綺麗になります http://jquerymobile.com/demos/1.0b3/docs/api/events.html ソースを見るためにいちいち#を削ら
jQuery Mobileもβ版になって触る人が増えてきました。jQuery MobileでGoogle Analyticsを使ったお話もちらほらでてきたようなので、私のやり方もひとつ紹介してみようと思います。 jQuery Mobileでは、普通にGoogle Analyticsのコードをコピペしても最初のページしかトラッキングしてくれません。ひとつのファイルにすべてのページをまとめている場合は当然としても、複数のページに分割している場合でも正しくトラッキングできません。 jQuery MobileでGoogle Analyticsがうまく動かない理由jQuery Mobileでページ遷移する場合、ajaxで遷移先のページのHTMLを読み取って取り込んでいます。そのため、遷移先のdata-role="page"で指定された要素以外の部分はまったく読み込まれません。文字だけだとよくわからな
Indexed Database API(以下、indexedDB)について、これまで追いかけてきた情報をとりまとめたので公開します。 indexedDBは当初は仕様が固まっておらず、サンプルコードも当然のように動かなかったので(今も動きませんが…)、検証するにはかなりハードな状況でした。最近になってどうにか動くようになってきたので、@komasshu さんと色々やり取りしながら一通りの動作を確認しました。 現時点で利用できるブラウザは Chrome 9 以降 または Firefox 4 beta 8 以降となります。まだまだ仕様は動いていますので、検証の際は、なるべく最新の開発版を使うことをおすすめします。本エントリーでは、Chrome 9 beta 、Firefox 4 beta 8 にて検証します。また、資料は、2011年1月20日時点の W3C Editor's Draft を参照
ひさしぶりのエントリになります。JavaScript Advent Calendar 2010 の24日担当です。 この Advent Calendar では、12月1日からクリスマスの12月25日まで1日ずつ持ち回りでblogに書くことになっています。お題に"JavaScript"とあるように、blogは、JavaScriptに関するものになります。他の方々も面白いことを色々を書いておられますので、是非読んでみてください。 さて、何やら世間はクリスマスイブで盛り上がっていますが、仕事で缶詰の私には関係ありませんので(もちろん仕事がなくても関係ありませんが…)、今回は、HTML5 の API のひとつである、Web Storage について紹介したいと思います。 割と初心者向けの内容になります。 Web Storage とは Web Storage は、データをブラウザ上に永続的に保持する
jQuery Mobileについて、ちょっと今週中は更新できそうにもないので小さいネタをメモ。 ・div要素は、header、footer要素やsection要素で代用可能。試してないですが、恐らくaside要素とかでもいけます。 ・android系端末のtransitionが効かないようなバージョンについてはパフォーマンスが悪いらしい。詳細はまだ追っかけてませんがフォーラムなどに色々と載ってますので興味のある人はご確認を。ついでにissueをあげて貰うとGOOD! ・動的に要素を追加した場合には、要素に対してjQuery Mobileを手動で適用しなければいけない模様。 ・追加されたイベント一覧 tap taphold swipe swipeleft swiperight orientationchange scrollstart scrollstop pagebeforeshow pa
9/15(水)に開催された第10回HTML5とか勉強会で「jQuery Mobile」についてライトニングトークしてきました。 「jQuery Mobile 調査報告(仮)」 http://prezi.com/ftfqmwlszidy/jquery-mobile/ jQuery Mobile は、まだリリースされていないのでプレゼン資料のタイトルは(仮)になっています。プロジェクトの概要と各プラットフォームの対応予定なんかをまとめています。リリース予定は、来月(2010年10月)ですのでお楽しみに。 http://jquerymobile.com/ 最近は、jQuery Mobile に限らずモバイル関連のライブラリや開発ツールが充実してきていますので、開発者としては、色々と選択肢が増えて嬉しい限りです。 また、今回の勉強会は10回記念ということでデモアプリを作成しており Twitter
jQuery Mobile のリファレンス的なものを作りました。 取り敢えず叩き台で、ツッコミなどあればコメントください! ※RC2版に対応しました Page 要素 属性 値 概要 div data-role page ページ 設定 値 既定 備考 data-fullscreen boolean false フルスクリーン表示(ヘッダーとフッターでdata-position="fixed"を指定する必要がある) data-add-back-btn boolean false 戻るボタンの自動生成 data-back-btn-text 任意 "Back" 自動生成された戻るボタンのテキスト data-keep-native 任意 ネイティブで利用するUIをセレクターで指定する data-dom-cache boolean false ページをキャッシュする data-theme 任意 c テ
先日ついにjQuery MobileのAlpha版がリリースされました。 http://jquerymobile.com/2010/10/jquery-mobile-alpha-1-released/ 少し触った内容と簡単な使い方を説明します。 Demos and Documentation http://jquerymobile.com/demos/1.0a1/ 1.準備 現時点では、jQuery Mobileの動作には最新のjQuery1.4.3が必要です。 ダウンロードしたjQuery MobileとjQueryを一緒に読み込みます。 <link rel="stylesheet" href="jquery.mobile-1.0a1.css" /> <script src="jquery-1.4.3.js"></script> <script src="jquery.mobile-1.
先日、Macbook Proを購入したのでWebKitをコンパイルしてみました。 Macは初ですが、さすがに元々がアップルが開発したものだけあって、 Windowsと比べてびっくりするくらい、すんなり終わりました。 すんなり終わりすぎて、書くことがないのでついでに開発周りの あれこれも一緒に調べてみました。 1. XCode のインストール アップルのHPへ行ってダウンロードしてインストールします。 現時点での最新は、Xcode 3.2.2 Developer Tools のようです。 http://connect.apple.com/ Tiger以降では、Subversion と Python は入っているようなので インストールは不要です。 2.ソースの取得 アプリケーション>ユーティリティ>ターミナルで以下のコマンドを実行します。 コマンドはWindowsの時と同様です。 #Subv
このページを最初にブックマークしてみませんか?
『へっぽこプログラマーの日記』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く