Webサイト・アプリ高速化テクニック徹底解説 （第1回 Webサイト・アプリの高速化ファーストステップ）
「Webサイト・アプリ高速化テクニック徹底解説」ということで、本連載はWebサイト・アプリの高速化テクニックについて幅広く解説していく予定です。今回は、具体的な高速化のテクニックに触れずに、高速化が必要な理由や、スピード測定ツールなど基本的な部分について解説します。 皆さんはじめまして、「Webサイト・アプリ高速化テクニック徹底解説」というタイトルでこれから連載させて頂く、HTML5 エキスパートの吉川です。連載の初回ということもあり、今回はWebサイト・アプリの高速化に関する全体的な概要や最新情報、今後連載で触れていくトピックスなどを紹介していきます。 何故、高速化が必要なのか？ 最近では、HTML5とその周辺技術などによってWebの表現力が非常に豊かになりました。そのため、これまでのWebでは考えられなかったような多彩なWebサイトが増え、多機能なWebアプリも多く見られるようになって
JavaScriptの配列を特定の順番にソートする方法
JavaScriptで作った配列の順番を特定の順番に入れ替えたい時があったので、ソートして入れ替える方法を調べました。 sort関数 ソートする関数が用意されていますので、sort関数を使います。パラメーターを入れないとアルファベット順になります。 //配列 var station = ["Shinjyuku","Ikebukuro","Shibuya","Ueno"] //配列をソート station.sort(); //出力用 alert(station); // Ikebukuro,Shibuya,Shinjyuku,Ueno ちなみに配列の中身が数字の場合だと・・・ var number = [50000,40,900,3000] number.sort(); alert(number); // 3000,40,50000,900 アルファベット順なので、このような並びになります。
ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
JavaScriptでCookieを扱いたい時のメモ
昨年末は、あれ？私コーダーだったっけ？ってぐらいにHTMLとCSSとJavaScriptとPHPの勉強と作業しかしていませんでした。 その頃作業していたお仕事は要求されるレベルも予想以上に高く、作業しつつも勉強勉強という感じで、振り返るとなかなかに充実したお仕事だったなぁと思います。 そんなお仕事で改めてCookieについてきちんと勉強したのでメモしておきます。 そもそもCookieとは Webサイトの提供者が、Webブラウザを通じて訪問者のコンピュータに一時的にデータを書き込んで保存させるしくみ。 （引用元：http://e-words.jp/w/Cookie.html） 例えば、初めて訪問したサイトで名前を入力したら、次回訪れた際に入力した名前で呼ばれたり。 例えば、訪問した回数を記録していて、訪れる度に何回目の訪問か教えてくれたり。 そういうことができます。 JavascriptでC
スマホ対応アニメーション支援ライブラリ - smart js
特徴 配置と動きに特化した Javascriptライブラリです。 シンプルで柔軟性もあり、 処理も高速です。 対応OS / ブラウザ iOS 7+ Android 4.1+△ Android 4.4+○ IE9+ Safari latest Chrome latest Firefox latest
Tween<span>Max</span>
Note: TweenMax has been deprecated in GSAP 3 in favor of the streamlined gsap object. It has 50+ new features and is almost <strong>half the size!</strong> GSAP 3 is backward compatible with the vast majority of GSAP 2 features including TweenMax. Please see the Migration Guide for details. TweenMax lets you animate literally any property of any object that JavaScript can touch (CSS, SVG, React, V
最強オブジェクト指向言語 JavaScript 再入門！
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方
ケツカンマ.com ┌[ ^o^┐,]┐ ケツカンマァ
var list = [ 0, 1,]; // list.length => 3 var x = { a:1, b:2,}; // Error
JavaScript の配列と連想配列の違い - IT戦記
id:cheesepie:20070131:1170172709 最近は、こういう風に JavaScript を勉強する人が増えていてとても嬉しいです ＾＾ id:cheesepie さん頑張ってください！ で、ちょっと配列と連想配列の使いかたが違うようなので、エントリーを書こうと思いました。おせっかいだったらすみません＞＜ ！ やっぱり、このへんが JavaScript の難しいところのひとつなのだろうか。 ということで、 JavaScript の配列と連想配列の違い いってみよおー 連想配列とは JavaScript では連想配列は一番シンプルなオブジェクトのことである。つまり、すべてのオブジェクトは連想配列である。 以下のすべての連想配列はまったく同じものである。 // 1 var obj = { hoge: 'hoge' }; // 2 var obj = { 'hoge': 'h
多次元配列の利用
JavaScript の要素にはどのような値でも格納することができますが、要素の値として別の配列リテラルを格納することもできます。このような配列のことを多次元配列と呼びます。ここでは JavaScript で多次元配列を扱う方法について解説します。
多次元配列を特定の深さにある要素でsortしたい【JavaScript】【Array.sort()】【比較関数】 - DRYな備忘録
【問題】 JavaScriptで、多次元配列の親配列の先頭の要素ではなく、子配列の子配列の・・・の要素でsortしたい。 たとえば [[6,2], [3,9], [1,7], [4,0], [8,5]] を、こう [[4,0], [6,2], [8,5], [1,7], [3,9]] 【経緯】 まずここ 配列（Array） に来て まあソートは出来るわな、と思ったが、比較関数？ってなった。 比較関数って何だろうということで、ここ 配列を数字順にソートする に来たが、 引数のa,bが謎。 で、ここ 比較関数の意味がわからん。 にたどり着いて もしかして一つ一つ前後を比較しているのか？と思った。 【試行】 ChromeのConsoleで以下のように打ち込む。 yy = new Array( 3, 6, 1, 9, 5, 2, 4, 8, 7 ); yy.sort(function(a,b){
これは備忘録 Unicode エスケープシーケンス 変換
Unicode エスケープシーケンス（\uXXXX)形式 に変換するもの ついでにHTMLの数字文字参照、文字実体参照にも対応させてみた。 メモ Unicode の UTF-8 エンコーディングは ASCII 文字と互換性があります。 Unicode 文字の U+0020 から U+007E までは ASCII 文字の 0x20 から 0x7E と同等です。 ASCII はラテンアルファベットをサポートしており、7 ビット文字セットを使用します。 UTF-8 は各文字について 1 オクテットから 4 オクテットを使用します。 （「オクテット」は 1 バイト、すなわち 8 ビット）。 \uXXXX形式 は多分、java、javascriptで使用可能。 数値文字参照（文字参照）：数値文字参照は、10進数もしくは16進数によって文書文字集合における該当文字を指定する方法 例： 「©
text-overflowはFirefox7から使える／複数行の時はJavaScriptで対応 - with the flow
まんまです。使えるようになってるのを最近知りました。 text-overflowはIEが6から独自仕様として実装していたものですが、 Microsoftの珍しく素晴らしい先見性によって、CSS3の仕様にも組み込まれたものです。今までもwebkit,Operaでは使えていました。 それが、Firefox7からようやく実装されたということですね。 以下のクラスを作っておいて、横幅の指定された対象要素のクラスに追加してあげれば良いです。 .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; } はてなはCSSが使えるようなので、以下実際にやってみますね。 わかりやすいようにボーダ
#11 キャプチャとRegExp | 【旧版】正規表現入門 - プログラミングならドットインストール
動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合は ヘルプ「動画が見られない場合について」 もご覧ください。
– このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2024年5月時点の調査。
JavaScriptのオブジェクト指向は、逆の順番で学んだほうが理解しやすいと思うので…
事の発端というか、きっかけは、id:perlcodesampleさんとid:gfxさんの下のポストを見て、 JavaScriptで一番簡単にオブジェクト指向プログラミングを行う方法 (id:perlcodesampleさん) JavaScriptにおけるオブジェクトの定義 (id:gfxさん) newとかprototypeを使うのが推奨されてないとか、直接代入するほうが楽とかじゃなくて、挙動が違うんだよなぁ、と思ったこと。 挙動が違うんだから、もちろん使いどころも違うんですよね。 でも実際、JavaScriptのオブジェクト指向は混乱しやすいと思います。 自分もご多分にもれず、さんざん混乱させられたクチですしね。 わかってしまえば、どってことなくて、とってもシンプルなんですけどね。 せっかくなので、今だからこそ言える、自分だったらこうやって教えて欲しかったなぁ、っていう説明をしてみようかと
クラス定義 ～ JavaScript によるオブジェクト指向プログラミング
オブジェクトリテラル 「クラス定義」 ということはつまり、特定のメソッドとメンバ変数を持つオブジェクトを定義することといえます。 この方法はいくつかあります。 もっとも単純な定義は、次のようにオブジェクトリテラル(Object Literal) を用いて、オブジェクトを定義することでしょう。 var person = { name: 'Ichiro', say_hello: function() { alert('Hello'); } }; こうすると次のように、say_hello メソッドを呼び出すことが可能です。 person.say_hello(); また、次のようにすることによって、上記の person を「プロトタイプ」とし、 新しいオブジェクトを生成することも可能です。 if ( typeof Object.create !== 'function' ) { Object.cr
CSS3 PIE: CSS3 decorations for IE
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
flipsnap
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function