文字列からHTMLDocumentを作成するコード
必要に迫られて引数で渡された文字列から HTMLDocument を動的に作成するコードを書いたので紹介します。このコードはchromeコンテキスト上で、つまり拡張上で動作させることを前提としていますのでご注意ください。 下記コードを書く際にmodestで紹介されているnanot_viさんのサイトを参考にしました。またrange.createContextualFragment()実行時のセキュリティ上の課題を克服するためにkazさんのblogを参照させていただきました。 let getDOMHtmlDocument=function(str){ let doc; let range; if(document.implementation.createHTMLDocument){ // Firefox 4.0から doc=document.implementation.createHTML
CSS3で笑い男 - jsdo.it - Share JavaScript, HTML5 and CSS
CSSアニメーションの練習に作ってみた chromeのみ動作確認 /*参考*/ 笑い男 SVG : http://d.hatena.ne.jp/fls/20061023/p1 /*修正*/ before,after要素を導入 <div id="Laughing_man"> <div class="out-frame"> <div class="in-frame"> <div class="hat"> <div class="eye eye-left"></div> <div class="eye eye-right"></div> </div> <div class="mouth"></div> </div> <div class="text"> <span class="p1">I</span> <span class="p3">t</span> <span class="p4">h</
FlashのアニメーションをHTML5に変換するツール「Wallaby」をAdobeが公開 | ClockMaker Blog
FlashのアニメーションをHTML5に変換するツールとして、3月8日「Wallaby (ワラビー)」のプレビュー版がAdobe Labsにて公開されました。 Download Wallaby – Adobe Labs 結論から言うとブラウザ互換など懸念点がありますが、思った以上に変換精度が高いです。そして真っ先に感じたのは、WallabyによってHTML5出力が可能になったという点で、アドビが提供しているFlash ProfessionalはHTML5時代が万が一到来してもオーサリングツールとしてのポジションを保ち続けるだろうということです。 速報として「インストール方法と使い方」と「変換したデモ」を紹介してみます。以下詳細です。 インストール方法と使い方 ①まずはAdobe Labsからアプリケーションをダウンロードします。アプリケーションはAdobe AIR製ですので、事前に最新のA
CSS3で実装されたボタンのサンプルやチュートリアル総まとめ:phpspot開発日誌
CSS3で実装されたボタンのサンプルやチュートリアル総まとめ。 当サイトでは色々とCSS3ボタンのエントリを紹介してきていますが、ここら辺でちょっとまとめてみました。 画像つくるのはめんどうだしCSS3でやっちゃおうという場合に参考にしてみて下さい。 立体感がいい感じのiPhoneにも採用されているボタン実装CSS3サンプル iPhone風のボタン実装 ステップで学べるCSS3ボタンのデザインチュートリアル CSS3ボタンのデザインチュートリアル 綺麗にデザインされたCSS3ボタンのまとめ カラフルで美しいCSS3ボタン これはクール！カーソルを合わせると背景がアニメーションするCSS3ボタン実装例 デザインは微妙かもしれませんが、カーソルを合わせると背景が動くあたりテクニックとして覚えておくとよさそう CSS3だけで実現するクリックすると色の変わるボタン実装 クリックで色が変わります。
wonderfl build flash online | 面白法人カヤック
wonderflは、サイト上でFlashをつくることのできるサービス。 通常Flashをつくるためには、Flash IDEやFlex、FlashDevelop等といったツールを使って、コードを書き、コンパイルする必要がありますが、wonderflでは、サイトにあるフォームにActionscript3のコードを書けば、サーバサイドでコンパイルを行えます。 つまり、ブラウザさえあれば、Flashをつくれます。コンパイル結果はサイト上に表示され、作成されたFlash（swf）はページ上に自動的に表示されるので、完成したFlashをリアルタイムに見ながらコードを書くことができます。 ※APIとして、はてな OpenIDを使用してネットにさえつながれば、誰もがFlashクリエイターになれます。世界中のFlashクリエイターがユーザーになるwonderflは、 文字通り、世界のFlash図鑑となってい
[JS]複数のパネルをアニメーションでスライド表示させるスクリプト -fixedTo
補助系のメニューやちょっとしたアナウンスを掲載するのに最適なパネルをアニメーションでスライド表示させるjQueryのプラグインを紹介します。 jQuery: Plugin fixedTo デモページ [ad#ad-2] デモでは、ブラウザ枠の左と下側から2枚のパネルがアニメーションでスライド表示され、表示位置はスクロールしてもブラウザの枠に対して固定位置に表示されます。 デモページ fixedToの実装 パネルはdiv要素を使用し、テキスト・画像・リンクなどあらゆる要素を設置可能です。 [ad#ad-2] JavaScript 「jquery.js」と「jquery.fixedto.min.js」を外部ファイルとし、下記のスクリプトを記述します。 $("elemento").fixedTo({ "posicion":"left", "ancho":360, "alto":70, "ocul
onSaveInstanceStateでインスタンスを保存する(Androidアプリの変数を一時保管する方法) | TechBooster
onSaveInstanceStateメソッドを使ってActivityのインスタンスを保存/復帰させる方法を紹介します。onSaveInstanceState/onRestoreInstanceStateメソッドは永続的なデータ保存には利用できませんが、一時的にインスタンスを保存するケースでは威力を発揮します。 アプリケーションを起動する際、現在表示されているアプリケーションはbackgroundにまわり、新しいアプリが起動します。backgroundに回ったアプリケーションはAndroidのアプリケーション履歴の”backstack”モデルに従い、履歴としてスタックします。 Android端末のメモリが豊富に残っていれば、backgroundのActivityのインスタンスは維持されますが、メモリが少なくなった際は破棄されます。onSaveInstanceState/onRestoreI
typeof演算子から学ぶJavaScriptのデータ型の概念と関係する考察のまとめ - 三等兵
まずはtypeof演算子について。JavaScript Gardenというウェブページがありまして。こういう一文がありまして。 The typeof operator (together with instanceof) is probably the biggest design flaw of JavaScript, as it is near of being completely broken. http://bonsaiden.github.com/JavaScript-Garden/#typeof 訳）http://efcl.info/adiary/Javascript/JavaScriptGarden#k95p17 要するにtypeof演算子は「ヒャッハーtypeof演算子ぶっ壊れてるぜー」ってことらしい。理由が下記の表。 [表1] Value Class Type - "f
AIR, HTMLLoaderをNativeWindowにaddChildしてはいけません
AIRでHTMLLoaderを使ってHTMLファイルを表示しようとした時の話。 メインウインドウと別にウインドウを開き表示する必要がありました。 AIRのウインドウのベースとなるクラスはNativeWindowです。 DisplayObjectContainerのようなものだと勝手に推測していました。 HTMLLoaderインスタンスはNativeWindowへaddChildしないといけないと思い込んで作業を始めました。 結果、表示はされるのですが通常の数倍に拡大されて表示されてしまいました。 scaleX, scaleYが7~8な感じです。 落ち着いてAPIドキュメントを読み直しです。 まずウインドウを作ります。 var option:NativeWindowInitOptions = new NativeWindowInitOptions(); option.resizable =
標準準拠モードと後方互換モードのJavaScriptのパフォーマンスに
#2,3,4,5 です。 改めて考えたら、JavaScriptによるDOM操作時間で比較していたので、window.onload で比較検証してみました。 (全角空白は半角空白に置換してください) --------- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>test2</title> <script type="text/javascript"><!-- (function () { var start = new Date(); function init (event) { var doc = this.document, time = (new Date().getTime() - start.getTime()) / 1000; doc.getElementById('Time'
OnClickListenerはいらんのですね - My Happiness
ボタンにイベントメソッドを実装する場合、 OnClickListenerをセットして、そのOnClickListenerを実装し・・・・・ ってやってたけど、onClickはXMLに書けるらしい。 今日はそのやり方。 こんな画面を用意して、登録ボタンを押すと・・・・・ こうなる。 ただそれだけ。 登録ボタンを押した時、いつもならbutton.setOnClickListener()を使ってリスナを設定するのだけど、 レイアウトXMLに以下のように記述する。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill
JavaScriptでデータをダンプする「jQuery Dumpプラグイン」
PerlのData::DumperやPHPのvar_dump()のようなことをJavaScriptで行える「jQuery Dumpプラグイン」を紹介します。 jQuery Dump １．サンプル jQuery Dumpを使ってデータをダンプするには次のように設定します（青色部分）。 <pre id="dump"></pre> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="jquery.dump.js"></script> <script type="text/javascript"> $(function(){ var obj = { hubba: "Some string...", bubba: 12.5, dubba: ["One"
フォーム関連要素（1） HTML5で既存のinputタイプに加わった6つの変更点
HTML5はフォーム関連要素もパワーアップ！ HTML5へのバージョンアップに当たり、＜form＞要素や＜input＞要素に代表される「入力フォーム」についても、非常に多くの変更が行われました。 もともとアプリケーションプラットフォームを志向していなかったこともあり、HTMLにおける入力フォームは非常に貧弱で、ユーザーにとっても使いやすいものではありませんでした。それを補うため、JavaScriptを用いてリッチな入力フォームを実現するのが一般的でしたが、JavaScriptを用いる方法には「セマンティックが不明確になる」「JavaScriptが動作しない環境では利用できない」といった弱点もありました。 そこで、HTML5ではさまざまな点から入力フォームを見直し、さまざまな機能強化が図られました。具体的には、以下のような点が挙げられます。
meta viewportがよくわからん
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 結局 が一番いいのかもと思った。html5 boilerplate mobileでも使われていたので… 以下はよく検証してないので間違ってる可能性があります。 まず、ほんとは にしたい。想定される結果は、iPhone縦だとviewportの幅が320px、iPhone横だとviewportの幅が480pxになるというもの。だがこれをやると、iPhoneで縦→横にしたとき、コンテンツの幅は320pxのまま、これが幅いっぱいにズームされた状態になる。iPhone Safariは、基本、縦→横にしたら、その時の画面の幅を維持して拡大してくれるので、user-scalableがyesである限り、wid
Sass でもう一度 CSS を楽しく!
僕もようやく Sass をはじめました。評判どおり、ヤバいです。CSS を書くすべての人に習得してほしいとすら思います。とくに、最近 CSS を書いていてもつまらなかったり、設計に行き詰まりを感じたりしている人は、迷わず Sass を試してみるべきです。Sass のサイトには “Sass makes CSS fun again”—「Sass でもう一度 CSS を楽しく」というフレーズが掲げられていますが、ハッタリではありません。 しかし、実際に Sass を導入するのは敷居が高いと感じる人も多いのではないかと思います。コマンドラインとかよくわからん、独自構文の学習コストが気になる、実際に仕事で使えるのか疑問…など。 そこでこの記事では、僕が Sass をはじめるにあたって感じていた不安などをもとに、「Sass は難しくないよ!」というアピールを試みます。少しでも Sass 導入の障壁を取
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]画像を使用しないでイメージを作成するスタイルシートのテクニック集
wonderfl build flash online | 面白法人カヤック
FlashDevelopでMolehill超初心者 | うみの河童
techmaru.net - このウェブサイトは販売用です！ - techmaru リソースおよび情報
jQuery でマウスで持って自由に移動できるフローティングボックスを実装する方法
フォーム関連要素（2） HTML5でinput要素に追加された新しいタイプ13連発
