Electron(旧Atom-Shell)とは、Web開発者がHTML5とNode.jsでMac、Windows、Linuxのデスクトップアプリを作れるクロスプラットフォーム実行環境です。Electronはオープンソースで無料で使える上に、MITライセンスであるため、商用利用も可能です。開発元はGitHub社です。 最近はJavaScript、HTML5の進化によって、多機能なWebアプリケーションが増えてきました。それに伴い、モバイルでは、WebViewやApache Cordovaなどを使ったハイブリッドアプリも注目されています。Electronはその流れの中から生まれた新しい実行環境です。 ElectronはChromiumブラウザを内蔵しているのが一番の特徴です。Chromiumブラウザは、Google製のChromeブラウザのオープンソース版にあたります。ウェブ開発者がChrom


不特定のユーザーが入力したMarkdownをブラウザ上でJavaScriptを使ってHTMLに変換するという場面においては、JavaScriptで変換してHTMLを生成するという処理の都合上どうしてもDOM-based XSSの発生を考えないわけにはいかない。かといって、MarkdownをパースしHTMLを生成するという処理すべてをXSSが存在しないように注意しながら自分で書くのも大変だし、markedやmarkdown-jsなどの既存の変換用のJSを持ってきてもそれらがXSSしないかを確認するのは結構大変だったりする。 そういった場合には、Markdownから生成されたHTMLをRickDOMを通すことで、万が一HTML内にJavaScriptが含まれていたとしてもそれらを除外し、許可された要素、許可された属性だけで構築された安全なHTMLに再構築することができる。さらに、そうやって生成

チャットに画像のURLが貼られた時に、安全にimgタグを埋め込みたいという議論があったので書いておく。 一番単純な実装だと、 var s = "はろー http://shokai.org.ex/example.jpg てすとてすと"; s.replace(/(https?:\/\/.+)\.(jpe?g|gif|png)/g, "<img src=\"$1.$2\">$1.$2</img>"); のようにすると "はろー <img src="http://shokai.org.ex/example.jpg">http://shokai.org.ex/example.jpg</img> てすとてすと" になるのだが、よく考えると http://tumblr.com/logout#.png みたいなのを貼られるとimgタグが描画された瞬間にログアウトしてしまう。 正規表現がショボいのも悪いけど

End script and style with newline? Support e4x/jsx syntax Use comma-first list style? Detect packers and obfuscators? (unsafe) Preserve inline braces/codeblocks? Keep array indentation?Breaklines on chained methods? Space before conditional: "if(x)" / "if (x)" Unescape printable chars encoded as \xNN or \uNNNN? Use JSLint-happy formattingtweaks? Indent <head> and <body> sections? Keep indentat
About JSCompress JSCompress is an onlineJavaScript compressor that allows you to compress and minify all of your JS files by up to 80% of their original size. Copy and paste your code or you can upload and combine multiple files and then compress. We use UglifyJS 3 and babel-minify for allJavaScript minification and compression. Why You Should CompressJavaScript There are a number of reasons wh
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています.えーと,そりゃもうゴリゴリと.本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した.canvas要素の仕様は現在進行中で色々と変化しているため,一筋縄で行かないが大方のapiについて書き上がったので公開する.なお,まだ使えない機能等満載だったり,内容に間違いがあっても中々検証することができないので,その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり,webページの機能性・視認性が重要視される昨今では,svg要素と並び重要な役割を果たしている.もともとapple社が自社製osの機能向上策として,同
今までは主にアニメーションGIFで作られていたローディング・アイコンをCSSアニメーションで作るみたいなのが流行っている。面白いとは思うし、ちゃんと作ればスケーラブルなので便利そうでもある。けれどもローディング・アイコンを表示するための空要素が必要になり、かつ後にそれを消さなくてはならない。CSSだけだと面倒くさそうだ。 どういうローディング・アイコンかはこの際問題ではないので、とりあえずmain要素以下に何かしら(仮にサムネイルとする)をロードするまでローディング・アイコンを表示することを考えてみる。普通はJavaScriptでローディング・アイコンの追加→サムネイルのビルド→ローディング・アイコンの削除→サムネイルの追加とやるわけだけど、ローディング・アイコンの追加と削除でDOM操作を伴うのはコストがある気がする。 <main id="result"> <div class="spin
1. Introduction 1.1 Watir gems Watir consists of three gems (or projects): Watir - This gem isjust a loader. Based on the browser that you want to run and your operating system, the Watir gem will load either Watir-Classic or Watir-Webdriver. Watir-Classic - This is the original Watir gem that drives Internet Explorer. Watir-Webdriver - This gem allows the driving of additional browsers - eg Chro


あまりにも世情にうといので作った。NHKのRSSを定期的にチェックして、新着ニュースの動画を連続自動再生する。 とてもテレビっぽい。おかげで4日後にオリンピックが開催されるという事を知れた。 ソースコード https://github.com/shokai/nhk-news-appzipでダウンロード https://github.com/shokai/nhk-news-app/releases node-webkitはネイティブアプリ作成のためにwebkitが改造されたwebブラウザで、HTML/JavaScript/CSSが実行できるだけでなくnode.jsのAPIもそのまま呼び出せる。 つまりjQueryでDOM操作すると同時にnodeのライブラリを使うような処理が、同じプログラムファイルにまとめて書ける。変にブリッジを書く事なくいつものnodeのように require(‘モジュ

