サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
Pixel 9
dev.screw-axis.com
This domain may be for sale!
モバイル端末でよく使われる “フリップ” スイッチは、オン/オフや真/偽値を設定するのに便利です。切り替えにはスイッチをスライダーのようにドラッグするか、タップをします。 このコントロールを作るには、オプションを2つ用意した select 要素をスライダーウィジェットとして追加します。最初のオプションは “on” 、次のオプションは “off” としてスタイルされるので、この順番を守ってください。フリップスイッチで指定可能な属性についてはdata属性リファレンスを参照してください。 ラベルは label 要素に for 属性で input 要素のIDを指定することでセマンティックにつなげられます。もしページレイアウト的な理由からラベルを表示したくない場合、ラベルを隠すことも可能です。しかしセマンティックな、そしてアクセシビリティの観点から、かならずラベルを作成するようにしましょう。 <la
jQuery Mobileの「ページ」構造は、1枚のページとして用いることも、内部的なリンク構造を持った複数のページとして作成することも可能です。 このモデルは、ウェブサイト開発におけるベストプラクティスの実現を目指しています。つまり通常のリンクも、特別な設定なしに動作するようになっていますし、一方で普通のHTTPリクエストでは実現できないようなリッチでネイティブなリンクを作成することも可能なようにすることです。 携帯ページの構造 jQuery Mobileで作成するサイトは、HTML5のDOCTYPE宣言で始まることにより、最大限の機能を発揮します(HTML5を理解できないブラウザを積んだ古いデバイスの場合、DOCTYPEや様々なカスタム属性は無視されるだけです)。 次にhead要素内でjQuery本体、jQuery Mobile、モバイル用テーマCSSを参照してください。jQuery
アイコンの追加 jQuery Mobileでは、モバイルアプリでよく使うと思われるアイコンのセットを用意しています。ダウンロードサイズを最小化するために、アイコンは1枚の画像をスプライトで使います。白いアイコンが黒い円に自動的に半透明になって重ねられ、背景と上手く組み合わせられます。 アイコンをボタン上に表示させるには data-icon 属性をアンカーに指定してやります。たとえば、次のようにします。 <a href="/doc/jquery_mobile/" data-role="button" data-icon="delete">Delete</a> Delete アイコンセット 指定できるアイコンは、次のようなものがあります。 Left arrow – data-icon=“arrow-l” My button Right arrow – data-icon=“arrow-r” M
コンテンツ部分のテーマ設定 ページのメインコンテンツ部分(属性値 data-role=“content” を指定したコンテナ)は、親の data-role=“page” を指定された要素の data-theme 設定に従って、背景色などのテーマが適用されます。コンテンツ部分に data-theme を指定すると、実際のコンテンツ部分の高さだけに指定した背景色があてられます。ページ全体は上位のものが使われるため、コンテンツが短い場合はフッタとの間におかしな色の隙間が出来てしまうかもしれません。 さらに、開閉式コンテンツのコンテンツ部分にはヘッダ部分とマッチさせるための data-content-theme 属性を使うこともできます。 開閉式ブロックのテーマ設定 開閉式コンテンツにも data-theme でテーマ指定できます。アイコンやボディ部分には現バージョンでテーマが適用されていませんが
テーマシステム概要 jQuery Mobileに含まれる全てのレイアウトやウィジェットは、統一感のあるテーマをサイトやアプリケーションに実装するための新しいオブジェクト指向CSSフレームワークが適用されています。このテーマシステムはjQuery UIの ThemeRoller に近いものですが、幾つかの重要な進化を遂げています。 画像ではなく CSS3 の角丸、影落とし、グラディエーションなどを活用しているため、テーマファイルが軽量になりサーバ負荷を軽減しています。 テーマは複数の スウォッチ を含みます。これはヘッダバー、コンテンツ、ボタンなどを自由に作成し、組み合わせられるものです。これにより、よりリッチなデザインが可能になります。 この 無制限テーマ システムにより、テーマごとに26種類までの見本を用意でき、ほぼ無限の組み合わせでデザイン可能です。 全ての背景に CSS3のグラディエ
リンクのリスト リンクのリストは、シンプルに順序無しリスト(ul)にリンクアイテムを含め、属性で data-role=“listview” を指定することで記述できます。jQuery Mobileはリストを画面の横幅いっぱいにし、右側に矢印を付けるなど必要なスタイル設定を行います。リストアイテムがタップされると、フレームワークは該当するアイテムの最初のリンク対象をAjaxで取得し、新しいページをDOM上にロードし、ページの切り替えを行います。リストビューに指定可能な属性についてはdata属性リファレンスを参照してください。 <ul data-role="listview" data-theme="g"> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw
セレクトメニューは、ネイティブな select 要素から派生したものですが、実際の select 要素は見た目から消え、完全に新しいjQuery Mobileによって生成された使い勝手のインターフェースに置き換わります。置換されるコントロールはARIA互換となっており、デスクトップ上ではキーボードによる操作にも対応しています。セレクトメニューに設定可能な属性についてはdata属性リファレンスを参照してください。 セレクトボタンがクリックされると、OSのネイティブなセレクトメニューが開きます。メニューが選択されると、選択された値にボタンが切り替わります。 このセレクトウィジェットを作成するには、まず option 要素を抱えた通常の select 要素を記述します。そして label 要素の for 属性に select のIDを指定して、セマンティックに結び付けます。もしページレイアウト的
テキスト入力とテキストエリア テキスト入力ボックスとテキストエリアは、通常のHTML要素でコーディングされるとjQuery Mobileによって自動的に、よりもモバイル端末で見栄えが良く使いやすいように整形されます。テキスト入力に指定可能な属性についてはdata属性リファレンスを参照してください。 テキスト入力ボックス 標準的なテキスト入力には input 要素に type=“text” 属性を指定したものを用います。この input 要素に指定したIDに対応させた for 属性を持つ label を、意味的な関連を持たせるために必ずセットにしてください。もしページレイアウト的な理由からラベルを表示したくない場合、ラベルを隠すことも可能です。しかしセマンティックな、そしてアクセシビリティの観点から、かならずラベルを作成するようにしましょう。 <label for="basic">Text
ようこそ！ このサイトは jQuery Mobile を学ぶ過程で作った日本語リファレンスです。本家の意訳と、リソースなど追加の記述があります。 [PR] 発売中！ 更新情報 1.1.0公開 2012/04/20 1.1.0 RC1公開 2012/01/27 1.0.1公開 2012/01/27 ページイベント・チートシート 2012/01/20 1時間でミニサイトをつくる 2012/01/17 概要 紹介 クイック・スタートガイド 主な機能 アクセシビリティ サポートするプラットフォーム
3分で学ぶPrezi 上の動画を見ながら、次の6つのステップをこなすだけでPreziを始めることが出来ます。 動画は英語ですが、ハッキリと聴き取りやすく簡単な英語なので、是非再生してみてください。もし難しいようでも、以下を読めば充分にこなすことができます。 01 文章を書きたい場所をダブルクリックする Preziプレゼンテーションを作成すると、作業領域としてキャンバスが用意されます。キャンバス上のどこでも、好きな場所をダブルクリックすることでテキストボックスを作成してアイディアを書き留めることが出来ます。キャンバスがアイディアで埋まっていっても、周囲をドラッグすることで更に広いスペースを使っていけます。 02 アイディアを掘り下げる キャンバス上にアイディアを文字列として置いた後は、それらのアイディアをより掘り下げて行くために、ズームして更にテキストを加えていきます。画面右側にあるズームボ
バックグラウンド・ページ 拡張機能に共通する要望は、タスクや状態を管理するあるスクリプトが、継続的に実行され続けることだ。バックグラウンド・ページはその要望に応える。 概要で説明したように、バックグラウンド・ページは拡張機能のプロセスで実行されるHTMLページである。拡張機能が読み込まれている限り存在し続け、同時に1つのインスタンスのみ有効になる。 典型的なバックグラウンド・ページを含む拡張機能において、ユーザインターフェース(例えばブラウザアクションやページアクション、オプションページのような)は見栄えだけの表示機能として用意される。この表示機能が何か状態を必要とする時、それはバックグラウンド・ページから要求される。バックグラウンド・ページが状態の変化を監視し、その変化を表示側に通知する形をとる。 Manifest バックグラウンド・ページを使うには、Manifest Fileに次のよう
フォーマット Manifest File : マニフェストファイルの記述フォーマット chrome.* API chrome.bookmarks BookmarkTreeNode : お気に入りを表すオブジェクト create : お気に入りもしくはフォルダを新たに作成する get : お気に入り又はフォルダを取得する getChildren : 指定フォルダ下にあるお気に入りを取得する getTree : お気に入りツリーを丸ごと取得する move : お気に入りを別の場所に移す onChanged : お気に入りが更新された際に呼び出されるイベント onChildrenReordered : フォルダ内のお気に入りが並べ替えられた場合のイベント onCreated : お気に入り又はフォルダが作成された場合に呼び出されるイベント onMoved : お気に入り又はフォルダが他のフォルダ
概要 基本 拡張機能とは、Google Chromeブラウザの機能を追加するための、HTMLやCSS、JavaScriptなどの必要なファイルをZIP圧縮でまとめたものである。基本的に拡張機能は全てウェブページであり、ブラウザがウェブコンテンツ用に提供している機能は、XMLHttpRequestやJSON、HTML5でのローカルストレージに至るまで、あらゆるAPIを利用することが出来る。 多くの拡張機能は、ブラウザアクションやページアクションの形でGoogle Chromeにユーザインターフェースを追加することになる。また、拡張機能はお気に入りやタブなどのブラウザの機能もプログラムから操作することが出来る。ウェブページやサーバとの連携には、コンテント・スクリプトや生成元横断XMLHttpRequestを用いることも可能。 注意: それぞれの拡張機能は殆ど、ブラウザアクションとページアクショ
ローカルストレージに配列やオブジェクトを格納する 拡張機能の設定などを保持しておくのに便利な localStorage ですが、記憶できる値は文字列だけです。 オブジェクトの格納を試そうとして、次のような結果になってしまった人もいるのではないでしょうか(自分です)。 var options = { prop1: "", prop2: 123, ... } localStorage['opt'] = options; ... var options = localStorage['opt']; console.log(options); [実行結果] [object Object] 一見オブジェクトが取得できたようですが、実のところ単に “[object Object]” という文字列が格納されていただけです。 このような場合、オブジェクトや配列もサイズが極端に大きくならないならば、JSON
生成元横断XMLHttpRequest 通常のウェブページは XMLHttpRequest オブジェクトを使ってリモートホストとの通信を行う。しかしそこには 同一生成元ポリシー という制限が存在する。拡張機能では、そのような制限は設けていない。拡張機能は最初に生成元横断のパーミッションを要求しておくことで、異なる生成元のサーバとも通信することが出来る。 拡張機能の生成元 実行されている各拡張機能は、それぞれ分割された生成元に存在している。特別に特権を要求しなくても、XMLHttpRequestを使って自身のインストールフォルダからのリソース取得を行うことが出来る。例えば、拡張機能が config.json というJSONで記述された設定ファイルを config_resources というフォルダに持っている場合、次のように取得することが出来る。 var xhr = new XMLHttpR
ブラウザアクション Browser Actionsは、Google Chromeツールバーの、アドレスバーの右側にボタンを追加するために用いられる。ボタンのアイコン、ツールチップ、バッジ、クリック時に開かれるポップアップなどを設定することも出来る。 もしアイコンを常に表示しておきたくないような場合、Browser Actionsのかわりにページアクションを使う。 Manifest ブラウザアクションを、例えば次のようにManifest Fileに記述する。 { "name": "My extension", ... "browser_action": { "default_icon": "icon.png", // 必須 "default_title": "サンプル", // オプション: ツールチップとして表示 "popup": "popup.html" // オプション: ポップアップ
NPAPIプラグイン HTMLとJavaScriptは新しい拡張機能の開発を非常に容易にしている。しかし、かつての古いコードや、汎化されていない特殊なコードを使いたい場合はどうすれば良いだろうか。拡張機能はNPAPIプラグインを同梱することで、JavaScriptからネイティブなバイナリコードを呼び出すことが出来る。 注意 NPAPIは、他にどうしても解決方法が無い場合の最終手段である NPAPIによって実行されるコードは、現在実行中のユーザが持つ全てのパーミッションを持っており、悪意ある入力からのGoogle Chromeによる防御を全くされていない。例えば コンテント・スクリプト や XMLHttpRequest からの信頼出来ない入力には、特に注意をはらわなければならない。 NPAPIはユーザへの危険性を増すため、 は拡張機能の受け入れに、手動でのレビューを必要とする。 詳細 NPA
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.
次のページ
このページを最初にブックマークしてみませんか？
『dev.screw-axis.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
