Backbone.Collectionでデータをフィルタする - Qiita
テキスト入力でデータをフィルターする機能を実装するのに、Backbone.Collection#whereを使って実装してみるメモ。 // ------------ Model/Collection 定義 var Message = Backbone.Model.extend({ id: 'msg_id', // 属性はこんなの defaults: { sender: 'anonymous', text: '', createdAt: new Date() } }); var Messages = Backbone.Collection.extend({ url: '/api/v1/messages', model: Message, // 大文字小文字無視してデータを検索する whereSender: function(name) { var senders = _.uniq(this.
地理院タイルとOpenStreetMapのデータを使ってthree.jsで立体地図を描画する - Qiita
「新しい Google マップ」正式公開、地図大きく、精緻すぎる3D都市マップも -INTERNET Watch ViziCities Demo 地図サービスの王Googleマップをじわじわと追いかけるOpenStreetMap 地理院地図３D ↑の記事に触発されて書きました。乗るしかない、この(地理空間情報のオープンデータ化と、Web3D地図の普及という)ビッグウェーブに。 デモ ※注1 データの読み込み時間長めです ※注2 デスクトップ版のChrome、Firefox、Safariと、Android版のChrome、Firefox辺りは動くはず ※注3 CoffeeScript 1.7.1 で書いたんですが、jsdo.itがまだ1.7.1に対応してなかったので、自前でコンパイルしたjsコードを貼り付けて動かしてます。フォークしにくくてすみません。jsdo.itが1.7.1に対応したら直
LiquidFunでJavaScript流体シミュレーション. - Qiita
LiquidFunって？ LiquidFunはGoogleが開発している2次元流体演算エンジン. C++で開発されているが、Emscriptenでの変換により、JavaScriptでも利用可能である。 (似たような話が3次元物理演算エンジンのBulletとammo.jsがありますね。ammo.jsはポーティング方法をEmascriptenから見直すらしいですが...) LiquidFun.jsを触ってみよう さて、ここからが本題. http://google.github.io/liquidfun/ にもliquidfun.jsのデモ(testbed)が埋め込まれているが、自分のお勉強もかねて、サンプルコードをガリガリと作成したので、学んだことを書き連ねてみる. 作成したブツ 正三角形・長方形の剛体を液体(紫色と青色のツブツブ部分)にむけて落下させるだけのサンプルである(jsfiddleで
Electronでデスクトップウィジェットを作るまで - Qiita
はじめに HTML/CSS/JSを使ってデスクトップアプリケーションが作成できるElectron。 本記事ではデスクトップウィジェット作成するまでの流れを、簡単な時計アプリを題材として解説します。 ※ この時計アプリのソースコードとパッケージは、GitHubにて公開しています。 GitHub: SallyAcolyte/tutorial_clock 対象読者 HTML/CSS/JSで簡単なアプリは作れるが、Electronは初心者な方 Electronで透過ウィンドウ/フレームレスウィンドウを扱う際のポイントが知りたい方 自分好みなデザイン/機能を持つウィジェットを作成したい方 ※ Windows環境を前提としていますが、基本的な流れは他環境でも同様です。 チュートリアル Electronの入手 Electronの本体は、以下からダウンロードできます。 Releases · atom/el
[Java8] Java上でJavaScriptを動かす - Qiita
目的 【追記】Java 8 で追加された以下の機能ですが、Java 11 で廃止されました。 Java6 あたりから、Java内にJavaScriptエンジン(Rhino)が追加されています。 Java8 ではJavaScriptエンジン(Nashorn)の性能が向上したという話なので、いまさらながら少し動かしてみました でも性能測定とかはしません メソッドの詳細な説明もしないです 概要 Java での JavaScript サポートは、ライブラリから扱える javax.script パッケージと、そのコマンドライン版があります。 実際には JavaScript 以外のスクリプト言語も対応が予定されているみたいですが、現時点では JavaScript のみが対応されているみたいです。 コマンドライン版 コマンドライン版は、Java6, Java7 では JDKの bin ディレクトリに j
![[Java8] Java上でJavaScriptを動かす - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5dc7114215de1f7f4e3e2961d7dc06f8cc9c3c74/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YTglNUQlMjBKYXZhJUU0JUI4JThBJUUzJTgxJUE3SmF2YVNjcmlwdCVFMyU4MiU5MiVFNSU4QiU5NSVFMyU4MSU4QiVFMyU4MSU5OSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9Njk5OGExYTY0NTZlODI1ZDcyOTI4ZGZiYTU5NjlkZTg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5b3NoaTM4OTExMSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzA1MjM0MWJjY2FiOTA1MmZmM2RhZDA4ZWZjNGVjZWY%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D7bd207483ab38f7786ae05ed103ff654)
Java8でRhinoエンジンでJavaScriptを実行する準備 - Qiita
概要 Java8では標準でJavaScriptのエンジン（Nashorn）がついています。 1.7まで同梱されていたJavaScriptエンジンのRhinoは、標準ではついていません。 そこで、1.7までのエンジンを使いたい時の方法についてまとめておきます。 手順と注意点 Oracleのサイトに手順があるのですが、こちらが１箇所直すべき点があります。 具体的には、以下の部分がうまく動かないため svn checkout https://java.net/projects/Scripting 以下のようにして取得します。 svn checkout https://svn.java.net/svn/scripting~svn 上記のURLは、 https://java.net/projects/Scripting のページ中ほどの、"get source"リンクをクリックすることで知ることがで
[Electron] 5分でWin&Macのクロスプラットフォームアプリを作ろう - Qiita
背景 Electronというエンジンを使えば、JavaScript + HTML + CSS で 簡単にクロスプラットフォームアプリが作れ、 WindowsならばEXE形式で配布することも容易です。 また、Monaca (HTMLハイブリッドアプリエンジン) と全く同じコードを使いまわすことができ、最終的に、 Win&Mac&Android&IPhoneの全て同一のコードで動かすことが出来ます。 参照：[Android＆iOS＆Win＆Macが同じコードで動く！超マルチアプリを作ろう[Monaca × Electron]] (http://qiita.com/youwht/items/cac4c6a0f725d7689f96) 本投稿の内容 本投稿では、 誰でも５分程度でElectronのアプリが作れるように ①環境構築 ＋ ②サンプルコードの開発 ＋ ③実行 ＋ ④配布用パッケージング
![[Electron] 5分でWin&Macのクロスプラットフォームアプリを作ろう - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/22cf5fe1adeb37598f8128e81ba781fc44bd2098/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCRWxlY3Ryb24lNUQlMjA1JUU1JTg4JTg2JUUzJTgxJUE3V2luJTI2TWFjJUUzJTgxJUFFJUUzJTgyJUFGJUUzJTgzJUFEJUUzJTgyJUI5JUUzJTgzJTk3JUUzJTgzJUE5JUUzJTgzJTgzJUUzJTgzJTg4JUUzJTgzJTk1JUUzJTgyJUE5JUUzJTgzJUJDJUUzJTgzJUEwJUUzJTgyJUEyJUUzJTgzJTk3JUUzJTgzJUFBJUUzJTgyJTkyJUU0JUJEJTlDJUUzJTgyJThEJUUzJTgxJTg2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz02NGVmYjcwMzczMTAzNDM2ZDM3YWYyNDNiOTM2YTliYg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5b3V3aHQmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTE0OGNiMDBjMWY4MDI4YWRjNDYwOTYyNDYwNTAwMTk5%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-6YeO5p2R57eP5ZCI56CU56m25omA%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D3707c88655ab742323aad601720362ab)
Markdownをプレビューなしで見たまま編集できるOSSを発見！ - Qiita
何がMarkdownプレビューの問題か？ 多くのマークダウンエディタは、エディタとプレビューが分かれているのが当たり前になっています。対応関係を考えなら編集する不便があります。長くなるに連れてスクロール同期の質なども影響してきます。LaTeXで論文書くときも同じ苦労があります。例えば、Microsoft WordやScrapboxのようにWYSIWYG = What You See Is What You Getだとより書きやすくなります。 "見たままの編集"とエンジニアに優しいMarkdownの融合はとても強力だと思います。 OSSのMarkdownエディタ - HyperMD 念願だった見たまま編集できるHyperMDというOSSのプロジェクトを発見しました！ GitHubリポジトリ Typoraという存在 Typoraという同じような目的のプロジェクトは以前から知られていますが、OS
RegExp#exec() が返す配列にはundefinedが含まれているかもしれない - Qiita
const result = /a(b)?/.exec('a'); const { length } = result; // 2 const [matched, capture1] = result; // "a", undefined groupsは名前付きキャプチャを使わなければundefinedなのでいいとして、result[1]がundefinedですね。 ただ、このぐらい単純な場合、書き方を変えればそれを回避できます。 const result = /a(b?)/.exec('a'); const { length } = result; // 2 const [matched, capture1] = result; // "a", "" この挙動の違いは0文字をキャプチャしたグループとそもそも適用されなかったグループの違いです。 ?や*、|によってスキップされてしまったグル
Qiitaのストック数を確認できる拡張機能を作った話 - Qiita
デモ 経緯 なぜ僕の記事はいいねされないのか？ Qiitaには「いいね」と「ストック」という概念がある オレオレ定義 「いいね」とは記事に共感、役に立ったことへの感謝の気持ち 「ストック」とは純粋にその記事を読み直したいとき用のしるし ストック数も知りたいよ・・ 調べてみる QiitaのAPIならストック者一覧を取得できるらしい・・・ どうせなら使いやすく ChromeExtensionを作ってみた！ QiitaStockers 使い方 拡張機能の追加 https://chrome.google.com/webstore/detail/qiitastockers/amohnnngjiamaillkgdnafemejhdopbf 上記のURLからChromeに追加 QiitaAPITokenの発行 Qiita → ログイン → 右上のメニュー（自分のアイコン） → 設定 →アプリケーション
Webアプリの限界を超える方法 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 他の投稿はこちら Webアプリの限界を超える方法(セキュリティ編) ブラウザで(WebUSBもActiveXも使わずに)FeliCaリーダーを読み込む ブラウザでブラウザを操作してスクレイピングを行う Webブラウザでシリアル通信を行う Webアプリの限界 経験豊富なwebプログラマなら、Webでは実現困難な機能を知っているでしょう。 ローカルの特定のパスに存在するファイルを自動的にアップロードしたい、 ブラウザからクローラーを起動して情報収集したい、などなど。 Webをよく知らない顧客や、技術不足のSEがそんな機能を開発しろと言い出し
Webアプリの限界を超える方法(セキュリティ編)～ActiveXを葬る～ - Qiita
他の投稿はこちら Webアプリの限界を超える方法 ブラウザで(WebUSBもActiveXも使わずに)FeliCaリーダーを読み込む ブラウザでブラウザを操作してスクレイピングを行う Webブラウザでシリアル通信を行う 毎年、確定申告の時期になるとe-taxクソ、IE氏ねという呪詛怨念がタイムラインに流れてきます。 マイクロソフト自身ですらIE使わないでくれと泣き言を言っていますが 企業様におかれましては簡単にIEの利用を辞められない理由があると思います。 そうですActiveXですね。 既存のActiveX資産をリプレースするための代替手段がないと、IEから脱却することが出来ません。 そして、前回はActiveXの代替手段となりうる技術を紹介しました。 前回までのあらすじ 前回は、ブラウザからネイティブアプリにWebSocket（またはHTTP&CORS）で接続し、Webアプリとネイティ
Web Components の最近の仕様と開発手法
はじめに Web Components だけで開発を行う場合、どのような技術を使えばいいのかを調べてみました。結論は最後に書いています。 Web Components Specifications Web Components specifications: https://github.com/w3c/webcomponents Web Components are a new browser feature that provides a standard component model for the Web, consisting of several pieces: Shadow DOM Custom Elements HTML Imports HTML Templates Can I use Web Components? Can I use... Support tables
SafariでもエラーにならないJavascriptのヒアドキュメントの書き方 - Qiita
Safariの荒ぶり こちら（ http://qiita.com/_shimizu/items/837b529de9f3302e315c ）で見かけたヒアドキュメントの記述トリック、この方法だとSafariで期待した結果が得られずエラーになってしまう。 なお、元ネタについてはこちら( http://tomasz.janczuk.org/2013/05/multi-line-strings-in-javascript-and.html ) var html = (function () {/* <!DOCTYPE html> <html> <body> <h1>Hello, world!</h1> </body> </html> */}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1]; （この部分は修正の追記により削除しました。） 修正 Safar
ソースマップの自作は割とコワくない。 - Qiita
「めんどくさそう」先入観で敬遠していたのですが、仕様を見たらそんなでもなかったので書き残しておきます。手っ取り早くコードを見たい方はこちらをどうぞ。 ユーザとして、ソースマップに接する機会は多いですが、AltJSを作るとかでもない限り、あまり提供側に回ることはないかもしれません。私自身、次のような疑問というか誤解を抱えたまま、深入りしなかったクチです...。 誤解1: ソースマップを作るにはASTを作る必要がある → 実際はもっとシンプル 誤解2: なんかすごいエンコード(AAAA;AACA;AACA;AACA...)がされてる → ただのBase64 よく見かけるソースマップの説明記事(というほど、記事自体ないけれど)では、「ソースを構文解析してASTを構築して...」という手順が出てくるのですが、 ソースマップにASTは必要ありません。 もちろん、実際にAltJSを作るならASTの作成
JavaScriptのthisの覚え方 - Qiita
JavaScriptのthisは同じソースコードでも呼び出し元次第で意味が違ったりして複雑だと思われがちだけど、一回覚えてしまえば簡単だ。 JavaScriptにはthisが4種類ある これだけをしっかり覚えておけば、後は必要な時に 4種類って何があるんだっけ？ と考えれば容易に思い出せる。 ちなみに、下記のコードはブラウザ上で実行することを想定している。(なのでwindowを使う) トップレベルのthis グローバルオブジェクトを指す。 var hoge = "fuga"; window.foo = "bar"; // fuga+bar と表示される console.log(this.hoge + "+" + this.foo); (function(){ // 同じくfuga+bar と表示される console.log(this.hoge + "+" + this.foo); })(
How to use MockJax - Qiita
サンプルということでindex.htmlにJavascriptも書いてしまいます。 単純にclick meというボタンを押すと、ajaxによりリクエストを飛ばして、mockjaxがインターセプトして返すレスポンスデータを表示するといった簡単なものです。 とても簡単なのでぜひやってみてください。 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>How to use mockjax</title> </head> <body> <input id="fire" type="button" value="click me!" /> <div id="content"> <div id='text'></div> <div id='message'></div> </div> <script src=
StoreとProxyの蜜月な関係について - Qiita
この記事は、 Sencha Advent Calendar 2012 の12日目の記事です。 @kawanoshinobu さんが怖い人らしいので逆らわないようにしたいと思います。脅されてないです。がんばります。 ブログっぽいものデビューになります。よろしくおねがいしますm(_ _)m はじめに Ext JSを3.xから利用していますが、思い返せばExtでオブジェクト(クラス)指向を学んできたような気がします。 Ext JS(とSencha Touch)はそのリッチなUIに目を奪われがちですが、裏ではいろいろなデザインパターンが詰まっています。 Observer Composite Proxy Singleton などなど。 この中で、グリッドやツリーなどのデータセットの集まりを表示するUIで利用されている、Store(Proxy)の仕組みをおさらいしたいと思います。 Proxyパターンの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nodejsを使ってSeleniumでChromeを動かす - Qiita
WSHでChakraを使う。(Windows10限定) - Qiita
