[JS]ページのスクロール時、天地に紙を折り曲げるエフェクトを加えるスクリプト -FoldScroll
[JS]ページのスクロール時、天地に紙を折り曲げるエフェクトを加えるスクリプト -FoldScroll
[JS]ページのスクロール時、天地に紙を折り曲げるエフェクトを加えるスクリプト -FoldScroll
重要！ まずは「オリジン」を理解しよう
連載目次 皆さんこんにちは。ネットエージェントのはせがわようすけです。今回から、HTML5やJavaScriptに関連したセキュリティの話題について連載することになりました。よろしくお願いします。 もう読みましたか？ HTML5のWebアプリセキュリティに関する報告書 皆さんすでにご存じかと思いますが、2013年10月30日にJPCERTコーディネーションセンター（以下、JPCERT/CC）から「HTML5 を利用したWebアプリケーションのセキュリティ問題に関する調査報告書」が公開されました。 この報告書の調査の一部は、弊社が行いました。また、JavaScriptのセキュリティ上の問題について次々と鋭い指摘を行っているmalaさんにもさまざまな技術的アドバイスを頂いた上、日常的にWebアプリケーションのセキュリティ検査や構築を実際の業務として行っておられる専門家の方々にも査読をお願いして
[JS]複数の指定した範囲ごとにスクロールに追従するパネルを設置するスクリプト -jQuery Stick ‘em
ページ内の複数の指定した範囲ごとに、スクロールに追従するパネルを設置するjQueryのプラグインを紹介します。 World Wildlife | Fund Work | Viget 左に長い画像、右にそれを説明するテキストがあります。通常、画像の下までスクロールしてしまうと、テキストを読むために上にスクロールをすることになります。 しかし、このサイトでは画像の下までスクロールした際、テキストがスクロールに追従して移動します。 スクロールに追従するコンテンツは複数設置する可能性があるので、当然このスクリプトもそのようになっています。 jQuery Stick ‘emのデモ デモでは、左に長いコンテンツがあり、右のグレーのパネルが指定した範囲内のみスクロールに追従します。 追従の様子 jQuery Stick ‘emの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを
緩急をともなったイージングのアニメーションをCSSやJSで実装する時のスニペットのまとめ -Easing Functions
にょい～ん、ぐい～んなどの緩急をともなったアニメーションを実装するCSSやJavaScriptのスニペットをまとめたEasing Functionsを紹介します。 Easing Functions Cheat Sheet Easing Functions -GitHub イージングのアニメーションの動きを確認 イージングのアニメーションの種類 イージングのアニメーションの実装 イージングのアニメーションの動きを確認 イージングとは動きに加速や減速を加え等速で動くのとは違ったエフェクトを与えるもので、最初ゆっくりでだんだん早くしたり、床にバウンドするような動きを与えます。 登録されているイージングのアニメーションの動きは、それぞれのグラフをホバーするとレッドのアローがその動きをします。
[JS]スマフォで各セクションのヘッダをそれぞれスクロールに追従させるスクリプト
iPhone, iPad, ガラケーなどのスマフォで、各セクションのヘッダをそれぞれ半透明の状態でスクロールに追従させるスクリプトを紹介します。 A, B, C と追従中 対応ブラウザ iPhone 4GS (iOS5) iPhone 4G (iOS5) iPhone 3GS (iOS5) iPad 3 (iOS5) iPad 2 (iOS5) Galaxy S3 (Ice Cream Sandwich) Galaxy S2 (Gingerbread) NEXUS S (Jelly Bean) 実装 Step 1: 外部ファイル 外部ファイルは下記の2つのスクリプトと当スクリプト・スタイルシートをhead内に記述します。 zepto.js jQueryと互換性のあるモバイル用軽量ライブラリ iscroll.js モバイルでposition:fixedを実現するスクリプト <script s
jQuery Mobile 1.3が今晩正式リリース予定。JavaScript MVCフレームワークのEmberは1.0RCが公開
jQuery Mobile 1.3が今晩正式リリース予定。JavaScript MVCフレームワークのEmberは1.0RCが公開 現在リリース候補版が公開されているjQuery Mobile 1.3は、レスポンシブなテーブルやグリッドに対応し、横幅に応じてレイアウトが柔軟に変化。レンジスライダーやパネルのような新しいユーザーインターフェイスの要素が追加されるなど、比較的大胆なバージョンアップとなります。 参考：jQuery Mobile 1.3β公開。レスポンシブなテーブル、グリッド、追加コンポーネントなど大幅強化 そのjQuery Mobile 1.3の正式版が、日本時間で今晩公開される予定です。先週2月14日に行われたjQuery Mobile Team Meetingの議事録によると、「1.3.0 Final release still on track on Monday the
Webの未来 〜 PNaClとasm.jsでカワルミライ - いま、モバイルWebの先端で起こっていること
Webの未来 〜 PNaClとasm.jsでカワルミライ - いま、モバイルWebの先端で起こっていること
[JS]脚注をデスクトップ・タブレット・スマフォそれぞれで最適に表示するスクリプト -sidenotes
デモページ：幅480pxで表示（左：テキスト、右：脚注） テキストと脚注は相互リンクされているので、行き来できます。 sidenotesの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.min.js"></script> <script src="js/jquery.sidenotes.min.js"></script> Step 2: HTML 脚注をつけたい箇所に「class="footnote"」を加え、脚注へページ内リンクを設定します。 <article> <p>脚注をつけたい箇所<sup id="fnref:notes1"><a href="#fn:notes1" class="footnote">1</a></sup></p> <p>脚注をつけたい箇所<sup id="fnre
YappoLogs: 2014年に向けた JSON API の実装の方向性と X-JSON-Status 改め X-API-Status header のご提案
2014年に向けた JSON API の実装の方向性と X-JSON-Status 改め X-API-Status header のご提案 追記 2014/11/20 14:00:00 わりと JSON やら XML やら各種フォーマットで API を運用している環境がある場合に JSON API の時だけ X-JSON-Status にすると XML とかの時と整合性取れないし、 X-XML-Status みたいのを量産するのは困る的なレビューを頂いたので X-JSON-Status をやめて X-API-Status にしました。 へたに JSON に限定するから REST とか JSON-RPC とかいわれるんや！ X-API-Status にしたら全部解決したし MessagePack な API でも使い回せるって songmu さん言ってた！ XML とかからどうやって引っこ抜
[JS]PCのキーボードを鍵盤にして、オルガンやギターの演奏が楽しめるスクリプト -Audio Synth
Audio Synthの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="audiosynth.js"></script> <script src="audiosynth.view.js"></script> Step 2: HTML キーボードを配置します。 <div class="keyboard-options"> <select ID="sound"> <option value="0" selected>Keyboard</option> <option value="1">Organ</option> <option value="2">Acoustic Guitar</option> <option value="3">EDM, bro!</option> </select> <div ID="keyboard" c
[JS]木の葉が木枯らしに舞うように軽やかなアニメーションでコンテンツを次々に表示するスクリプト -Windy
画像や見出し・パラグラフなどを配置したパネルを木枯らしに舞う葉っぱのようなアニメーションで次々に表示するjQueryのプラグインを紹介します。 Demo 3: jQuery UI Sliderを使ったタイプ Windyの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.windy.js"></script> Step 2: HTML コンテンツはリスト要素で、各アイテムに画像や見出し・パラグラフを自由に配置できます。 <ul
結婚式二次会用に Node.js x ブラウザでタイピング対決アプリを作ってみた - 凹みTips
はじめに 先月、友人の結婚式の二次会でタイピング対決をしたいとの企画を、幹事の友人から受けました。面白かった要件としては、 二人の顔を 2 台のカメラで映したい タイピングしてる様子をリアルタイムで見たい というものです。これをサーバは Node.js で、クライアントはブラウザで作成しました。エントリ書いてもいいよ、と許可を頂いたので、今後似たような依頼を受けた方のご参考になるように、エッセンス部分をご紹介します。 （追記：2013/11/20） 幹事さんも記事を公開されました： http://tjun.org/blog/2013/11/wedding-typing/ やったこと ホスト PC 側で新郎新婦それぞれの PC からのログインを待ち受けします。イイ感じに○で切り抜いてくれるような PNG をイラレで作っておきました。 それぞれの PC からログインしてもらいます。 ログインし
新しくなるappCacheとtemplateでWebアプリケーションの作り方が変わる
WebComponents仕様の一部として議論されているテンプレートの機能は、Ajaxが登場したときのようにWebアプリケーションを変えていくだろう。W3Cのマイケル・スミス（Michael Smith）氏は2月18日に都内で開催された「第36回HTML5とか勉強」でそう説明し、HTML5.1に相当する議論中の新機能への期待を示しました。 先週紹介した「オフラインファーストの思想と実践」の前に行われたスミス氏のセッション「勧告候補になったHTML5.0の仕様についてと、HTML5.1の始まり」の内容をダイジェストで紹介しましょう。 新しくなるアプリケーションキャッシュ マイケル・スミス氏。今日はappCacheとtemplateと、HTML5のテストをgithub上に置き始めた、などの話をします。 アプリケーションキャッシュ（appCache）はご存じですか？ HTML5でオフラインアプリ
PHPのJSONのエスケープ
(Last Updated On: 2023年12月8日) 追記：最近のOWASPガイドの更新でJavaScript文字列はUnicodeエンコードで安全性を確保するよう変更されました。元々このブログでもUnicodeエスケープのまま利用するように書いています。他の言語のユーザーはUnicodeエスケープを利用しましょう。PHPもASCII領域の文字をUnicodeエスケープするようにした方が良いと思います。これは提案して実現するように努力します。 JSONはJavaScriptのオブジェクトや配列を表現する方式でRFC 4627で定義されています。メディアタイプはapplication/json、ファイル拡張子はjsonと定義されています。 PHPにJSON形式のデータに変換するjson_encode関数とjson_decode関数をサポートしています。 JSON関数がサポートされている
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]実装はたった一行でOK！ページの選択した範囲を強調する超軽量スクリプト -Fokus
textar.tv
Microsoft、オープンソースプラグイン「Node.js Tools for Visual Studio」をリリース
https://www.dropzone.dev/js/
JavaScript無効でWebを見ている人はどれぐらい? Web担で実際に調べてみた | 初代編集長ブログ―安田英久
Google、プログラミング言語「Dart」のソフトウェア開発キット「Dart SDK 1.0」を公開