Best Practices for Speeding Up Your Web Site The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 35 best practices divided into 7 categories. Minimize HTTP Requests tag: content 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, styleshee
CSS Nite LP, Disk 15「ソーシャルメディア特集」が終了しました。 私はサイト実装まわりでお話させていただきましたが、多くの方に興味をもっていただけたようでよかったです。 普段、実装をされない方にとっては少し退屈なセッションだったかと思いますが、製作者はこのような事をしているんだとと雰囲気だけでも感じ取っていただけたら幸いです。 いくつかTwitterで質問をいただいてますので、お返事いたします。 in_reply_toつけたらそのアカウントをフォローしてる人にしか表示されなくなるのでは? セッション内ではTwitterの各機能の細かい挙動は解説できませんでしたがでは、ご指摘のとおりTwitterにおける返信(replay)では返信元のアカウントをフォローしているユーザーのタイムラインにのみツイートが表示されます。 「OAuth認証なら正確なツイート数がわかる」てのは、あく
4月9日追記: Facebookいいね!ボタンについて認識が足りていない部分があったので追記・修正しました。その結果、IE6・7でGA計測する場合、古い(同期)のXFBML版だけでなく、古い(同期)のHTML5版でも計測が可能ということが分かりました。 ————————————————– 実装編もアップしました。 ————————————————– Facebookのいいね!ボタンのクリック状況をGoogleアナリティクスで取得する必要があったので色々と調べてみたのですが、本当に大変でした…。 なぜ大変だったかと言うと、GoogleもFacebookもどんどん仕様を変えているので、取得方法を紹介してくださっているブログの情報と公式ページの情報が違っていたり、違うバージョンの仕様をベースにしたブログ同士がリンクしあっていたり、とにかく理解するのに時間がかかりました。 もちろん今後も仕様が変わ
jQuery Mobileを使って、スマートフォン対応ページをはじめて作成する際に役立つコード、つまづきやすいポイントを紹介します。 10 handy jQuery mobile tips and snippets to get you started [ad#ad-2] 下記は各ポイントを意訳したものです。 スマフォ対応ページの基本HTML jQuery Mobileの利用方法 AJAXナビゲーションの停止 リストアイテムの省略を阻止 Media Queriesの利用 プラットフォームの特定 フォームを使用する際の注意点 ポップアップ ダイアログの作成 キャンセルとセーブのボタン カラム構造を作る時のポイント スマフォ対応ページの基本HTML まずは、スマートフォン対応ページを作成するための基本となるHTMLです。 HTML <!DOCTYPE html> <html> <head> <
ケータイ3キャリアに対応するためのDOCTYPE宣言について Tweet 2009/10/14 水曜日 matsui Posted in 全キャリア対応, 記事紹介・リンク | 11 Comments » XHTMLを使ってケータイサイトを作成する際には、HTMLの冒頭にDOCTYPE宣言を記述する必要があります。 先日からこの「DOCTYPE宣言」に関するブログエントリーが人気を集めているようなので、当サイトも触れてみようと思います。 下記2つのサイトでは、どちらもif文でユーザエージェントを判定して、DOCTYPEを出し分けるという処理を紹介しています。 → ma-san.org 携帯サイトをHTMLではなくPHPで組むときのDOCTYPE分岐方法 [ma-san.org] → ある人のぼやき 携帯サイトのDOCTYPE分岐方法 [d.hatena.ne.jp] DOCTYPE宣言とは
2012年 6月 13日 新しいサーバーでブログをリニューアルして気がついた、SNSボタンの有無でかなり読み込み速度に差がある。といっても2,3秒ほどですが、これは結構命取りだったりします。 まぁ私もそんなに詳しいわけではないので断言できませんが。 ・訪問者はその数秒でサイトから逃げる ・Googleはその数秒を評価基準に入れる たしか遅延ロード(Lazy Load)とかいう技術ですね。 わりとポピュラーなコードで何とかなったので書いときます。 ピュアなJavaScriptではなく、jQuery使いますね。 方法その1 時限式読み込み body閉じタグの前あたりに書きます。 . . . <div id="snsbox"></div> <script type="text/javascript"> var snscode = 'ここに、SNSのコードを書く' + '一行でつなげても良いが見に
About Creatorish.com Edit Creatorish.com is a captivating domain name that sparks thoughts of innovation and originality. The name is a clever combination of "creator" and "ish," suggesting a creative and imaginative mindset. It's perfect for startups that focus on creativity, design, technology, and anything that involves inventiveness. The name is short, catchy, and easy to remember, making it a
jQuery MobileとCodiqa jQuery Mobileは、スマートフォン向けのWebアプリケーションを作成するためのUIフレームワーク。iPhoneやAndroidをはじめ、様々なモバイルデバイスに対応している。HTMLに簡単な記述を追加するだけで、ネイティブアプリケーションのようなリッチなユーザインタフェースを作成できるのが特徴だ。 Codiqaは、このjQuery Mobileを使用したWebアプリケーションのデザインを、Webブラウザ上でWYSIWYG編集可能なサービスを提供している。アカウントを作成することで無償で利用可能で、有償のプレミアムアカウントにアップグレードすると作成したアプリケーションの保存や共有、画像のアップロードなどが可能になる (プロジェクト数などに応じて$10/月と$30/月のプランが用意されている)。 Codiqaを試してみよう Codiqaを利
ブライトコーブは、クラウドを活用したコンテンツ配信関連のサービスを日本で拡充し、4月12日より販売を開始した。 今回発表されたのは、モバイルアプリ関連と動画関連の2つのクラウド型サービス。 スマホ・タブレット向けアプリをHTML5+CSS3+JavaScriptで構築し 管理・配信する「Brightcove App Cloud」アプリ関連では、スマホ・タブレット向けのアプリケーションを構築・管理・配信・更新できるプラットフォーム「Brightcove App Cloud」を日本語版としてサービス開始した。 すでに提供されていた英語版では、米国国務省やFOXニュースなどが利用している。 App Cloudは、iPhone・iPad・Androidなどのスマートフォンやタブレット向けのアプリケーションを企業が提供する際のプラットフォームとなるサービス。アプリケーションの構築や公開、その後の運用
Facebook、mixiともにOGPに対応していて、「Facebookいいね」や「mixiイイネ」をした時には、サイトに書かれているOGPタグに沿って各種情報を引き抜こうとするわけですが、ひとつ、og:image に書くサムネイル画像の仕様について、「Facebook、mixi両方にイイように出すにはどういう仕様の画像を作ればいいの?」と思い調べてみました。 最低1枚指定しておけばよい〜5枚程度複数枚有る場合は選択できる。ただし最大5枚まで (mixi)複数枚有る場合は選択できる。(FB)JPEG, PNG, GIF(アニメーション GIF 除く)に対応"画像フォーマットは JPEG, PNG, GIF(アニメーション GIF 除く)に対応しています。" (mixi)1KB以上、最大400KBまで"画像の容量が 400 KB を超える画像は無視されます。" (mixi)"画像の容量が 1
レスポンシブWebデザインを選択する4つの理由 ではなぜ、海外では レスポンシブWebデザイン が話題になっているのだろうか? 大きく4つの理由がある。 ワンソースなので画像やテキストの変更などのメンテナンスが容易なこと CSSだけで実装するのでフロントエンドで開発が完結すること 他のデバイスへの拡張性が高いこと スマートフォン非対応のCMSでもCSSの調整だけで対応できること 1つずつ詳しく説明しよう。 1.ワンソースなので画像やテキストの変更などのメンテナンスが容易なこと Webサイトをマルチデバイスに対応させる場合、少し前であれば、iPhone, iPad などのOSやスクリーンサイズごとにキメ細かくデザインを調整したページ(HTML)を用意し、サーバーサイドの技術などを利用して細かく振り分ければよかった。しかし、各社からAndroid端末が次々と発売されている現在は、何パターンのス
Get the best experience with Internet Explorer 9 and above Based on your current browser, you are not seeing all that X-Icon Editor has to offer. Learn more about Internet Explorer 9 and above X-Icon Editor is an HTML5 application (based on <Canvas>) that allows you to create high resolution icons that lets your sites shine. With X-Icon Editor you can quickly get your site ready with a large icon
URLを簡単にパースできるjQueryプラグイン「jQuery-URL-Parser」 「jQuery-URL-Parser」は現在のURLや指定したURLをパースして簡単にパラメータやディレクトリ名などを取り出せるjQueryプラグインです。 投稿日2011年07月05日 更新日2011年07月05日 プラグインのダウンロードとインクルード 「jQuery-URL-Parser」は下記URLからダウンロードできます。 jQuery-URL-Parser – GitHub jQueryプラグインですのでjQueryも忘れず読み込みます。 html <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> <script type
HTML自由度の高いTumblrをカスタマイズしてみたい という理由で練習がてらzenbackとFacebook用にOGPを設定してみました。ところが、そもそもTumblrのテンプレートの構造を知らないので、Tumblrのカスタマイズマニュアルである「Creating a custom HTML theme | Tumblr」を見ながらあーでもない、こーでもないと… ノ ̄Д ̄)ノ彡┻┻ なんとかできたのでシェアしときます。 zenbackの設定 ◇スクリプトコードを取得 zenbackのサイトにアクセスしてスクリプトコードを取得。コピーしてエディター等に貼り付ける。 ◇Tumblrにzenbackのスクリプトコードを貼り付けここで覚えておいてほしいのはTumblrのテンプレートは1枚であることです。タグにより出力表示を切り替えます。 1.Tumblrにログインして、自身のTumblrサイト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く