Web屋という仕事のこれから 〜Web動向からWeb屋に必要な技術を考えてみる〜 FutureSync Vol.5 で発表したスライドです。 タイトルは釣りです。前半はほぼネタです。 中身はJavaScriptで動作するデバイスは楽しいからみんなやってみたら？ という内容です。Read less
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから 〜Web動向からWeb屋に必要な技術を考えてみる〜 FutureSync Vol.5 で発表したスライドです。 タイトルは釣りです。前半はほぼネタです。 中身はJavaScriptで動作するデバイスは楽しいからみんなやってみたら？ という内容です。Read less
HTML/CSS/JavaScriptでタブコントロールを作ってみた(右タブ) - display:none方式
イントロダクション 前回は、選択されているタブの中身は表示、選択されていないタブの中身は非表示（CSS の display:none）とする仕組みにて、左にタブがあるタブコントロールを作成してみました。 HTML/CSS/JavaScriptでタブコントロールを作ってみた(左タブ) - display:none方式 http://upa-pc.blogspot.com/2015/05/html-tabControl-display-none-left.html 今回は、右にタブがあるタブコントロールを作成してみました。 HTML/CSS/JavaScriptでタブコントロールを作ってみた(右タブ) - display:none方式 : コード スタイルシート(CSS) 以下のスタイルシートを、<head> 内などに埋め込みます。 <style type="text/css"> /* タブコ
JavaScript:ブラウザが対応しているイベントの登録・削除方法を表示する方法
イントロダクション JavaScript にて、各種イベントをオブジェクトへ登録・削除するにはいくつかの方法があります。 それぞれ、利用できる環境や機能に違いがあるため、注意が必要です。 各種イベントをオブジェクトへ登録・削除する方法 大きく分けて、以下の 3 種類あります。 (1) Document Object Model (DOM) Level 0 : DOM要素のプロパティ 方式 (2) Internet Explorer 8以前：attachEvent, detachEvent 方式 (3) Document Object Model (DOM) Level 2 : addEventListener, removeEventListener 方式 このうち、(1) の DOM Level 0 の方式は、古くから使用されている方式であり、他の方式によるイベントの登録が行えない環境で
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。 目次 ブラウザのレンダリングの仕組み この章では、HTMLとCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。 ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]
![[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/705cdef7654f2f96a242f9a2834ce643b78de75c/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F336.jpg)
web制作：ブログやwebサイトのページの、読み込み時の負荷を減らすには？ - 見えない部分の処理を遅延させる方法があります
web制作：ブログやwebサイトのページの、読み込み時の負荷を減らすには？ - 見えない部分の処理を遅延させる方法があります イントロダクション Webサイトやブログの、各ページの読み込み時の負荷は、少なければ少ないほど良いです。 ページが表示されるまでに、ページが真っ白であったり、ページ内の要素が表示されるまでに時間がかかったりすると、閲覧者に待ち時間が発生することになり、ストレスを与えることになります。 最悪、ページの表示待ち時間が長すぎると、閲覧者はページを表示させるのを諦めて、立ち去ってしまうこともあります。 Web制作者は、このページの読み込み負荷を減らすために様々な工夫をしています。 その一つに、見えない部分の処理を遅延させるという方法があります。 ブログやwebサイトのページの、読み込み時の負荷を減らす：見えない部分の処理を遅延させる まえがき 最近のブログや Web サイト
JavaScript:1度のみ実行できる関数を作成する関数 - 2回目以降は空又は任意の処理を実行します
イントロダクション JavaScript を使用してプログラムを書いていると、この処理は絶対に 1 度しか実施されないことを保証したいということがあります。 例えば、情報をサーバやストレージへ書き込むような処理を連続クリックから保護したいケースや、外部サーバから画像やスクリプトを取得する処理で（何らかのバグがあり）短時間に大量のリクエストを送ってしまうのを防ぎたいケースです。 そのようなケースでは、いろいろな対策が考えられますが、その１つとして１度しか実行できない関数を作成するというケースです。 では、実際にソースコードを見てみましょう。 プログラムコード： <script type="text/javascript"> <!-- /* 一度のみ実行できる関数を作成する 一度のみ実行したい処理が記載された関数 へは引数を渡すことが可能です 引数： func : 一度のみ実行したい処理が記載
JavaScript:iframe:外部のページを埋め込むのではなく、HTMLをそのまま埋め込みたい
イントロダクション HTML の iframe タグを使用すると、ある HTML 文書の中に、別の HTML 文書を埋め込むことができます。 通常、iframe タグを使って別の HTML 文書を埋め込む場合には、src 属性に外部の HTML 文書の URL を記載し、外部の HTML 文書を埋め込みます。 そのような目的であれば特にこれ以降のこの文章を読む必要は無いのですが、場合によっては外部の HTML 文書を埋め込むのではなく、HTML 文書をそのまま埋め込みたい場合があります。 想定する用途としては、次のケースが挙げられます。 グローバルな変数・オブジェクト・関数などを多用するような JavaScript コードを埋め込みたいが、それらのグローバルな変数・オブジェクト・関数などによって、埋め込み元のページに影響を与えたくないケース（グローバル領域の汚染を防ぐ） 埋め込み元のスタイ
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
javascript:正規化された(canonical)URLを取得する - サンプルコードと使用例
canonical属性とは／link rel="canonical"によるURL正規化タグ——SEOにとって非常に重要な進歩（前編） | Moz - SEOとインバウンドマーケティングの実践情報 | Web担当者Forum http://web-tan.forum.impressrd.jp/e/2009/03/05/5112 そのため、その正規化されたURLは、その Web ページの作成者が、その Web ページをどんな URL として扱って欲しいのかを明示的に示したものです。 従って、Webページの URL をブラウザ側で動的に取得しようとした場合、location オブジェクトから取得する場合には、URL の表記に様々なバリエーションが生まれてしまいますが、正規化された URL を用いれば、そのコンテンツに対する URL を一つに限定できます。 正規化された URL は、次のように H
javascript:WebページのURLをlocationからではなく、HTML文書中のcanonicalから取得する理由
javascript:WebページのURLをlocationからではなく、HTML文書中のcanonicalから取得する理由 イントロダクション javascriptにて、ブラウザ側で動的にURLを取得する場合には、locationオブジェクトからではなく、ref 属性に "canonical" が指定された link タグの href からURLを取得する理由を記載します。 ただし、ref 属性に "canonical" が指定された link タグは、webページのHTML内に必ずあるものではないため、無い場合には代替手段として locationオブジェクトから取得するなどの方法を行う必要があります。 Webページの URL をブラウザ側で動的に取得しようとした場合に考慮すべきこと Webページの URL をブラウザ側で動的に取得しようとした場合、考慮すべきことがあります。 それは、W
JavaScript:element.setAttributeしたときの、HTMLはどうなっているか？
実験用コード： <form onsubmit="return false;"> <b>input_text:</b><br /> <textarea id="input-text" rows="4" cols="80"> ">Hello!</textarea><br /> 例）">Hello!<br /> <input type="button" value="実行" onclick="runTest_setAttribute_outerHTML();" /><br /> </form> <br /> <b>element.setAttribute("title", input_text)のouterHTML：</b><br /> <textarea id="output-html" rows="4" cols="80"> ここにデータ出力 </textarea><br
JavaScript:document.createTextNodeをappendChildしたときの、HTMLはどうなっているか？
JavaScript:document.createTextNodeをappendChildしたときの、HTMLはどうなっているか？ イントロダクション JavaScript にて、「DOM Based XSS」の脆弱性を埋め込むのを防ぐためには、document.write や element.innerHTML などを使うのではなく、以下のように DOM 操作用メソッドを使用すると良いとされています。 入力されたテキストをブラウザのドキュメントに表示： element.appendChild(document.createTextNode(input_text)); input_text : 入力されたテキスト element : テキストを追加する親要素(element オブジェクト) このとき、テキストを追加した親要素の HTML が、入力されたテキストによってどうなるのか気になり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML/CSS/JavaScriptでタブコントロールを作ってみた(左タブ) - display:none方式
HTML/CSS/JavaScriptでタブコントロールを作ってみた(下タブ) - display:none方式
HTML/CSS/JavaScriptでタブコントロールを作ってみた(上タブ) - display:none方式
ブログ/Webページの一部を新しいウィンドウで表示したい! そんな時は、JavaScriptを使って新しいウィンドウへHTMLを書き出そう！
JavaScript:iframe:外部のページを埋め込むのではなく、HTMLをそのまま埋め込む、第３の可能性:独自のデータ属性を使用する
謎：ChromeでWebページのアイコンがサイトオリジナルではなく、標準のアイコンになる現象
アニメーション用JavaScriptを自動生成-HTMLやJavaScriptの知識が無くても、文字・AA(アスキー・アート)だけでアニメーションを作りたい!
AA(アスキー・アート)だけでアニメーションを作りたい! アニメーション用JavaScript - 誰でも簡単に使えます