iframeの非表示(X-Frame-Options:Deny)の問題 ページに組み込んだiframeが表示されないことがあります ブラウザのコンソールをチェックしてみると、以下のエラーが表示されます Refused to display xxxxx in a frame because it set 'X-Frame-Options' to 'deny'. iframeの参照先がレスポンスのヘッダーに X-Frame-Options:Deny を設定すれば、ブラウザがiframeの内容を表示しません セキュリティ(クリックジャッキング攻撃の防止)の都合で、いろいろなサイトがこの設定をしています 回避方法：レスポンスのヘッダーにある設定(X-Frame-Options)を無視するプラグイン導入 ブラウザ(Chrome)を例にして説明します プラグイン： Ignore X-Frame hea
個人的な話ですが、ほんのちょっと前までは Adobe Flash Builder や eclipse といった IDE（統合開発環境）を使って開発の全てを行なっていました。というのもデスクトップ上が沢山のウィンドウで埋め尽くされるというのがどうにも苦手で、単一のアプリケーションで完結できるというというのを最重要視していた節があります。（※そういえば Adobe Dreamweaver も一時期使ってたっけなぁ…） 半年ほど前に Sublime Text に出会ったことで、コーディングはテキストエディタで行いつつ、リポジトリ環境へのコミットは専用ツールやコマンドラインツール等を用いるなど、複数のツールを組み合わせて開発するというスタイルに少しずつ移行していっている最中です。 そんな訳で Sublime Text で全く不自由していない今日この頃ですが、タダより安いものはないということで、Ad
Gridmanager Demos 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」。 次のようにカラムごとにツールを付与して、コンテンツを追加したり消したり、移動できたり、幅を調整したりとかなり高度な事が誰でも簡単にできるUIが実現可能です。 jQueryプラグインの形で誰でも簡単に実現できるところがすごい。複雑なレイアウトのサイトであっても見たまま編集ができるというのはよさそうですね。 ライブプレビューも可能 レスポンシブにも対応 関連エントリ 軽量でシンプルデザインなWYSIWYGエディタ実装ができる「Trumbowyg」 Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summernote」 軽量でシンプルなHTMLのWYSIWYGエディタ「SCEditor」 オンラインで使えるWYSIWYGなCSS3コードジェネレーター「Enj
// forked from ksk1015's "ジャイロセンサーの値を取得" http://jsdo.it/ksk1015/904N var alpha = document.querySelector("#alpha"); var beta = document.querySelector("#beta"); var gamma = document.querySelector("#gamma"); var dice = document.querySelector("#dice"); window.addEventListener("deviceorientation", function(event){ alpha.textContent = event.alpha; beta.textContent = event.beta; gamma.textContent = event
調べてみた iPhoneの加速度センサを使って本体の角度（Rad）を計算する。 window.addEventListener("devicemotion", function(evt){ var xg = evt.accelerationIncludingGravity.x; // 横方向の傾斜 var yg = evt.accelerationIncludingGravity.y; // 縦方向の傾斜 var zg = evt.accelerationIncludingGravity.z; // 上下方向の傾斜 var angle={}; angle.y = Math.floor(Math.atan2(yg,zg)/Math.PI * 180); angle.x = Math.floor(Math.atan2(xg,zg)/Math.PI * 180); angle.z = Math.
CSS3のtransformをひと通りやりたかったので作ってみた。 表示例 文章でかなり説明しづらいので、最初に動いているものを… 止まっているとよくわからないので回してみました。 立体を表示する画面に設定するプロパティ perspective 奥行きを設定するプロパティです。 数値が小さいほど奥行きが大きくなります。 perspective-origin 視点を設定します。 前の値が縦軸、後ろの値が横軸です。 50％に設定すると正面から見た視点になります。 立体の親要素に設定するプロパティ transform-style 要素の子要素が3D空間に配置されるかどうかを設定します。 初期値がflatなので3Dにする場合は設定が必要です。 立体の子要素に設定するプロパティ 実際にtransformを使って変形させる為のプロパティです。 transform: translateZ(); 3D空間
最近は、スマートフォン対応のサイトが結構増えてきて HTML5/CSS3などで作ろうとか、流行ってきています。 みなさんは、「jQueryMobile」って聞いたことありますか？ jQueryMobileは、スマートフォンやタブレット向けのプラットフォームで 簡単にiPhoneアプリのような、インターフェイスがWebで実現できる技術です。 先日リリースをした、スマホ向け安否確認「Mobile Perfect SP」でも jQueryMobileのフレームワークを活用しています。 http://jquerymobile.com/ 簡単なHTMLを記述するだけで、タッチパネル向けの インターフェイスが作れます！ jQueryMobileのサイトには、分かりやすいドキュメントも サンプル付きであるので、HTMLがかける知識があれば すぐに始めることが出来ます。 http://jquerymobi
Javascript 製のチャート描画ライブラリをいくつか調べたので備忘録として残しておく。 やりたいのは、ストリーミングで次々やってくるデータをリアルタイムに表示する事。しかも順方向だけじゃなくて過去方向にも戻りたい。 smoothiecharts シンプルで、使うのも簡単。が、逆再生ができるのかよく分からなかったので保留。 Cubism.js 言わずと知れたビジュアライゼーションライブラリ D3 のプラグイン。 なんか見た目がクール。 あまり突っ込んで調べてないので、要件を満たすかは不明。 ちなみにモバイル決済の Square によるオープンソースプロジェクト。 D3 自体でもいろいろなチャート描画ができるが、なんか勝手に Fat なイメージを持ってる。 Flot こちらは jQuery のプラグイン。 使い方が簡単で、配列を描画させてるだけだったので、配列操作で逆再生にも対応できそう
Microphone' by Juan_Alvaro, http://www.flickr.com/photos/31590610@N03/5408706936/ CC by 2.0 最近、にわかに音声認識というものが盛り上がっています。 スマートフォンに搭載されている、AppleのSiri、NTTドコモのしゃべってコンシェル、Googleの音声検索あたりが有名ですが、お掃除ロボやエアコン、カーナビといった家電にも音声認識機能が搭載されるようになってきました。 認識の精度や意識の問題（人前で機械に話しかけるのはちょっと恥ずかしい）などの課題はありますが、音声認識はアプリや家電のUIの一部としてこれから普及していくと思われます。 ですが、一般の開発者にとって音声認識機能を自分のアプリやウェブサイトに組み込むのはまだまだ難しいです。 Juliusのようなオープンソースの音声認識システムもありま
success コールバック関数で、 GeolocationPosition オブジェクトを唯一の入力引数として受け取ります。 error 省略可 オプションのコールバック関数で、 GeolocationPositionError オブジェクトを唯一の入力引数として受け取ります。 options 省略可 オプションのオブジェクトで、以下の引数を含みます。 maximumAge 正の long 値で、キャッシュされた位置を返すことが可能な最大時間をミリ秒単位で表します。 0 に設定した場合、端末はキャッシュされた位置を使用できず、実際の現在位置を取得する必要があることを意味します。 Infinity に設定した場合、端末はキャッシュされた位置をその古さに関係なく返さなければなりません。既定値は 0 です。 timeout 正の long 値で、端末が位置を返すために掛けることができる最大時間
HOME>WEBプログラム覚書>[jQuery Mobile]初期化イベントメモ [jQuery Mobile]初期化イベントメモ jQuery Mobileは読み込まれてから mobileinit -> pagebeforecreate -> pagecreate -> pageinit の順番でイベントが発生する。 mobileinit jQuery Mobileがロードされた時に真っ先に発生するイベント。jQuery Mobileを読み込む前に記述しておくか読み込む。 主にjQuery Mobileの各種設定を変更したりする場所。 jQuery.ready()よりも前なのでDOMの操作はおこなえないっぽい。
Quick Start Include jquery-japan-map.js after jQuery. Then $(selector).japanMap(options) method will create most simple clickable canvas map of prefectures of Japan. The $.japanMap method take an object as argument which defines options. At least, you may have to implement onSelect event handler, which runs when a prefecture of the map is clicked or touched. Here is most simple example. <!DOCTYPE
HTML5 Canvasで作った「シンプルペイント」。ペンの色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） HTML5の新機能で特に注目を集めているのが、Flashなどのプラグインを使わずにWebブラウザー上でグラフィックを描画できる「Canvas」です。Canvasは、すでにInternet Explorer（IE）をのぞく、ほとんどのブラウザーに実装されていますし、マイクロソフトは現在開発を進めている「IE9」でHTML5を積極的にサポートするとしていますから、IE9にCanvasが実装される可能性は高そうです（ただし、現在公開されているPlatform Preview版ではCanvasは実装されていません）。すべての主要ブラウザーでCanvasが利用できるようになれば、画像処理を伴うWebア
Enterprise x HTML5 Web Application Conference 2014の発表資料です。Read less
WebRTCを用いた遠隔作業支援システムを作ります。 前回 はスマートグラス（Vuzix M100）とサーバサイド（node.js + express + peerjs-server）の環境構築について説明しました。今回はCoffeeScriptで記述されたモジュールの全体構成と、PeerJS & MediaStreamの初期化処理について解説します。 CoffeeScript WebRTCを用いた遠隔作業支援システムの中心的なロジックは、ブラウザで動作します。今回はコールバックを駆使するそれなりに複雑な処理を実装するため、画面操作をハンドリングするロジック、PeerJSの操作とコールバックをハンドリングするロジック、シグナリング等の共通ロジック、と責務を分割して実装したほうが見通しが良くなるでしょう。 ただしJavaScriptはプロトタイプベースのオブジェクト指向言語のため、Javaや
こんにちは。クレイの浅海です。 皆さんはブラウザを使用するビデオチャットサービスを利用しているでしょうか。 弊社では毎朝ビデオチャットを使用して「朝会」というものをプロジェクト毎に行っています。 そのため、ビデオチャットサービスは無くてはならない存在です。 ビデオチャットサービスに関する情報には敏感なのですが、先日、下の記事が目につきました。 【プラグイン不要】 ブラウザだけでビデオチャットができるサービスまとめ http://www.ideaxidea.com/archives/2014/03/video_chat.html これを見て「こんなにたくさんビデオチャットサービスが出ていたのかー」と思うと同時に、エンジニアとしてある一つの仮説が心の中に生まれました。 「あれ、もしかしてビデオチャットサービス作るのって簡単なんじゃね？」と。 作ってみた 結論を先に書きますと、多：多でのビデオチ
サンプルはこちら。データベース(testDB)の中にテーブル(test)を作成し、2件のデータを INSERT し、そのデータを SELECT で読み出して表示しています。 Web SQL Database Sample <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Web SQL Database Sample</title> <style> #message { margin:1em; width:500px; border:1px solid gray; padding:1em; } </style> <script> function print(msg) { document.getElementById("message").innerHTML += msg + "<br>"; } function te
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く