webamb.comThis domain may be for sale!
スマホで"横から出てくる"メニュー作れるjQueryプラグイン「Sidr」の使い方！かんたんに実装できる上にサクサク動く！
こちらが新テーマの記事ページ。上のバーの右側の水玉アイコンをタップするとメニューが開く仕掛けにしてあります。 タップするとこのように右から「にゅっ」とメニューが出てくるように。それほど動きがカクつかないので満足。上の「MENU」というところか「閉じる」をタップすればメニューを閉じる仕様に。 また、最初からCSSも付いてくるので文字を入力するだけでそれなりにカッコイイメニューを作ることが可能です。 「Sidr」実装方法・使い方 <script src="javascripts/jquery.js"></script> <script src="javascripts/sidr/jquery.sidr.min.js"></script> <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css"
スマホサイト：Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope
ちょっと今回はまめ知識的な内容です。 最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。 （jQuery Mobileなどを利用した開発方法は置いといて） HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。 とくに、よくmetaタグを使った「Webアプリモード（フルスクリーンモード）」にする方法が書かれていたりします。 <meta name="apple-mobile-web-app-capable" content="yes" /> これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。 これで、サイトをアプリっぽく見せられる！ってちょっと興奮しちゃいますよね。 ただ、これって意外な落とし穴があるんです(￣▽￣;) 今回は、僕が知ってる大きな２つの注意点を
短期間でJavaScriptを習得し、アプリ・Webサービスをつくるための勉強法 | らふらく ^^ @TwinTKchan #spam
前回書いた 短期間でプログラミングを習得してWebサービスをつくるための知識と方法まとめ が好評だったので、今回は、JavaScriptに絞って習得するための方法をまとめてみたいと思います。 ちなみに、一番最初に、JSに触れた時は、Hello, Worldを表示させたり、 aタグでリンクをはったりぐらいしか出来ませんでした。 ですが、現在はjQueryで社内システムの 画面をつくる(Ajaxとかを使って)事を任せてもらっています。 なぜ、JavaScript(JS)がいいのか？なぜ勉強するのか？ まずは、なぜJSをお薦めするのかを説明します。 ①ネイティブアプリがつくれちゃう。 ネイティブアプリとは、iPhoneアプリとか、Androidアプリのことです。 これまでは、iPhoneなら、Objective-Cという言語を、 AndroidならJava(JSとは別物)という言語
iPhoneやiPadでドラッグやリサイズ可能なコンテンツを容易に実装出来る・jQuery.ui.touch-punch.js - かちびと.net
iPhoneやiPadのタッチイベントに 対応させるjQueryプラグインです。 軽量なんですが、jQueryUI併用な ので一応軽量とは謳わないように しておきます。導入も結構簡単 なので覚えておいて損は無いかも。 iPhoneやiPadでドラッグやリサイズを可能にするライブラリです。もちろんiPhoneだけでなく、PC側でも動かせます。 ただ、要素をドラッグしたりリサイズしたり、だけではなくドラッグ可能なコンテンツをネストしたりドラッグコンテンツ内にスライダー入れたりとかも出来る。 試しにjQueryMobileと併用しました。サンプルどうぞ。QRコードも用意しときました。 sample 使い方 <script src="http://code.jquery.com/jquery-1.7.0.min.js"></script> <script src="http://code.jque
iPhoneのclickイベントの挙動
iPhoneのclickイベントの挙動 本エントリーは軽めのjQuery Advent Calendar 2012最終日のエントリーです。 iPhoneはonメソッドを利用したclickイベントに結構クセがあるのでそれを解説したい思います。 <p class="target">ターゲット</p> このようなHTMLにclickイベントをバインドしていきます。 まずは次のようなコード。 $(".target").click(function(){ $(this).css("background","red"); }); sample これはちゃんと動きます。 次のコード。 $(".target").on("click",function(){ $(this).css("background","red"); }); これもちゃんと動きます。 sample これを踏まえた上で次からが動かないコ
ポケット詳細 jQuery Mobile辞典 サンプルサイト
ポケット詳細 jQuery Mobile辞典 サンプルサイト 1章jQuery Mobileについて 1-3 jQuery Mobileクイックスタート(全サンプル) 1-5 jQuery Mobileにテキストを省略させずに表示する 1-5 jQuery Mobileの定義済みクラス(オリジナルボタンアイコンの作成) 2章ページ構築 2-1 単一のHTMLでサイト構築する 2-2 複数のHTMLでサイト構築する 3章リンク 3-1 ページリンクを作成する 3-2 Ajaxを用いないリンク(1)—Ajaxを使用しないと明示する方法 3-3 Ajaxを用いないリンク(2)—外部サイトだと明示する方法 3-4 Ajaxを用いないリンク(3)—外部ドメインへのリンクを記述する 3-5 Ajaxを用いないリンク(4)—target指定をする 3-6 ブラウザの「戻る」リンクを作る 3-7 遷移しな
HTML5製のWebサイト向けUIフレームワーク・Kendo UIモバイル版の日本語サンプル作った - かちびと.net
以前ご紹介した、HTML5製のWebサイト 向けUIフレームワーク・Kendo UIの モバイル版に触ってみたついでに 日本語化してサンプルにしました。 まだベータ版みたいなので、実用 段階では無さそうですが。 Kendo UIのモバイル版です。去年の夏くらいに記事書いたので合わせてご参照頂ければ幸いです。 タッチデバイス対応、HTML5で構築したWebサイト向けのUI用フレームワーク・Kendo UI 選択肢はずいぶん増えてきましたが、これもその一つという事で・・・jQueryベースで動作しますので、JQMの代替として覚えておいてもいいんじゃないでしょうか。 基本的には有償版の販売がビジネスモデルみたいですが、OSSとしてGPLライセンスで配布されています。モバイル版もそんな感じ。 Kendo UI Mobile モバイルバージョンです。触った感触として、まだ他フレームワークに比べて物足
jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル - かちびと.net
自分用に備忘録。そろそろチートシート が出てくる頃じゃないかと思うので、そう 焦ることも無い情報だと思いますが、近々 使いそうなのでその時に面倒な事になら ないようによく使いそうなマークアップを リストとしてメモしておきます。 ちゃんとしたデモは本家で確認して下さい。ここにあるサンプルは僕のいい加減なサンプルです。尚、マークアップが見やすい様にするだけの為にコメントアウト入れていますが気にしないで下さい。 [note]追記 もう少し増やして見やすくしたものをダウンロード出来るようにしました。 [/note] プラグイン読み込み <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script type="text/javascript" src="
jQuery Mobileを使ってiPhone用のWordPressテーマを作るTips - かちびと.net
話題のjQuery Mobileを使用したWordPress のiPhone用テーマを作成する方法のご紹介 です。あくまで、対応させる為のTipsという事 で了承願います。jQuery Mobileは、モバイル に簡単に対応させる事が出来るライブラリで、 jQueryのプラグインです。 対応させるだけなのでcssの調整とか細かい点などはご自身で変更してみてください。 基本的に、jQuery Mobileはライブラリを読みこめばあとはdivにidを振ったり、data-theme等を加えればいいだけのようなのでテーマファイルを作るときもその手順通りで済むようですね。 細かい作り方は割愛し、ここでは大まかな手順をご紹介します。デザインに関してはjQuery Mobileのドキュメントをご確認ください。 おおまかな手順 適当にWPテーマのフレームワークを用意 header.phpにjQueryとj
以前作った「jQuery Mobileを使ったWPテーマ」を配布しようと思ったら既出だった・・ - かちびと.net
以前、jQuery Mobileを使ってWPの テーマを作成するチュートリアルを記事 にしました。そのテーマを折角作ったの で配布しようと思ったら既にありました。 というわけで、そちらをご紹介します。 内容は多分同じだと思います。 以前書いた、jQuery Mobileを使ってiPhone用のWordPressテーマを作るTipsという記事を見て頂ければたぶん分かると思いますが、jQuery Mobileプラグインを読み込んで必要箇所にidなんかを振ってあげればOKです。 このテーマも同じようなものじゃないかなと思います。折角無料で配布してくれているのでシェア。 Mobile theme jQuery Mobile pluginを使ってテーマを作ったよ、とのこと。CatsWhoCodeの人が作ってたんですね。僕はiPhone以外確認出来ませんが、BlackberriesやAndroidにも
Dreamweaver CS5.5でスマホアプリ作ってみた (1/3)
たった1年で新バージョンの登場となったDreamweaver（関連記事）。5月下旬発売の「Dreamweaver CS5.5」はCS5からのアップグレードでも1万5750円という価格設定に驚かされる。だが、ベータ版を触って価格以上に驚いたのがスマートフォン対応機能の“本気度”だ。 Dreamweaver CS5.5では、オープンソースのJavaScriptフレームワーク「jQuery Mobile」をテンプレート的に利用することで、iPhoneやAndroidに最適化されたスマートフォンサイトをわずか数ステップで作れてしまう。jQuery Mobileは、iPhone/Android/Windows Phone/BlackBerryなどで利用できるクロスプラットフォーム設計のフレームワーク。以下のようなシンプルなスマートフォンサイトなら、PhotoshopもFireworksも使わず、Dr
スマホサイトに入れると使いやすくなる！おすすめ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">テキストテキストテキストテキストテキストテキ
Android/iPhone向け！jQuery MobieとPhotoSwipeで作るスマホ向け高機能フォトギャラリー（サンプル付き） – [Mu]ムジログ
Android/iPhone向け！jQuery MobieとPhotoSwipeで作るスマホ向け高機能フォトギャラリー（サンプル付き） 2012 年 4 月 14 日 – 3:34 PM category Webサイト開発・運営 tags jQuery mobile, 写真 Comments: 0 Trackbacks: 0 この記事を読むのに必要な時間の目安: 約 10 分 スマホサイトの依頼を頂いたクライアントから写真を魅せたい！という要望があり、「これがええんちゃうん？」と適当な提案をしたら本当に採用になったので本気でPhotoSwipeを使うことになりました。 PhotoSwipeは最初は単に写真をスワイプ（フリック）操作で次の写真を表示させていくWebアプリケーションのような形になるかと思っていたのですが、ちゃんとナビゲーションボタンがあったり、自動再生機能があったり、ダブルタ
iOS向けWebアプリケーションを開発する際に使いたいHTMLフレームワーク·appML MOONGIFT
appMLはjQTouchをはじめとするHTML5/JavaScriptライブラリを組み合わせたiOSをはじめとするスマートフォン向けHTMLフレームワーク。 appMLはHTML5/jQuery/JavaScript製のオープンソース・ソフトウェア。多様なWebブラウザが乱立するデスクトップの世界と違って、スマートフォンの世界はとてもシンプルだ。ほとんどがWebKitで統一されている。WebKit自身はオープンソースであり、開発者としてはとてもやりやすい。 iPhone向け 今後、ネットアクセスデバイスはデスクトップからモバイルへ移っていく。そんな時代の中でスマートフォン向けWebアプリケーションを開発するのに使えるフレームワークがappMLだ。 appMLはjQTouchやiScrollをベースに開発されているスマートフォン、iPad向けのフレームワークだ。PhoneGapの公式ツール
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.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]面倒なスマフォ・タブレットでの異なるビューポートサイズの確認が簡単にできるスクリプト -rFrame
html5-css3.jp - このウェブサイトは販売用です！ - スマートフォン 編集者 方法 サイズ 日本 ツール ブラウザ テスト リソースおよび情報
html5-memo.com
jQuery Mobileを使ったフリーのスマートフォン向けWordPressテーマ・Generic jQuery Mobile - かちびと.net
