スマフォ用サイトでよく使うエレメントが豊富に揃ってるフレームワーク -ChocolateChip-UI
スマートフォンなどのモバイル用サイトを簡単に制作できるようにするJavaScriptベースのフレームワークを紹介します。 先日リリースされたiOS5にも最適化されています。 ChocolateChip-UI [ad#ad-2] ChocolateChip-UIで用意されているエレメント あらかじめ用意されているエレメントは数多くあります。 ツールバー ナビゲーションバー ボタン アイコン ナビゲーションリスト テーブルビューアー セレクションリスト スイッチコントロール ポップアップ プログレスバー アクティビティインディケーター アクションシート セグメントコントロール スライダー カルーセル スクロールパネル ページングコントロール テキストを並べても分かりにくいと思うので、下記にキャプチャでご紹介。
画像の「縦方向の最適化」って何!?たった数行でスマホビューを改善しよう！
webデザインの大きな問題の1つは、スマホビューにおける縦長画像。今回は「縦方向のレスポンシブ」を紹介します。思い付きで実装してみたのですが、驚くほどスマホビューが改善できたので、そのJavascriptのコードを紹介します。 デモを見る 1「縦方向のレスポンシブ」って何？縦長画像をスマホで見たサンプル今回の問題は、縦長画像のスマホビューです。iPhoneやAndroidの解説記事などでスクリーンショットを載せる場合、縦に長い画像を利用しますよね？するとスマホビューではサンプル図のように、画像が画面全体を占領してしまうことが少なくありません。 max-width:100%を設定することで「横方向」には最適化していても、「縦方向」には最適化できていない例です。画像はやっぱり文字と一緒に見たいですよね…。max-height:...%は「画面の高さ」ではなく「コンテンツの高さ」が基準になるので
Wink Toolkit - Paysafe Casino mobile JavaScript framework
Wink Paysafecard Casino Apps ToolkitMobile Javascript FrameworkCasino Apps WINK Wink Toolkit is a lightweight JavaScript toolkit which will help you build great mobile web apps. Even apps for Casino Paysafecard adaptations are possible. It is designed and developed to meet the specific constraints of the mobile environment. Wink ComponentsView the index.html file to have an overview of the various
JavaScriptのスマホ対応時に知らないと損する16のコト
JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、よく使われるOSSライブラリ4選、OS／機種依存事例5選などを紹介します こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「HTML5のスマホ対応の基礎知識とハマリどころ3選」では、HTML5に対する対応状況、代表的なHTMLタグに対する依存事例を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での
スマホ用JavaScriptフレームワーク5つ＋1を徹底研究（1/5） - ＠IT
スマホ用JavaScriptフレームワーク5つ ＋1を徹底研究 jQuery Mobile、iUI、jQTouch、 Sencha Touch、Wink toolkit、PhoneGapとは アシアル株式会社 鴨田健次 2011/6/22 スマートフォン向けJavaScriptフレームワーク／ライブラリを使うと、スマートフォンアプリっぽい見た目のページデザイン、UI（ユーザーインターフェイス）パーツやページ遷移アニメーションを簡単に実装できます。多くは、おのおののフレームワークのルールにのっとったHTMLを書くことで、それらの機能を実現します。 本稿では、jQuery Mobileを筆頭として、いくつか発表されているスマートフォンサイト向けJavaScriptフレームワークを紹介します。 ■ PCサイト向けJavaScriptフレームワークについて PCサイト向けJavaScriptフレー
tableをスマホ用に変形
デスクトップ用にtableで実装された表組みをスマフォでも最適に見えるよう変更するjQueryのプラグインを紹介します。 既存のテーブルにも簡単に対応でき、しかも1KBと超軽量です。 デモページ：幅480pxで表示 左：ヘッダ有り、右：ヘッダ無し 一つのアイテムに対して、それぞれ対応する項目が配置されるようになっています。 ReStableの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="jquery.restable.min.js"></script> <link rel="
最も支持されるJavaScriptの表現方法とは？ 【スマホのインタラクションデザイン調査】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
JavaScriptで振り分けてスマホサイト完成！ (1/5)
スマートフォンサイトの設計・デザイン、HTML5+CSS3による基本的なマークアップについて前回までに解説してきました。今回はページ内の要素にリンクを設定してスマートフォンサイトを仕上げます。 ページ内リンクを張る 今回制作しているスマートフォンサイトは、ページ内の各コーナーに移動できるナビゲーション（ジャンプボタン）を設置しています。まずはジャンプボタンにページ内リンクを設定しましょう。ページ内リンクは、PCサイトと同様、リンク先の要素にID属性を振り、a要素を次のように記述します。 <ul class="clearfix"> <li><a href="#access">アクセス</a></li> <li><a href="#tel">電話</a></li> <li><a href="#mail">メール</a></li> </ul> ボタン全体にリンクを貼る ページ内リンクを設定したサ
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
スマートフォンサイトの作成術 - 大川洋一
2011年4月2日に開催されたPHPカンファレンス関西で使用した「スマートフォンサイトの作成術」のスライドです。Read less
スマートフォン向けWebサイトの表示速度 高速化手法
対象読者 スマートフォンWebサービス開発者 特に、フロントエンド周りの開発に従事する方 スマートフォン向けWebサイト高速化のテクニック スマートフォンはOS／デバイスの進化が激しく、要求される最適化の内容も半年で別物になることがあります。そのため最適化に際しては、案件ごとの状況や目的、デバイス／OSのシェアに応じて、まずターゲット端末を選定し、問題の検出を行います。 この記事では「iPhone 4＋iOS 5」を想定して話を進めます。実際に「iPhone 4＋iOS 5」はよく現場でも最も動作が重い組み合わせとしてターゲット端末に挙がります。これはiPhone 4がRetinaディスプレイを採用したことで960×460ピクセルの高解像度を備えながら、CPUなどのデバイス性能が潤沢とはいえず、ボトルネックが生まれやすいためです。iOS 4ではなくiOS 5をターゲット端末として扱うのは、
iPhone 5とiOS 6で導入されたWebデベロップまわりのアップデートについて - Branch
Clicking the “Branch this” button next to a post lets you start your own branch to talk about it. Branching a post is perfect for when you have something to say about someone’s post or want to go on a tangent—without taking the whole conversation off track. Join our beta so you can branch posts, too.
ssig33.com - ネイティブアプリ並のウェブアプリを云々
なんか最近そういうの流行ってるようですね。僕も考えを書いてアクセス数を稼ぎます。 ページ遷移を過度に抑えようとするな 下手に AJAX 使いまくるぐらいならページ遷移したほうがマシであることが多いです。世の中にはページ遷移を抑えようとして酷いことになってる JS を沢山見ます。よく考えろ。 ローカルストレージを活用しない localStorage に画像とか放りこむの異常に重くなるのでオススメしません。認証持たないサービスで設定値保存するのに使うとかに留めた方がよいと思う。 非同期な API 絶賛してて気に食わない感じはしますがこの記事を一読することをお勧めします。 localStorage は小さなデータをいくつか入れる分には十分に高速です。大きなデータを入れると十分に低速です。 scroll イベントに対してリスナーを置かない scroll イベントの監視は実際最悪のアイディアです。こ
スマホ対応アニメーション支援ライブラリ - smart js
特徴 配置と動きに特化した Javascriptライブラリです。 シンプルで柔軟性もあり、 処理も高速です。 対応OS / ブラウザ iOS 7+ Android 4.1+△ Android 4.4+○ IE9+ Safari latest Chrome latest Firefox latest
@XSS (一部のブラウザのlocation.hrefがXSSを引き起こしやすいことに関する注意喚起)
@XSS (一部のブラウザのlocation.hrefがXSSを引き起こしやすいことに関する注意喚起) 概要 一部のブラウザのlocation.hrefは、XSSなどのセキュリティ問題を引き起こしやすい値を返します。この挙動により、location.hrefが自分と同じドメインのURLを返すことを前提に書いているコードは全て、正しく動かなくなる恐れがあります。 影響を受けるブラウザ Safari 6未満(Windowsは修正版がリリースされていません) iOS 6.0未満のSafari Mobile Android4.1未満?の標準ブラウザ(Android 2.3.6でテストしました。@bulkneetsさんによると4.1は修正済み、4.0.3は影響を受けるとのことです。@cubedlさんによると4.0.4は影響を受けるとのことです。) 挙動の再現 1. http://l0.cm/atx
[JS]スマートフォンのタッチイベントを取得する各スクリプトのまとめ（仕様比較）
タッチイベントを取得する各スクリプトの対応イベント、スタンドアローンなのかjQueryが必要なのか、ファイルの容量など、仕様の比較をまじえて紹介します。 QUOjs イベント タッチ、タップ、ダブルタップ、ホールド、フィンガー、スワイプ、スワイプアップ、スワイプライト、スワイプダウン、スワイプレフト、ドラッグ 補足 jQueryとのコンフリクトを避けるため、「$$」を使用。 対応予定（2フィンガータップ、ロウテイト、ピンチアウト、ピンチ） 仕様 スタンドアローン ファイルサイズ Minified: 13KB Hammer.js イベント タップ、ダブルタップ、ホールド、ドラッグ、ピンチ 補足 タッチジェスチャだけにフォーカスしたスクリプト。 仕様 スタンドアローン jQueryのプラグインも有り ファイルサイズ Minified: 2KB [ad#ad-2] jGestures イベント
jQuery MobileでJavaScriptプログラミング ― グローバル設定とイベント ―（1/2） - ＠IT
連載：jQuery Mobile入門 第5回 jQuery MobileでJavaScriptプログラミング ― グローバル設定とイベント ― 山田 祥寛 2012/05/17 前回までの内容で、マークアップだけで賄えるjQuery Mobileの主な機能をおおよそ解説した。jQuery Mobileを利用することで、JavaScriptのコードすら記述することなく、ネイティブ・アプリ・ライクなサイトを作成できることを実感いただけたと思う。 もっとも、jQuery Mobileの魅力は、その手軽さばかりではない。JavaScriptのAPIも充実しており、独自の機能をごく手軽に実装できる。連載第5回となる本稿では、それらJavaScript APIの中でも、「グローバル設定」と「イベント」について解説していく。 ■jQuery Mobileの動作をカスタマイズしよう ― グローバル設定 j
スマフォのフリックにも対応しているカルーセルを実装できるJSライブラリ・inflickity
フリックに対応したカルーセルを 実装するライブラリ・inflickity です。動きもかなり軽快ですので、 使いどころも多々ありそうです。 よくあるUIキットにも似たような ものが含まれてますけど、こうして 単体で使えるのも欲しいところです。 永久にフリックできるカルーセル、みたいなのを作れるライブラリです。 PCではドラッグで操作できます。 スマフォはフリックで動かせます。と言ってもiPhoneでしかテストしてませんが。 Sample以下サンプル。スマフォはQRからどうぞ。 Sample 斜めのと混同してて操作はしにくくなっていますがその点はご了承下さい。 コード<script src="inflickity.js"></script> <script> var init = function() { var slider1 = document.getElementById('slid
スマホを判別するのに便利なJSスニペット:phpspot開発日誌
Detecting Mobile Devices with JavaScript | A Beautiful Blog スマホを判別するのに便利なJSスニペットが公開されています。 JavaScriptによってAndroid, iOSの差を吸収する際に使えそうです。 iOSかどうかの判別は、以下のように超シンプル if( isMobile.iOS() ) alert('iOS'); Android のタブレットの場合は Mobile が入らないので、タブレットも考慮する場合はそのへんのコードを追加するとよさそうです。 関連エントリ iPhoneかiPodかiPadかを調べるPHPとJSのソースコード例 利用者のブラウザ・OS・バージョンを取得できるクラスライブラリ「Browser.php」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