珍しいので一応メモ。年表を作れる jQueryプラグインです。見た目も 綺麗なんですが、スプレッドシート や、JSON形式にも対応出来るので どこかで使えるかも、と思いました。 機能も申し分ありません。 多用するようなものでもありませんが、スプレッドシートの情報を読み込むのは面白いですね。 綺麗です。上にコンテンツ、下に年表があって、ツールチップ形式でタイムラインが形成されます。ツールチップをクリックするとスライドが動く、というインターフェース。 年表は伸縮できますので見難い、というストレスも感じさせません。また、広がる時のアニメーションもスムーズで気持ちいいです。 全画面にしたり、GoogleスプレッドシートやJSON形式のデータを読み込んでタイムライン化する事も可能みたいです。この点は結構便利では無いかと。 Sample コード <script type='text/javascrip

店舗分類コードを含めて、ガソリンスタンドだけでなく、LPガススタンドやその他の燃料給油所の情報もまとめたData Sourceにします。 アップロード用のファイルは、前回と同じくテキストファイルとして作成します。よって、テキストファイルの最初の2行は次のようになります。エンティティの種類の名前は、FuelStoresとしました。 Bing Spatial Data Services, 1.0, FuelStores ID(Edm.String,primaryKey)|Latitude(Edm.Double)|Longitude(Edm.Double)|Address(Edm.String)|Code(Edm.Int64) データの変換 さて、提供されているデータはXML形式のファイルで、都道府県ごとに分かれています。すべてのファイルをダウンロードしてData Sourceとしてアップロード
追記(2013年2月4日)。具体的な手順を書きましたのでよろしければご参照ください。 タイトルと URL をコピーするブックマークレットの登録、確認、実践手順メモ | oki2a24 パソコンでブログを書くときに使うブックマークレットを残しておきます。スマホでも使う予定です。ブックマークレットのウェブブラウザへの登録方法は割愛します。が、簡単に説明すると、Chrome の場合はブックマークバーに下記のリンクをドラックアンドドロップすれば OK です♪ get title 表示しているページのタイトルを取得します。 get title url ページのタイトルと URL を取得します。 get page link ページのタイトルと URL を取得し、新しいウィンドウで開くHTML ソースを作成します。 ↑なお、この「get page link」ブックマークレットは私が作ったものではありま

ブックマークレットをかんたんに作成・公開できるラボサービス、その名もHatena::Let を作りました。 http://let.hatelabo.jp/ 未だにブックマークレットを作るときには、アドレスバーにjavascritp:... を打ち込んで実行したり、 Firebug で実行して試しつつも外部のbookmarklet 化サービスを使って文字列削ったり、IE対策のため500ちょい文字を超えるとgist にファイルを置きつつもおきまりの var script = document.createElement('scrit');... で JS のローダー書いたり、とやりたいことは同じなのにめんどくさい手順を毎回行っていたました。 ここらへんの手順を毎回繰り返すことなくさくっと作って公開したい!と思い id:cho45 と半年ぐらい前の開発合宿*1で作って眠らせていたのを、ち
URL エンコードされた文字列をデコード、もしくは文字列を URL エンコードします。 EUC-JP、SJIS (シフト JIS)、JIS、UTF-8 に対応しています。 2008-01-30、 軽快なバージョンを用意しました。 2009-12-30、Firefox の検索バーからデコードできるものを公開しました。 入力フォーム 入力欄 (M) 文字列を入力してください デコードではなくエンコードする (E) エンコードする場合の文字コード (C) 送信(S) 使い方 デコード方法 「入力欄」に %A4%B3%A4%CE... のような URL エンコードされた文字列を入力し、「送信」ボタンを押すだけです。文字コードはたぶん自動認識します。 エンコード方法 「入力欄」に URL エンコードしたい文字列を入力し、「デコードではなくエンコードする」にチェックを入れます。さらに希望の文字コードを
自動リロードっていうか、つまり現在画面に表示されているページを指定秒数毎に読み込みます。 areload.html <html> <script> document.write('<frameset>'); document.write('<frame name="areload" src="'+document.referrer+'">'); document.write('</frameset>'); setTimeout('R()',location.search.substring(1)*1000); function R(){location.reload();} </script> </html>↑をareload.htmlとしてローカル保存。ここで、ローカル保存とは、京ぽんのデータフォルダ(C:\data\)に保存する事です。つまり、↑の箱の中にあるHTMLを C:\data
W-ZERO3 の Opera 8.5 Mobile には、ページの自動更新(auto reload)の機能が実装されていなかったので、Bookmarkletを作った。 W-ZERO3 の Opera は、ブックマークレットからローカルに置いたhtmlを読むことが出来ないので京ぽん用のブックマークレットとは、別物になってますが、ほとんど、同じ考え方で使えます。javascript:(function(){var T=prompt('更新間隔?(秒)','60');if(T&&!isNaN(T)){var F='<html><frameset rows="*,0"><frame src="'+location+'"><frame></frameset></html>';var W=open();with(W.document){write(F);close();}var H='<html>
GMapWidget GPX onGoogleMaps + ← GMapWidget.Control ControlGoogleMapsAPI fromHTML <body onload="new GMapWidgetControl('/lib/GMapWidget/');"> <a href="javascript:void(0);" title="open();" class="GMapWidget">open</a> <a href="javascript:void(0);" title="setCenter(34.99620,135.75971,12);" class="GMapWidget">Kyoto</a> open Kyoto GPX Casual Viewer View GPX onGoogleMaps easily
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く