サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
www.xenophy.com
%指定とは違った、フォントを可変にするプロパティをご紹介します。 rem(「root+em」)はCSS3から追加された新しい単位で、ルートであるhtmlに指定されたフォントサイズを基準とします。 %指定とは違い、親要素のフォントサイズの継承を気にせず使用することができます。 基準となるサイズを「62.5%」とした場合、「font-size: 1.3rem;」は「font-size: 13px;」に相当します。 remを指定する時、対応していないブラウザを考慮する場合はpxも同時に指定すると良いでしょう。
はじめに 開発者は PhoneGap (後にCordovaも) を使い、ハイブリッドなモバイルアプリを2009年よりデプロイしてきました。 Web アプリケーションをネイティブデバイスで実行できるようになったため、HTML5 コミュニティは PhoneGap を受け入れ、iOS や Android など様々なプラットフォームで何千ものアプリがリリースされてきました。しかし、ラッパー自体は非常に優れていますが、残念なことにデバッグツールはものすごく遅れをとってしまっています。そして、複数プラットフォーム間でのデバッグの多くは苦痛を伴う作業となっています。 この記事では、新しい Genuitec の GapDebug ツールを紹介し、PhoneGap を使ってデプロイされたハイブリッドアプリケーションをデバッグするのが、いかに簡単になったかを解説したいと思います。また、GapDebug を W
Sassを利用した場合に、「-webkit」などのベンダープレフィックスを自動で付与する方法をご紹介いたします。 通常のcssでプレフィックスを記述する場合、プロパティに記述する「-webkit-border-radius: 10px;」や値に記述する「display: -webkit-box;」があります。ここでは2通りの記述方法をご紹介いたします。 Sassファイルに「$set-prefix:」で付与するプレフィックスを記述します。
Guest Blog Post CNX では、ほとんどのExt JSで行う開発作業はゼロから新しいアプリケーションを生成する事ですが、時々我々のお客様からパフォーマンス問題、バグ、構造問題で既存の内部作業を取り扱う依頼がきます。 この「清掃人」の作業を長い間を関わって来たので、検査しているアプリケーションによく表れるいけないコーディング習慣に気づいてきました。 この10年間を渡って行って来た作業をレビューして、Ext JSのアプリケーション開発でやってはいけない10のことのリストを作成しました。 1. コンポーネント構造の異常や余計な入れ子 開発者がよくする間違いは意味なくコンポーネントをネストすることです。 これを行うとパフォーマンスも傷つきますし、枠が二重になったり意外なレイアウト挙動をしめすなど、アプリケーションにおかしなことが発生する場合もあります。次の1Aの例では、一つのグリッド
ul liタグで幅を決めずに横並びで中央に寄せる方法をご紹介いたします。 liを横並びにするときは、「float: left;」を指定することが多いと思います。幅が固定ならば中央寄せにすることは難しいことではありませんが、なんらかの事情で幅が決められない場合に、「float: left;」での横並びで中央寄せを実現しようとすると難しいものがあります。 「ul.center」の「text-align: center; 」でul自体を中央寄せにします。次に、「ul.center li」の「display: inline-block;」で横並びにします。「display: inline-block;」はブロック要素と同じように幅と高さを指定することができます。また、インライン要素と同じで同一の行内に表示されます。 ul.center { margin: 0; /* 余分なマージンを消去 */ p
"" // 空文字列。0文字の文字からなる文字列 "Sencha Touch" 'Sencha Ext JS' 'name="Xenophy"' 'Hello\nWorld!!' エスケープシーケンス JavaScriptにおける\(バックスラッシュ)は特別な意味を持ちます。 バックスラッシュの直後に特定の文字と組み合わせることにより、改行コード等の特殊な制御コードを表すことが出来、この制御文字をエスケープシーケンスと呼びます。 (制御文字として表示されるので、ページ上にそのまま表示されることはありません) 上記に載せた「文字列の定義例」の中に、このエスケープシーケンスを利用している文字列があります。
Android 5.0 ‘Lollipop’ は、Google がモバイルプラットフォームのためにリリースした最も重要なアップデートの一つとして位置づけられています。 Google’s Material Design を使った新しい見た目と、5000 以上の新しい API はとにかく興奮ものです! Sencha は HTML5 と Web にはしっかりとコミットしているので、新しいリリースが Web 技術を必要としている開発者やエンドユーザーにどのような影響があるかをチェックしています。Android は米国では モバイルデバイスの 51.5% のシェア を占めていることもあり (世界的には約 85%) 、この新しいリリースについて詳しく分析し、 Web に関する重要な点について述べることにしました。 Android 5.0上の Web Android 5.0 は、Chrome for A
CSSだけで画像に白い半透明のマウスオーバーを実現する方法をご紹介いたします。 下記のCSSでは「.alpha」クラスのa要素がhoverする際のimgに対してスタイルが効くようにしています。 1行目の「opacity: 0.7;」でimgの透明度を変更しています。 2行目の「 filter: alpha(opacity=70);」はIE用の指定で、IEにも対応するようにしています。
スマートフォンで横スクロールバーを出しつつ、横スクロールする方法をご紹介いたします。 通常、Androidではスクロールバーを出すことはできません。iOSに関しては、iOS5以上ですが「-webkit-overflow-scrolling: touch;」により一本指でスクロールさせることができます。ここでは「iscroll.js」を使うことによって、AndroidとiOSで同じ動きを実現させます。 まず、元となる「jquery.js」と「iscroll.js」をダウンロードして、読み込みます。 <script type="text/javascript" src="jquery1.7.1.js"></script> <script type="text/javascript" src="iscroll.js"></script> 下のソースのポイントは「onBeforeScrollSta
先週アップルが発表した iOs 8 のリリースに、私たちは非常に興奮しております。iOS 8 の正式リリースを手にして数日しか経っていませんが、いち早く世界中の Web 開発者コミュニティに最新のアップルのリリースについて徹底的にお伝えしたいと思っています。もちろん数週間、数ヶ月後にはここではカバーできなかった項目が発覚するのは承知ですが、既に分かっていることを少しでも共有できたらと思っています。 この記事は、今後iOS 8 がアップルのデバイスのベースラインとなることを見越して、HTML5 の現状を技術解析したものです。去年 iOS 7 にも似たようなレビュー記事を Web 開発者のために書きましたので、気になるかたはそちらもご覧ください。 iOS 8 の新機能は HTML5 開発を進めます 今回のアップグレードで加えられた機能について見ていきましょう。 Source: caniuse.
先週、Yahoo はYahoo! User Interface Library(略称:YUI)に関する新しい開発を全て停止することを発表しました 。今まで幾千という数のコードを書いてきた何千人もの YUI 開発者は、おそらくこのニュースを耳にして悲しむでしょう。しかし、それと同時に、このような結論に至ってしまうほど劇的に進化している開発環境に関しても理解しているはずです。Sencha Ext JS フレームワークとYUI は密接な関係があり長い歴史を共にしてきました。そのため、この機会を利用して我々の過去を振り返り、未来に何があるかをお話したいと思います。 YUI と Ext JS の略歴 2000年代の初頭では、 Web 開発の世界は今日とは大きく異なっていました。大半のデスクトップ PC は Internet Explorer 6.0 を使用していて、初期バージョンの Firefox、
2カラムの固定と可変があるレイアウトをご紹介いたします。 カラムレイアウトと言えば、pxでの固定レイアウト、または%での可変レイアウトが思い出されると思います。今回は2カラム構成で、片方がpxでの固定、片方が%での可変レイアウトを作成します。 下記のソースは左カラムが固定で、右カラムが可変のCSSです。 左カラムは2行目の「.l_col_fix」で「float: left;」と「width: 100px; 」で左方向にフロート、幅を固定しています。 8行目の「.r_col_liquid」では、「float: right;」、「width: 100%; 」で右方向にフロート、左カラムで指定した100px以外の幅を保持し、「margin: 0 0 0 -100px;」で、左カラムと同じ幅をマイナス指定することによって横並びにしています。 14行目の「.r_contents」の「margin:
アーカイブ 2020年June (1) 2016年August (1) 2016年June (5) 2016年April (10) 2016年February (7) 2016年January (5) 2015年December (5) 2015年November (2) 2015年October (3) 2015年September (3) 2015年August (1) 2015年July (9) 2015年June (7) 2015年May (6) 2015年April (9) 2015年March (1) 2015年February (7) 2015年January (3) 2014年December (6) 2014年November (7) 2014年October (11) 2014年September (11) 2014年August (9) 2014年July (6) 2
背景色を下部まで要素がない場合でも、下まで伸ばす方法をご紹介します。 通常、ブロック要素のdivタグなどにbackgroundで背景色を指定した場合、要素がある分までしか背景色は伸びません。これをCSSで要素がない場所(下部)まで伸ばしてみます。 ルートである「html」と「body」要素に「height: 100%;」を指定、min-heightに対応していないブラウザ用に「height: 100%;」を「div.background」にも指定します。次に背景色を記述している「div.background」に最小の高さとして「min-height: 100%;」を指定します。「div.background」に「min-height: 100%;」を指定することよって、最小の高さとして、必ず背景色を高さに対してどこまでも伸ばすようにしています。 「body > div.background
ブラウザで簡単にですが、Sassをデバッグする方法をご紹介いたします。 対象ブラウザはFirefoxとChromeブラウザです。 FirefoxはアドオンからFirebugと FireSassをインストールします。 ChromeはWeb StoreからSASS Inspectorをインストールします。 インストールした後、「config.rb」に「sass_options = {:debug_info => true}」を記述します。 次に「compass watch」でSassファイルを監視し、Sassファイルに何らかの記述をすると、CSSが更新されCSSに「@media -sass-debug-info{}」という記述が追記されます。 以上でSassファイルの記述内容を行番号付きで、インストールしたブラウザの拡張機能に表示させることができます。 FirefoxではFirebugの「HT
CSSだけで横並びのリストタグの高さを揃える方法をご紹介いたします。 リストタグの横並びは「float」プロパティが思い浮かぶと思います。ここでは横並びに関しては、「display: inline-block;」を使用します。 2行目の「display: inline-block;」で横並びにし、4行目の「vertical-align: top; 」でli要素を上端揃えにします。これでFirefoxやSafariなどのブラウザに対しては高さを揃えることができます。 IE6とIE7は「display: inline-block;」に対応していませんので、CSSハックで代替プロパティを指定します。12行目から13行目、18行目から19行目が各プロパティになります。 IE6とIE7は「display: inline;」で横並びにします。「zoom: 1;」はli要素のマージンやパディングの指定が
「関数ってなんぞ?」なんて方は、居ないと思いますが・・・ もし居た場合は、「No.3 論理値と関数の基本」の関数部分をもう一度お復習いしておきましょう。 まず、関数は次のような書き方でしたね // 関数宣言をした場合 function say() { alert('Hello!!'); } // 無名関数を変数に入れた場合 var hi = function() { alert('Hi!!'); }; say(); // 結果: "Hello!!" hi(); // 結果: "Hi!!" 関数宣言と変数の中に無名関数を入れるやり方は、一見同じように見えて実は、実行できるタイミングに違いがあるということも学んだと思います。 今回学んでいく「様々な関数の呼び出し方」、表題通り実は関数の呼び出し方にはいろんなやり方があるのです。 呼び出し方その1: ()による呼び出し
前回は縦にスクロールする表示方法をご紹介いたしました。 今回は横にスクロールさせる方法をご紹介いたします。 大きくわけて3つの要素で構成します。 外枠部分 ロック部分 横スクロール部分 外枠部分はdivで大枠のボーダー線や幅を指定します。 div.x_data_area { width: 900px; overflow: hidden; /* floatさせた要素を内包しているため指定 */ border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; border-left: 1px solid #CCC; } ロック部分はdivとテーブルで構成します。 「<div class="lock_box">」には横スクロール部分と横に並ばせるため「 float: left;」と「 width: 300px;」として幅を指定します。
昨年の10月に iOS 7.0の Web 実装をレビューしました。このリリースは残念なもので、「大量のバグと壊れた機能があり、このリリースはどう見てもベータ版です」と判断しました。今 iOS 7.1 がリリースされたので、Apple がこの製品をどの程度改善したか再びレビューします。 良いニュースは、バグ、動作しない機能、パフォーマンス低下の大部分が解決されていることです。 例えば、SVG アニメーションは 60 fps に戻りましたし、ホーム画面に追加したアプリも無事に動作しているようです。 ホームに追加したアプリが元通りになりました Web 開発者から見て、iOS 7.1 の最も大きいニュースは「ホーム画面に追加」機能の不具合が解決されたことです。iOS 7 では「ホーム画面に追加」の機能は恐ろしく壊れていて、通知が無効になったり、ハードクラッシュしたり、他にも変な動作がありました。そ
input type submitでホバー時にボタンの画像を置換する方法をご紹介いたします。 使用する画像は下記になります。 「input.btn_submit」に必要なプロパティを記述します。「cursor: pointer;」はマウスカーソルを指の形にします。「display~height」までは画像置換する際に必要なプロパティです。submitボタンをブロック要素にし、通常時の画像の幅と高さを決めています。「border: none;」はsubmitが元々持っているボーダーを消去しています。「text-indent: -9999px;」はsubmitの「value=”送信”」の「送信」文字を画面外に飛ばしています。「background: url(btn_submit.gif) no-repeat 0 0;」で置換する画像を指定しています。 「input.btn_submit:hov
調査の概要 12月と1月に、弊社がSenchaのHTML5開発者コミュニティの2,128人のビジネスアプリケーション開発者を調査しました。開発者が構築しているアプリケーションの種類、利用している技術、対応しているデバイスも含めて質問しました。ほとんどの回答はこの業界の皆さんが既に知っている傾向通りでした。例えば、iPadがターゲットデバイスとして人気があるという事実は驚くことではありません。しかし、驚くような結果もありました。 重要な発見 アプリケーション開発者の大多数はHTML5開発に移行し、HTML5プラットフォームを非常に支持しています。 60%以上の開発者は主要なアプリケーション開発において、既にHTML5とハイブリッド開発に移行しました。まだHTML5以前のWebテクノロジーを利用している回答者は10%以下でした。 HTML5とハイブリッド開発者の70%以上は、昨年と比べて今年は
最近、全然正しくないモバイルHTMLパフォーマンスについての作り話をよく聞きます。良くできた都市伝説のように、もっともらしくて興味深いです。しかし、この作り話は、不正解な事や、ネイティブとウェブソフトウェアスタック関係の誤解、不正確なデータポイントを基にしています。我々がパフォーマンスについて、この何年間にも渡って集めたデータ、モバイルウェブアプリケーションパフォーマンスの最適化に対して、我々の経験を利用して、この作り話を暴くことをするのは重要だと思いました。 TL;DR(長ぇよ) 作り話 #1: モバイルウェブパフォーマンスは、ほとんどCPU上のJavaScriptパフォーマンスでドリブンされる。 実は:ほとんどのウェブパフォーマンスはレンダリングのパイプラインの最適化、DOM操作の速さ、GPUアクセラレーションのレベルで制約されています。より速いJavaScriptは役に立ちますが、最
次はPhoneGap CLI Getting Started Guideに従って、PhoneGapや他の配置したいネイティブプラットホームでシステムを立ち上げましょう。注 もしPhoneGap Buildで作成するつもりでしたら、NodeJSとPhoneGap CLIをダウンロードするだけですので、ネイティブSDKを気にする必要はありません。 Sencha Cmd 4対応アプリケーションにもPhoneGapサポートを追加するには、オプションとなる APP_ID と APP_NAME の引数付きで次のコマンドを実行します。 フォルダ構造 これで、あなたのアプリケーションはPhoneGapが提供する楽なネイティブ開発と共に、Sencha Touchフレームワークのパワーを利用できるようになりました。既にSencha開発者であれば、アプリケーションビルドのワークフローは今までと同じことに気づきま
アーカイブ 2021年December (1) 2020年June (1) 2016年August (1) 2016年June (5) 2016年April (10) 2016年February (7) 2016年January (5) 2015年December (5) 2015年November (2) 2015年October (3) 2015年September (3) 2015年August (1) 2015年July (9) 2015年June (7) 2015年May (6) 2015年April (9) 2015年March (1) 2015年February (7) 2015年January (3) 2014年December (6) 2014年November (7) 2014年October (11) 2014年September (11) 2014年August (
この数日間、私達はHTML5のバッテリーに対してiOS 7の最終リリースのテストしました。いつもはファンのようにiOSのリリースを喜んでいましたが、今回は今までとは違いiOSソフトウェアの実行に失望しています。SVGとJavaScriptでの印象的なパフォーマンスの改善がいくつかありましたが、ベータ版では壊れた機能とバグが数多くありました。。Android 3のブラウザほどは悪くないですが(今までの壊れたウェブリリースの中の王者)私達が思うことは、HTML5の開発で標準化された組織は、この問題を解消したiOSのアップデートが出るまでアップグレードしないほうが良いかもしれません。 iOS 7のバグと機能 Max Firtmanは既に新しい機能や バグ、不思議なことについて素晴らしい紹介をしました。もし彼のブログ記事を読んでなかったら、今すぐに読む事をおすすめします。ここでは同じ発見を全て繰り
次のページ
このページを最初にブックマークしてみませんか?
『SenchaによるWebアプリ開発のゼノフィ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く