福岡を拠点に活動するPLUSではWebサイト制作・iPhone/Androidアプリの開発を行っています。 WordPressはそのままだとアクセスが増えた時に、重くなりがちです。プラグインも入れすぎるとさらに重たくなることに。このブログだと表示スピードが改善前は7.7sかかっていましたが、見直しを行って0.4sにまで改善することができました。表示スピードは離脱率や、SEOとしても重要な要素ですので、改善する余地は大いにあります。 高速化に役立つツール まずはじめに、改善に役立つツールを2つご紹介します。 一つ目はWebWait。URLを入れると、読み込み時間を教えてくれます。まずはどのくらい時間がかかっているのか、チェックしてみましょう。 次はGoogleの「PageSpeed Insights」。URLを入れるだけで、高速化に役立つTipsを教えてくれます。もともとGoogle社内で
enchant.js is … カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワークです。 2011年に公開され、すでに 1,000 本以上のゲーム/アプリが公開されています。 オープンソース (MITライセンス) で、無料で利用できます。 ドキュメント・書籍・チュートリアルサイトが充実しています。 たくさんのプラグインで機能を拡張できます。 UEI/ARC を中心としたメンバによって開発・メンテナンスされています。 プログラミング教育のためにも利用されています。 Features オブジェクト指向: 表示されているものはすべてオブジェクトです。 マルチプラットフォーム: iOS, Android, Mac, Windows のブラウザで動作します。 Windows 8: Windows 8 対応のHTML5アプリケーションを開発できます イベント駆動
複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を生み出すパララックスを簡単に、そして確認しながら作成できるオンラインサービスを紹介します。 JavaScriptやCSSの初心者でも簡単にできると思います。 Parallax Background Builder Parallax Background Builderの使い方をざっくりと説明します。 Step 1: 適用範囲の選択 まずは、パララックスの適用範囲を選択します。 左がページ全体、右がdiv要素のみ、です。カーソルを動かすとパララックスの動作が分かります。
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
ウェブページ上にツイートを表示するシンプルで軽量なJavaScript『Chirp.js』 Chirp.jsはウェブページ上にTwitterのタイムラインを表示するためのJavaScript。 jQueryなどのライブラリに依存しない単体の超軽量スクリプトで、カスタマイズ性が高く設置も超簡単という、この手のスクリプトとしては非常に優秀なシロモノです。 先ずはスクリプトをダウンロードしましょう。自分で自由に値段を付けて『Buy it!』をクリック。もちろん『0』を入力すればフリーでダウンロードできます。 ダウンロードしてスクリプトを解凍したら、適宜サーバーにアップロードしたら下準備は終わりです。 最も簡単な使い方としては、スクリプトのパスとTwitter名を指定した上でタイムラインを載せたいページの適当な部分(<body>内)に以下の2行を挿入するだけです。 (1行目のスクリプトタグは<he
legit online casino real moneyHighest Payout Online Online Casinos: A Comprehensive Overview-rn When it comes to online casinos, players are always on the lookout for the highest possible payment city center online jugar portions. Nevertheless, legit online casino real money that would not want to optimize their possibilities of winning large? In this comprehensive guide, we will check out the glo
jQueryで正規表現を学んでみる。【基礎編】 正規表現といえばフォームチェックがぱっと思いつきますが、最近ではjQueryで外部APIで様々な情報を取得する機会が増え、それによって文字列の置き換えなどもできるようにならんとな、と思ったりしている人も増加しているはず! ということでお手軽に使えるjQueryを使用して正規表現をちょこっと勉強してみようと思います。 投稿日2010年11月14日 更新日2011年04月03日 文字列を置き換える基本の形 正規表現の前にjQueryで単純な文字列を取得して、置き換えて表示するということをしてみます。 html <p> 正規表現はjavascript以外のプログラムやテキストエディターなどの検索でも使えます。でもここではJavaScriptを使うんです。 </p> 例えばここにpタグでマークアップされた文字列があります。 「javascript」を
JavaScript における比較演算子 == と === の使い分けって, C や Java といった他の言語にはない仕組みなので意外と戸惑う人もいるみたいですね. 今回はその違いについてまとめました. Runstant Lite で作ったサンプルもあります. 良かったら fork して遊んでくださいな♪ 等価演算子と厳密等価演算子 JavaScript には, 型変換して比較するあいまいな比較と厳密に比較する方法の2通りがあります. あいまいな比較 == は等価演算子, 厳密な比較 === は厳密等価演算子と呼びます. JavaScript の比較における特徴はこちら 2つの文字列は、文字の順序が同一で、長さが等しく、かつ対応する位置の文字が等しいとき、厳密に等しくなります。 2つの数値は、数字的に等しいとき(数字の値が等しいとき)、厳密に等しくなります。NaNは、どんなものとも(Na
文字列の存在位置を知る indexOfメソッドで文字列中の検索文字列の存在位置を知ることができる 位置は最初の文字をゼロとする数値で返される、ヒットしなければ-1が返る "hoge".indexOf("g"); 第二引数で検索開始位置を指定できる "hoge".indexOf("o", 2); // -1 ▲ ▼ 文字の文字コードを知る StringオブジェクトのcharCodeAtメソッドを使うと、指定した文字位置(最初がゼロ)の文字コードを取得することができます var hoge = 'abc'; abc.charCodeAt(0); //-> 'a'の文字コード97 引数を省略した場合はゼロを指定した場合と同じ結果になります ▲ ▼
blogaomu2.1はこの度、http://blogaomu.comに引っ越しました。最新の更新はblogaomu.comにて行なっておりますので、ブックマーク・RSS等の設定をお願い致します。 何気なくツイッターのタイムラインを見てたらtwitpic APIのversion 2 がうんたらかんたら、という話が出てきていたので、急にAPIを使って自分が投稿した画像を表示できないかなと思い試してみました。 twitpicはtwitterと連携した画像投稿サービスです。twitterのアカウントでログインし、twitpicに投稿すると画像入りのツイートとしてtwitterにも流れてきます。 http://twitpic.com twitpicのAPIドキュメントです。 http://dev.twitpic.com/docs/ 今回は自分の投稿した画像を取得したいので、users/showとい
Gridster.jsは自由にレイアウトが組み替えられるUIを提供するjQueryプラグインです。 Pinterestに感化されたのか、ブロックの高さを組み替えつつ表示するUIが流行っています。今回紹介するGridster.jsはそれに似ていますが、横幅も変更可能で、さらに自分でドラッグアンドドロップして並びが変更できるのが特徴になっています。 ドラッグして場所を移動できます。 こんな感じに並んだりもします。 Gridster.jsはjQuery製のプラグインになっています。使う最小のカラム数、行数を指定できます。使える場所としてはiGoogle的なウィジェットを自分で並び替えて表示する類のUIであったり、写真を表示したりするのに良いかも知れません。 Gridster.jsはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTは
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 �&��View in English PQ!&��Always switch to English JavaScript はマルチパラダイムの動的言語であり、型や演算子、標準組み込みオブジェクト、メソッドがあります。その構文は Java や C 言語に由来するので、それらの言語の多くの構造が JavaScript にも同様に適用できます。 JavaScript は、オブジェクトプロトタイプやクラスによるオブジェクト指向プログラミングに対応しています。また、JavaScript は関数型プログラミングもサポートします。関数が第一級オブジェクトであり、式から容易に作成し、他のオブジェクトと同じように受け渡しすることができます。 このページは、 Ja
知られてない機能ってのは大抵公式リファレンスにのってない奴なんですが、結構便利なのがあるので紹介しておこうと思います。 ハッシュ値を取り出す方法 {abs, sin, cos} = Math引数値でもパターンマッチ的に使うことができる。 次のコードが $.get "/json", {}, (data) -> console.log data.a, data.b, data.cこのように書き換えられる。 $.get "/json", {}, ({a, b, c}) -> console.log a, b, cすべてのオブジェクトがハッシュで表現されるJS、その拡張ならではの略記ですね なお、展開後の変数にデフォルト引数は付けられなかったです。残念。 引数オブジェクト展開 arguments... で引数オブジェクトを展開することができます。 f = -> console.log argume
基本、Web系の記事メモです。内容は他力本願ですいません。綺麗にカテゴリとかまとめる気はないです。アーカイブから見た方が見やすいかも〜w パララックス効果を用いたコンテンツを作りたい! パララックス効果を用いたページが流行って(?)ますよね。 作ってみたいと思ったので色々探ったページをメモ 【まずはデザイン(見た目)の参考】 Nike Better World http://www.nikebetterworld.jp/ ACTIVATE http://activatedrinks.com/#/activate Manufacture d’Essai http://www.manufacturedessai.it/it/ iutopi - Creative Land / Branding, Graphic & Web Design | | | | | | | Mauro Macch
jQueryで奥行きのある背景スクロールを作ってみる 普通に背景画像を指定するだけだとスクロールに追従して画像も移動しますが、jQueryで背景位置を調節することでスクロールの速度をずらすことができます。 この記事ではこの機能を利用して、スクロールすると奥行きの感じられる動作を作ってみます。 投稿日2011年05月13日 更新日2011年05月13日 画像を手前は早く、奥は遅く移動 デモを見て頂ければわかると思いますが、やってることは手前の背景画像を早く動かし、奥の画像を遅く動かしているだけです。 html + css 画像は当然ですが2枚以上用意しましょう。 ここでは3枚画像の画像を使用します。 なのでdivを3つ用意し、それぞれに背景画像を指定します。 html <div id="bg03"> <div id="bg02"> <div id="bg01"> <!-- /#bg01 --
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く